---

前言

HTML，让生活更奇妙🤣

接下来介绍的是简单的用户登录，注册，与退出

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、登录界面

1.HTML部分

<div id="modal" class="c2"><form name="myForm" ><p class="c3">用户名 :<label><input type="text" autocomplete="current-username" name="username" id="name1"></label></p><p class="c3">密  码 :<label><input type="password" autocomplete="current-password" name="password" id="pwd1"></label></p><p class="c3">称呼  :<label><input type="radio" name="identity" value="guest" checked="checked" id="guest">用户<input type="radio" name="identity" value="merchant" id="merchant">商家</label></p><p class="c3"><input type="button" value="确认" id="submit1" onclick="toLogin()"><input type="button" value="注册" onclick="toRegister()"><input type="button" value="退出" onclick="exit()"></p></form>
</div>

2.CSS部分

.c2{background-color: white;position: fixed;width: 400px;height: 300px;top: 50%;left: 50%;z-index: 3;margin-top: -150px;margin-left: -200px;background-image: url("https://img.zcool.cn/community/011c805c47cab9a801203d222422ac.png@1280w_1l_2o_100sh.png");font-size: 18px;font-family: 微软雅黑, sans-serif;
}#modal>p{margin-left: 80px;
}#modal .c3{line-height: 80px;
}#modal>p>input{margin-left: 40px;font-size: 18px;background-color: gold;
}

CSS部分需要根据实际情况而定

二、javascript部分

注意在前端页面引入这个Js

<script type="text/javascript" src="/Js/jquery.min.js"></script>

/Js/为存放路径

代码如下（示例）：

登录按钮

function toLogin() {var name1=document.getElementById("name1").value;var pwd1=document.getElementById("pwd1").value;var call=$('input[name="identity"]:checked').val();var sysUser={"username":name1,"pwd":pwd1,"permission":call};$.ajax({url:"/sysUser/login",type:"post",async:true,contentType: "application/json",data:JSON.stringify(sysUser),dataType:"json",success: function (response) {if (response.code === "201") {console.log(response.data)alert(response.msg);localStorage.setItem("username",response.data.username);localStorage.setItem("userRole",response.data.permission);location.href="/index?"+response.data.username;} else {alert(response.msg);}},error: function (response) {alert(response.msg);}});
}

注册按钮

function toRegister(){var name1=document.getElementById("name1").value;var pwd1=document.getElementById("pwd1").value;var call=$('input[name="identity"]:checked').val();var sysUser={"username":name1,"pwd":pwd1,"permission":call};$.ajax({url:"/sysUser/register",type:"post",async:true,contentType: "application/json",data:JSON.stringify(sysUser),dataType:"json",success: function (response) {if (response.code === "202") {alert(response.msg);location.href="/index";} else {alert(response.msg);}},error: function (response) {alert(response.msg);}});
}

退出按钮

function exit(){localStorage.removeItem("username");var nickname=document.getElementById("nickname");nickname.innerHTML=""location.href="/index"
}

三、后端部分

SysUser实体类

public class SysUser implements Serializable {private static final long serialVersionUID = 574667272665458058L;private Integer uId;private String username;private String pwd;private String permission;public Integer getUId() {return uId;}public void setUId(Integer uId) {this.uId = uId;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public String getPermission() {return permission;}public void setPermission(String permission) {this.permission = permission;}}

SysUser控制类

@RestController
@RequestMapping("sysUser")
public class SysUserController {@Resourceprivate SysUserService sysUserService;//登录@RequestMapping(value = "/login")@ResponseBodypublic ResponseData toLogin(@RequestBody SysUser sysUser,String code) {return sysUserService.toLogin(sysUser,code);}//注册@RequestMapping(value = "/register")@ResponseBodypublic ResponseData toRegister(@RequestBody SysUser sysUser,String code){return sysUserService.toRegister(sysUser,code);}
}

SysUser服务层

public interface SysUserService {ResponseData toLogin(SysUser sysUser, String code);SysUser insert(SysUser sysUser);ResponseData toRegister(SysUser sysUser, String code);
}

SysUser服务实现层

@Service("sysUserService")
public class SysUserServiceImpl implements SysUserService {@Resourceprivate SysUserDao sysUserDao;@Overridepublic ResponseData toLogin(SysUser sysUser, String code) {String username = sysUser.getUsername();//将提交的密码进行加密处理String password=new Md5Hash(sysUser.getPwd(),"wxy",10).toString();String user_role=sysUser.getPermission();if (username==null && password==null){return new ResponseData(ResponseCode.FAIL05,sysUser);}if (username==null&&!password.equals("")){return new ResponseData(ResponseCode.FAIL06,sysUser);}if (!(username ==null) &&password==null){return new ResponseData(ResponseCode.FAIL07,sysUser);}if (!Objects.equals(sysUserDao.findName(username), username)){return new ResponseData(ResponseCode.FAIL01,sysUser);}if(!sysUserDao.findPwdByName(username).equals(password)){return new ResponseData(ResponseCode.FAIL02,sysUser);}if (sysUserDao.findPwdByName(username).equals(password) && sysUserDao.findPermissionByName(username).equals(user_role)){return new ResponseData(ResponseCode.SUCCESS02,sysUser);}if (!sysUserDao.findName(username).equals(username) && !sysUserDao.findPwdByName(username).equals(password)){return new ResponseData(ResponseCode.FAIL08,sysUser);}if (!sysUserDao.findPermissionByName(username).equals(user_role)){return new ResponseData(ResponseCode.FAIL09,sysUser);}return new ResponseData(ResponseCode.SUCCESS01,sysUser);}@Overridepublic ResponseData toRegister(SysUser sysUser, String code) {if (sysUser.getUsername()==null|| sysUser.getUsername()==""){return new ResponseData(ResponseCode.FAIL06,sysUser);}if (sysUser.getPwd()==null||sysUser.getPwd()==""){return new ResponseData(ResponseCode.FAIL07,sysUser);}if (sysUser.getPermission()==null){return new ResponseData(ResponseCode.FAIL10,sysUser);}if (sysUserDao.findName(sysUser.getUsername())!=null){return new ResponseData(ResponseCode.FAIL03,sysUser);}//将提交的密码进行加密处理String newPwd = new Md5Hash(sysUser.getPwd(), "wxy", 10).toString();//将生成的加密密码存到sysUser里sysUser.setPwd(newPwd);//添加到数据库中sysUserDao.insert(sysUser);return new ResponseData(ResponseCode.SUCCESS03,sysUser);}
}

SysUser访问层

public interface SysUserDao {//添加用户int insert(SysUser sysUser);//查询单个用户或者商家的名称SysUser findByName(String username);//查看是否存在用户String findName(String username);//通过名称查询密码String findPwdByName(String username);//通过名称查询权限String findPermissionByName(String username);
}

mybatis部分

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.online.dao.SysUserDao"><resultMap type="com.example.online.entity.SysUser" id="SysUserMap"><result property="uId" column="u_id" jdbcType="INTEGER"/><result property="username" column="username" jdbcType="VARCHAR"/><result property="pwd" column="pwd" jdbcType="VARCHAR"/><result property="permission" column="permission" jdbcType="VARCHAR"/></resultMap><!--添加用户--><insert id="insert">insert into `online-restaurant`.sys_user(username, pwd, permission)values (#{username}, #{pwd}, #{permission})</insert><!--通过主键删除--><delete id="deleteById">delete from `online-restaurant`.sys_user where u_id = #{uId}</delete><!--查询所有用户或者商家--><select id="queryAllName" resultMap="SysUserMap">select * from `online-restaurant`.sys_user</select><!--查询单个用户或者商家的名称--><select id="findByName" resultMap="SysUserMap">select u_id,username,pwd,permission from `online-restaurant`.sys_user where username=#{username}</select><!--查看是否存在用户--><select id="findName" resultType="java.lang.String">select username from `online-restaurant`.sys_user where username=#{name}</select><!--通过名称查询密码--><select id="findPwdByName" resultType="java.lang.String">select pwd from `online-restaurant`.sys_user where username=#{username}</select><!--通过名称查询权限--><select id="findPermissionByName" resultType="java.lang.String">select permission from `online-restaurant`.sys_user where username=#{username}</select></mapper>

四、ResponseCode部分

    SUCCESS01("200","请求成功"),SUCCESS02("201","登录成功"),SUCCESS03("202","注册成功"),FAIL00("800","网络请求错误"),FAIL01("801","账号不存在"),FAIL02("802","密码错误"),FAIL03("803","账号已存在"),FAIL04("804","密码不为空"),FAIL05("805","请输入账号和密码"),FAIL06("806","请输入账号"),FAIL07("807","请输入密码"),FAIL08("808","账号和密码都错误"),FAIL09("809","称呼名不对"),FAIL10("810","请选择称呼"),

五、maven部分

<!--MD5的编码引入依赖--><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>1.4.0</version></dependency>

---

总结

HTML，让生活更奇妙🤣