純後端如何寫前端？我用了低代碼平台
- 2022 年 3 月 18 日
- 筆記
我是3y，一年CRUD經驗用十年的markdown程序員👨🏻💻常年被譽為優質八股文選手
花了幾天搭了個後台管理頁面，今天分享下我的搭建過程，全文非技術向，就當跟大家吹吹水吧。
1、我的前端技術
老讀者可能知道我是上了大學以後，才了解什麼是編程。在這之前，我對編程一無所知，甚至報考了計算機專業之後也未曾了解過它是做什麼的。
在大一的第一個學期，我印象中只開了一門C++的編程課（其他的全是數學）。嗯，理所當然，我是聽不懂的，也不知道用來幹什麼。
剛進大學的時候，我對一切充滿了未知，在那時候順其自然地就想要進幾個社團玩玩。但在眾多社團里都找不到我擅長的領域，等快到截止時間了。我又不想大學期間什麼社團都沒有參加，最後報了兩個：乒乓球社團和計算機協會。
這個計算機協會絕大多數的人員都來自於計算機專業，再後來才發現這個協會的主要工作就是給人「重裝系統」，不過這是後話啦。
當時加入計算機協會還需要滿足一定的條件：師兄給了一個「網站」我們這群人，讓我們上去學習，等到國慶回來後看下我們的學習進度再來決定是否有資格加入。
那個網站其實就是對HTML/CSS/JavaScript的入門教程，是一個國外的網站，具體的地址我肯定是忘了。不過那時候，我國慶閑着也沒事幹，於是就開始學起來了。我當時的進度應該是學到CSS，能簡單的頁面布局和展示圖片啥的
剛開始的時候，覺得蠻有趣的：我改下這個代碼，字體的顏色就變了，圖片就能展示出來了。原來我平時上網的網站是這樣弄出來的啊！（比什麼C++有趣多了）
國慶後回來發現：考核啥的並不重要，只要報名了就都通過了。
有了基本的認知後，我對這個也並不太上心，沒有持續地學下去。再後來，我實在是太無聊，就開始想以後畢業找工作的事了，自己也得在大學充實下自己，於是我開始在知乎搜各種答案「如何入門編程」。
在知乎搜了各種路線並浪費了大量時間以後，我終於開始看視頻入門。我熬完了JavaSE基礎之後，我記得我是看方立勛老師入門的JavaWeb，到前端的課程以後，我覺得前端HTML/CSS/JavaScript啥的都要補補，於是又去找資源學習（那時候信奉着技多不壓身）。
印象中是看韓順平老師的HTML/CSS/JavaScript，那時候還手打代碼的階段，把我看得一愣一愣的（IDE都不需要的）。隨着學習，發現好像還得學AJAX/jQuery，於是我又去找資源了，不過我已經忘了看哪個老師的AJAX和jQuery課程。
在這個學習的過程中，我曾經用純HTML/CSS/JavaScript跟着視頻仿照過某某網站，在jQuery的學習時候做過各種的輪播圖動畫。還理解了margin和padding的區別。臨近畢業的時候，也會點BootStrap來寫個簡單的頁面（丑就完事了）
等我進公司了以後，技術架構前後端是分離的，雖然我拉了前端的代碼，但我看不懂，期間我也沒學。以至於我兩年多是沒碰過前端的，我對前端充滿着敬畏（剛畢業那段時間，前端在飛速發展）
2、austin前端選型
從我籌劃要寫austin項目的時候，我就知道我肯定要寫一個「後台管理頁面」，但我遲遲沒下手。一方面是我認為「後端」才是我的賽道，另一方面我「前端」確實菜，不想動手。
我有想過要不找個小夥伴幫我寫，但是很快就被我自己否定了：還得給小夥伴提需求，算了。
當我要面臨前端的時，我第一時間就想到：肯定是有什麼框架能夠快速搭建出一個管理頁面的。我自己不知道，但是，我的朋友圈肯定是有人知道的啊。於是，我果斷求助：
我被安利了很多框架，簡單列舉下出場率比較高的。
注：大多數我只是粗略看了下，沒有仔細研究。若有錯誤可以在評論區留言，輕噴
2.1 renren-fast
官網文檔：//www.renren.io/guide#getdoc
它這個框架是前後端分離的，後端還可以生成對應的CRUD代碼，前端基於vue和element-ui開發。
當時其實我有點想選它的，但考慮到我要再部署個後端，還得學點vue，我就擱置了
2.2 RuoYi
RuoYi給我安利的也很多，這個貌似最近非常火？感覺我被推薦了以後，到處都能看到它的身影。
我簡單刷了下文檔，感覺他做的事比renren-fast要多，文檔也很齊全，但是沒找到我想要的東西：我打開一個文檔，我希望能看到它的系統架構，系統之間的交互或者架構層面上的東西，但我沒快速找到。
項目齊全和複雜對我來說或許並不是一件好事，很可能意味着我的學習成本可能會更大。於是，我也擱置着。
2.3 Vue相關
vue-element-admin
官方文檔：//panjiachen.github.io/vue-element-admin-site/zh/guide/
Vue Antd Admin
官方文檔：//iczer.gitee.io/vue-antd-admin-docs/start/use.html#%E5%87%86%E5%A4%87
Ant Design Pro
官方文檔：//pro.antdv.com/docs/getting-started
這幾個項目被推薦率也是極高的，從第一行介紹我基本就知道需要去學Vue的語法，奈何我太懶了，擱置着。
2.4 layui
有好幾小夥伴們聽說我會jQuery，於是給我推薦了layui。我以前印象中好像聽過這個框架，但一直沒了解過他。但是，當我搜到它的時候，它已經不維護了
GitHub地址：//github.com/sentsin/layui
我簡單瀏覽下文檔，其實它也有對應的一套」語法「，需要一定的學習成本，但不高。
第一感覺有點類似我以前寫過的BootStrap，我對這不太感冒，感覺如果要接入可能還是需要自己寫比較多的代碼。
2.5 其他
還有些小夥伴推薦或者我看到的文章推薦：x-admin/D2admin/smartchart/JEECG-BOOT/Dcat-admin/iview-admin等等等，在這裏面還有些依賴着PHP/Python
總的來說，我還是覺得這些框架有一定的學習成本（我真的是懶出天際了）。可能需要我去部署後端，也可能需要我學習前端的框架語法，也可能讓我學Vue
看到這裡，可能你們很好奇我最後選了什麼作為austin的前端，都已經被我篩了這麼多了。在公布之前，我想說的是：如果想要頁面好看和靈活性高還是得學習Vue。從上面我被推薦的框架中，好多都是在Vue的基礎上改動的，並且我敢肯定：還有很多基於Vue且好用的後台是我不知道的。
注：我這裡指代跟我一樣不懂前端的（如果本身就已經懂前端，你說啥都對）
3、amis框架
我最後選擇了amis作為austin的前端。這個框架在我朋友圈只有一個小夥伴推薦，我第一次打開文檔的時候，確實驚艷到我了
文檔地址：//baidu.gitee.io/amis/zh-CN/docs/index
它是一個低代碼前端框架：amis 的渲染過程是將 json 轉成對應的 React 組件
我花了半天粗略地刷了下文檔，大概知道了JSON的結構（說實話，他這個文檔寫得挺可以的），然後我去GitHub找了一份模板，就直接開始動手了，readme十分簡短。
GitHub：//github.com/aisuda/amis-admin
這個前端低代碼工具還有個好處就是可以通過可視化編輯器拖拉生成JSON代碼，將生成好的代碼直接往自己本地一貼，就完事了，確實挺方便的。
可視化編輯器的地址：//aisuda.github.io/amis-editor-demo/
4、使用感受
其實沒什麼好講的，無非就是在頁面上拖拉得到一個頁面，然後調用API的時候看下文檔的姿勢。
在這個過程中我也去看了下這個框架的評價，發現百度內部很多系統就用的這個框架來搭建頁面的，也看到Bigo也有在線上使用這個框架來搭建後台。有一線/二線公司都在線上使用該框架了，我就認為問題不大了。
總的來說，我這次搭建austin後台實際編碼時間沒多少，都在改JSON配置和查文檔。我周六下午2點到的圖書館，新建了GitHub倉庫，在6點閉館前就已經搭出個大概頁面了，然後在周日空閑時間裏再完善了幾下，感覺可以用了
austin-amis倉庫地址：//github.com/ZhongFuCheng3y/austin-admin
在搭建的過程中，amis低代碼框架還是有地方可吐槽的，就是它的靈活性太低。我們的接口返回值需要迎合它的主體結構，當我們如果有嵌套JSON這種就變得異常難處理，表單無法用表達式進行回顯等等。
它並不完美，很可能需要我用些奇怪的姿勢妥協，不要問我接口返回的時候為啥轉了一層Map
不管怎麼說，這不妨礙我花了極短的時間就能搭出一個能看的後台管理頁面(CRUD已齊全)
5、總結
目前搭好的前端能用，也只能用一點點，後面會逐漸完善它的配置和功能的。我後面有鏈路追蹤的功能，肯定要在後台這把清洗後的數據提供給後台進行查詢，但也不會花比較長的篇幅再來聊前端這事了。
我一直定位是在後端的代碼上，至於前端我能學，但我又不想學。怎麼說呢，利益最大化吧。我把學前端的時間花在學後端上，或許可能對我有更大的受益。現在基本前後端分離了，在公司我也沒什麼機會寫前端。
下一篇很有可能是聊分佈式定時任務框架上，我發現我的進度可以的，這個季度拿個4.0應該問題不大了。
都看到這裡了，點個贊一點都不過分吧？我是3y，下期見。
關注我的微信公眾號【Java3y】除了技術我還會聊點日常，有些話只能悄悄說~ 【對線面試官+從零編寫Java項目】 持續高強度更新中！求star！！原創不易！！求三連！！
austin項目源碼Gitee鏈接：gitee.com/austin
austin項目源碼GitHub鏈接：github.com/austin
