点击上方 web项目开发，选择 设为星标
优质文章，及时送达
效果图
前端登录初始页面
拖动验证条页面
登录成功页面
成功后跳转页面
环境介绍
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 = "用户接口")@[email protected]("/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; }}
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;@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; }}
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 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 >/* 修复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 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 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)});
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;
--完--
如果你觉得这个案例以及我们的分享思路不错，对你有帮助，请分享给身边更多需要学习的朋友。别忘了《留言+点在看》给作者一个鼓励哦！
推荐案例
1、springboot+mybatis+vue前后端分离实现用户登陆注册功能
2、SpringBoot+Vue前后分离实现邮件发送功能
3、SpringBoot+Spring Data JPA+Vue前后端分离实现分页功能
4、SpringBoot+Spring Data JPA+Vue前后端分离实现Excel导出功能
5、Spring Boot + Vue前后端分离实现图片上传功能
6、springboot+jpa+tymeleaf实现分页功能
7、springboot+jpa+thymeleaf实现信息修改功能
8、SpringBoot+vue开发微信小程序留言功能
9、SpringBoot实现生成带参数的小程序二维码功能
10、springboot+jpa+thymeleaf实现信息增删改查功能
11、用java实现Graphics2D绘制验证码功能
12、Springboot+layui前后端分离实现word转pdf功能
13、用java将本地图片转base64格式， 再转图片！你用过这个功能？
14、springboot+layui+thymelefe实现用户批量添加功能
15、springboot+Tymeleaf实现用户密码MD5加盐解密登录
16、springboot+vue实现用户注册后必须通过邮箱激活才能登录激活才能登录
17、SpringBoot+Vue实现用户头像修改功能
18、Springboot＋Vue实现富文本发表文章功能
19、springboot+vue实现不同管理权限的用户登陆展示的菜单栏目不同功能
20、Springboot+vue实现上传视频并在线播放功能
21、SpringBoot+Vue前后端分离实现邮件定时发送功能
22、springboot+vue实现多图片同时上传功能
23、Springboot+Vue前后端分离实现Excle文件导入并在前端页面回显功能
24、Springboot+Vue实现从数据库中获取数据生成树状图在前端页面展示功能
25、Springboot+Vue实现从数据库中获取数据生成饼状图并在前端页面展示功能
26、Springboot+Vue实现批量文件上传(pdf、word、excel)并支持在线预览功能
温暖提示
为了方便大家更好的学习，本公众号经常分享一些完整的单个功能案例代码给大家去练习，如果本公众号没有你要学习的功能案例，你可以联系小编(微信：xxf960513)提供你的小需求给我，我安排我们这边的开发团队免费帮你完成你的案例。注意：只能提单个功能的需求不能要求功能太多，比如要求用什么技术，有几个页面，页面要求怎么样？