整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
懂代碼，缺乏專業知識，同時又不滿足于上淘寶購買建站系統？本文教你如何速成建站，如何將喜歡的html前端模版整合后臺變成一套完整的網站程序！如果你熟練掌握這些技巧，一天可以搭建一個成熟的網站。
本文的（上）章中對前后端整合的意義、如何選擇后端框架、前端代碼的素材來源進行了介紹，（中）章介紹了復用、注釋、各段落結構以及于后臺代碼的部分關系！本章將進行正式的整合操作介紹！
注：限于篇幅，本章僅做部分的整合演示，有時間回在做本文沒提到的整合操作（取決于有沒有人想繼續看）。
一、后端·部署
上一章我們提到了大概的結構，本章將正式開始整合的操作過程演示！后端程序采用ThinkCMF。
在部署之前我們需要做以下幾個準備工作：
1、前往ThinkCMF官網下載最新版的源代碼，該源碼為完全開源免費的.
2、準備好本地運行環境，下面是運行環境要求，我的主頁里面可以找到有一篇關于運行環境的文章，不用懂技術，小白也能部署，本文就以upupw apache php7.2(不懂得翻我之前關于本地環境部署的文章)作為本地環境部署包。
3、把下載好的源代碼放入網站目錄,為了照顧windows用戶，部分內容采用虛擬機來模式windows環境來做演示，下圖中我們可以看到對應的主機目錄。
注：一般來講，你們正常本地應該是使用127.0.0.1以及htdocs目錄作為直接訪問地址和目錄，由于ThinkCMF的特性，需要將子目錄public設置為根目錄，至于我截圖中的10.211.55.5域名則是因為我采用的虛擬機環境，為方便在虛擬機外調試做的本地ip而已，可以忽略！
上圖中所看到的被選中文件或文件夾就是本次演示所使用的ThinkCMF后端框架的所有相關代碼及文件夾。（注：存放路徑請看截圖界面的地址欄）
4、我們需要將本地環境跑起來看是否能正常運行，現在進入upupw apache的管理面板。
5、根據指令提示輸入s1并按回車，開啟全部服務，意思就是打開運行環境所需的所有配套環境功能。
6、通過瀏覽器訪問127.0.0.1（注：截圖中均使用的是10.211.55.5，你們本地調試一般是127.0.0.1）訪問網站程序進入安裝程序。
7、點擊接受按鈕進入環境監測頁面,看見下圖環境檢測完成，全部為綠色勾勾，說明源代碼的運行環境已經沒有問題了，根據提示進入下一步。
8、這一步驟涉及到數據庫的，小白伙伴們可能不懂，沒關系，upupw的本地調試環境的目錄里面有一個叫密碼及安全說明的文件，我們可以在里面找到數據庫的默認密碼，填入密碼就行，其它的可以默認不用修改（網站配置的內容可以根據喜好修改）。
9、想要修改的內容修改好之后就可以下一步安裝了！
自此，部署部分就完成了！其實操作很簡單，只是為了小白好理解所以篇幅用的多了點，接下來我們就要做整合部分了！
二、后端·模版目錄
其實，在官方的說明文檔里面已經做了目錄結構的說明，而我們要做前后端整合，重點要操作的目錄是public\themes,其實themes就是英文里的主題的意思，很多開源框架的目錄名字都有通用型，而themes就是專門存放主題（模版）的地方。
注：通常只要具備模版切換功能的后端框架，都有使用themes目錄作為模版存放的文件夾。當然不能說絕對，有些開發者會依賴喜好來命名，也有一些開源項目采用不同的命名規則。
上圖中，右邊是后臺管理界面，左邊是模版文件夾，我們可以看到有對應的模版存放在文件夾中，我們需要做兩步操作來添加我們自己的模版。
1、復制一份simpleboot3模版并改名為自己喜歡的名稱
2、修改模版的描述文件，跟官方的模版有所區分,描述文件名為manifest，通過代碼編輯器打開該文件，修改模版名稱、版本號、主頁、關鍵詞、描述等信息。
這一步是為了將自己做的模版跟官方的模版有所區分。
三、后端·目錄結構
準備工作已經完成得差不多了，接下來還記得上一章我們講的將各模塊進行注釋拆分嗎？
上圖中，代碼被折疊了，有些代碼編輯器是具備折疊代碼功能的，我這里折疊的目的只是為了方便大家看我的拆分！中間的內容區域細節我就沒有再注釋了，一般有經驗了其實不需要這么豐富的注釋，我們只需要區分出：頭部信息、導航區域、內容區域、底部區域這四個區域就可以了！因為在后端的代碼調用中它們要拆開存放到不同的地方。
上圖紅色文字標注的文件或者文件夾就是接下來我們要重點操作的地方了，其中assets文件夾是所有的js、css、媒體素材的存放文件夾，其它幾個標注紅字的文件就是接下來我們要植入喜歡的前端代碼要用到的文件夾了。
四、整合·素材存入
css、js以及媒體素材其實并非一定要放入指定的文件夾，理論上只要放在網站目錄中，我們都可以通過修改調用地址的方式來調用這些素材，放入到指定的文件夾可以減少我們許多的修改工作。
上圖就是本次我們要進行整合的前端頁面代碼，這個前端模版中除了html文件以外，其它的images、js、plugins、styles四個文件夾都是資源文件夾（注：資源文件夾為統稱，實際上還包括樣式、前端插件、圖片），我們將它們復制到后端的指定文件夾中。
上圖中的yanshi文件夾是我新建的，為了便于統一管理，資源放入到assets文件夾后素材存入工作就完成了，接下來我們做頭部信息的編輯。
五、整合·頭部信息
還記得前面關于目錄結構我們所提到后端源代碼的文件是哪個嗎？接下來我們同時打開thinkcmf的head.html文件以及前端代碼的index.html文件（通過代碼編輯器編輯）。
上圖中，左邊是后端代碼模版head.html文件的頭部代碼，右邊是前端頁面index.html的源代碼。仔細鑒別一下，其實區別只是路徑而已，所以我們需要把右邊的代碼復制到左邊，然后修改一下路徑。要注意的是只覆蓋同類標簽的即可。
我們將前端的頭部的關鍵調用信息復制到左邊的頭部代碼里面了，但是我們需要修改css的相關鏈接路徑，請注意上圖左側我已經用注釋來說明的需要添加的路徑。
上圖中請注意左側代碼與前一張截圖中的左側代碼有什么不同，我們在前端代碼原有的路徑上加入了__TMPL__/public/assets/yanshi/這條路徑，其中：__TMPL__是這套源代碼的系統常量，代表了模版根目錄，/public/assets/yanshi/是我們之前復制素材時素材的存放文件夾。而之后的路徑結構就是前端原本相同的路徑，所以不需要額外再做修改，只需要把前面缺失的路徑補上即可。
自此，左邊的頭部目錄告一段落！接下來我們進入下一步。
六、整合·底部信息
為什么先要整合底部這里需要特殊做個說明，這個前端模版很多js調用信息文件是放在底部信息區域的，如果不先做底部的話，內容區域和導航區域很多的效果有可能會無法顯示，進而無法預覽是否修改成功。
上面截圖中右邊是前端index.html文件，紅色方框區域就是js的調用文件，左邊區域是是原始的模版底部文件，為了方便，我們先將左邊可能需要用到的調用函數貼入右邊前端模版的對應位置。
上面這張圖信息量有點大，主要包含底部信息、底部圖片的素材調用地址修改，具體含義可以把截圖中白色的英文文字部分用百度翻譯，網站信息和icp備案相關的信息是用來調用后臺填寫相關信息的！
注：我們在實操過程中可以一邊修改一邊在網站系統的前臺頁面預覽修改的效果。
最重要的一步是把右側修改好的信息完整的復制到左側，并且清空左側原本的內容。上面的截圖已經完成了這個步驟，我們看注釋就會發現兩邊內容已經是一致的了！
預覽一下底部效果，完美植入！雖然有點不是太好看，那是因為我們內容區域還沒有做好植入工作，中間的內容區域還是系統原來的，跟模版本身的底部不是太搭調。
七、整合·導航菜單
導航算得上是整個整合過程中最復雜的一段，這個復雜指的是講解復雜性。對于缺乏代碼邏輯基礎的小白來說，在這一段你必須明白什么是循環，以及導航菜單的結構層級。為了方便大家能更清晰地看懂，筆者決定將前端的導航菜單進行精簡再進行截圖。在此之前，先上一張原始截圖：
上圖是前端代碼的導航菜單的代碼，下面的是經過我注釋并精簡后的代碼，左邊是系統，右邊是前端。
這樣看或許還是比較復雜，但是對小白來講應該能大概知道基礎的邏輯了，循環實際上就是讓我們后期的菜單操作不在依賴代碼修改，而是通過網站后臺可以直接操作。
現在左邊是我們復制的前端代碼，右邊是從系統的原始模版里面找出來的參考。我們來看一下還沒有修改的效果：
我們復制進去的菜單實際上已經生效了，那么接下來我們需要修改循環，讓它自動同步后臺操作的菜單。先修改logo部分的：
href=后面原本是index.html，替換為__ROOT__/，也就是網址常量（各種常量、變量可在官方開發文檔查詢），另外將CERAMIC修改為網站名稱的變量，我們來看效果：
logo位置自動讀取了網站名稱作為logo，一般來講logo是以圖片居多，以后有機會再講解如何替換成logo圖片。
上面截圖中右邊是從系統的原始模版里面找出來的代碼，左邊是我們之前創建的yanshi模版，把系統原始的模版代碼導航菜單部分的代碼復制到左邊我們自己創建的模版當中。
注：其實原本的導航規則我們是不需要做修改的，只需要調整樣式調用即可，所以可以把菜單部分的代碼放到我們創建的模版當中，但是要注意區分，我說的是菜單部分，不是整個導航，要注意鑒別。
上面截圖中，由于系統原始模版的代碼沒有<nav class="main_nav">這個標簽，我們需要從前端代碼中將這個標簽復制到我們創建的模版代碼中！如果你不清楚位置，還記得我們之前做的注釋嗎？放到菜單框架開始的下面就行了，別忘記結尾標簽</nav>放入到菜單框架結束上面。
上面截圖這個操作可能對小白來講不太理解，之前的內容也沒有講到樣式調用的問題，這里稍微提一下。通常class=后面的值是調用css文件里面的樣式用的！作為小白，如果你還沒有涉及到前端樣式修改的前提下，這一步可以不用理解，我們只需要知道通過上面的這個操作讓我們創建的模版可以調用我們所選擇的前端模版的樣式表就可以了！
注：截圖操作不可能將所有步驟都講清楚，實際上我在上面刪除了一些樣式，但是非專業技術學習和從業者其實完全可以用排除法，就是一邊通過預覽查看效果，一邊在代碼里面修修改改，發現改錯就撤回，發現改對就多了一點經驗。非專業從業者也不愿意看枯燥的從零開始的學習書籍，這是最好的學習方式，還能具備解決問題的成就感！
預覽效果菜單部分的調用已經沒有問題了，至于上面的菜單是筆者隨便添加的，大家想要什么菜單可以自行在后臺添加！我們看到，后面還有一個400電話以及一個放大鏡按鈕。
由于thinkcmf官方系統中沒有聯系電話的變量，二改需要更進一步的知識，所以我們就從官方文檔中直接取網站信息變量里面的站長郵箱變量來使用好了。
將變量{$site_info.site_admin_email} 放入到之前400電話的位置，在后臺重新設置一下400號碼：
來看預覽效果：
導航菜單部分就這樣了，到這里我們的通用內容部分已經完成！接下來的整合不論內容區域整得咋樣，都不會影響到頂部導航菜單和底部版權信息欄了！
限于篇幅原因，長篇大論怕大家不愿意看，本章就暫時結束到這里了！有興趣繼續學習的小白童鞋可以關注我，自我學習能力比較強的同學到這里已經理解了不少知識，還可以去thinkcmf官方的開發文檔里面了解其他部分的整合，還有相當多的內容要學習！
本章節用了好幾天的時間來做素材整理、官方文檔查閱，畢竟筆者不是全職自媒體，求關注，求分享，求轉發！
有疑問或者想要本文使用的素材文件的可以在留言區評論，大神開發者們請不要噴，就像這個系列教程一開始所說的那樣，這是為那些不準備成為從業者，不打算從基礎學習，只當成業余愛好或者額外補充生產力的小白學習用的。
框架可直上手開發這些功能
如果你沒有做過webpack+vue工程化開發項目，可能會剛開始相當不適應，或者安裝環境總是出問題，但只要你熟悉開發流程后，你會發現采用Vue開發比Jquery爽太多了。上手項目需重點了解基礎Vue語法，特別是了解組件、路由及import的使用
VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可選，沒有redis的在appsetting.json中不用配置，默認使用內置IMemory)、
VsCode、Vue2.0（webpack、node.js,如果沒有此環境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui
項目地址：https://github.com/cq-panda/Vue.NetCore
PI
來源：快舔包我很肥
框架
WebAPI Contrib：幫助你提高 ASP.NET Web API 能力的開源項目集合。
應用框架（Application Frameworks）
應用模板（Application Templates）
人工智能（Artificial Intelligence）
程序集處理（Assembly Manipulation）
資源（Assets）
認證和授權（Authentication and Authorization）
自動構建（Build Automation）
緩存（Caching）
CLI
CLR
CMS
代碼分析和度量（Code Analysis and Metrics）
編譯器（Compiler）
壓縮（Compression）
持續集成（Continuous Integration）
加密（Cryptography）
數據庫（Database）
數據庫驅動（Database Drivers）
反編譯（Decompilation）
部署（Deployment）
DirectX
分布式計算（Distributed Computing）
文檔（Documentation）
電子商務和支付（E-Commerce and Payments）
環境管理（Environment Management）
ETL
游戲（Game）
地理信息系統（Gis）
Git工具（Git Tools）
圖形（Graphics）
GUI
HTML 和 CSS（HTML and CSS）
HTTP
IDE
圖像處理（Image Processing）
安裝工具（Install Tools）
國際化（Internationalization）
互操作（Interoperability）
IoC
日志（Logging）
機器學習和數據科學（Machine Learning and Data Science）
Markdown 處理（Markdown Processors）
郵件（Mail）
數學（Mathematics）
多媒體（Media）
度量（Metrics）
微框架（Micro Framework）
雜項（Misc）
MVVM
Office
ORM
包管理（Package Management）
Profiler
推送通知（Push Notifications）
隊列（Queue）
響應式編程（Reactive Programming）
計劃調度（Scheduling）
SDK 和 API 客戶端（SDK and API Clients）
搜索（Search）
序列化（Serialization）
狀態機（State machines）
靜態網站生成（Static Site Generators）
風格指南（Style Guide）
模板引擎（Template Engine）
測試（Testing）
交易（Trading）
Visual Studio 插件（Visual Studio Plugins）
Web 框架（Web Frameworks）
Web 服務器（Web Servers）
WebSocket
Windows 服務（Windows Services）
通訊框架（Communication Frameworks）
其他列表（Other Lists）
看完本文有收獲？請轉發分享給更多人!!!歡迎大家點贊，留言討論，喜歡這篇文章可以分享給更多人，關注我每天更新分享有關程序員、科技、編程之類的文章！??！愛你們，，么么噠，，讓我們一起愉快的玩耍把?。。?/strong>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
