基于SSM+layui实现用户注册新增功能

为什么要学习

已于 2022-06-29 11:02:28 修改

阅读量953

点赞数 1

分类专栏： ssm 文章标签： layui java 前端

于 2022-06-25 10:05:00 首次发布

本文链接：https://blog.csdn.net/m0_56053903/article/details/125455926

版权

ssm 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

注册新增原理：判断用户名与数据表中信息是否相同，相同则返回用户新增失败，反之新增成功

注册用户密码使用md5加密方式存储到数据库

一、实现效果

用户新增界面：

在这里插入图片描述

二、数据表—user

在这里插入图片描述

三、代码实现

1、bean层—UserInfo

@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 void insertUserInfo(UserInfo userInfo);
}

UserInfoMapper.xml

<insert id="insertUserInfo" parameterType="UserInfo">
		insert into user (user_id,user_name,password,register_time,state)
		values(#{userId},#{userName},#{password},#{registerTime},#{state})
</insert>

3、service层—UserInfoService.java UserInfoServiceImpl.java

UserInfoService.java

public interface UserInfoService {
    public void insertUserInfo(UserInfo userInfo);
    public String register(UserInfo userInfo);
}

UserInfoServiceImpl.java

@Transactional
@Service
public class UserInfoServiceImpl implements UserInfoService{
	
	@Autowired
	private UserInfoMapper userInfoMapper;
    
    @Override
	public void insertUserInfo(UserInfo userInfo) {
		userInfoMapper.insertUserInfo(userInfo);
	}
    
    @Override
	public String register(UserInfo userInfo) {
		UserInfo exitUser = userInfoMapper.findUserInfoByName(userInfo.getUserName());
		if (exitUser==null) {
			userInfoMapper.insertUserInfo(userInfo);
			return "新增成功";
		}else {
			return "新增错误：用户已存在";
		}
	}
}

4、controller层—UserInfoController.java

@Controller
public class UserInfoController {
    
    @Autowired
	private UserInfoService userInfoService;
    
    @RequestMapping("/register")
	public String register(Integer id,String userId,String userName,String password,
			Date registerTime,Boolean state,HttpSession session) {
		registerTime = new Date();
		UserInfo userInfo = new UserInfo(id,userId,userName,EncryptUtil.md5Crypt(password),registerTime,state);
		String msg = userInfoService.register(userInfo);
		if (msg.contains("成功")) {
			session.setAttribute("msg", msg);
			return "list_user";
		}else {
			return "register";
		}
	}
}

5、md5加密类—EncryptUtil.java

public class EncryptUtil {
	public final static String md5Crypt(String inputString) {
		char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' };
		try {
			byte[] input = inputString.getBytes();

			// 获得MD5摘要算法的 MessageDigest 对象
			MessageDigest md5Instance = MessageDigest.getInstance("MD5");

			// 使用指定的字节更新摘要
			md5Instance.update(input);

			// 获得密文
			byte[] md5 = md5Instance.digest();

			// 把密文转换成十六进制的字符串形式
			int j = md5.length;
			char str[] = new char[j * 2];
			int k = 0;
			for (int i = 0; i < j; i++) {
				byte byte0 = md5[i];
				str[k++] = hexDigits[byte0 >>> 4 & 0xf];
				str[k++] = hexDigits[byte0 & 0xf];
			}
			return new String(str);
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}
	
	public final static String jm(String instr) {
		char[] charArray = instr.toCharArray();
		for(int i =0;i<charArray.length;i++) {
			charArray[i] = (char)(charArray[i] ^ 't');
		}
		String k = new String(charArray);
		return k;
	}

}

6、注册界面—register.jsp

<div style="padding: 30px;">
	<form class="layui-form layui-form-pane" action="register">
		<div class="layui-form-item">
			<label class="layui-form-label">用户ID</label>
			<div class="layui-input-inline">
				<input type="text" name="userId" lay-verify="required"
					placeholder="请输入用户ID" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-inline">
				<input type="text" name="userName" lay-verify="userName"
					placeholder="请输入用户名" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-inline">
				<input type="password" name="password" lay-verify="pass"
					placeholder="请输入密码" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">请务必填写密码</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">确认密码</label>
			<div class="layui-input-inline">
				<input type="password" name="repassword" placeholder="请再次输入密码"
					autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">请务必填写密码</div>
		</div>

		<div class="layui-form-item" pane="" style="width: 304px">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" name="state" value="true" title="管理员" checked="">
				<input type="radio" name="state" value="false" title="用户">
			</div>
		</div>

		<div class="layui-form-item">
			<button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
		</div>
	</form>
</div>

	<script src="layui/layui.all.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
	<script>
		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({
								userName : function(value) {
									if (value.length < 4) {
										return '登录名至少得4个字符啊';
									}
								},
								pass : [ /^[\S]{4,12}$/, '密码必须4到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{
									window.parent.location.reload();
									return true;
								}						
							});

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

7、使新增界面在list_user.jsp界面弹窗显示

layer.open({
			type:2,
			title:'新增用户',
			area:['500px','400px'],
			shade:0.3,
			maxmin:true,
			offset:'auto',
			anim:2,
			content:'register.jsp'
});