1 需求
创建 User 类,包含 uesrid、username、usersex、userbirth 属性。
在用户管理页面中通过 Ajax 技术完成对用户数据载入、添加用户、更新用户、删除用户操作。
搭建环境
2 创建 User 类
public class User { private int userid; private String username; private String usersex; @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8") private Date userbirth; public int getUserid() { return userid; } public void setUserid(int userid) { this.userid = userid; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getUsersex() { return usersex; } public void setUsersex(String usersex) { this.usersex = usersex; } public Date getUserbirth() { return userbirth; } public void setUserbirth(Date userbirth) { this.userbirth = userbirth; } }
3 在页面中创建表格
<table align="center" width="60%" border="1"> <tr> <td>ID:</td> <td><input type="text" name="userid" id="userid"/></td> <td>姓名:</td> <td><input type="text" name="username" id="username"/></td> </tr> <tr> <td>性别:</td> <td><input type="text" name="usersex" id="usersex"/></td> <td>生日:</td> <td><input type="text" name="userbirth" id="userbirth"/></td> </tr> <tr align="center"> <td colspan="4"> <input type="button" value="添加用户" id="add" /> <input type="button" value="更新用户" id="update"/> </td> </tr> </table> <hr/> <table align="center" width="60%" bgcolor="" border="1" id="myTable"> <thead> <tr align="center"> <td>ID</td> <td>姓名</td> <td>性别</td> <td>生日</td> <td>操作</td> </tr> </thead> <tbody id="tBody"></tbody> </table>
4 运行效果