我是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，下期見。