?最近也是臨近期末了，各種的期末大作業(yè)，后臺管理也是很多地方需要用到的，為了方便大家能快速上手，快速搭建一個簡單的后臺管理，我花了兩天時間整理了一下

我會從0開始介紹，從數(shù)據(jù)庫的設(shè)計到前端頁面的引入最后到后端代碼的編寫，你只需要會一點前端的基礎(chǔ)和ssm的基礎(chǔ)就能快速上手搭建一個簡單的后臺管理

本次案例分兩篇文章教學(xué)：

（第一篇）：數(shù)據(jù)表設(shè)計，前端框架引入和編寫前端頁面，搭建基本的springboot項目，引入前端到springboot項目中，在瀏覽器顯示

（第二篇）：后端代碼的設(shè)計，這部分邏輯涉及的比較多，所以單獨(dú)放一篇出來講，代碼從0手敲講解，保證你能學(xué)會，完成增刪改查的功能

各大技術(shù)基礎(chǔ)教學(xué)、實戰(zhàn)開發(fā)教學(xué)（最新更新時間2021-12-4）

目錄

前言和環(huán)境介紹

數(shù)據(jù)庫

H+前端框架

基本介紹?

H+框架引入

編寫后臺表格頁面

modal彈出框原理

搭建后端

基本介紹

創(chuàng)建SpringBoot項目

基本配置

引入前端

測試項目（測試一下頁面是否能顯示）

Gitee開源項目地址（本次項目源碼）

各大技術(shù)基礎(chǔ)教學(xué)、實戰(zhàn)項目開發(fā)教學(xué)

---

前言和環(huán)境介紹

無論是做app，網(wǎng)站，還是小程序，都少不了后臺管理

那么對于前端不是很會，后端也是只會一些的人來說，如何快速搭建一個簡單的后臺管理系統(tǒng)呢，哎別急，今天就來教大家簡單快速搭建一個后臺管理系統(tǒng)

首先，簡單介紹一下我的開發(fā)環(huán)境

工具	用處
H+	前端框架，直觀的教程文檔，非常實用
SpringBoot	后端框架，簡單上手，搭建快
MySQL	數(shù)據(jù)庫
IDEA	非常強(qiáng)大的編譯器
Ajax	異步請求，前端向后端發(fā)送請求
thymeleaf	模板引擎，實時渲染頁面，基于HTML
HBuild X	前端編譯器，用其他的也可以，看自己

好了，環(huán)境介紹完畢，我們先從前端界面做起

數(shù)據(jù)庫

一個后臺管理，肯定少不了數(shù)據(jù)，不然怎么叫后臺管理呢

這里我是用的是MySQL數(shù)據(jù)庫，當(dāng)然你使用其他的也行，不過后面在SpringBoot中要做不同的配置

在MySQL中新建一個user數(shù)據(jù)庫，新建一個t_user表，字段如下，id，用戶名，昵稱，密碼（id記得設(shè)置為自增長模式）

H+前端框架

基本介紹?

官網(wǎng)地址：H+ 后臺主題UI框架 - 主頁

H+是一個非常強(qiáng)大的前端開源框架，開箱即用，不需要過多的配置，里面有非常多組件，具體就不一一介紹了，有興趣的自己去看看

我們要做的是后臺管理，所以我們直接找到表格，可以看到有很多樣式選擇，我們選擇一個簡單點

這里為了方便快速搭建我選擇基本表格，當(dāng)時你們可以根據(jù)自己喜歡來選擇

---

---

H+框架引入

HBuild X官網(wǎng)下載地址（無需安裝，解壓即用）

打開HBuild X編譯器（你用其他的也可以，沒影響）

在左側(cè)空白處新建一個項目（快捷鍵ctrl+n），選擇基于HTML普通項目，添加項目名稱，選好路徑，點擊創(chuàng)建

?一個基本的前端項目就創(chuàng)建好了

?

?接著，將H+框架的css，js，font等靜態(tài)資源全部復(fù)制項目下

---

---

編寫后臺表格頁面

找到H+框架中基本表格的源碼，復(fù)制代碼到index.htm下

再對其進(jìn)行一點修改，去掉右上角的工具欄，加上增刪改查的按鈕

修改之后的頁面如下，用到了H+框中的表格、表單、按鈕、字體圖標(biāo)庫，就不詳細(xì)介紹了，有興趣可以自己看看前端代碼，我們著重講解js和后端的搭建

同時，我們還需要一個彈出框，當(dāng)點擊添加和修改的時候會彈出一個表單框

我們在H+前端框架的表單中找到彈出框示例，復(fù)制代碼做點修改

修改后如下：

---

---

modal彈出框原理

HTML頁面代碼比較多，就不放上來了，底部Gitee倉庫完整的項目，主要講解一下上面這個modal彈出框怎么實現(xiàn)的就行

首先，每個modal彈出框都有唯一的標(biāo)識ID屬性，這里我們有兩個，一個添加用戶，一個修改用戶（里面的表單代碼我沒放出來，比較多，文章底部Gitee倉庫我上傳了完整開源項目）

<!-- 添加用戶的彈出框 -->
<div id="modal-form-add" class="modal fade" aria-hidden="true">

</div>

<!-- 修改用戶的彈出框 -->
<div id="modal-form-update" class="modal fade" aria-hidden="true">

</div>

我們?yōu)槊總€修改和刪除按鈕都添加一個類名標(biāo)識（這里為什么不用ID，是因為ID只能唯一標(biāo)識，添加按鈕可以用ID，但是修改和刪除不能用ID只能用class，因為有多個修改和刪除按鈕，添加按鈕只有一個）

我們在js文件夾下面新建一個myJS文件夾，存放自己編寫的js代碼，新建一個index.js，添加以下代碼

// 監(jiān)聽添加按鈕事件(通過id屬性監(jiān)聽)
$('#addUserBtn').click(function() {
	// 添加按鈕被點擊之后，展示modal框
	$('#modal-form-add').modal('show');
})
// 監(jiān)聽修改按鈕事件(通過class屬性監(jiān)聽)
$('.updateUserBtn').click(function() {
	// 修改按鈕被點擊之后，展示modal框
	$('#modal-form-update').modal('show');
})

然后再index.html底部引入index.js即可

就可以實現(xiàn)點擊添加和修改按鈕會彈出modal表單框，簡單前端管理頁面就搭建完畢了，接下來是后端

搭建后端

基本介紹

SpringBoot是目前非常主流的后端框架，簡化新spring應(yīng)用的初始搭建以及開發(fā)過程，搭建快，省去了編寫大量配置文件的過程

創(chuàng)建SpringBoot項目

打開IDEA，選擇spring Initializr，點擊下一步

?添加主包名稱，java version版本選擇8，點擊下一步

在左側(cè)找到這五個依賴，勾選上，點擊下一步

添加項目名稱（默認(rèn)為之前填寫的主包名稱），項目路徑自己選擇，點擊完成

右下角處選擇自動導(dǎo)入pom.xml依賴（沒有的話直接跳過）

一個基本的SpringBoot項目就創(chuàng)建完畢了

---

---

基本配置

在搭建項目之前，先做一些基本的配置，如數(shù)據(jù)源（連接MySQL）、static靜態(tài)資源映射（避免被攔截）、設(shè)置端口號（避免沖突）等

刪除原有的application.properties文件，新建一個application.yml文件（兩種都可以，yml文件方便一點），添加以下配置信息

spring:
  # 數(shù)據(jù)源，連接MySQL數(shù)據(jù)庫
  datasource:
    url: jdbc:mysql://localhost:3306/user?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true
    username: 數(shù)據(jù)庫用戶名
    password: 數(shù)據(jù)庫密碼
    driver-class-name: com.mysql.cj.jdbc.Driver
  # JPA配置，打印sql語句
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
  # mvc配置，映射html頁面
  mvc:
    static-path-pattern: /**
    view:
      prefix: /
      suffix: .html
  # thymeleaf模板引擎配置，設(shè)置編碼，false取消緩存
  thymeleaf:
    encoding: UTF-8
    cache: false
server:
  # 修改啟動端口號
  port: 8081
  # 靜態(tài)資源映射路徑
  web:
    resources:
      static-locations: classpath:/static/

在項目目錄下新建一個config包（存在基本配置類），新建一個MyWebMVCConfig類，代碼如下

@Configuration
public class MyWebMVCConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        System.out.println("==========靜態(tài)資源攔截！============");
        //將所有/static/** 訪問都映射到classpath:/static/ 目錄下
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

---

---

引入前端

把剛剛在HBuildX寫好的前端頁面引入到IDEA中，首先復(fù)制除了html的其他所有文件到static文件夾下

接著復(fù)制index.html到templates文件夾下

然后打開index.html，在所有訪問靜態(tài)資源的鏈接前面加上/static/

測試項目（測試一下瀏覽器是否能顯示頁面）

想項目目錄下新建一個controller包，新建一個IndexCtroller類，添加以下代碼

@RestController
public class IndexController {

    @RequestMapping(value = "/index") // 訪問路徑
    public ModelAndView toIndex() {
        // 返回templates目錄下index.html
        ModelAndView view = new ModelAndView("index");
        return view;
    }
}

?點擊啟動項目，選哪個都可以，我一般選第二個debug模式啟動，方式debug調(diào)試

?等待啟動完成之后，打開瀏覽器，輸入 localhost:8081/index，頁面成功顯示

第一篇文章到這里介紹完畢，第二篇正在火速撰寫中······

Gitee開源項目地址（本次項目源碼）

SpringBoot項目教學(xué)合集: CSDN中的所有SpringBoot項目開源，持續(xù)更新新項目、新教學(xué)文章

各大技術(shù)基礎(chǔ)教學(xué)、實戰(zhàn)項目開發(fā)教學(xué)

各大技術(shù)基礎(chǔ)教學(xué)、實戰(zhàn)開發(fā)教學(xué)（最新更新時間2021-11-28）_Bald programmer的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-412032.html

到了這里，關(guān)于使用SpringBoot一小時快速搭建一個簡單后臺管理（增刪改查）（超詳細(xì)教程） 各大技術(shù)基礎(chǔ)教學(xué)、實戰(zhàn)項目開發(fā)教學(xué)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！