【极简版】SpringBoot+SpringData JPA 管理系统-白红宇

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

阅读量：6956 次

发布时间：2019-06-27

本文共 2503 字，大约阅读时间需要 8 分钟。

前言

只有光头才能变强。

文本已收录至我的GitHub仓库，欢迎Star：

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

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

ps:由于是简易版，我的目的是能够快速搭建，而不在于代码的规范性。(所以在后面你可能会看到很多丑陋的代码)

一、搭建管理系统

1.1. 搭建页面

在上一篇的最后，我们可以通过http://localhost:8887/user接口拿到我们User表所有的记录了。我们现在希望把记录塞到一个管理页面上(展示起来)。

作为一个后端，我HTML+CSS实在是丑陋，于是我就去找了一份BootStrap的模板。首先，我进到bootStrap的官网，找到基本模板这一块：

bootStrap

我们在里边可以看到挺多的模板的，这里选择一个控制台页面：

bootstrap example

于是，就把这份模板下载下来，在本地中运行起来试试看。官方给出的链接是下载整一份文档，我们找到想要的页面即可：

files

于是我们将这两份文件单独粘贴在我们的项目中，发现这HTML文件需要bootstrap.css、bootstrap.js、jquery 的依赖(原来用的是相对路径，其实我们就是看看相对路径的文件在我们这有没有，如果没有，那就是我们需要的)。这里我们在CDN中找找，导入链接就行了。

bootcdn

于是我们就将所缺的依赖替换成BootCDN的依赖，最重要的几个依赖如下：

如无意外的话，我们也能在项目中正常打开页面。

1.1.2 把数据塞到页面上

把数据塞到页面上，有两种方案：要么就后端返回json给前端进行解析，要么就使用模板引擎。而我为了便捷，是不想写JS代码的。所以，我使用freemarker这个模板引擎。

为什么这么多模板引擎，我选择这个？因为我只会这个！

在SpringBoot下使用freemarker也是非常简单，首先，我们需要加入pom文件依赖：


    
      
     
      org.springframework.boot
       
     
      spring-boot-starter-freemarker

随后，在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目录下：

templates

接下来将我们Controller得到的数据，塞到Model对象中：

/**     * 得到所有用户     */    @GetMapping(value = "/user", produces = {"application/json;charset=UTF-8"})    public String  getAllUser ( Model model) {        List
    
      allUser = userService.getAllUser();        model.addAttribute("users", allUser);        return "/index";    }

图片如下：

user code

在ftl文件中，我们只要判断数据是否存在，如果存在则在表格中遍历出数据就行了：

<#if users?? && (users?size > 0)>     <#list users as user>                ${user.userId}         ${user.userNickname}         ${user.userEmail}         ${user.actiState}         删除              
         <#else>       还没有任何用户

图片如下：

code image

删除的Controller代码如下：

/** * 根据ID删除某个用户 */@GetMapping(value = "/deleteUser", produces = {"application/json;charset=UTF-8"})public String  deleteUserById (String id,Model model) {  userService.deleteUserById(id);  return getAllUser(model);}

我们再找几张自己喜欢的图片，简单删除一些不必要模块，替换成我们想要的文字，就可以得到以下的效果了：

result iamge