开发环境：eclipse+jdk1.7+tomcat7.0+mysql8.2+maven
技术框架： Spring+SpringMVC+Mybatis
总体大纲如下图所示：
1、实体类User.java
public class User implements Serializable{
private static final long serialVersionUID = -4688179531421717627L;private Integer id;
private String name;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", password=" + password + "]";
}
}
2、数据访问接口UserDao.java
public interface UserDao {
int insertObject(User user);
List<User> findUserList();
User findObjectById(String id);
}
3、业务逻辑类UserService.java
@Service
@Transactional(readOnly = true)
public class UserService {
@Autowired
private UserDao userDao;
public boolean insertObject(User user) {
boolean flag = false;
int result = userDao.insertObject(user);
if(result > 0){
return true;
}
return flag;
}
public List<User> findUserList() {
return userDao.findUserList();
}
public User findObjectById(String id) {
return userDao.findObjectById(id);
}
}
5、表示层UserController.java
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping(value = "/form")
public String form(User user){
return "userForm";
}
@RequestMapping(value = "/save")
@ResponseBody
public String save(User user){
boolean flag = userService.insertObject(user);
if(flag){
return "save success";
}
return "save fail";
}
@RequestMapping(value = "/list")
public String list(HttpServletRequest request,String message){
List<User> list = userService.findUserList();
request.setAttribute("message", message);
request.setAttribute("userlist", list);
return "userList";
}
}
前端展示的jsp
1.userForm.jsp
<%@ page pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<html>
<head>
<script type="text/javascript" src="../jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../jquery/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击保存/修改按钮
$('#btn-ok').click(doSaveOrUpdate);
});
function doSaveOrUpdate(){
var name = $("#name").val();
var password = $("#password").val();
var params = {"name" : name,"password":password};
var url = '../user/save.do';
//传json数据到后台
$.post(url,params,function(data){
location.href="../user/list.do?message="+data;})
}
</script>
</head>
<body style="font-size:30px;">
<h2>编辑用户</h2>
<form id = "editUserForm" onsubmit="return false" action="##" method="post">
<input type="text" name = "name" id = "name" placeholder="输入账号"><br>
<input type="password" name = "password" id = "password" placeholder="输入密码"><br>
<input type="button" value="添加" id="btn-ok">
</form>
</body>
</html>
2、列表userList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body style="font-size:30px;">
<span>${message }</span>
<h3>用户列表</h3>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<c:forEach items="${userlist }" var="user">
<tr>
<td>${user.id }</td>
<td>${user.name }</td>
<td>${user.password }</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>
这是我写的一个测试，以从前端传json数据，后台接受。有个小错误，前端传的json的key名要与后台实行类的属性相对应，不对应要不然会出错。就写到这，有写的不好的，请大家提出。