懂代碼，缺乏專業(yè)知識，同時又不滿足于上淘寶購買建站系統(tǒng)？本文教你如何速成建站，如何將喜歡的html前端模版整合后臺變成一套完整的網(wǎng)站程序！如果你熟練掌握這些技巧，一天時間就可以搭建一個成熟的網(wǎng)站。

一、前后端整合的意義

那你一定會問，這有什么意義？直接買現(xiàn)成的完整網(wǎng)站模版不香嗎？意義有三條：

1、你可以通過整合模版來賺錢

通常素材網(wǎng)站只會提供兩種網(wǎng)頁設計素材供用戶下載，一種是PDS設計稿（ps畫的網(wǎng)頁UI原型圖），第二種是html頁面源代碼（純前端，沒有后臺）。我們在網(wǎng)絡上找到的大多數(shù)模版建站系統(tǒng)都是別人將前端和后臺進行整合后作為完整源代碼下載的。這也是一門不錯的賺錢路徑，業(yè)余兼職，你肯花時間還是可以獲得不錯的收入的，關(guān)鍵是成本幾乎為零。

2、幫客戶實現(xiàn)設計效果

如果你懂PS，你可以自己通過設計圖片來呈現(xiàn)網(wǎng)頁效果，然后花錢請人將PSD做成html代碼頁面，至于花費多少就要看運氣了，我曾經(jīng)找到過的最便宜的前端制作服務，一個頁面僅收80塊RMB。

網(wǎng)站中有大量的頁面是可以重復利用的，以企業(yè)網(wǎng)站舉例：首頁、關(guān)于我們頁、新聞列表頁、產(chǎn)品列表也、新聞內(nèi)容頁、產(chǎn)品類容頁、聯(lián)系我們頁這幾個通用頁面可以滿足大部分的需求，細數(shù)下來其實只有7個頁面，而你們看到一個網(wǎng)站有幾十個頁面通常都是這幾個頁面復用的結(jié)果。

3、更豐富的模版素材來源

不論是你準備幫別人建設網(wǎng)站，還是準備自己搭建一個網(wǎng)站，購買完整模版源代碼前端界面都不一定能讓你或者你的客戶滿意，那么通過素材網(wǎng)站搜尋更豐富的前端模版就很有必要了。

想要節(jié)省時間成本，你可以把前端模版素材建立一個素材庫，在有需要的情況下自己或者讓客戶在素材庫中挑選，找到合適的前端界面就拿來做后端整合，就算前端不算百分之百滿意，也能做一些細節(jié)上的樣式調(diào)整，基本上能滿足80%的常規(guī)需求了。

特別說明：其實現(xiàn)在有很多網(wǎng)站的前端都不一定是自己設計的，有些會使用開源的前端框架進行簡單的修改后使用，有些可能直接套用合適并且好看的前端模版跟自家的系統(tǒng)做整合，不要以為專業(yè)工程師干不出來，有些公司能干出直接抓取成熟網(wǎng)站的頁面，進行一定的修改后整合到自家系統(tǒng)。

二、如何選擇合適的后臺框架

既然要自己做前后端整合，那么肯定不能買那些存在安全風險的成品源代碼來使用了，所以在選擇上盡可能選擇開源的后臺框架是最好的。

目前市面上最成熟的用于內(nèi)容系統(tǒng)的框架有有帝國CMS、織夢CMS、ThinkCMF、WordPress、FastAdmin等，由于框架太多，可以說成百上千，這里筆者僅挑選一些相對簡單好用并且筆者熟知的！

其中WordPress首先排除，至少對小白來講，WordPress的前端模版制作難度太高！剩下的幾種開源后臺代碼中筆者最常用的是ThinkCMF，最簡單的是織夢CMS，F(xiàn)astAdmin也不錯，各有優(yōu)劣，后續(xù)的細節(jié)講解中均以這三套后臺代碼作實操演練。

注：由于不同代碼的函數(shù)和變量都有所區(qū)別，所以本文僅講解邏輯和方法，代碼上只會做簡單解釋便于小白可以快速理解。

三、前端代碼的素材來源

后臺找到合適的了，前端如何找到合適的呢？這里筆者僅舉幾個我自己常用的方式，小白可以效仿：

1、素材網(wǎng)站

通過百度搜索“html模版”可以找到很多前端模版的素材下載網(wǎng)站，也有一些不錯的前端開源框架，不過開源框架的利用方面對小白來說還是有點難度，筆者最常用的素材網(wǎng)站就是《17素材網(wǎng)》，需要充值付費才能下載，但是費用不高。

2、通過淘寶購買

淘寶購買的素材有點參差不齊，因為對前端網(wǎng)頁來說最重要的是瀏覽器兼容性，有些早期的前端代碼在目前新的瀏覽器框架技術(shù)下訪問時會有錯位或素材顯示不到位的情況，但是也有優(yōu)點，那就是你甚至于可以花幾塊錢買到上千套前端模版，當然了這類型的模版質(zhì)量未必很好，不過選擇空間大。

如果你想挑一些比較新潮優(yōu)質(zhì)的模版的話也可以看那些單個模版賣幾十上百塊的，一般可以跟賣家要演示網(wǎng)址進行體驗。

3、自己設計

自己設計有兩種方式，一種是如果你有PS的平面設計能力就自己畫個設想中的網(wǎng)頁頁面圖，然后在淘寶、豬八戒威客網(wǎng)這一類的平臺找前端工程師幫你實現(xiàn)成頁面，費用從80-300元一個頁面的價格都有，看你自己的談價能力了！

第二種方式不知道windows電腦是否可以實現(xiàn)，筆者用了蘋果的系統(tǒng)之后才發(fā)現(xiàn)有很多簡易的前端頁面設計軟件，例如筆者所用的“hype4”，它就可以自己自由的在一個畫布上進行各種元素、圖片、內(nèi)容的布局設計，然后直接導出為html頁面。

注：hype4設計有個缺陷，由于是非代碼設計，有些前端效果或功能是做不出來的，基本上你只能把它當成一個適配網(wǎng)頁的ppt，而且為了方便整合后端，盡量不要使用動畫特效，不然你做后端整合的時候會非常痛苦。優(yōu)勢同樣明顯，通過它設計前端頁面可以同時繪制電腦端、平板端、手機端三端不同的呈現(xiàn)和顯示效果。

四、小結(jié)

由于內(nèi)容篇幅較多，所以筆者將全部內(nèi)容拆分成三個部分來進行，本文為《上》篇，主要講解整合前端模版的意義、后臺代碼的來源、前端代碼的來源這三個部分，讓小白形成第一步的印象。

你還需要知道如何在本地部署和查看前后端，本地部署服務器環(huán)境的教程筆者的個人主頁已經(jīng)有了，可以直接去翻我過去的文章。而html前端頁面是不需要特殊的環(huán)境支持的，你在獲取到html前端模版之后只需要打開名稱為index.html的文件即可直接預覽到前端的效果。

通篇教程都是針對不懂技術(shù)的小白建站而做，所以不會涉及到太專業(yè)的代碼知識，大佬們也不需要以誤人子弟的名義來指責，因為非技術(shù)人員的需求跟專業(yè)從業(yè)者的需求在學習路徑和方法上本身就存在差異。小白不需要太多的專業(yè)知識，只需要能現(xiàn)學現(xiàn)用的實用知識能滿足臨時的使用需求即可。

后續(xù)會編寫《中》篇會講解一些基礎概念，例如必須修改的標簽、什么是循環(huán)、什么是變量、如何調(diào)用開源后臺的現(xiàn)成函數(shù)以及如何判斷要修改的文件有哪些。《下》篇會進行實操演練以及如何將整合好的網(wǎng)站上傳到網(wǎng)絡上供用戶訪問，同時會附帶對內(nèi)容網(wǎng)站以外的其它網(wǎng)站類型的前后端整合進行簡單的解說。全文的講解中會穿插少量的SEO推廣所可能涉及到的代碼知識。

請關(guān)注我，了解更多小白就能看懂的網(wǎng)絡知識，有疑問的請留言說明我會盡量解答，也能給我后期發(fā)問做個參考，感謝支持！

要從零開始開發(fā)一個開源項目，這個項目的目的很簡單：新人可以練手，一步一步搭建項目，把時下流行的技術(shù)整合進來，在用這些技術(shù)的特性來實現(xiàn)具體業(yè)務功能，而對于有經(jīng)驗的老鳥可以把自學的技術(shù)在項目中得以實踐。

在這里插入圖片描述

琢磨了挺長時間，前段時間工作比較忙、家中事情也比較多，導致最近才著手弄。

感興趣的同學可以關(guān)注一波，項目進度可能會緩慢，但腳步絕不會停止

作為一個后端程序員，雖然平時也會做一些管理后臺的頁面，可那都是本著能用就行的原則，美觀都是次要的。但項目要對外開源這可是門面，不美美噠多沒面子，所以選一個酷炫的頁面模板成了首要任務，選了10個模板出來，大伙給參謀下。

源碼獲取方式：關(guān)注轉(zhuǎn)發(fā)之后私信回復【源碼】來免費獲取到這10個后臺模板源碼

最近一直在做前端可視化和低代碼相關(guān)的項目和技術(shù)分享，最近剛好找到幾款基于vue3和vite的開箱即用的中后臺管理模版，可以用到可視化項目中，所以這里特意做個總結(jié)，和大家分享一下。

我們都知道 vue3 已經(jīng)發(fā)布一年多了，相關(guān)的生態(tài)也在慢慢建立，很多公司也在嘗試用 vue3 來開發(fā)自己的應用系統(tǒng)。但是由于生態(tài)的不完善以及缺乏成熟方案的落地，vue3 的應用仍然探索和小規(guī)模試驗中。

好在開源界無私奉獻的大佬們提前做了很多探索和嘗試，比如面向 vue3 的 UI 組件庫 element Plus，ant-desigin-vue 等，同時基于這些 UI 庫，又有一批大佬封裝了針對企業(yè)業(yè)務場景的中后臺管理模版，方便我們高效的搭建業(yè)務系統(tǒng)。

接下來我將一一列舉一下這幾個強大的管理后臺模版，并聊聊他們的特點，如果你剛好有這樣的需求，也不妨參考一下。

1. Vue vben admin

Vue Vben Admin 是一個免費開源的中后臺模版。使用了最新的 vue3, vite2, TypeScript 等主流技術(shù)開發(fā)，開箱即用的中后臺前端解決方案，也可用于學習參考。

特點

• 最新技術(shù)棧：使用 Vue3/vite2 等前沿技術(shù)
• TypeScript: 應用程序級 JavaScript 的語言
• 主題：可配置的主題
• 國際化：內(nèi)置完善的國際化方案
• Mock 數(shù)據(jù) 內(nèi)置 Mock 數(shù)據(jù)方案
• 權(quán)限 內(nèi)置完善的動態(tài)路由權(quán)限生成方案
• 組件 二次封裝了多個常用的組件

界面展示

大家可以左右滑動來切換圖片:)

2. ant-simple-pro

ant-simple-pro 是一款支持 vue3.0，react，angular，typescript 等多框架支持的中臺前端解決方案，ui 使用 antd 實現(xiàn)的，它使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國際化解決方案，動態(tài)路由，響應式設計，開箱即用，而且我們寫了很多支持 vue3 的插件和庫，它可以幫助你快速搭建企業(yè)級中后臺產(chǎn)品原型，不管你是 vue 開發(fā)者，還是 react 或者 angular，都能在這里找到你想要的版本。

前序準備

你需要在本地安裝 node 和 git，異步請求數(shù)據(jù)用axios，所有的異步接口均采用node+typescript+mysql+docker實現(xiàn)的，所以最好先了解如下知識：

vue

• vue3.0的新語法，如setup,hooks等合成api
• vue-cil,vue-router,vuex等全家桶

react

• react基本語法，如hooks,class創(chuàng)建組件，函數(shù)式創(chuàng)建組件等
• react全家桶要熟悉，如react-router-dom，create-react-app,react-transition-group等
• react數(shù)據(jù)狀態(tài)庫，redux,redux-saga,reselect,react-redux等
• react在typescript下的FC模式等

angular

• angular的基本語法，如html模板，指令，組件等
• angular的全家桶，如angular-cil,Rx等
• typescript的基本語法

界面展示

大家可以左右滑動來切換圖片:)

3. vue3-template-admin

vue3-template-admin 是一款基于 vue3 + vite + element plus 的后臺管理模版，它集成了我們業(yè)務開發(fā)的大部分功能，比如文本編輯器，全站搜索，權(quán)限管理，可視化圖表等。

使用到的插件/庫

• eslint-plugin-vueeslint-plugin-vue
• axios 強大的前端請求庫
• fues.jsfues.js 前端模糊搜索
• echartechart 數(shù)據(jù)可視化
• antvantv 螞蟻數(shù)據(jù)可視化
• xlsxxlsx SheetJS
• jszipjszip 優(yōu)秀的前端壓縮庫
• mockjsmockjs 模擬和交互數(shù)據(jù)
• wangeditorwangeditor 富文本編輯器
• fullcalendarfullcalendar 豐富的日歷插件

界面展示

大家可以左右滑動來切換圖片:)

4. vue-admin-box

vue-admin-box 是一個免費并且開源的中后臺管理系統(tǒng)模板。使用最新版本的 vue3+vite+element-plus 開發(fā)而成，目的是為了解決通用型的業(yè)務中后臺系統(tǒng)復雜的配置。

功能特色

• 適合中后臺開發(fā)的路由配置、狀態(tài)管理機制（狀態(tài)默認支持本地存儲）、已封裝完善的axios及api管理機制
• 極方便擴展的主題配置功能，默認支持三種典型的中后臺風格
• 簡易配置的頁面緩存功能，只需配置noCache屬性，無需配置其他的任何屬性，如組件名稱，路由名稱等等很多框架需要配置的東西
• 典型增刪改查的三種業(yè)務表格，詳情請查看“頁面欄目”內(nèi)的“業(yè)務表格”、“分類聯(lián)動表格”、“樹聯(lián)動表格”
• 支持緩存頁面刷新，目前了解的多數(shù)框架都不支持緩存頁面的刷新方便擴展的國際化解決方案，并提供了兩套非國際化的基礎模板和兩套國際化的基礎模板（ts版本/js版本）
• 手寫版本的各類自定義指令
• 已經(jīng)過多個中后臺業(yè)務檢驗過的表格公用組件及彈窗公用組件，詳情請查看“頁面欄目”內(nèi)的“業(yè)務表格”、“分類聯(lián)動表格”、“樹聯(lián)動表格”

界面展示

大家可以左右滑動來切換圖片:)

更多優(yōu)秀項目推薦

好了，今天的分享就到這里了，如果大家對可視化搭建或者低代碼/零代碼感興趣，也可以在 趣談前端 中查閱我往期的文章或者說出你的想法和心得，一起探索前端真正的技術(shù)。