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

心已赠人 2022-10-01 08:57 160阅读 0赞

## 前言 ##

> 只有光头才能变强。

> 文本已收录至我的GitHub仓库，欢迎Star：[github.com/ZhongFuChen…][github.com_ZhongFuChen]

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

*  [带你搭一个SpringBoot+SpringData JPA的Demo][SpringBoot_SpringData JPA_Demo]

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

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

## 一、搭建管理系统 ##

### 1.1. 搭建页面 ###

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

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

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

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

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

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

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

### 1.1.2 把数据塞到页面上 ###

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

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

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

<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)：

*  [v3.bootcss.com/getting-sta…][v3.bootcss.com_getting-sta]
 *  [www.bootcdn.cn/all/][www.bootcdn.cn_all]

> 乐于输出**干货**的Java技术公众号：Java3y。公众号内有200多篇**原创**技术文章、海量视频资源、精美脑图，不妨来**关注**一下！

觉得我的文章写得不错，不妨点一下**赞**！

转载于:https://juejin.im/post/5ca824676fb9a05e7207f494

[github.com_ZhongFuChen]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FZhongFuCheng3y%2F3y
[SpringBoot_SpringData JPA_Demo]: https://link.juejin.im?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI4Njg5MDA5NA%3D%3D%26amp%3Bmid%3D2247484997%26amp%3Bidx%3D1%26amp%3Bsn%3D96bf73ae24307aa800faeb71769d675c%26amp%3Bchksm%3Debd74744dca0ce525a24af4fd2bb3d975346a0c90c0f36af6ffc6f540f6462384cf678f74b6a%26amp%3Btoken%3D1833143431%26amp%3Blang%3Dzh_CN%23rd
[v3.bootcss.com_getting-sta]: https://link.juejin.im?target=https%3A%2F%2Fv3.bootcss.com%2Fgetting-started%2F%23template
[www.bootcdn.cn_all]: https://link.juejin.im?target=https%3A%2F%2Fwww.bootcdn.cn%2Fall%2F