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

最新推荐文章于 2024-08-09 14:09:22 发布

大前端圈

最新推荐文章于 2024-08-09 14:09:22 发布

阅读量1.9k

点赞数 1

文章标签：项目管理 nagios sms gwt nokia

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg5NDA2NDc2Mg==\x26amp;mid=2247485074\x26amp;idx=1\x26amp;sn=6d993c3a9b37fb992fc6874e5ebb9fe0\x26amp;chksm=c0240787f

版权

效果图

前端登录初始页面

拖动验证条页面

登录成功页面

成功后跳转页面

环境介绍

JDK：1.8

数据库：Mysql5.6

前端：Vue

后端：SpringBoot

完整源码获取

扫码关注回复括号内文字【滑动验证】获取源码

如果你在运行这个代码的过程中有遇到问题，请加小编微信xxf960513，我拉你进对应微信学习群！！帮助你快速掌握这个功能代码！

核心代码介绍

UserController.class

 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<String, Object> login(@RequestBody User user) {
        Map map = userService.login(user.getUsername(), user.getPassword());
        return map;
    }
}

UserService.class

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;
@Service
public 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;
    }
}

index.vue

<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 Form</h3>
      </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">Login</el-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>

main.js

import Vue from "vue";
import "normalize.css/normalize.css"; // A modern alternative to CSS resets
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import "@/styles/index.scss"; // global css
import App from "./App";
import store from "./store";
import router from "./router";
import "@/icons"; // icon
import "@/permission"; // permission control
import 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 EN
Vue.use(ElementUI);
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
Vue.config.productionTip = false;
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App)
});

t_user.sql

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;

--完--

如果你觉得这个案例以及我们的分享思路不错，对你有帮助，请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦！

推荐阅读
那个从深圳流水线工人去Google上班程序媛，最近失业了！阿里正式取消周报：打击低效加班，拒绝形式主义！什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站…z站？中国程序员VS美国程序员，太形象了...
欢迎扫描加我微信一起交流基金理财知识，技术，项目管理
当前有哪些投资机会？可转债打新，怎么参与？风险怎么样？怎么操作？欢迎加入免费知识星球
同800+朋友们交流～





如有收获，点个在看，诚挚感谢♡