基于SSM+layui实现编辑用户信息功能

使用Ajax请求，将用户详情信息显示在前端界面，并通过update方法修改数据库中的值

一、实现效果

二、数据准备

三、代码编写 1、bean层—UserInfo.java

@AllArgsConstructor
@NoArgsConstructor
@Data
public class UserInfo implements Serializable{
	
	private static final long serialVersionUID = -6943242013517012358L;
	private Integer id;
	private String userId;
	private String userName;
	private String password;
	@JsonFormat(timezone = "GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
	private Date registerTime;
	private Boolean state;
}

2、mapper层—UserInfoMapper.java UserInfoMapper.xml UserInfoMapper.java

public interface UserInfoMapper {
    
    public Integer updateUserInfoById(UserInfo userInfo);
	
	public UserInfo findUserInfoById(int id);
}

UserInfoMapper.xml

		
		
		
		
		
		


		update user
		
			
				user_id = #{userId},
			
			
				user_name = #{userName},
			
			
				password = #{password},
			
			
				register_time = #{registerTime},
			
			
				state = #{state},
			
		
		where id = #{id}



		select * from user where id = #{id}

3、service层—UserInfoService.java UserInfoServiceImpl.java UserInfoService.java

public interface UserInfoService {
    
	public Integer updateUserInfoById(UserInfo userInfo);
	
	public UserInfo findUserInfoById(int id);
}

UserInfoServiceImpl.java

@Transactional
@Service
public class UserInfoServiceImpl implements UserInfoService{
	
	@Autowired
	private UserInfoMapper userInfoMapper;
    
    @Override
	public Integer updateUserInfoById(UserInfo userInfo) {
		return userInfoMapper.updateUserInfoById(userInfo);
	}

	@Override
	public UserInfo findUserInfoById(int id) {
		return userInfoMapper.findUserInfoById(id);
	}
}

4、controller层—UserInfoController.java

@Controller
public class UserInfoController {

	@Autowired
	private UserInfoService userInfoService;
    
	@RequestMapping("/updateUserInfoById")
	@ResponseBody
	public Integer updateUserInfoById(@RequestBody UserInfo userInfo) {
		int result = userInfoService.updateUserInfoById(userInfo);
		return result;
	}
}

5、edit_user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>















	

		
			用户ID
			
				
			
		

		
			用户名
			
				
			
		

		
			密码
			
				
			
			请务必填写密码
		

		
			确认密码
			
				
			
			请务必填写密码
		

		
			状态
			
				
				
			
		

		
			保存
		
	


	
	
	
	
	

6、jquery.user.js

//在页面加载时自动执行$(function())方法
$(function() {
	var id = getUrlParam('id');
	console.log(id);
	if (id!=null&&id>0) {
		$.post('editUserInfo',{id:id},function(userInfo,status){
			if (status='success') {
				var form = layui.form;
				form.val('frmEditUser',{
					'userId':userInfo.userId,
					'userName':userInfo.userName,
					'password':userInfo.password,
					'repassword':userInfo.password,
					'state':userInfo.state,
					'id':userInfo.id
				});
				if (userInfo.state==true) {
					$('input:radio:first').attr('checked','true');
				}else{
					$('input:radio:last').attr('checked','true');
				}
				form.render('radio');
			}
		});
	}
});

layui.use(
				[ 'form', 'layedit', 'laydate' ],
				function() {
					var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;

					// 日期
					laydate.render({
						elem : '#date'
					});
					laydate.render({
						elem : '#date1'
					});

					// 创建一个编辑器
					var editIndex = layedit.build('LAY_demo_editor');

					// 自定义验证规则
					form.verify({
						code : function(value) {
							if (value.length < 4) {
								return '登录名至少得4个字符啊';
							}
						},
						pass : [ /^[S]{3,8}$/, '密码必须6到12位，且不能出现空格' ],
						content : function(value) {
							layedit.sync(editIndex);
						}
					});

					// 监听指定开关
					form.on('switch(switchTest)', function(data) {
						layer.msg('开关checked：'
								+ (this.checked ? 'true' : 'false'), {
							offset : '6px'
						});
						layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF',
								data.othis)
					});

					// 监听保存按钮
					form.on('submit(save)', function(data) {
						if (data.field.password != data.field.repassword) {
							layer.alert('两次输入密码不一致'), {
								title : '警告'
							}
							return false;
						} else {
							//需要传递JSON数据，使用$.ajax，不使用$.post
							var id = getUrlParam('id');
							data.field.id=id;
							if (id==null) {
								//id为空，新增操作
							}else{
								//id不为空，编辑操作
								var jsonUser = JSON.stringify(data.field);
								console.log(jsonUser);
								$.ajax({
									type:'post',
									url:'updateUserInfoById',
									data:jsonUser,
									contentType:'application/json;charset=UTF-8',
									dataType:'json',
									complete:function(XMLHttpRequest,status){
										console.log(status);
									},
									success:function(msg,status){
										console.log(status);
										if (msg=='1') {
											window.parent.location.reload();
										}
										layer.msg(msg);
									},
									error:function(data){
										console.log('error:'+data);
									}
								});
								//必须添加
								return false;
							}
							
						}

					});


					// 表单取值
					layui.$('#LAY-component-form-getval').on('click',
							function() {
								var data = form.val('example');
								alert(JSON.stringify(data));
							});

				});