利用ssm框架实现用户登录操作_使用SSM框架，完成用户登录和增删改查
本Demo相关知识点：
1、后台使用SSM框架完成前台响应
2、前台展现使用BootStrap，主要使用其table和和模态框Model
3、使用Ajax完成增删改查功能
4.JS动态构建表格
Demo 完成后界面如下：
下面开始正式构建Demo
一、用户登录
前端JSP页面主要代码
用户名
密码
记住密码
登录
后台Controller
@ResourceprivateUserService userService;//用户登录验证
@RequestMapping(value = "/login", method =RequestMethod.POST)publicString login(HttpServletRequest request, Model model){
String username= request.getParameter("username");
String password= request.getParameter("password");
Boolean result=checkUserLogin(username,password);if(result){return "userList";
}else{
model.addAttribute("msg", "用户名或密码不正确，请重新登录");return "forward:/login.jsp";
}
}public booleancheckUserLogin(String username,String password){
User user=userService.getUserByName(username);if (user == null || "".equals(user)){return false;
}if(user.getUserPwd().equals(password)){return true;
}else{return false;
}
}
当登录成功时，则跳转到view下的userList.jsp主页面，登录失败时则提示
登录时，只是进行了简单的账号密码验证，没有进行复杂的验证，还有记住密码功能尚未完成
二、在登录成功后开始构建主界面
在前期完成主界面时，主要是使用Bootstrap表格，主要是html，此处由于篇幅原因，不细说，Demo最后会给出listuser.jsp完整代码
三、完成界面上查询按钮的功能
此处根据ID查询用户，并展示在下面的表体里，此处首先需要完成三件事，一、编写查询的JS方法。二、编写查询的Controller方法。三、根据返回的对象动态构建表体以展示出来
3.1 编写根据用户ID查询的JS方法
//查询单个用户
$("#userQueryBtn").click(function() {var id = $("#userID").val();
doQuery(id);
})//查询单个用户调用的方法
functiondoQuery(id) {
$.ajax({
type:"POST",
url:"queryUser/"+id,
dataType:"json",
success:function(data) {if (data.user == null){//当查询的用户不存在时，清空表格上面上次查询的结果
$("#user_table_tbody").empty();
alert(data.queryinfo);
}else{//清空表格
$("#user_table_tbody").empty();
//动态构建表体
show_user_table(data.user);
console.log(data.user);
}
}
});
}
3.2 编写查询的Controller方法
因为需要根据其返回结果构建表体，所以Controller方法需要返回集合或对象
//用户查询,(之前没有添加@ResponseBody，导致其老是返回queryUser.jsp，从而找不到页面而报错)//根据用户ID查找
@ResponseBody
@RequestMapping(value= "/queryUser/{id}")publicMap queryUser(@PathVariable String id){
System.out.println("进入query方法");
System.out.println(id);
Map map = new HashMap<>();if (id == null || "".equals(id)){
map.put("queryinfo","请输入用户ID");
}else{
User user=userService.getUserById(Integer.valueOf(id));if (user != null){
map.put("user",user);
}else{
map.put("queryinfo","该用户不存在");
}
}returnmap;
}
3.3 根据返回的对象动态构建表体
此处editBtn.attr("user-edit-id",result.id); 和 delBtn.attr("user-del-id",result.id); 为编辑和删除按钮添加自定义属性，以便后面对其单个编辑和删除操作
//在table里呈现单条查询的结果
functionshow_user_table(result) {var useridTD = $("
").append(result.id);var usernameTD = $("").append(result.userName);var userphoneTD = $("").append(result.userPhone);var userpwdTD = $("").append(result.userPwd);var editBtn = $("").addClass("btn btn-primary btn-sm user-edit-btn").append("编辑");editBtn.attr("user-edit-id",result.id);var delBtn = $("").addClass("btn btn-danger btn-sm user-del-btn").append("删除");
delBtn.attr("user-del-id",result.id);var operate = $("
").append(editBtn).append(" ").append(delBtn);$("
").append(useridTD).append(usernameTD)
.append(userphoneTD)
.append(userpwdTD)
.append(operate)
.appendTo("#user_table_tbody");
}
四、完成显示所有用户按钮功能
显示所有用户和单个用户思路大概相同
4.1 编写查询所有用户Controller方法
//查询所有用户
@ResponseBody
@RequestMapping(value= "/queryAll",method =RequestMethod.POST)public ListqueryAllUser(){
System.out.println("进入queryAll方法");
List userList =userService.getAllUser();returnuserList;
}
4.2 编写查询所有用户的JS方法
//查询并显示所有用户
$("#allUserQueryBtn").click(function() {//首先清空表格残留数据
$("#user_table_tbody").empty();
queryAllUsers();
})//查询所有用户
functionqueryAllUsers() {
$.ajax({
type:"POST",
url:"queryAll",
dataType:"json",
success:function(data) {
console.log(data);//遍历data循环构建表体
$.each(data,function(index,item) {
show_user_table(item);
})
}
})
}
此处重点是使用
$.each(data,function(index,item) {
show_user_table(item);
})
遍历循环动态构建表体
五、完成新增用户功能
5.1 此处使用Bootstrap模态框功能
5.2 新增用户JS代码：
//点击新增弹出模态框
$("#userAddBtn").click(function() {
$("#userAddModal").modal('show');
})//为保存按钮绑定click
$("#userAddModalSaveBtn").click(function() {var formData = $("#userAddModalForm").serialize();
doAdd(formData);
})functiondoAdd(formData) {
$.ajax({
type:"POST",
url:"insertUser",
data: formData,
success:function(result) {//关闭模态框
$("#userAddModal").modal("hide");
alert(result.addinfo);
}
});
}
通过$("#userAddModalForm").serialize()将表单序列化后传到后台，其形式为查询字符串形式
5.3 新增用户后台Controller
//新增用户
@ResponseBody
@RequestMapping(value= "/insertUser")publicMap checkJosn(User user){
System.out.println(user);
Boolean result=userService.insertUser(user);
Map map = new HashMap<>();if(result){
map.put("addinfo","添加成功");returnmap;
}else{
map.put("addinfo","添加失败");returnmap;
}
}
5.4 新增用户界面
六、完成对单个用户的删除功能
6.1 根据id删除单个用户前台JS
//删除单个用户
functiondoDelete(id) {
$.ajax({
type:"DELETE",
url:"delUser/"+id,
success:function(data) {
console.log(data);
}
})
}//为删除按钮绑定事件
$(document).on("click",".user-del-btn",function() {if (confirm("确定删除该用户")) {var id = $(this).attr("user-del-id");
console.log(id);
doDelete(id);//下面两行是删除用户后刷新表体数据
$("#user_table_tbody").empty();
queryAllUsers();
}
})
由于JS在绑定click事件时，删除按钮还没有创建，所有不能用 $(".user-del-btn").click(function() {})方法，只能用on()方法，对应动态创建的按钮需要绑定事件的，一般用on()方法。
var id = $(this).attr("user-del-id"); 是取出当前用户的自定义属性user-del-id作为其ID，因为前面在展现用户时，使用了delBtn.attr("user-del-id",result.id); 为该删除按钮绑定里自定义属性
6.2 后台单个用户删除的Controller方法
//根据ID删除用户
@ResponseBody
@RequestMapping(value= "/delUser/{id}",method =RequestMethod.DELETE)public booleandelUserById(@PathVariable String id){returnuserService.delUserByID(id);
}
后台使用Restful风格接受用户id与DELETE方法
七、完成主界面上“编辑”按钮修改用户功能
在点击编辑时，使用了Bootstrap的模态框，首先需要将当前用户查询出来赋值给模态框，然后再执行修改
7.1 前台JS
//为编辑用户按钮绑定事件
$(document).on("click",".user-edit-btn",function() {var id = $(this).attr("user-edit-id");
console.log(id);
doQueryByID(id);//显示修改模态框
$("#userModifyModal").modal('show');
})//为修改的确定按钮绑定事件，由于作用与此处的修改按钮是动态创建的，所以不能使用这方法/*$("#userModifyModalSaveBtn").click(function () {
var formData = $("#userModifyModalForm").serialize();
doUpdate(formData);
})*/$(document).on("click","#userModifyModalSaveBtn",function() {var formData = $("#userModifyModalForm").serialize();
doUpdate(formData);
})//根据ID查询到user并赋值给模态框
functiondoQueryByID(id) {
$.ajax({
type:"POST",
url:"queryUser/"+id,
dataType:"json",
success:function(data) {if (data.user != null){//赋值
$("#userModifyModal_id").val(data.user.id);
$("#userModifyModal_userName").val(data.user.userName);
$("#userModifyModal_userPhone").val(data.user.userPhone);
$("#userModifyModal_userPwd").val(data.user.userPwd);
}
}
});
}//修改用户
functiondoUpdate(formData) {
$.ajax({
type:"POST",
url:"updateUser",
data: formData,
success:function(result) {//关闭模态框
$("#userModifyModal").modal("hide");if(result){//下面两行是删除用户后刷新表体数据
$("#user_table_tbody").empty();
queryAllUsers();
}else{
alert("修改失败");
}
}
});
}
7.2 后台更新用户方法
//更新用户
@ResponseBody
@RequestMapping(value= "/updateUser")public booleanupdateUser(User user){
System.out.println(user);
Boolean result=userService.updateUser(user);returnresult;
}
此处如果将doUpdate()方法里的ajax请求方法改为PUT，后台同样添加了method = RequestMethod.PUT，此处虽然配置了hiddenHttpMethodFilter，但是调试的时候发现前台发送的值正常，后台user一直是null，只有将ajax请求方法改为POST，后台不加method才正常。此处如果想使用Restful风格的PUT时使用，需要注意以下几个方面：
/**发送PUT和DELECT请求时需要执行
* 1、在Web.xml里配置HiddenHttpMethodFilter
* 2、需要发送POST请求
* 3、需要在发送POST请求时携带一个name="_method"的隐藏域，值为DELECT或PUT
* **/
表单格式比如：
测试Restful的PUT即更新操作
7.3 更新用户界面
将ID设置为readyonly，防止用户修改而报错
至此，该Demo的用户登录和增删改查的基本功能都实现了，在描述时，可能只顾着堆代码了，文字描述很欠缺，见谅。另外页面上根据用户名查询和批量删除按钮功能尚未实现。最后附上主界面listuser.jsp完整代码
listuser.jsp
userListbindEvent();//跳转到该页面时就发送ajax请求显示所有用户
queryAllUsers();//bindBtnDel();
});functionbindEvent() {//点击新增弹出模态框
$("#userAddBtn").click(function() {
$("#userAddModal").modal('show');
})//为保存按钮绑定click
$("#userAddModalSaveBtn").click(function() {var formData = $("#userAddModalForm").serialize();
doAdd(formData);
})//查询单个用户
$("#userQueryBtn").click(function() {var id = $("#userID").val();
doQuery(id);
})//查询并显示所有用户
$("#allUserQueryBtn").click(function() {//首先清空表格残留数据
$("#user_table_tbody").empty();
queryAllUsers();
})
}functiondoAdd(formData) {
$.ajax({
type:"POST",
url:"insertUser",
data: formData,
success:function(result) {//关闭模态框
$("#userAddModal").modal("hide");
alert(result.addinfo);
}
});
}//查询单个用户调用的方法
functiondoQuery(id) {
$.ajax({
type:"POST",
url:"queryUser/"+id,
dataType:"json",
success:function(data) {if (data.user == null){//当查询的用户不存在时，清空表格上面上次查询的结果
$("#user_table_tbody").empty();
alert(data.queryinfo);
}else{//清空表格
$("#user_table_tbody").empty();
show_user_table(data.user);
console.log(data.user);
}
}
});
}//查询所有用户
functionqueryAllUsers() {
$.ajax({
type:"POST",
url:"queryAll",
dataType:"json",
success:function(data) {
console.log(data);//遍历data循环构建表体
$.each(data,function(index,item) {
show_user_table(item);
})
}
})
}//在table里呈现单条查询的结果
functionshow_user_table(result) {var useridTD = $("
").append(result.id);var usernameTD = $("").append(result.userName);var userphoneTD = $("").append(result.userPhone);var userpwdTD = $("").append(result.userPwd);var editBtn = $("").addClass("btn btn-primary btn-sm user-edit-btn").append("编辑");editBtn.attr("user-edit-id",result.id);var delBtn = $("").addClass("btn btn-danger btn-sm user-del-btn").append("删除");
delBtn.attr("user-del-id",result.id);var operate = $("
").append(editBtn).append(" ").append(delBtn);$("
").append(useridTD).append(usernameTD)
.append(userphoneTD)
.append(userpwdTD)
.append(operate)
.appendTo("#user_table_tbody");
}//删除单个用户
functiondoDelete(id) {
$.ajax({
type:"DELETE",
url:"delUser/"+id,
success:function(data) {
console.log(data);
}
})
}//为删除按钮绑定事件
$(document).on("click",".user-del-btn",function() {if (confirm("确定删除该用户")) {var id = $(this).attr("user-del-id");
console.log(id);
doDelete(id);//下面两行是删除用户后刷新表体数据
$("#user_table_tbody").empty();
queryAllUsers();
}
})//为编辑用户按钮绑定事件
$(document).on("click",".user-edit-btn",function() {var id = $(this).attr("user-edit-id");
console.log(id);
doQueryByID(id);//显示修改模态框
$("#userModifyModal").modal('show');
})//为修改的确定按钮绑定事件，由于作用与此处的修改按钮是动态创建的，所以不能使用这方法/*$("#userModifyModalSaveBtn").click(function () {
var formData = $("#userModifyModalForm").serialize();
doUpdate(formData);
})*/$(document).on("click","#userModifyModalSaveBtn",function() {var formData = $("#userModifyModalForm").serialize();
doUpdate(formData);
})//根据ID查询到user并赋值给模态框
functiondoQueryByID(id) {
$.ajax({
type:"POST",
url:"queryUser/"+id,
dataType:"json",
success:function(data) {if (data.user != null){//赋值
$("#userModifyModal_id").val(data.user.id);
$("#userModifyModal_userName").val(data.user.userName);
$("#userModifyModal_userPhone").val(data.user.userPhone);
$("#userModifyModal_userPwd").val(data.user.userPwd);
}
}
});
}//修改用户
functiondoUpdate(formData) {
$.ajax({
type:"POST",
url:"updateUser",
data: formData,
success:function(result) {//关闭模态框
$("#userModifyModal").modal("hide");if(result){//下面两行是删除用户后刷新表体数据
$("#user_table_tbody").empty();
queryAllUsers();
}else{
alert("修改失败");
}
}
});
}
UserManager
查询
显示所有用户
增加
批量删除
用户IDuserNameuserPhoneuserPwd操作
参考文献 https://www.cnblogs.com/gode/p/8194260.html