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

CntChen 发布于2019-08-19 11:34 / 2772人阅读

摘要：带你搭一个的我的目的是做一个十分简易的管理系统，这就得有页面，下面我继续来讲讲我是怎么快速搭一个管理系统的。由于是简易版，我的目的是能够快速搭建，而不在于代码的规范性。我们现在希望把记录塞到一个管理页面上展示起来。

前言

只有光头才能变强。

文本已收录至我的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的依赖，最重要的几个依赖如下：

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

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目录下：

接下来将我们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";
    }

图片如下：

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

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

图片如下：

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

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

云服务器 GPU云服务器极简版 SpringData 极简极简模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77467.html

带你搭一个SpringBoot+SpringData JPA的环境

摘要：一从零搭建环境本次我使用的是编辑器来搭建和环境首先，我们在新建项目的时候，选择，然后就行了。可以看出，本次的版本为。这是一个非常好用的插件，有了它我们可以不用写繁琐的方法。非常适合我们做一些简答的测试和小功能。前言只有光头才能变强。文本已收录至我的GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y 不知道大家对SpringB...

i_garfileo 2019-08-16 16:04 评论0 收藏0
SpringDataJPA入门就这么简单

摘要：一入门在上次学的时候，那时候的教程就已经涉及到了一点的知识了。入门只是中的一个子模块是一套标准接口，而是的实现底层默认实现是使用的首个接口就是，它是一个标记接口。这也导致了我出现这个错误的原因。一、SpringData入门在上次学SpringBoot的时候，那时候的教程就已经涉及到了一点SpringData JPA的知识了。当时还是第一次见，觉得也没什么大不了，就是封装了Hiber...

MasonEast 2019-08-15 14:51 评论0 收藏0
使用SpringData+JPA的@Query注解完成动态条件分页查询

摘要：正文公司使用的是现在流行的，数据库方面使用的是。这几天用的最多的就是用进行查询了，简单的查询很简单，网上查一查就有一堆方案，直到遇到分页查询的时候出了问题。写作原因之前在学校都是做前端，但是最后找了个Java后端的工作，框架什么的基本没用过，所以工作中遇到了很多问题，所以决定记录下来工作中遇到的问题，记录成长的点滴。正文公司使用的是现在流行的SpringBoot，数据库方面使用...

melody_lql 2019-08-16 18:36 评论0 收藏0
SpringBoot就是这么简单

摘要：热加载代表的是我们不需要重启服务器，就能够类检测得到，重新生成类的字节码文件无论是热部署或者是热加载都是基于类加载器来完成的。验证阶段字节码文件不会对造成危害准备阶段是会赋初始值，并不是程序中的值。一、SpringBoot入门今天在慕课网中看见了Spring Boot这么一个教程，这个Spring Boot作为JavaWeb的学习者肯定至少会听过，但我是不知道他是什么玩意。只是大...

whinc 2019-08-15 14:52 评论0 收藏0