快速開發一個管理系統
目的：開發一個后台管理系統+前台展示頁面；學會使用Vue.js(數據雙向綁定、數據渲染、組件化開發等)、SpringBoot框架的使用
為了快速開發，我們一般選用網上的開源項目，這里選用Lin-CMS后台管理系統開源框架。官方初始代碼已經提供了圖書管理系統開發，在此基礎上，對自己的業務進行開發。在此基礎上，可以再深入理解Vue組建化開發、SpringBoot與mybatis實現原理。
初學框架，個人覺得，看視頻，看別人操作能更快上手。所以我以前學習實踐項目的時候，都會去https://www.imooc.com/，看實戰視頻。
簡單使用vue.js作前台頁面開發(就是介紹了在后端提供了訪問數據API接口的基礎上，用vue.js作后台動態數據與HTML的綁定，axios.js向后台發送網絡請求API接口，用BootStrap.css快速實現樣式)：https://www.imooc.com/video/20044
簡單使用Lin-CMS-Vue開發后台前端 的視頻課程地址：https://www.imooc.com/video/21680
簡單使用Lin-CMS-SpringBoot開發后台后端 的官方教程地址：https://doc.cms.talelin.com/start/spring-boot/backend-demo.html
技術棧
前端：Vue.js、Element-UI 、 BootStrap、Lin-CMS-Vue
后端：SpringBoot、SpringMVC、Mybatis-plus、Swagger
數據庫：MySQL
環境配置
0.下載Lin-CMS-Vue和Lin-CMS-SpringBoot開源框架
下載地址和官方下載教程文檔：
后端：https://doc.cms.talelin.com/start/spring-boot
前端：https://doc.cms.talelin.com/start/spring-boot/vue-client.html
下載好后開始配置環境：
1.前端安裝node.js就可以了(安裝的node.js自帶了npm前端包管理工具)
安裝教程超詳細：https://www.cnblogs.com/zhouyu2017/p/6485265.html
1-1裝好后打開cmd命令行工具，cd 進入到前端項目路徑下lin-cms-vue，然后輸入npm install，回自動安裝依賴包。
1-2然后cmd命令行工具，cd 進入到前端項目路徑下，輸入npm run serve啟動服務
打開后台管理系統首頁地址： http://localhost:8080/
2.導入數據庫
打開navicat數據庫可視化工具(需要提前下載)，新建數據庫名lin-cms，導入打包好的sql文件，sql在Lin-cms-spring-boot/src/main/resources/schema中
3.后端只需要有IDEA編譯器，然后打開后端項目lin-cms-spring-boot，整個文件夾拖到編譯器就可以，右擊pom.xml，找到maven，點擊Reimport導入依賴包。maven就相當於后端管理依賴包的工具。類比npm就是前端包管理工具。
然后運行main函數啟動項目
數據庫設計
以酒店管理系統為例子：
旅客(編號、身份證號、預定時間、離店時間、姓名、性別、年齡、實際入住時間)
房間(編號、類別、名稱、價格、狀態)
訂單(編號、關聯旅客ID、關聯客房ID、總金額)
員工(權限類別)
后端實現業務接口
使用：SpringBoot、Mybatis、SpringMVC
MVC：模型層、控制層、視圖層
模型層對應數據庫實體DO，也就是一張數據表有什么字段，那么這個模型的對象就要有對應的屬性。對應model文件夾。另外有VO對應想展示給用戶的對象(比如一個DO的某個屬性可以不展示給對象)、DTO作為數據更新或創建時候的對象。
控制層對應請求、響應的處理，對應Controller文件夾；業務邏輯處理對應Service文件夾；數據處理對應mapper文件夾。
視圖層View，前后端分離后應該就不需要了。
后端快速上手(以圖書book管理為例子)：https://doc.cms.talelin.com/start/spring-boot/backend-demo.html#數據層
按下面步驟，分四層寫就可以了。
1.model層對應了數據庫實體，字段屬性對應各個字段
2.mapper層用mybatis框架，作數據庫操作數據的映射
3.service層寫業務邏輯
4.controller層配置訪問的URL路由
綜上，當用戶的一個請求到達后，經過路由查找，查找到指定的controller，controller找到調用的業務邏輯service，service調用需要的mapper數據庫操作，mapper查詢返回model數據實體的數據。
前端頁面
前台頁面
使用：Vue.js做數據渲染和雙向綁定、axios.js發送請求api的數據、bootstrap.css樣式。
幾個常用的vue方法
v-for，把div等標簽循環n遍
v-if，判斷div等標簽是否出現
v-on:click，綁定鼠標點擊后要調用的函數
后台頁面
使用：Lin-Cms-vue也是基於vue來封裝的框架
前端快速上手（以book圖書管理頁為例）：https://doc.cms.talelin.com/start/spring-boot/frontend-demo.html#獲取數據
按下圖，分三層寫就可以了。
詳細可參考視頻：簡單使用Lin-CMS-Vue開發后台前端 的視頻課程地址：https://www.imooc.com/video/21680
前后端分離：構建API文檔
使用Swagger構建自動生成后端接口的API文檔，可以查看到各個接口的方法
后台啟動后，打開鏈接：http://localhost:5000/swagger-ui.html
效果圖
前台頁面
后台頁面
一份(圖書管理系統、酒店管理系統)的代碼：https://wwa.lanzoui.com/iJPRljuxn8d