最近也是臨近期末了，各種的期末大作業，后臺管理也是很多地方需要用到的，為了方便大家能快速上手，快速搭建一個簡單的后臺管理，我花了兩天時間整理了一下
我會從0開始介紹，從數據庫的設計到前端頁面的引入最后到后端代碼的編寫，你只需要會一點前端的基礎和ssm的基礎就能快速上手搭建一個簡單的后臺管理
本次案例分兩篇文章教學：
（第一篇）：數據表設計，前端框架引入和編寫前端頁面，搭建基本的springboot項目，引入前端到springboot項目中，在瀏覽器顯示
（第二篇）：后端代碼的設計，這部分邏輯涉及的比較多，所以單獨放一篇出來講，代碼從0手敲講解，保證你能學會，完成增刪改查的功能
各大技術基礎教學、實戰開發教學（最新更新時間2021-12-4）
目錄
前言和環境介紹
數據庫
H+前端框架
基本介紹
H+框架引入
編寫后臺表格頁面
modal彈出框原理
搭建后端
基本介紹
創建SpringBoot項目
基本配置
引入前端
測試項目（測試一下頁面是否能顯示）
Gitee開源項目地址（本次項目源碼）
各大技術基礎教學、實戰項目開發教學
前言和環境介紹
無論是做app，網站，還是小程序，都少不了后臺管理
那么對于前端不是很會，后端也是只會一些的人來說，如何快速搭建一個簡單的后臺管理系統呢，哎別急，今天就來教大家簡單快速搭建一個后臺管理系統
首先，簡單介紹一下我的開發環境
|
工具
|
用處
|
|
H+
|
前端框架，直觀的教程文檔，非常實用
|
|
SpringBoot
|
后端框架，簡單上手，搭建快
|
|
MySQL
|
數據庫
|
|
IDEA
|
非常強大的編譯器
|
|
Ajax
|
異步請求，前端向后端發送請求
|
|
thymeleaf
|
模板引擎，實時渲染頁面，基于HTML
|
|
HBuild X
|
前端編譯器，用其他的也可以，看自己
|
好了，環境介紹完畢，我們先從前端界面做起
數據庫
一個后臺管理，肯定少不了數據，不然怎么叫后臺管理呢
這里我是用的是MySQL數據庫，當然你使用其他的也行，不過后面在SpringBoot中要做不同的配置
在MySQL中新建一個user數據庫，新建一個t_user表，字段如下，id，用戶名，昵稱，密碼（id記得設置為自增長模式）
H+前端框架
基本介紹
官網地址：H+ 后臺主題UI框架 - 主頁
H+是一個非常強大的前端開源框架，開箱即用，不需要過多的配置，里面有非常多組件，具體就不一一介紹了，有興趣的自己去看看
我們要做的是后臺管理，所以我們直接找到表格，可以看到有很多樣式選擇，我們選擇一個簡單點
這里為了方便快速搭建我選擇基本表格，當時你們可以根據自己喜歡來選擇
H+框架引入
HBuild X官網下載地址（無需安裝，解壓即用）
打開HBuild X編譯器（你用其他的也可以，沒影響）
在左側空白處新建一個項目（快捷鍵ctrl+n），選擇基于HTML普通項目，添加項目名稱，選好路徑，點擊創建
一個基本的前端項目就創建好了
接著，將H+框架的css，js，font等靜態資源全部復制項目下
編寫后臺表格頁面
找到H+框架中基本表格的源碼，復制代碼到index.htm下
再對其進行一點修改，去掉右上角的工具欄，加上增刪改查的按鈕
修改之后的頁面如下，用到了H+框中的表格、表單、按鈕、字體圖標庫，就不詳細介紹了，有興趣可以自己看看前端代碼，我們著重講解js和后端的搭建
同時，我們還需要一個彈出框，當點擊添加和修改的時候會彈出一個表單框
我們在H+前端框架的表單中找到彈出框示例，復制代碼做點修改
修改后如下：
modal彈出框原理
HTML頁面代碼比較多，就不放上來了，底部Gitee倉庫完整的項目，主要講解一下上面這個modal彈出框怎么實現的就行
首先，每個modal彈出框都有唯一的標識ID屬性，這里我們有兩個，一個添加用戶，一個修改用戶（里面的表單代碼我沒放出來，比較多，文章底部Gitee倉庫我上傳了完整開源項目）
-
-
<div id="modal-form-add" class="modal fade" aria-hidden="true">
-
-
-
-
<div id="modal-form-update" class="modal fade" aria-hidden="true">
-
-
我們為每個修改和刪除按鈕都添加一個類名標識（這里為什么不用ID，是因為ID只能唯一標識，添加按鈕可以用ID，但是修改和刪除不能用ID只能用class，因為有多個修改和刪除按鈕，添加按鈕只有一個）
我們在js文件夾下面新建一個myJS文件夾，存放自己編寫的js代碼，新建一個index.js，添加以下代碼
-
-
$('#addUserBtn').click(function() {
-
-
$('#modal-form-add').modal('show');
-
-
-
$('.updateUserBtn').click(function() {
-
-
$('#modal-form-update').modal('show');
-
然后再index.html底部引入index.js即可
就可以實現點擊添加和修改按鈕會彈出modal表單框，簡單前端管理頁面就搭建完畢了，接下來是后端
搭建后端
基本介紹
SpringBoot是目前非常主流的后端框架，簡化新spring應用的初始搭建以及開發過程，搭建快，省去了編寫大量配置文件的過程
創建SpringBoot項目
打開IDEA，選擇spring Initializr，點擊下一步
添加主包名稱，java version版本選擇8，點擊下一步
在左側找到這五個依賴，勾選上，點擊下一步
添加項目名稱（默認為之前填寫的主包名稱），項目路徑自己選擇，點擊完成
右下角處選擇自動導入pom.xml依賴（沒有的話直接跳過）
一個基本的SpringBoot項目就創建完畢了
基本配置
在搭建項目之前，先做一些基本的配置，如數據源（連接MySQL）、static靜態資源映射（避免被攔截）、設置端口號（避免沖突）等
刪除原有的application.properties文件，新建一個application.yml文件（兩種都可以，yml文件方便一點），添加以下配置信息
-
-
-
-
url: jdbc:mysql://localhost:3306/user?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
-
-
-
driver-class-name: com.mysql.cj.jdbc.Driver
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
static-locations: classpath:/static/
在項目目錄下新建一個config包（存在基本配置類），新建一個MyWebMVCConfig類，代碼如下
-
-
public class MyWebMVCConfig implements WebMvcConfigurer {
-
-
public void addResourceHandlers(ResourceHandlerRegistry registry) {
-
System.out.println("==========靜態資源攔截！============");
-
-
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
-
-
引入前端
把剛剛在HBuildX寫好的前端頁面引入到IDEA中，首先復制除了html的其他所有文件到static文件夾下
接著復制index.html到templates文件夾下
然后打開index.html，在所有訪問靜態資源的鏈接前面加上/static/
測試項目（測試一下瀏覽器是否能顯示頁面）
想項目目錄下新建一個controller包，新建一個IndexCtroller類，添加以下代碼
-
-
public class IndexController {
-
-
@RequestMapping(value = "/index")
-
public ModelAndView toIndex() {
-
-
ModelAndView view = new ModelAndView("index");
-
-
-
點擊啟動項目，選哪個都可以，我一般選第二個debug模式啟動，方式debug調試
等待啟動完成之后，打開瀏覽器，輸入 localhost:8081/index，頁面成功顯示
第一篇文章到這里介紹完畢，第二篇正在火速撰寫中······
Gitee開源項目地址（本次項目源碼）
SpringBoot項目教學合集: CSDN中的所有SpringBoot項目開源，持續更新新項目、新教學文章
各大技術基礎教學、實戰項目開發教學
各大技術基礎教學、實戰開發教學（最新更新時間2021-11-28）_Bald programmer的博客-CSDN博客
