我是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
官網文件：https://www.renren.io/guide#getdoc
它這個框架是前後端分離的，後端還可以生成對應的CRUD程式碼，前端基於vue和element-ui開發。
當時其實我有點想選它的，但考慮到我要再部署個後端，還得學點vue，我就擱置了
2.2 RuoYi
官方文件：http://doc.ruoyi.vip/ruoyi/
RuoYi給我安利的也很多，這個貌似最近非常火？感覺我被推薦了以後，到處都能看到它的身影。
我簡單刷了下文件，感覺他做的事比renren-fast要多，文件也很齊全，但是沒找到我想要的東西：我開啟一個文件，我希望能看到它的系統架構，系統之間的互動或者架構層面上的東西，但我沒快速找到。
專案齊全和複雜對我來說或許並不是一件好事，很可能意味著我的學習成本可能會更大。於是，我也擱置著。
2.3 Vue相關
vue-element-admin
官方文件：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
Vue Antd Admin
官方文件：https://iczer.gitee.io/vue-antd-admin-docs/start/use.html#%E5%87%86%E5%A4%87
Ant Design Pro
官方文件：https://pro.antdv.com/docs/getting-started
這幾個專案被推薦率也是極高的，從第一行介紹我基本就知道需要去學Vue的語法，奈何我太懶了，擱置著。
2.4 layui
有好幾小夥伴們聽說我會jQuery，於是給我推薦了layui。我以前印象中好像聽過這個框架，但一直沒了解過他。但是，當我搜到它的時候，它已經不維護了
GitHub地址：https://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的前端。這個框架在我朋友圈只有一個小夥伴推薦，我第一次開啟文件的時候，確實驚豔到我了
文件地址：https://baidu.gitee.io/amis/zh-CN/docs/index
它是一個低程式碼前端框架：amis 的渲染過程是將 json 轉成對應的 React 元件
我花了半天粗略地刷了下文件，大概知道了JSON的結構（說實話，他這個文件寫得挺可以的），然後我去GitHub找了一份模板，就直接開始動手了，readme十分簡短。
GitHub：https://github.com/aisuda/amis-admin
這個前端低程式碼工具還有個好處就是可以通過視覺化編輯器拖拉生成JSON程式碼，將生成好的程式碼直接往自己本地一貼，就完事了，確實挺方便的。
視覺化編輯器的地址：https://aisuda.github.io/amis-editor-demo/
4、使用感受
其實沒什麼好講的，無非就是在頁面上拖拉得到一個頁面，然後呼叫API的時候看下文件的姿勢。
在這個過程中我也去看了下這個框架的評價，發現百度內部很多系統就用的這個框架來搭建頁面的，也看到Bigo也有線上上使用這個框架來搭建後臺。有一線/二線公司都線上上使用該框架了，我就認為問題不大了。
總的來說，我這次搭建austin後臺實際編碼時間沒多少，都在改JSON配置和查文件。我週六下午2點到的圖書館，新建了GitHub倉庫，在6點閉館前就已經搭出個大概頁面了，然後在週日空閒時間裡再完善了幾下，感覺可以用了
austin-amis倉庫地址：https://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