共计 2753 个字符，预计需要花费 7 分钟才能阅读完成。
前言
只有光头才能变强。
文本已收录至我的 GitHub 仓库，欢迎 Star：https://github.com/ZhongFuCheng3y/3y
在上一篇中已经讲解了如何从零搭建一个 SpringBoot+SpringData JPA 的环境，测试接口的时候也成功获取得到数据了。
带你搭一个 SpringBoot+SpringData JPA 的 Demo
我的目的是做一个十分简易的管理系统，这就得有页面，下面我继续来讲讲我是怎么快速搭一个管理系统的。
ps: 由于是简易版，我的目的是能够快速搭建，而不在于代码的规范性。(所以在后面你可能会看到很多丑陋的代码)
一、搭建管理系统
1.1. 搭建页面
在上一篇的最后，我们可以通过 http://localhost:8887/user 接口拿到我们 User 表所有的记录了。我们现在希望把记录塞到一个管理页面上 (展示起来)。
作为一个后端，我 HTML+CSS 实在是丑陋，于是我就去找了一份 BootStrap 的模板。首先，我进到 bootStrap 的官网，找到基本模板这一块：
我们在里边可以看到挺多的模板的，这里选择一个控制台页面：
于是，就把这份模板下载下来，在本地中运行起来试试看。官方给出的链接是下载整一份文档，我们找到想要的页面即可：
于是我们将这两份文件单独粘贴在我们的项目中，发现这 HTML 文件需要 bootstrap.css、bootstrap.js、jquery 的依赖 (原来用的是相对路径，其实我们就是看看相对路径的文件在我们这有没有，如果没有，那就是我们需要的)。这里我们在 CDN 中找找，导入链接就行了。
于是我们就将所缺的依赖替换成 BootCDN 的依赖，最重要的几个依赖如下：
<link href=”https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js”></script>
<script src=”https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js”></script>
如无意外的话，我们也能在项目中正常打开页面。
1.1.2 把数据塞到页面上
把数据塞到页面上，有两种方案：要么就后端返回 json 给前端进行解析，要么就使用模板引擎。而我为了便捷，是不想写 JS 代码的。所以，我使用 freemarker 这个模板引擎。
为什么这么多模板引擎，我选择这个？因为我只会这个！
在 SpringBoot 下使用 freemarker 也是非常简单，首先，我们需要加入 pom 文件依赖：
<!–freemarker–>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
随后，在 application.yml 文件中，加入 freemarker 的配置：
# freemarker 配置
freemarker:
suffix: .ftl
request-context-attribute: request
expose-session-attributes: true
content-type: text/html
check-template-location: true
charset: UTF-8
cache: false
template-loader-path: classpath:/templates
这里我简单解释一下：freemarker 的文件后缀名为.ftl，程序从 /templates 路径下加载我们的文件。
于是乎，我将本来是.html 的文件修改成.ftl 文件，并放在 templates 目录下：
接下来将我们 Controller 得到的数据，塞到 Model 对象中：
/**
* 得到所有用户
*/
@GetMapping(value = “/user”, produces = {“application/json;charset=UTF-8”})
public String getAllUser (Model model) {
List<User> allUser = userService.getAllUser();
model.addAttribute(“users”, allUser);
return “/index”;
}
图片如下：
在 ftl 文件中，我们只要判断数据是否存在，如果存在则在表格中遍历出数据就行了：
<#if users?? && (users?size > 0)>
<#list users as user>
<tr>
<td>${user.userId}</td>
<td>${user.userNickname}</td>
<td>${user.userEmail}</td>
<td>${user.actiState}</td>
<td><a href=”http://localhost:8887/deleteUser?id=${user.userId}”> 删除 </a></td>
</tr>
</#list>
<#else>
<h3> 还没有任何用户 </h3>
</#if>
图片如下：
删除的 Controller 代码如下：
/**
* 根据 ID 删除某个用户
*/
@GetMapping(value = “/deleteUser”, produces = {“application/json;charset=UTF-8”})
public String deleteUserById (String id,Model model) {
userService.deleteUserById(id);
return getAllUser(model);
}
我们再找几张自己喜欢的图片，简单删除一些不必要模块，替换成我们想要的文字，就可以得到以下的效果了：
至于图片上的评论管理、备忘录管理的做法都如上，我只是把文件再复制一次而已 (期中没有写任何的 JS 代码, 懒)。
在编写的期中，要值得注意的是：静态的文件一般我们会放在 static 文件夹中。
项目的目录结构如下：
最后
本文涉及到的链接 (bootstrap & cdn)：
https://v3.bootcss.com/getting-started/#template
https://www.bootcdn.cn/all/
乐于输出干货的 Java 技术公众号：Java3y。公众号内有 200 多篇原创技术文章、海量视频资源、精美脑图，不妨来关注一下！
觉得我的文章写得不错，不妨点一下赞！
