【极简版】SpringBoot+SpringData JPA 管理系统

前言

只有光头才能变强。

文本已收录至个人GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

在上一篇中已经讲解了如何从零搭建一个SpringBoot+SpringData JPA的环境，测试接口的时候也成功获取获得数据了。

• 带你搭一个SpringBoot+SpringData JPA的Demo

个人目的是作一个十分简易的管理系统，这就得有页面，下面我继续来说讲我是怎么快速搭一个管理系统的。

ps:因为是简易版，个人目的是可以快速搭建，而不在于代码的规范性。(因此在后面你可能会看到不少丑陋的代码)

1、搭建管理系统

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多篇原创技术文章、海量视频资源、精美脑图，不妨来关注一下！

以为个人文章写得不错，不妨点一下赞！