*springboot项目介绍
-
实现一个后台管理系统,完成用户信息的统计*
-
工具技术：spring boot+mybatisplus+thymeleaf+redis；
-
spring boot可以简化开发流程，直接省去服务器的部署和视图解析器的配置，最大的优势实现很多的工具的自动化配置（里面集成大量开发需要的功能，支持自定义拓展）
mybatis-pluss可以很轻易的完成增删改查功能，而不要自己写SQL语句（对于复杂的连表查询可能无法支持，需要自己拓展sql）；在大型项目开发可以结合注解开发实现数据库的操作public City getById(Long id); @Insert("insert into city(`name`,`state`,`country`) values(#{name},#{state},#{country})") @Options(useGeneratedKeys = true,keyProperty = "id") public void insert(City city); //2 mybatisplus @Mapper public interface UserMapper extends BaseMapper<User> { } ``` -
thymeleaf是一个简要轻量级的前端框架，可以实现前端html页面和后端接口的绑定（可以自动识别，需要添加其命名空间）
java xmlns:th="http://www.thymeleaf.org" -
redis是一个轻量级的非关系型缓存数据库，一般项目中结合mysql使用可以是数据库的使用达到最优。 使用前需要进行配置（官方推荐linux系统，在windows中需要下载特定的redis包）
增删改查CURD
1.增加用户
1）前端+后端代码奉献
//1.添加页面
@GetMapping("/toAdd")
public String toAdd(){
return "table/add";
}
@PostMapping("/user/add")
public String addUser(User user){
System.out.println(user);
userService.save(user);
return "redirect:/dynamic_table"; //重定向请求 携带参数
}
<form method="post" th:action="@{/user/add}">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="瑶瑶">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="leejianlove@163.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input type="radio" class="form-control" name="gender" placeholder="男" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-control" name="gender" placeholder="男" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="birth" class="form-control">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-success">Submit(添加)</button>
</form>
2）分析：添加一个用户：主要有以下几点:1 主页main中点击添加按钮---->走toAdd请求跳转add.html页面；填写表单form项---->点击提交走**/user/add**请求，后端执行保存save方法完成添加。
2.修改用户
1）修改和增加用户类似，也是对user对象的操作。在add.html中修改form表单，并且改变一些逻辑。
<form method="post" th:action="@{/user/update}">
<input type="hidden" name="id" th:value="${users.id}">
<div class="form-group">
<label for="name">Name</label>
<input th:text="${users.id}" type="text" class="form-control" id="name" name="name" placeholder="瑶瑶">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input th:value="${users.password}"type="password" class="form-control" name="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label>Email address</label>
<input th:value="${users.email}" type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="leejianlove@163.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input th:checked="${users.gender==1}" type="radio" class="form-control" name="gender" placeholder="男" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input th:checked="${users.gender==0}" type="radio" class="form-control" name="gender" placeholder="男" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>Birth</label>
<input th:value="${users.birth}" type="text" name="birth" class="form-control">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-success">Submit(修改)</button>
</form>
//2：去修改页面
@GetMapping("/user/toUpdate/{id}")
public String toUpdate(@PathVariable("id") int id,
Model model){
//可能需要查数据传给前端:这里没有需要转换的数据 故不查
User user = userService.getById(id);
model.addAttribute("users",user); //前端的users值
//去页面
return "table/update";
}
@PostMapping("/user/update")
public String updateUser(User user,Model model){
boolean updateById = userService.updateById(user);
model.addAttribute("idCount",updateById);
return "redirect:/dynamic_table"; //重定向请求 携带参数
}
2）分析与注释：前端表单的几个重要属性：form标签的action请求路径、method（a标签走的get请求，form表单走post请求）；input标签的name属性（决定了是否提交请求）
3.删除用户
删除一个用户是最简单的操作，只要在用户列表主页中引入标签按钮，删除后则执行remove方法，最终在返回用户list主页。
<td>
<a th:href="@{/user/delete/{id}(id=${user.id},pn=${users.current})}" class="btn btn-danger btn-sm" type="button">删除</a>
</td>
4.查询用户
所有的操作都在此基础主页中操作。该页面可以展示出所有用户的信息表格，外加删除、修改、添加按钮，对应不同的操作，且每次操作完都应该返回更新后的主页。
1）查询代码
@GetMapping("/dynamic_table")
public String dynamic_table(@RequestParam(value="pn",defaultValue = "1") Integer pn, Model model){
//从数据库中查出user表中的用户进行展示
//构造分页参数
Page<User> page = new Page<>(pn, 2);
//调用page进行分页
Page<User> userPage = userService.page(page, null);
model.addAttribute("users",userPage); //前端的users值
return "table/dynamic_table";
}
<section class="panel">
<header class="panel-heading">
Dynamic Table
<h2><a class="btn btn-sm btn-success" th:href="@{/toAdd}">添加</a></h2>
<span class="tools pull-right">
<a href="javascript:;" class="fa fa-chevron-down"></a>
<a href="javascript:;" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<div class="adv-table">
<table class="display table table-bordered table-striped" id="dynamic-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>email</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="user: ${users.records}">
<td th:text="${user.id}"></td>
<td>[[${user.name}]]</td>
<td th:text="${user.password}">Win 95+</td>
<td th:text="${user.gender==0?'女':'男'}">Win 95+</td>
<td th:text="${user.email}">4</td>
<td th:text="${#dates.format(user.getBirth(),'yyyy-MM-dd HH:mm:ss')}">Win 95+</td>
<td>
<a th:href="@{/user/delete/{id}(id=${user.id},pn=${users.current})}" class="btn btn-danger btn-sm" type="button">删除</a>
</td>
<td>
<a th:href="@{/user/toUpdate/{id}(id=${user.id})}" class="btn btn-primary btn-sm" type="button">修改</a>
</td>
</tr>
</tfoot>
</table>
<div class="row-fluid">
<div class="span6">
<div class="dataTables_info" id="dynamic-table_info">
当前第[[${users.current}]]页 总计 [[${users.pages}]]页 共[[${users.total}]]条记录
</div>
</div>
<div class="span6">
<div class="dataTables_paginate paging_bootstrap pagination">
<ul>
<li class="prev disabled"><a href="#">← 前一页</a></li>
<li th:class="${num == users.current?'active':''}" th:each="num:${#numbers.sequence(1,users.pages)}" >
<a th:href="@{/dynamic_table(pn=${num})}">[[${num}]]</a>
</li>
<li class="next disabled"><a href="#">下一页 → </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
2）其中table/dynamic_table即所谓的查询主页，所选择的方法是mybatisplus中自带的分页显示对象，可以通过构造分页参数后在前端通过表格的形式显示数据。
5.结果展示
6.小结
1）前端的书写很难，一般后端开发人员中是需要模板引用的，推荐***https://www.bootcss.com/***官网，框架的学习主流是vue最多。但在基础学习阶段也还是需要了解jsp在ssm中的广泛应用。Thymeleaf的应用也可以了解，根据官网教程选择学习（列如实现数据的遍历foreach）。
2）在后端的学习中要学会总结。组件很多，要学会看官方文档学习。随着物联网的快速发展，一套有一套的开发框架、微服务的解决办法不断推出，说明后端是活到老学到老，时刻注意与时俱进。
觉得本文不错，可以打赏一波。想要源码以及各种开发工具沟通的小伙伴私信都可
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
