springboot+mybatis+vue前后端分離實(shí)現(xiàn)用戶登陸注冊(cè)功能

package?com.example.demo.controller;import com.example.demo.entity.User;import?com.example.demo.service.UserService;import com.example.demo.utils.Md5Util;import io.swagger.annotations.Api;import io.swagger.annotations.ApiOperation;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Map;
/** * @author: 關(guān)注微信公眾號(hào)《web項(xiàng)目開發(fā)》 */
@Api(description = "用戶接口")@RestController@RequestMapping("/user")@CrossOriginpublic class UserController {
    private static final Logger logger = LoggerFactory.getLogger(UserController.class);
    @Autowired    private UserService userService;
    @RequestMapping("test")    @ResponseBody    public String getData() {        return "String";    }
    @ApiOperation(value = "用戶注冊(cè)", notes = "用戶注冊(cè)")    @RequestMapping(value = "/register", method = RequestMethod.POST)    @CrossOrigin    public Map<String, Object> register(@RequestParam String userName,                                        @RequestParam String passwd) {        Map<String, Object> map = new HashMap<String, Object>();        if (StringUtils.isEmpty(userName) || StringUtils.isEmpty(passwd)) {            map.put("msg", "用戶名和密碼不能為空");            return map;        }        // 驗(yàn)證用戶名是否已經(jīng)注冊(cè)        User exsitUser = userService.selectByName(userName);        if (exsitUser != null) {            map.put("msg", "該用戶名已存在!");            return map;        }        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");        String format = sdf.format(new Date());        User user = new User();        user.setUserName(userName);        user.setRegistTime(format);        user.setStatus("1");        user.setPasswd(Md5Util.MD5(passwd) + userName);        int count = userService.insert(user);        System.out.println(count);        if (count != 1) {            map.put("msg", "注冊(cè)失敗");            return map;        }        map.put("msg", "注冊(cè)成功");        return map;    }
    @ApiOperation(value = "用戶登錄", notes = "用戶登錄")    @RequestMapping(value = "/login", method = RequestMethod.POST)    @CrossOrigin    public Map<String, Object> login(@RequestParam String userName,                                     @RequestParam String passwd,                                     HttpSession session,                                     HttpServletResponse response) {        Map<String, Object> map = new HashMap<String, Object>();        User exsitUser = userService.selectByName(userName);        if (exsitUser == null) {            map.put("msg", "該用戶未注冊(cè)");            return map;        }        if (!exsitUser.getPasswd().equals(Md5Util.MD5(passwd) + userName)) {            map.put("msg", "密碼錯(cuò)誤,請(qǐng)重新輸入");            return map;        }        session.setAttribute("loginUser", exsitUser);        map.put("msg", "登錄成功");        return map;    }}//注冊(cè)的時(shí)候密碼涉及到md5加密

<template>  <div>????<div?class="top_div">div>      <p style="padding: 30px 0px 10px; position: relative;"><span        class="u_logo">span> <input id="loginName" class="ipt" type="text" v-model="userName" placeholder="請(qǐng)輸入用戶名"                                      value="">      p>      <p style="position: relative;"><span class="p_logo">span>        <input class="ipt" id="password" type="password" v-model="password" placeholder="請(qǐng)輸入密碼" value="">      p>      <p style="position: relative;margin-top: 10px;"><span class="p_logo">span>        <input class="ipt" id="password2" type="password" v-model="password2" placeholder="請(qǐng)輸入密碼" value="">      p>

      <div id="errorText" style="height: 20px;margin-top:10px">        <p style="color: red;display: none">用戶名密碼錯(cuò)誤請(qǐng)從新輸入p>      div>      <div        style="height: 50px; line-height: 50px; margin-top: 30px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">                        <router-link to='/'>          <span style="float: left;margin-left: 10px;font-size: 14px;">已有賬號(hào)，現(xiàn)在登錄span>        router-link>
        <span style="float: right;">              <a id="loginBtn" @click="register()">注冊(cè)a>           span>div>    div>  div>template>
<script>  export default {    name: 'Register',    data() {      return {        userName: "",        password: "",        password2: ""      }    },    created() {
    },    methods: {      register: function () {        let fd = new FormData();        fd.append("userName", this.userName);        fd.append("passwd", this.password);
        let config = {          headers: {            'Content-Type': 'multipart/form-data'          }????????}        if (this.password === this.password2) {          this.$axios.post("user/register", fd, config).then(res => {            alert(res.data.msg)          }).catch(res => {            alert(res.data.msg)          })        } else {          alert("兩次輸入的密碼不同")????????}??????}    }  }script>