利用ssm框架实现用户登录操作_使用SSM框架，完成用户登录和增删改查

本Demo相关知识点：

1、后台使用SSM框架完成前台响应

2、前台展现使用BootStrap，主要使用其table和和模态框Model

3、使用Ajax完成增删改查功能

4.JS动态构建表格

Demo 完成后界面如下：

下面开始正式构建Demo

一、用户登录

前端JSP页面主要代码

用户名

密码

记住密码

登录

${msg}

后台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