Springboot+Vue实现滑动验证成功后登录功能

 package com.example.login.controller;import com.example.login.entity.User;import com.example.login.service.UserService;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.web.bind.annotation.*;import java.util.Map;@Api(description = "用户接口")@RestController@RequestMapping("/user")public class UserController {    @Autowired    private UserService userService;    @ApiOperation(value = "用户登录", notes = "用户登录")    @PostMapping("/login")    public Map login(@RequestBody User user) {        Map map = userService.login(user.getUsername(), user.getPassword());        return map;    }}

package com.example.login.service;import com.example.login.entity.User;import com.example.login.mapper.UserMapper;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.HashMap;import java.util.Map;@Servicepublic class UserService {    @Autowired    public UserMapper userMapper;    public Map<String, Object> login(String username, String password) {        Map<String, Object> map = new HashMap<>();        User user = userMapper.getUserByName(username);        if (user == null) {            map.put("code", "0001");            map.put("msg", "该账号不存在!");            return map;        }        if (!password.equals(user.getPassword())) {            map.put("code", "0002");            map.put("msg", "密码错误!");            return map;        }        map.put("code", "0000");        map.put("msg", "登录成功!");        map.put("data", user);        return map;    }}

<template>  <div class="login-container">    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">      <div class="title-container">        <h3 class="title">Login Formh3>      div>
      <el-form-item prop="username">        <span class="svg-container">          <svg-icon icon-class="user" />        span>        <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />      el-form-item>
      <el-form-item prop="password">        <span class="svg-container">          <svg-icon icon-class="password" />        span>        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />        <span class="show-pwd" @click="showPwd">          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />        span>      el-form-item>
      <el-form-item>        <JcRange @successFun="onSuccessFun" />      el-form-item>
      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:20px;margin-top: 20px;" @click.native.prevent="handleLogin">Loginel-button>
      <div class="tips">        <span style="color: #409EFF;" @click="handleGet">免费注册span>        <span style="color: #ccc;" @click="handleGet">忘记密码span>      div>
    el-form>  div>template>
<script>import { validUsername } from "@/utils/validate";import JcRange from "@/views/login/jcRange.vue";import axios from "axios";export default {  name: "Login",  data() {    const validateUsername = (rule, value, callback) => {      if (!validUsername(value)) {        callback(new Error("Please enter the correct user name"));      } else {        callback();      }    };    const validatePassword = (rule, value, callback) => {      if (value.length < 6) {        callback(new Error("The password can not be less than 6 digits"));      } else {        callback();      }    };    return {      loginForm: {        username: "admin",        password: "123456"      },      loginRules: {        username: [          { required: true, trigger: "blur", validator: validateUsername }        ],        password: [          { required: true, trigger: "blur", validator: validatePassword }        ]      },      loading: false,      passwordType: "password",      redirect: undefined,      status: false    };  },  components: {    JcRange  },  watch: {  },  methods: {    showPwd() {      if (this.passwordType === "password") {        this.passwordType = "";      } else {        this.passwordType = "password";      }      this.$nextTick(() => {        this.$refs.password.focus();      });    },    async handleLogin() {      const that = this;      const { username, password } = this.loginForm;      this.$refs.loginForm.validate(valid => {        if (valid) {          if (!that.status) {            return this.$message.error("请按住滑块，拖动到最右边");          }          this.loading = true;          axios({            method: "post",            url: "http://139.159.147.237:9534/user/login",            data: {              username,              password            }          }).then(res => {            that.loading = false;            if (res.data.code == "0000") {              that.$message({                message: res.data.msg,                type: "success"              });              setTimeout(() => {                window.open(                  "https://mp.weixin.qq.com/mp/appmsgalbum?action=getalbum&__biz=MzI2NjA1OTMwMg==&scene=24&album_id=1337183186920767488#wechat_redirect",                  "_blank"                );              }, 1000);            } else {              that.$message.error(res.data.msg);            }          });        } else {          console.log("error submit!!");          return false;        }      });    },
    // 监听滑块成功事件    onSuccessFun(e) {      this.status = e;    },    handleGet() {      this.$message("正在开发中");    }  }};script>
<style lang="scss">/* 修复input 背景不协调 和光标变色 *//* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;$light_gray: #fff;$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {  .login-container .el-input input {    color: $cursor;  }}
/* reset element-ui css */.login-container {  .el-input {    display: inline-block;    height: 47px;    width: 85%;
    input {      background: transparent;      border: 0px;      -webkit-appearance: none;      border-radius: 0px;      padding: 12px 5px 12px 15px;      color: $light_gray;      height: 47px;      caret-color: $cursor;
      &:-webkit-autofill {        box-shadow: 0 0 0px 1000px $bg inset !important;        -webkit-text-fill-color: $cursor !important;      }    }  }  .el-form-item {    border: 1px solid rgba(255, 255, 255, 0.1);    background: rgba(0, 0, 0, 0.1);    border-radius: 5px;    color: #454545;  }}style>
<style lang="scss" scoped>$bg: #2d3a4b;$dark_gray: #889aa4;$light_gray: #eee;.login-container {  min-height: 100%;  width: 100%;  background-color: $bg;  overflow: hidden;  .login-form {    position: relative;    width: 520px;    max-width: 100%;    padding: 160px 35px 0;    margin: 0 auto;    overflow: hidden;  }  .tips {    font-size: 14px;    color: #fff;    margin-bottom: 10px;    display: flex;    justify-content: space-between;    span {      &:first-of-type {        margin-right: 16px;      }    }  }  .svg-container {    padding: 6px 5px 6px 15px;    color: $dark_gray;    vertical-align: middle;    width: 30px;    display: inline-block;  }  .title-container {    position: relative;    .title {      font-size: 26px;      color: $light_gray;      margin: 0px auto 40px auto;      text-align: center;      font-weight: bold;    }  }
  .show-pwd {    position: absolute;    right: 10px;    top: 7px;    font-size: 16px;    color: $dark_gray;    cursor: pointer;    user-select: none;  }}style>

import Vue from "vue";import "normalize.css/normalize.css"; // A modern alternative to CSS resetsimport ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";// import locale from 'element-ui/lib/locale/lang/en' // lang i18nimport "@/styles/index.scss"; // global cssimport App from "./App";import store from "./store";import router from "./router";import "@/icons"; // iconimport "@/permission"; // permission controlimport echarts from "echarts";/** * If you don't want to use mock-server * you want to use MockJs for mock api * you can execute: mockXHR() * * Currently MockJs will be used in the production environment, * please remove it before going online ! ! ! */if (process.env.NODE_ENV === "production") {  const { mockXHR } = require("../mock");  mockXHR();}// set ElementUI lang to ENVue.use(ElementUI);// 如果想要中文版 element-ui，按如下方式声明// Vue.use(ElementUI)Vue.config.productionTip = false;new Vue({  el: "#app",  router,  store,  render: h => h(App)});

SET FOREIGN_KEY_CHECKS=0;---------------------------- Table structure for T_USER-- ----------------------------DROP TABLE IF EXISTS `T_USER`;CREATE TABLE `T_USER` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `username` varchar(32) NOT NULL,  `pwd` varchar(64) NOT NULL,  `zt` smallint(255) NOT NULL COMMENT '0:未激活,1:已激活',  `createdate` date NOT NULL,  `email` varchar(255) NOT NULL,  `code` varchar(32) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;