springboot的restful风格的增删改查带页面小demo
面试的时候被要求写一个增删改查的demo,没有准备敲了好久。平时没有上传代码的习惯。后端的一下子就搞出来了，到了前端就卡住了。页面不想用JSP和thymeleaf这种模板引擎，想用ajax拼接html片段的生成页面。到了前端就有点搞不过来，还在继续摸索。最近算是把增删改查四个功能完成，写出来到时候。在网上一直找不到比较舒服的博客学习，只有后端没页面，有页面不是ajax这种，也么是ajax但是JS会失效的。写下这博客方便自己面试和后面需要学习springboot增删改查带页面的小demo的朋友。后续会把分页功能，图片上传下载和数据校验的功能加上慢慢完善。
构建springboot项目需要的依赖
系统架构图
实体类
@Data
public class User {
private Integer id;
private String username;
private Date birthday;
private String sex;
private String address;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
mapper层
@Mapper
public interface UserMapper {
//查询所有User
@Select("select * from user")
public List<User> findAll();
@Select("select * from user where id = #{id}")
//查询一个User
public User findUserById(Integer id);
@Update("update user set username = '${username}',birthday = #{birthday},sex = #{sex},address = #{address} where id = #{id}")
//修改User
public int updateUser(User user);
@Insert({"insert into user(username,birthday,sex,address) values (#{username},#{birthday},#{sex},#{address})"})
//添加一个User
public int addUser(User user);
//删除一个User
@Delete("delete from user where id = #{id}")
public int deleteUser(Integer id);
}
controller层
@RestController
public class UserController {
@Autowired
UserMapper userMapper;
/**
* 查询所有user
* @return
*/
@GetMapping("/user")
public List<User> findAll(){
return userMapper.findAll();
}
/**
* 根据id查询一个user
* @param id
* @return
*/
@GetMapping("/user/{id}")
public User findUserById(@PathVariable("id") Integer id){
return userMapper.findUserById(id);
}
/**
* 修改user
* @param id
* @param username
* @param birthday
* @param sex
* @param address
* @return
* @throws ParseException
*/
@PutMapping("/user")
public String update(@RequestParam("id") String id,
@RequestParam("username") String username,
@RequestParam("birthday") String birthday,
@RequestParam("sex") String sex,
@RequestParam("address") String address) throws ParseException {
User user = new User();
user.setId(Integer.parseInt(id));
user.setUsername(username);
//对日期进行格式转换
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
Date date = format.parse(birthday);
user.setBirthday(date);
user.setSex(sex);
user.setAddress(address);
return userMapper.updateUser(user) == 1 ? "success" : "failed";
}
/**
* 新增一个user
* @param username
* @param birthday
* @param sex
* @param address
* @return
*/
@PostMapping("/user")
public String insertUser(@RequestParam("username") String username,
@RequestParam("birthday") String birthday,
@RequestParam("sex") String sex,
@RequestParam("address") String address) throws ParseException {
User user = new User();
user.setUsername(username);
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
Date date = format.parse(birthday);
user.setBirthday(date);
user.setSex(sex);
user.setAddress(address);
return userMapper.addUser(user) == 1 ? "success":"failed";
}
/**
* 删除一个user
* @param id
* @return
*/
@DeleteMapping("/user/{id}")
public String deleteUser(@PathVariable("id") Integer id){
return userMapper.deleteUser(id) == 1 ? "success" : "failed";
}
}
首页，访问的时候localhost:8080/list.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bt/css/bootstrap.css">
<link rel="stylesheet" href="bt/css/bootstrap-theme.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bt/js/bootstrap.min.js"></script>
<script>
$(function () {
$.ajax({
url: "/user",
type: "get",
dataType:'json',
success:function (data) {
console.log(data);
for(var i=0; i<data.length;i++){
var text = "<tr>\n"
+ " <td>"+data[i].id+"</td>\n"
+ " <td>"+data[i].username+"</td>\n"
+ " <td>"+data[i].birthday+"</td>\n"
+ " <td>"+data[i].sex+"</td>\n"
+ " <td>"+data[i].address+"</td>\n"
+ " <td>" +
"<a class='btn btn-danger delete' deteleid="+data[i].id+">删除</a>\n"+
"<a class='btn btn-success' href='update.html?id="+data[i].id+"'>修改</a>"
+ " </td>\n"+
" </tr>"
var oby =$(".pool")
oby.append(text);
console.log(text);
}
}
})
})
$(document).on('click','.delete',function(){
var id =this.getAttribute('deteleid');
alert(id);
$.ajax({
url: "/user/" + id,
type: "delete",
success: function (result) {
if (result == "success") {
alert("删除成功");
location.href = "list.html";
} else {
alert("删除失败，服务器正在维护")
}
}
});
})
</script>
</head>
<body>
<div class="container">
<a class='btn btn-success' href="add.html">添加</a>
<table class="table table-hover" id="table">
<tr>
<td>ID</td>
<td>用户名</td>
<td>生日</td>
<td>性别</td>
<td>地址</td>
<td>操作</td>
</tr>
<tbody class="pool">
</tbody>
</table>
</div>
</body>
</html>
增加页面
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bt/css/bootstrap.css">
<link rel="stylesheet" href="bt/css/bootstrap-theme.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bt/js/bootstrap.min.js"></script>```
<script>
$(function () {
var sub_btn = $("#sub_btn");
sub_btn.click(function () {
var username = $(".username").val();
var birthday = $(".birthday").val();
var sex = $(".sex").val();
var address = $(".address").val();
$.ajax({
url: "/user",
type: "post",
data: {username: username, birthday: birthday, sex: sex, address: address},
success: function (result) {
if (result == "success") {
alert("添加成功");
location.href = "list.html";
} else {
alert("添加失败");
}
}
});
});
});
</script>
</head>
<body>
<div class="container" >
<h1>这是添加页面</h1>
<form>
<div class="form-group">
<label for="exampleInputName">姓名：</label>
<input type="text" class="username" class="form-control" id="exampleInputName" placeholder="姓名">
</div>
<div class="form-group">
<label for="exampleInputName">生日：</label>
<input type="date" class="birthday" name="birthday"/>
</div><div class="form-group">
<label for="exampleInputName">性别：</label>
<input type="radio" class="sex" name="sex" value="男"/>男
<input type="radio" class="sex" name="sex" value="女"/>女
</div>
<div class="form-group">
<label for="exampleInput">地址：</label>
<input type="text" class="address" class="form-control" id="exampleInput" placeholder="地址">
</div>
<input id="sub_btn" type="button" class="btn btn-success" value="提交">
</form>
</div>
</body>
</html>
修改页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>update</title>
<link rel="stylesheet" href="bt/css/bootstrap.css">
<link rel="stylesheet" href="bt/css/bootstrap-theme.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bt/js/bootstrap.min.js"></script>
<script>
$(function () {
var id = getUrlParam("id");
var url = "/user/"+id;
//先进行数据回显
var username = $(".username");
var birthday = $(".birthday");
var sex = $(".sex");
var address = $(".address");
$.ajax({
url:url,
type:"get",
success:function (result) {
username.attr("value",result.username);
birthday.attr("value",result.birthday.substring(0,10));
//checked
if(result.sex == "男"){
sex.eq(0).attr("checked",true);
}else {
sex.eq(1).attr("checked",true);
}
address.attr("value",result.address);
}
});
var update_btn = $("#update_btn");
update_btn.click(function () {
$.ajax({
url:"/user/",
type:"put",
data:{id:id,username:username.val(),birthday:birthday.val(),sex:sex.val(),address:address.val()},
success:function (result) {
if(result=="success"){
alert("修改成功");
location.href="list.html";
}else{
alert("修改失败");
}
}
});
})
});
function getUrlParam(name) {
//获取地址栏的参数
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null){
return r[2];
}else {
return null;
}
}
</script>
</head>
<body>
<div class="container" >
<h1>这是修改页面</h1>
<form>
<div class="form-group">
<label for="exampleInputName">姓名：</label>
<input type="text" class="username" class="form-control" id="exampleInputName" placeholder="姓名">
</div>
<div class="form-group">
<label for="exampleInputName">生日：</label>
<input type="date" class="birthday" name="birthday"/>
</div>
<div class="form-group">
<label for="exampleInputName">性别：</label>
<input type="radio" class="sex" name="sex" value="男"/>男
<input type="radio" class="sex" name="sex" value="女"/>女
</div>
<div class="form-group">
<label for="exampleInput">地址：</label>
<input type="text" class="address" class="form-control" id="exampleInput" placeholder="地址">
</div>
<input id="update_btn" type="button" class="btn btn-success" value="提交">
</form>
</div>
</body>
</html>
没用yml文件了，用了application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/springdb?characterEncoding=UTF-8&serverTimezone=UTC&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
数据库
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
`birthday` date NULL DEFAULT NULL,
`sex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`address` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
首页，访问的时候localhost:8080/list.html
添加页面
修改页面
本来应该用模态框帮增删改查的功能都放在一个页面，但是作为小demo分开写也可以。
到此项目就完成了。
记录还没有完善的地方
完成删除功能的时候，学习网上写的demo,在页面的时候，看到一种很简单的写法，执行的时候却没有效果。页面加载JS失效，用了另一个方式实现功能。但是还是想用网上那种，以前学的JS和jQuery忘了，等学会那种舒服的前端实现在回来贴代码。
版权声明：本文为weixin_40645275原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。