基于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

<resultMap type="UserInfo" id="userMap">
		<id column="id" property="id"/>
		<result column="user_id" property="userId"/>
		<result column="user_name" property="userName"/>
		<result column="password" property="password"/>
		<result column="register_time" property="registerTime"/>
		<result column="state" property="state"/>
resultMap>
<update id="updateUserInfoById" parameterType="UserInfo">
		update user
		<set>
			<if test="userId != null and userId != ''">
				user_id = #{userId},
			if>
			<if test="userName != null and userName != ''">
				user_name = #{userName},
			if>
			<if test="password != null and password != ''">
				password = #{password},
			if>
			<if test="registerTime != null and registerTime != ''">
				register_time = #{registerTime},
			if>
			<if test="state != null">
				state = #{state},
			if>
		set>
		where id = #{id}
update>

<select id="findUserInfoById" parameterType="Integer" resultMap="userMap">
		select * from user where id = #{id}
select>

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));
							});

				});