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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2、austin前端選型

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

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

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

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

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

2.1 renren-fast

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

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

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

2.2 RuoYi

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

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

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

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

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

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

2.4 layui

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

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

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

第一感覺有點(diǎn)類似我以前寫過的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ǔ)上改動(dòng)的，并且我敢肯定：還有很多基于Vue且好用的后臺(tái)是我不知道的。

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

3、amis框架

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

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

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

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

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

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

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

4、使用感受

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

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

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

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

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

它并不完美，很可能需要我用些奇怪的姿勢妥協(xié)，不要問我接口返回的時(shí)候?yàn)樯掇D(zhuǎn)了一層Map

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

5、總結(jié)

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

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

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

都看到這里了，點(diǎn)個(gè)贊一點(diǎn)都不過分吧？我是3y，下期見。

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

austin項(xiàng)目源碼Gitee鏈接：gitee.com/austin

austin項(xiàng)目源碼GitHub鏈接：github.com/austin

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