使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）(springboot ci)

使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）

推荐整理分享使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）(springboot ci)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:springboot ci,springbootssm,springboot .do,springboot ci,springboot ci,springboot用法,springboot ci,springboot ci,内容如对您有帮助，希望把文章链接给更多的朋友！

不好意思让大家久等啦，最近也是因为学期末了，事情多了一点，所以更新的比较慢，请大家谅解下~

好了话不多说，进入今天的教程环节

本次案例一共两篇文章教学：

（第一篇）：数据表设计，前端框架引入和编写前端页面，搭建基本的springboot项目，引入前端到springboot项目中，在浏览器显示

（第二篇）：后端代码的设计，这部分逻辑涉及的比较多，所以单独放一篇出来讲，代码从0手敲讲解，保证你能学会，完成增删改查的功能

各大技术基础教学、实战开发教学（最新更新时间2021-12-11）

效果演示目录

前言

项目结构介绍

bean（数据层）

repository（数据访问层）

service（业务层接口）

serviceImpl（业务层实现）

controller（控制层）

页面加载显示数据

IndexController（页面加载显示所有用户）

前端修改

运行结果

查询功能模块

Ajax异步请求局部刷新

UserController处理查询请求

运行结果

删除功能模块

修改前端

UserController处理删除请求

运行结果

添加功能模块

JS和Ajax部分

UserController处理添加请求

修改功能模块

修改前端

JS逻辑处理

UserController处理修改请求

总结

Gitee开源项目下载地址（所以项目都在这里）

各大技术基础教学、实战项目开发教学

---

前言

我们在上一篇中呢已经简单的搭建了一个前端页面，有基础的增删改查按钮

同时呢也创建了一个SpringBoot项目，也做了一些初始配置，并且已经成功的将项目运行了起来，那么，我们今天就把后端完善，实现基本的增删改查功能

项目结构介绍

项目的整体结构目录如下

学过SSM的同学对这个目录结构是不是非常的熟悉，我们大致介绍一下每个目录的作用

bean数据层（存放数据类）config存放一些基本配置文件controller控制层（处理客户端的请求）repository相当于DAO层（数据访问层，和数据库打交道）service业务层的接口类（定义接口方法）serviceImpl业务层的实现类（处理逻辑）

好了，整体项目结构以及每个目录的作用已经介绍完毕，接下来我们就开始设计吧~

bean（数据层）

我们在bean包下新建一个User类，添加两个注解

这里的@Entity注解里面为什么要加上name这个属性值呢，因为我们在上一篇中创建表的时候，保存表的表名为 t_user ，不知道大伙还记得没

如果不加上name这个属性，会默认类名小写（user）去识别数据库中的表，这时候就会对应不上，所以需要加上name属性与t_user表绑定

@Data注解会自动生成set,get,toString等方法

@GeneratedValue注解设置主键id为自增长，不然和数据库不一致会报错哦~

@Entity(name = "t_user")@Datapublic class User { @Id @GeneratedValue(strategy= GenerationType.IDENTITY) private Integer id; private String username; private String nickname; private String password;}repository（数据访问层）

在repository包下新建一个UserRepository接口类（注意是接口哦！）

这里只需要定义接口类就行了，我们暂时还用不到自定义sql语句，所以其他不用写

public interface UserRepository extends JpaRepository<User, Integer> {}service（业务层接口）

在service包下新建一个UserService接口类（注意是接口哦！）

定义五个方法（增删改查），其中查询有两个方法，一个是页面加载要显示所有用户信息的，一个是通过搜索框搜索的模糊查询

public interface UserService { void insertUser(User user);// 添加用户 void deleteUser(Integer uid);// 删除用户 void updateUser(User user);// 修改用户 List<User> selectAllUser();// 查询所有用户 List<User> selectLike(String search);// 模糊查询}serviceImpl（业务层实现）

在serviceImpl包下新建一个UserServiceImpl类，实现UserService接口

前面四个基本的增删改查就不多说啦~大伙应该都知道

主要是第五个selectLike（重点！原创）这个方法，大伙可以仔细研究一下我的这个模糊查询设计模式，很有帮助的哦~ 这里不多介绍了，可以自己仔细学一学

@Servicepublic class UserServiceImpl implements UserService { @Autowired private UserRepository userRepository; @Override public void insertUser(User user) { userRepository.save(user); } @Override public void deleteUser(Integer uid) { userRepository.deleteById(uid); } @Override public void updateUser(User user) { userRepository.saveAndFlush(user); } @Override public List<User> selectAllUser() { return userRepository.findAll(); } /** * 查询优先级： * 1.先查询是否为整型，为整型则通过ID主键查询，返回结果，不为整型则模糊查询其他字段 * 2.模糊查询字段，忽略密码的模糊查询，对用户名和昵称进行模糊查询，返回结果 * @param search 查询字段 * @return 查询列表集合 */ @Override public List<User> selectLike(String search) { List<User> list = new ArrayList<>();// 查询列表集合 User user = new User(); user.setUsername(search); user.setNickname(search); try { Integer uid = Integer.parseInt(search); Optional<User> optional = userRepository.findById(uid); if (!optional.isPresent()) { list = selectVague(user); } else { list.add(optional.get()); } }catch (NumberFormatException e) { // 查询字段不为整型数据，捕获异常 list = selectVague(user); } return list; } /** * 模糊查询 * @param user * @return */ private List<User> selectVague(User user) { List<User> list = null; ExampleMatcher matcher = ExampleMatcher.matchingAny() .withMatcher("username", ExampleMatcher.GenericPropertyMatchers.contains()) .withMatcher("nickname", ExampleMatcher.GenericPropertyMatchers.contains()) .withIgnoreCase("uid") .withIgnoreCase("password"); Example<User> example = Example.of(user, matcher); list = userRepository.findAll(example); return list; }}controller（控制层）

基本的一个整体流程已经搭建完毕，最后就是处理controller控制层的逻辑，我们首先完善一下上一篇中的IndexController的代码，让页面加载时候就能显示所有用户的数据、

在controller包下新建一个UserController类，设置改控制类处理所有/user下的请求

@RestController@RequestMapping(value = "/user")public class UserController {}页面加载显示数据IndexController（页面加载显示所有用户）@RestControllerpublic class IndexController { @Autowired private UserService userService; @RequestMapping(value = "/index") // 访问路径 public ModelAndView toIndex() { // 返回templates目录下index.html ModelAndView view = new ModelAndView("index"); // 查询所有的用户，添加到model视图里 view.addObject("user_list", userService.selectAllUser()); return view; }}前端修改

同时修改前端内容，通过th:each遍历user_list，分别获取编号，用户名，昵称，密码，通过th:text标签赋值text（对thymeleaf语法不熟悉的可以先去简单看一下基础语法哦~）

还有HTML顶部不要忘了添加支持thymeleaf语法哦~

运行结果

为了方便查看结果，预先在数据库插入几条数据

回到IDEA项目，点击右上角的debug模式启动项目，打开浏览器输入localhost:8081/index（路径根据自己情况来），就能看到数据已经成功显示上来啦

查询功能模块Ajax异步请求局部刷新

给搜索按钮和搜索框都设置一个ID，同时给数据显示部分的div设置th:fragment标签，获取后端的代码片段

 在index.js中添加代码，向后端发送异步请求

// 查询$('#findBtn').click(function () {// 发送GET异步请求$.ajax({type: 'GET',url: '/user/select', // 请求路径data: {'search': $('#search').val()},success: function (data) {// 局部刷新数据显示部分的div$('#userTable').html(data)},error: function (err) {console.log(err)alert('操作失败，请刷新重新尝试！')}})})UserController处理查询请求@RestController@RequestMapping(value = "/user")public class UserController { // 注入业务层对象 @Autowired private UserService userService; @GetMapping(value = "/select") public ModelAndView selectLike(String search) { // 返回th:fragment代码片段 ModelAndView view = new ModelAndView("index::userTable"); view.addObject("user_list", userService.selectLike(search)); return view; }}运行结果

重新启动，输入xiao，成功显示

 输入数值，优先查询编号

删除功能模块

刚刚的查询功能前端呢我是在index.js里面处理的，接下来删除模块我们换一个方法

首先，删除一条数据，我们是不是通关编号id进行删除呀，所以发送请求的时候是不是要传递编号数据

修改前端

在删除按钮中添加一个th:onclick标签，传递参数为当前行的编号

 接着在html底部添加如下代码

<script th:inline="javascript">function deleteBtn(id) { // 发送请求$.ajax({type: 'POST',url: '/user/delete',data: {'id': 'id' // 编号},success: function (data) { // 局部刷新$('#userTable').html(data)},error: function (err) {console.log(err)alert("操作失败，请刷新重新尝试！")}})}</script>UserController处理删除请求

添加新的方法

@PostMapping(value = "/delete")public ModelAndView deleteUser(Integer id) { // 通过编号删除用户 userService.deleteUser(id); ModelAndView view = new ModelAndView("index::userTable"); // 返回新的数据列表 view.addObject("user_list", userService.selectAllUser()); return view;}运行结果

点击删除第五条数据，成功删除了第五条数据并刷新表格 

添加功能模块JS和Ajax部分

通过JQuery对提交的表单进行一些非空检验，通过之后发出POST异步请求

在index.js添加下面代码

// 添加$('#addSubmitBtn').click(function () {var username = $('#addUserName').val()var nickname = $('#addNickname').val()var password = $("#addPassword").val()// 非空效验if (username.length == 0){alert("用户名不能为空")}else if(nickname.length == 0){alert("昵称不能为空")}else if (password.length == 0){alert("密码不能为空")}else {$.ajax({type: 'POST',url: '/user/insert',data: {'username': username, //用户名'nickname': nickname, //昵称'password': password //密码},success: function (data) {// 关闭modal框$('#modal-form-add').modal('hide')// 清空modal框里上一次的数据document.getElementById("addForm").reset()// 局部刷新$('#userTable').html(data)},error: function (err) {console.log(err)alert("操作失败，请刷新重新尝试！")}})}})UserController处理添加请求

添加新的方法

@PostMapping(value = "/insert")public ModelAndView insertUser(User user) { // 插入数据 userService.insertUser(user); // 回传代码片段 ModelAndView view = new ModelAndView("index::userTable"); view.addObject("user_list", userService.selectAllUser()); return view;}修改功能模块修改前端

当我们点击的修改的时候，弹出一个修改信息框，我们是不是要在信息框显示当前修改前的用户数据

这次我们使用th:onclick的方法快速绑定数据到弹出框，但是这次的数据有string字符串类型，之前的方法会报错，我们采用另一种新的方法

通过[[${ }]]方法传递字符串数据（那个报错小红点不用理，正常运行）

 接着在HTML底部的内联javascript里加上代码

// 点击修改按钮function updateBtn(id, username, nickname, password) {// 传递数据到弹出框$('#modal-form-update').modal('show');$('#updateUserId').val(id)$('#updateUsername').val(username)$('#updateNickname').val(nickname)$('#updatePassword').val(password)}

刷新浏览器，随便点击一个修改，成功显示数据上来了

同时给编号的input标签设置disabled属性，禁止修改

JS逻辑处理

在index.js添加如下代码

// 修改提交$('#updateSubmitBtn').click(function () {var id = $('#updateUserId').val()var username = $('#updateUsername').val()var nickname = $('#updateNickname').val()var password = $("#updatePassword").val() // 非空检验if (username.length ==0) {alert('用户名不能为空')}else if (nickname.length == 0) {alert('昵称不能为空')}else if (password.length == 0) {alert('密码不能为空')}else {$.ajax({type: 'POST',url: '/user/update',data: {'id': id, //编号'username': username, //用户名'nickname': nickname, //昵称'password': password //密码},success: function (data) {// 关闭modal框$('#modal-form-update').modal('hide')// 清空modal框里上一次的数据document.getElementById("updateForm").reset()// 局部刷新$('#userTable').html(data)},error: function (err) {console.log(err)alert('操作失败，请刷新重新尝试！')}})}})UserController处理修改请求@PostMapping(value = "update")public ModelAndView updateUser(User user) { userService.updateUser(user); ModelAndView view = new ModelAndView("index::userTable"); view.addObject("user_list", userService.selectAllUser()); return view;}总结

整体的一个项目呢已经做完了，增删改查的功能都有了

其实还有很多地方可以完善的，比如搜索框回车搜索、重复代码抽取成函数单独进行等等，这些有兴趣的小伙伴自己再去优化啦~ 或者私信我帮忙也行~

这里总结我再帮大家捋一捋整个流程

表的设计和创建搭建前端静态页面搭建后端bean数据层repository数据访问层service业务接口serviceImpl业务实现controller控制层优化前端（JS，Ajax）Gitee开源项目下载地址（所以项目都在这里）

SpringBoot项目教学合集: CSDN中的所有SpringBoot项目开源，持续更新新项目、新教学文章

各大技术基础教学、实战项目开发教学

各大技术基础教学、实战开发教学（最新更新时间2021-12-11）

没有Gitee账号可以后台CSDN私聊我获取项目源码，或者文章留言你的邮箱我也会发给你