⭐ ⭐ ⭐ ⭐ ⭐ 博主信息⭐ ⭐ ⭐ ⭐ ⭐
博主名称:Yuan-Programmer
原力等级:5级
链接:https://bbs.csdn.net/topics/603957283
⭐ ⭐ ⭐ ⭐ ⭐ 点点五星⭐ ⭐ ⭐ ⭐ ⭐
我正在参加年度博客之星评选,请大家帮我投票打分,您的每一分都是对我的支持与鼓励。
不好意思让大家久等啦,最近也是因为学期末了,事情多了一点,所以更新的比较慢,请大家谅解下~
好了话不多说,进入今天的教程环节
本次案例一共两篇文章教学:
(第一篇):数据表设计,前端框架引入和编写前端页面,搭建基本的springboot项目,引入前端到springboot项目中,在浏览器显示
(第二篇):后端代码的设计,这部分逻辑涉及的比较多,所以单独放一篇出来讲,代码从0手敲讲解,保证你能学会,完成增删改查的功能
效果演示
目录
前言
我们在上一篇中呢已经简单的搭建了一个前端页面,有基础的增删改查按钮
同时呢也创建了一个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") @Data public 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(重点!原创)这个方法,大伙可以仔细研究一下我的这个模糊查询设计模式,很有帮助的哦~ 这里不多介绍了,可以自己仔细学一学
@Service public 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(页面加载显示所有用户)
@RestController public 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私聊我获取项目源码,或者文章留言你的邮箱我也会发给你