我是3y，一年CRUD經(jīng)驗用十年的markdown程序員?常年被譽為優(yōu)質(zhì)八股文選手

花了幾天搭了個后臺管理頁面，今天分享下我的搭建過程，全文非技術(shù)向，就當(dāng)跟大家吹吹水吧。

1、我的前端技術(shù)

老讀者可能知道我是上了大學(xué)以后，才了解什么是編程。在這之前，我對編程一無所知，甚至報考了計算機(jī)專業(yè)之后也未曾了解過它是做什么的。

在大一的第一個學(xué)期，我印象中只開了一門C 的編程課（其他的全是數(shù)學(xué)）。嗯，理所當(dāng)然，我是聽不懂的，也不知道用來干什么。

剛進(jìn)大學(xué)的時候，我對一切充滿了未知，在那時候順其自然地就想要進(jìn)幾個社團(tuán)玩玩。但在眾多社團(tuán)里都找不到我擅長的領(lǐng)域，等快到截止時間了。我又不想大學(xué)期間什么社團(tuán)都沒有參加，最后報了兩個：乒乓球社團(tuán)和計算機(jī)協(xié)會。

這個計算機(jī)協(xié)會絕大多數(shù)的人員都來自于計算機(jī)專業(yè)，再后來才發(fā)現(xiàn)這個協(xié)會的主要工作就是給人「重裝系統(tǒng)」，不過這是后話啦。

當(dāng)時加入計算機(jī)協(xié)會還需要滿足一定的條件：師兄給了一個「網(wǎng)站」我們這群人，讓我們上去學(xué)習(xí)，等到國慶回來后看下我們的學(xué)習(xí)進(jìn)度再來決定是否有資格加入。

那個網(wǎng)站其實就是對HTML/CSS/JavaScript的入門教程，是一個國外的網(wǎng)站，具體的地址我肯定是忘了。不過那時候，我國慶閑著也沒事干，于是就開始學(xué)起來了。我當(dāng)時的進(jìn)度應(yīng)該是學(xué)到CSS，能簡單的頁面布局和展示圖片啥的

剛開始的時候，覺得蠻有趣的：我改下這個代碼，字體的顏色就變了，圖片就能展示出來了。原來我平時上網(wǎng)的網(wǎng)站是這樣弄出來的??！（比什么C 有趣多了）

國慶后回來發(fā)現(xiàn)：考核啥的并不重要，只要報名了就都通過了。

有了基本的認(rèn)知后，我對這個也并不太上心，沒有持續(xù)地學(xué)下去。再后來，我實在是太無聊，就開始想以后畢業(yè)找工作的事了，自己也得在大學(xué)充實下自己，于是我開始在知乎搜各種答案「如何入門編程」。

在知乎搜了各種路線并浪費了大量時間以后，我終于開始看視頻入門。我熬完了JavaSE基礎(chǔ)之后，我記得我是看方立勛老師入門的JavaWeb，到前端的課程以后，我覺得前端HTML/CSS/JavaScript啥的都要補補，于是又去找資源學(xué)習(xí)（那時候信奉著技多不壓身）。

印象中是看韓順平老師的HTML/CSS/JavaScript，那時候還手打代碼的階段，把我看得一愣一愣的（IDE都不需要的）。隨著學(xué)習(xí)，發(fā)現(xiàn)好像還得學(xué)AJAX/jQuery，于是我又去找資源了，不過我已經(jīng)忘了看哪個老師的AJAX和jQuery課程。

在這個學(xué)習(xí)的過程中，我曾經(jīng)用純HTML/CSS/JavaScript跟著視頻仿照過某某網(wǎng)站，在jQuery的學(xué)習(xí)時候做過各種的輪播圖動畫。還理解了margin和padding的區(qū)別。臨近畢業(yè)的時候，也會點BootStrap來寫個簡單的頁面（丑就完事了）

等我進(jìn)公司了以后，技術(shù)架構(gòu)前后端是分離的，雖然我拉了前端的代碼，但我看不懂，期間我也沒學(xué)。以至于我兩年多是沒碰過前端的，我對前端充滿著敬畏（剛畢業(yè)那段時間，前端在飛速發(fā)展）

2、austin前端選型

從我籌劃要寫austin項目的時候，我就知道我肯定要寫一個「后臺管理頁面」，但我遲遲沒下手。一方面是我認(rèn)為「后端」才是我的賽道，另一方面我「前端」確實菜，不想動手。

我有想過要不找個小伙伴幫我寫，但是很快就被我自己否定了：還得給小伙伴提需求，算了。

當(dāng)我要面臨前端的時，我第一時間就想到：肯定是有什么框架能夠快速搭建出一個管理頁面的。我自己不知道，但是，我的朋友圈肯定是有人知道的啊。于是，我果斷求助：

我被安利了很多框架，簡單列舉下出場率比較高的。

注：大多數(shù)我只是粗略看了下，沒有仔細(xì)研究。若有錯誤可以在評論區(qū)留言，輕噴

2.1 renren-fast

官網(wǎng)文檔：https://www.renren.io/guide#getdoc

它這個框架是前后端分離的，后端還可以生成對應(yīng)的CRUD代碼，前端基于vue和element-ui開發(fā)。

當(dāng)時其實我有點想選它的，但考慮到我要再部署個后端，還得學(xué)點vue，我就擱置了

2.2 RuoYi

官方文檔：http://doc.ruoyi.vip/ruoyi/

RuoYi給我安利的也很多，這個貌似最近非常火？感覺我被推薦了以后，到處都能看到它的身影。

我簡單刷了下文檔，感覺他做的事比renren-fast要多，文檔也很齊全，但是沒找到我想要的東西：我打開一個文檔，我希望能看到它的系統(tǒng)架構(gòu)，系統(tǒng)之間的交互或者架構(gòu)層面上的東西，但我沒快速找到。

項目齊全和復(fù)雜對我來說或許并不是一件好事，很可能意味著我的學(xué)習(xí)成本可能會更大。于是，我也擱置著。

2.3 Vue相關(guān)

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#準(zhǔn)備

Ant Design Pro

官方文檔：https://pro.antdv.com/docs/getting-started

這幾個項目被推薦率也是極高的，從第一行介紹我基本就知道需要去學(xué)Vue的語法，奈何我太懶了，擱置著。

2.4 layui

有好幾小伙伴們聽說我會jQuery，于是給我推薦了layui。我以前印象中好像聽過這個框架，但一直沒了解過他。但是，當(dāng)我搜到它的時候，它已經(jīng)不維護(hù)了

GitHub地址：https://github.com/sentsin/layui

我簡單瀏覽下文檔，其實它也有對應(yīng)的一套”語法“，需要一定的學(xué)習(xí)成本，但不高。

第一感覺有點類似我以前寫過的BootStrap，我對這不太感冒，感覺如果要接入可能還是需要自己寫比較多的代碼。

2.5 其他

還有些小伙伴推薦或者我看到的文章推薦：x-admin/D2admin/smartchart/JEECG-BOOT/Dcat-admin/iview-admin等等等，在這里面還有些依賴著PHP/Python

總的來說，我還是覺得這些框架有一定的學(xué)習(xí)成本（我真的是懶出天際了）?？赡苄枰胰ゲ渴鸷蠖?，也可能需要我學(xué)習(xí)前端的框架語法，也可能讓我學(xué)Vue

看到這里，可能你們很好奇我最后選了什么作為austin的前端，都已經(jīng)被我篩了這么多了。在公布之前，我想說的是：如果想要頁面好看和靈活性高還是得學(xué)習(xí)Vue。從上面我被推薦的框架中，好多都是在Vue的基礎(chǔ)上改動的，并且我敢肯定：還有很多基于Vue且好用的后臺是我不知道的。

注：我這里指代跟我一樣不懂前端的（如果本身就已經(jīng)懂前端，你說啥都對）

3、amis框架

我最后選擇了amis作為austin的前端。這個框架在我朋友圈只有一個小伙伴推薦，我第一次打開文檔的時候，確實驚艷到我了

文檔地址：https://baidu.gitee.io/amis/zh-CN/docs/index

它是一個低代碼前端框架：amis 的渲染過程是將 json 轉(zhuǎn)成對應(yīng)的 React 組件

我花了半天粗略地刷了下文檔，大概知道了JSON的結(jié)構(gòu)（說實話，他這個文檔寫得挺可以的），然后我去GitHub找了一份模板，就直接開始動手了，readme十分簡短。

GitHub：https://github.com/aisuda/amis-admin

這個前端低代碼工具還有個好處就是可以通過可視化編輯器拖拉生成JSON代碼，將生成好的代碼直接往自己本地一貼，就完事了，確實挺方便的。

可視化編輯器的地址：https://aisuda.github.io/amis-editor-demo/

4、使用感受

其實沒什么好講的，無非就是在頁面上拖拉得到一個頁面，然后調(diào)用API的時候看下文檔的姿勢。

在這個過程中我也去看了下這個框架的評價，發(fā)現(xiàn)百度內(nèi)部很多系統(tǒng)就用的這個框架來搭建頁面的，也看到Bigo也有在線上使用這個框架來搭建后臺。有一線/二線公司都在線上使用該框架了，我就認(rèn)為問題不大了。

總的來說，我這次搭建austin后臺實際編碼時間沒多少，都在改JSON配置和查文檔。我周六下午2點到的圖書館，新建了GitHub倉庫，在6點閉館前就已經(jīng)搭出個大概頁面了，然后在周日空閑時間里再完善了幾下，感覺可以用了

austin-amis倉庫地址：https://github.com/ZhongFuCheng3y/austin-admin

在搭建的過程中，amis低代碼框架還是有地方可吐槽的，就是它的靈活性太低。我們的接口返回值需要迎合它的主體結(jié)構(gòu)，當(dāng)我們?nèi)绻?strong>嵌套JSON這種就變得異常難處理，表單無法用表達(dá)式進(jìn)行回顯等等。

它并不完美，很可能需要我用些奇怪的姿勢妥協(xié)，不要問我接口返回的時候為啥轉(zhuǎn)了一層Map

不管怎么說，這不妨礙我花了極短的時間就能搭出一個能看的后臺管理頁面(CRUD已齊全)

5、總結(jié)

目前搭好的前端能用，也只能用一點點，后面會逐漸完善它的配置和功能的。我后面有鏈路追蹤的功能，肯定要在后臺這把清洗后的數(shù)據(jù)提供給后臺進(jìn)行查詢，但也不會花比較長的篇幅再來聊前端這事了。

我一直定位是在后端的代碼上，至于前端我能學(xué)，但我又不想學(xué)。怎么說呢，利益最大化吧。我把學(xué)前端的時間花在學(xué)后端上，或許可能對我有更大的受益。現(xiàn)在基本前后端分離了，在公司我也沒什么機(jī)會寫前端。

下一篇很有可能是聊分布式定時任務(wù)框架上，我發(fā)現(xiàn)我的進(jìn)度可以的，這個季度拿個4.0應(yīng)該問題不大了。

都看到這里了，點個贊一點都不過分吧？我是3y，下期見。

關(guān)注我的微信公眾號【Java3y】除了技術(shù)我還會聊點日常，有些話只能悄悄說~ 【對線面試官 從零編寫Java項目】 持續(xù)高強度更新中！求star?。?strong>原創(chuàng)不易??！求三連！！

austin項目源碼Gitee鏈接：gitee.com/austin

austin項目源碼GitHub鏈接：github.com/austin

來源：https://www.cnblogs.com/Java3y/p/16020226.html