一、搭建管理系统
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 = "/comment", produces = {"application/json;charset=UTF-8"}) public String getAllComment (Model model) { List<Comment> allComment = commentService.getAllComment(); model.addAttribute("comments", allComment); return "/comment"; }
图片如下:代码有误以图片为准
在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文件夹中。
项目的目录结构如下：
