在上一讲中,我们学习了在IDEA2019下,开发Spring Boot整合Mybatis的实现,掌握了增删改查的方法和原理,本讲我们将结合实例,实现用户的登录功能。
先看看登录界面和效果
login.html代码如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/layui/css/layui.css" type="text/css" rel="stylesheet" media="all" /> <link href="/css/login.css" type="text/css" rel="stylesheet" media="all" /> <title>登录</title> </head> <body> <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;"> <div class="layadmin-user-login-main"> <div class="layadmin-user-login-box layadmin-user-login-header"> <h2>用户登录</h2> <p>后台管理系统</p> </div> <div class="layadmin-user-login-box layadmin-user-login-body layui-form"> <div class="layui-form-item"> <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label> <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input"> </div> <div class="layui-form-item"> <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label> <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input"> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登 入</button> </div> <div class="layui-trans layui-form-item layadmin-user-login-other"> <label>社交账号登入</label> <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a> <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a> <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a> <a lay-href="/user/reg" class="layadmin-user-jump-change layadmin-link">注册帐号</a> </div> </div> </div> <div class="layui-trans layadmin-user-login-footer"> </div> </div> <script src="/js/jquery.min.js"></script> <script type="text/javascript" src="/layui/layui.js"></script> <script type="text/javascript" src="/js/user.js"></script> </body> </html>
login使用的user.js代码如下
(function($){ layui.use('form', function(){ var form = layui.form ,layer = layui.layer; // form.on('submit(LAY-user-login-submit)', function(data){ // alert(data.field.username); console.log(JSON.stringify(data.field)) /// $.ajax({ url:'http://localhost:8080/user/getUserByLogin', type:'post', data:JSON.stringify(data.field), contentType: "application/json;charset=UTF-8", dataType:'json', success:function(data){ console.log(data); if(data.msg == "ok"){ layer.msg('登录成功!', { // icon: 1, time: 2000 //2秒关闭(如果不配置,默认是3秒) }, function(){ // window.location.href = "/"; }); }else{ layer.msg('用户名或密码错误!'); } }, error:function (data) { } }); /// }); }); })(jQuery);
以上是登录前台的界面效果和代码,下面我们来看看srping boot后台部分。
在上一讲中的实例中,我们对UserMapper.java进行获取登录用户数据接口,加入
public User getUserByLogin(String username,String password);
这里面返回类型为User类,因为我们不准备通过地址栏的参数进行值得传递,这样就把用户名和密码暴露在了外面,用User类的对象进行封装。
然后对应在UserMapper.xml文件中加入
<select id="getUserByLogin" resultType="com.sjzeis.entity.User"> select * from users where username=#{username} and password=#{password}; </select>
resultType和parameterType区别: resultType : 主要针对于从数据库中提取相应的数据出来,如select parameterType:主要针对于将信息存入到数据库中,如:insert、Update、delete
接着,我们在UserSrevice.java中加入
public User getUserByLogin(String username,String password){ return userMapper.getUserByLogin(username,password); }
最后在UserController.java中加入
@RequestMapping("/getUserByLogin") @ResponseBody public Result getUserByLogin(@RequestBody User user){ User rUser = userService.getUserByLogin(user.getUsername(),user.getPassword()); if(rUser != null){ return Result.Ok("ok",rUser); }else{ return Result.Error("erro",rUser); } }
注意:参数中加入@RequestBody ,主要用来接收前端传递给后端的json字符串中的数据,GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用GET方式提交数据,而是用POST方式进行提交。在后端的同一个接收方法里,@RequestBody与@RequestParam()可以同时使用,@RequestBody最多只能有一个,而@RequestParam()可以有多个。
在UserController中,我们根据逻辑需求进行了重新设计,得到的数据准备以下面的格式输出
{"status":"10000","msg":"ok","data":{"userid":1,"username":"admin","password":"123"}}
这就需要我们设计一个Result类,实现数据格式的封装,所以,在UserController中的返回类没有写User,而是改成了Result类,其代码如下
package com.sjzeis.entity; public class Result { // 正确返回代码 private static final String SUCCESS_CODE = "10000"; // 错误返回代码 private static final String ERROR_CODE = "-10000"; // 状态代码 private String status; // 信息 private String msg; // 内容 private Object data; public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } public Result(){} public Result(String status, String msg, Object data){ this.status = status; this.msg = msg; this.data = data; } public static Result Ok(Object data){ return Ok("ok",data); } public static Result Ok(String msg, Object data){ return new Result(SUCCESS_CODE,msg,data); } public static Result Error(Object data){ return Error("error", data); } public static Result Error(String msg, Object data){ return new Result(ERROR_CODE, msg, data); } }
Result类的目的就是为了把返回结果以自定义的json格式输出,所以在 UserController中getUserByLogin()方法中,我们先用
User rUser = userService.getUserByLogin(user.getUsername(),user.getPassword());
获取根据前台传递的用户名和密码得到的User,如果User为空(null),就说明没有符合条件的用户名和密码,否则用户存在。把判断的结果通过Result类返回给前台,代码如下
if(rUser != null){ return Result.Ok("ok",rUser); }else{ return Result.Error("erro",rUser); }
这样,我们就能得到上述的返回结果了。
最后前台user.js根据返回结果做出选择,完成登录。