目的：開(kāi)發(fā)一個(gè)后臺(tái)管理系統(tǒng) 前臺(tái)展示頁(yè)面；學(xué)會(huì)使用Vue.js(數(shù)據(jù)雙向綁定、數(shù)據(jù)渲染、組建化開(kāi)發(fā)等)、SpringBoot框架的使用

為了快速開(kāi)發(fā)，我們一般選用網(wǎng)上的開(kāi)源項(xiàng)目，這里選用Lin-CMS后臺(tái)管理系統(tǒng)開(kāi)源框架。官方初始代碼已經(jīng)提供了圖書(shū)管理系統(tǒng)開(kāi)發(fā)，在此基礎(chǔ)上，對(duì)自己的業(yè)務(wù)進(jìn)行開(kāi)發(fā)。在此基礎(chǔ)上，可以再深入理解Vue組建化開(kāi)發(fā)、SpringBoot與mybatis實(shí)現(xiàn)原理。

初學(xué)框架，個(gè)人覺(jué)得，看視頻，看別人操作能更快上手。所以我以前學(xué)習(xí)實(shí)踐項(xiàng)目的時(shí)候，都會(huì)去https://www.imooc.com/，看實(shí)戰(zhàn)視頻。

簡(jiǎn)單使用vue.js作前臺(tái)頁(yè)面開(kāi)發(fā)(就是介紹了在后端提供了訪(fǎng)問(wèn)數(shù)據(jù)API接口的基礎(chǔ)上，用vue.js作后臺(tái)動(dòng)態(tài)數(shù)據(jù)與HTML的綁定，axios.js向后臺(tái)發(fā)送網(wǎng)絡(luò)請(qǐng)求API接口，用BootStrap.css快速實(shí)現(xiàn)樣式)：https://www.imooc.com/video/20044

簡(jiǎn)單使用Lin-CMS-Vue開(kāi)發(fā)后臺(tái)前端 的視頻課程地址：https://www.imooc.com/video/21680

簡(jiǎn)單使用Lin-CMS-SpringBoot開(kāi)發(fā)后臺(tái)后端 的官方教程地址：https://doc.cms./start/spring-boot/backend-demo.html

技術(shù)棧

前端：Vue.js、Element-UI 、 BootStrap、Lin-CMS-Vue

后端：SpringBoot、SpringMVC、Mybatis-plus、Swagger

數(shù)據(jù)庫(kù)：MySQL

環(huán)境配置

0.下載Lin-CMS-Vue和Lin-CMS-SpringBoot開(kāi)源框架

下載地址和官方下載教程文檔：

后端：https://doc.cms./start/spring-boot

前端：https://doc.cms./start/spring-boot/vue-client.html

下載好后開(kāi)始配置環(huán)境：

1.前端安裝node.js就可以了(安裝的node.js自帶了npm前端包管理工具)

安裝教程超詳細(xì)：https://www.cnblogs.com/zhouyu2017/p/6485265.html

1-1裝好后打開(kāi)cmd命令行工具，cd 進(jìn)入到前端項(xiàng)目路徑下lin-cms-vue，然后輸入npm install，回自動(dòng)安裝依賴(lài)包。

1-2然后cmd命令行工具，cd 進(jìn)入到前端項(xiàng)目路徑下，輸入npm run serve啟動(dòng)服務(wù)

打開(kāi)后臺(tái)管理系統(tǒng)首頁(yè)地址： http://localhost:8080/

2.導(dǎo)入數(shù)據(jù)庫(kù)

打開(kāi)navicat數(shù)據(jù)庫(kù)可視化工具(需要提前下載)，新建數(shù)據(jù)庫(kù)名lin-cms，導(dǎo)入打包好的sql文件，sql在Lin-cms-spring-boot/src/main/resources/schema中

3.后端只需要有IDEA編譯器，然后打開(kāi)后端項(xiàng)目lin-cms-spring-boot，整個(gè)文件夾拖到編譯器就可以，右擊pom.xml，找到maven，點(diǎn)擊Reimport導(dǎo)入依賴(lài)包。maven就相當(dāng)于后端管理依賴(lài)包的工具。類(lèi)比npm就是前端包管理工具。

然后運(yùn)行main函數(shù)啟動(dòng)項(xiàng)目

數(shù)據(jù)庫(kù)設(shè)計(jì)

以酒店管理系統(tǒng)為例子：

旅客(編號(hào)、身份證號(hào)、預(yù)定時(shí)間、離店時(shí)間、姓名、性別、年齡、實(shí)際入住時(shí)間)

房間(編號(hào)、類(lèi)別、名稱(chēng)、價(jià)格、狀態(tài))

訂單(編號(hào)、關(guān)聯(lián)旅客ID、關(guān)聯(lián)客房ID、總金額)

員工(權(quán)限類(lèi)別)

后端實(shí)現(xiàn)業(yè)務(wù)接口

使用：SpringBoot、Mybatis、SpringMVC

MVC：模型層、控制層、視圖層

模型層對(duì)應(yīng)數(shù)據(jù)庫(kù)實(shí)體DO，也就是一張數(shù)據(jù)表有什么字段，那么這個(gè)模型的對(duì)象就要有對(duì)應(yīng)的屬性。對(duì)應(yīng)model文件夾。另外有VO對(duì)應(yīng)想展示給用戶(hù)的對(duì)象(比如一個(gè)DO的某個(gè)屬性可以不展示給對(duì)象)、DTO作為數(shù)據(jù)更新或創(chuàng)建時(shí)候的對(duì)象。

控制層對(duì)應(yīng)請(qǐng)求、響應(yīng)的處理，對(duì)應(yīng)Controller文件夾；業(yè)務(wù)邏輯處理對(duì)應(yīng)Service文件夾；數(shù)據(jù)處理對(duì)應(yīng)mapper文件夾。

視圖層View，前后端分離后應(yīng)該就不需要了。

后端快速上手(以圖書(shū)book管理為例子)：https://doc.cms./start/spring-boot/backend-demo.html#數(shù)據(jù)層

按下面步驟，分四層寫(xiě)就可以了。

1.model層對(duì)應(yīng)了數(shù)據(jù)庫(kù)實(shí)體，字段屬性對(duì)應(yīng)各個(gè)字段

2.mapper層用mybatis框架，作數(shù)據(jù)庫(kù)操作數(shù)據(jù)的映射

3.service層寫(xiě)業(yè)務(wù)邏輯

4.controller層配置訪(fǎng)問(wèn)的URL路由

綜上，當(dāng)用戶(hù)的一個(gè)請(qǐng)求到達(dá)后，經(jīng)過(guò)路由查找，查找到指定的controller，controller找到調(diào)用的業(yè)務(wù)邏輯service，service調(diào)用需要的mapper數(shù)據(jù)庫(kù)操作，mapper查詢(xún)返回model數(shù)據(jù)實(shí)體的數(shù)據(jù)。

前端頁(yè)面

前臺(tái)頁(yè)面

使用：Vue.js做數(shù)據(jù)渲染和雙向綁定、axios.js發(fā)送請(qǐng)求api的數(shù)據(jù)、bootstrap.css樣式。

幾個(gè)常用的vue方法

v-for，把div等標(biāo)簽循環(huán)n遍

v-if，判斷div等標(biāo)簽是否出現(xiàn)

v-on:click，綁定鼠標(biāo)點(diǎn)擊后要調(diào)用的函數(shù)

后臺(tái)頁(yè)面

使用：Lin-Cms-vue也是基于vue來(lái)封裝的框架

前端快速上手（以book圖書(shū)管理頁(yè)為例）：https://doc.cms./start/spring-boot/frontend-demo.html#獲取數(shù)據(jù)

按下圖，分三層寫(xiě)就可以了。
詳細(xì)可參考視頻：簡(jiǎn)單使用Lin-CMS-Vue開(kāi)發(fā)后臺(tái)前端 的視頻課程地址：https://www.imooc.com/video/21680

前后端分離：構(gòu)建API文檔

使用Swagger構(gòu)建自動(dòng)生成后端接口的API文檔，可以查看到各個(gè)接口的方法

后臺(tái)啟動(dòng)后，打開(kāi)鏈接：http://localhost:5000/swagger-ui.html

效果圖

前臺(tái)頁(yè)面

后臺(tái)頁(yè)面

一份(圖書(shū)管理系統(tǒng)、酒店管理系統(tǒng))的代碼：https://wwa./iJPRljuxn8d