登陆注册完成

This commit is contained in:
unknown 2022-06-08 17:41:58 +08:00
parent abbb22c560
commit 197dfa4c0a
10 changed files with 472 additions and 76 deletions

View File

@ -11,13 +11,14 @@
"axios": "^0.26.1",
"core-js": "^3.6.5",
"element-ui": "^2.15.8",
"js-md5": "^0.7.3",
"mavon-editor": "^2.10.4",
"mui-player": "^1.6.0",
"mui-player-desktop-plugin": "^1.4.2",
"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",
"vue": "^2.6.11",
"vue-router": "3.5.2",
"node-sass": "^4.14.1"
"vue-router": "3.5.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.5",

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

View File

@ -80,7 +80,7 @@ export default {
.el-button--primary {
color: #fff;
background: #466AFF ;
border-color: #466AFF ;;
border-color: #466AFF ;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #7890ee;

View File

@ -11,50 +11,25 @@
label-width="0px"
class="login-container"
>
<h3 class="title"></h3>
<el-form-item prop="adminName" class="a">
<img :src="logo" class="logo"/>
<!-- <h3 class="title"></h3>-->
<el-form-item prop="phone" class="a">
<el-input
type="text"
v-model="loginForm.adminName"
v-model="loginForm.phone"
auto-complete="off"
placeholder="账号"
></el-input>
</el-form-item>
<el-form-item prop="adminPass">
<el-form-item prop="password">
<el-input
type="password"
v-model="loginForm.adminPass"
v-model="loginForm.password"
auto-complete="off"
placeholder="密码"
></el-input>
</el-form-item>
<!-- 验证码 -->
<el-form-item>
<el-col :span="12">
<el-form-item prop="captcha">
<el-input
type="test"
v-model="loginForm.captcha"
auto-complete="off"
placeholder="验证码, 单击图片刷新"
style="width: 100%"
>
</el-input>
</el-form-item>
</el-col>
<el-col class="line" :span="1">&nbsp;</el-col>
<el-col :span="11">
<el-form-item>
<img
style="width: 70%"
class="pointer"
:src="loginForm.src"
@click="refreshCaptcha()"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
@ -72,12 +47,18 @@
>
</el-form-item>
</el-form>
<div class="footer"><p>@ 1703050328 张启磊</p></div>
<div style="color: #2f2f2f">
版权所有红山开源社区 <a href="https://beian.miit.gov.cn/#/Integrated/index"> 京ICP备2021005060号</a>
</div>
</div>
</template>
<script>
import Cookies from "js-cookie";
import {Message} from "element-ui";
import pageUtils from "@/utils/pageUtils";
export default {
name: "Login",
@ -85,19 +66,17 @@ export default {
data() {
//
return {
logo:require("@/assets/logo/no-word-logo.png"),
logining: false,
loginForm: {
//
adminName: "",
adminPass: "",
captcha: "",
src: "http://localhost:8088/graduate_evaluate/createPicCode",
phone: "",
password: ""
},
Rules: {
//
adminName: [{ required: true, message: "请输入账号", trigger: "blur" }],
adminPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }]
},
};
},
@ -106,40 +85,32 @@ export default {
//
login() {
let adminInfo = {
picCode: this.loginForm.captcha,
adminName: this.loginForm.adminName,
adminPass: this.loginForm.adminPass,
phone: this.loginForm.phone,
password: this.$md5(this.loginForm.password),
};
this.$api.login
.login(adminInfo)
this.$api.login(adminInfo)
.then((res) => {
console.log(res);
if (res.code != 0) {
alert(res.message);
this.loginForm.src =
"http://localhost:8088/graduate_evaluate/createPicCode?t=" +
new Date().getTime();
return false;
if (res.status === 10) {
Message.warning("用户名或密码错误")
}else {
localStorage.setItem("systemToken",res.token)
sessionStorage.setItem("username", res.username);
sessionStorage.setItem("userId", res.userId);
sessionStorage.setItem("role", res.auth.authority);
pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/home") //
}
Cookies.set("token", res.data.token); // tokenCookie
sessionStorage.setItem("name", res.data.adminName); //
sessionStorage.setItem("pass", res.data.adminPass);
sessionStorage.setItem("rank", res.data.adminRank);
this.$router.push("/"); //
// Cookies.set("token", res.data.token); // tokenCookie
})
.catch(function (res) {
alert(res);
this.refreshCaptcha();
});
},
//
refreshCaptcha: function () {
this.loginForm.src =
"http://localhost:8088/graduate_evaluate/createPicCode?t=" +
new Date().getTime();
},
//
reset() {
@ -154,7 +125,16 @@ export default {
<style scoped lang="scss">
a:hover{
color: rgb(250, 202, 46);
}
a:active{
color: rgb(250, 202, 46);
}
a{
text-decoration: none;
color: #2f2f2f;
}
.login-container {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
@ -165,13 +145,20 @@ export default {
padding: 35px 35px 15px 35px;
background: #fff;
opacity: 0.9;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
//border: 1px solid #eaeaea;
box-shadow: 0 10px 20px #cac6c6;
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #000000;
}
.el-input{
left:0
}
.logo{
width: 130px;
margin-top: -100px;
}
}
</style>
@ -182,10 +169,10 @@ export default {
.loginWraper {
position: absolute;
left: 0;
top: 0;
top: 10%;
bottom: 0;
right: 0;
background: url(../../assets/Pic/loginPic.jpg) no-repeat;
/*background: url(../../assets/Pic/loginPic.jpg) no-repeat;*/
background-size: cover;
}
.login-container .el-input {
@ -201,8 +188,8 @@ export default {
.el-button--primary {
color: #fff;
background: rgb(66, 166, 199);
border-color: rgb(66, 166, 199);;
background: #466AFF;
border-color: #466AFF;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #7890ee;

235
src/components/Register.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<div class="loginWraper">
<!-- v-bind:model的缩写 绑定登录表格
表单验证规则 自己设定
获取登录表格元素 this.longinForm -->
<el-form
:model="loginForm"
:rules="Rules"
ref="loginForm"
label-position="left"
label-width="0px"
class="login-container"
>
<img :src="logo" class="logo"/>
<h3 class="title">注册用户</h3>
<el-form-item prop="name" class="a">
<el-input
type="text"
v-model="loginForm.name"
auto-complete="off"
placeholder="用户名"
></el-input>
</el-form-item>
<el-form-item prop="phone" class="a">
<el-input
type="text"
v-model="loginForm.phone"
auto-complete="off"
placeholder="账号"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="loginForm.password"
auto-complete="off"
placeholder="密码"
show-password
></el-input>
</el-form-item>
<Verify status="status" :successFun="verifySuccess" :errorFun="verifyError"></Verify>
<el-form-item style="width: 100%">
<!-- 主要按钮 -->
<el-button
type="primary"
style="width: 48%"
@click.native.prevent="register()"
> </el-button
>
</el-form-item>
</el-form>
<div style="color: #2f2f2f">
版权所有红山开源社区 <a href="https://beian.miit.gov.cn/#/Integrated/index"> 京ICP备2021005060号</a>
</div>
</div>
</template>
<script>
import {Message} from "element-ui";
import pageUtils from "@/utils/pageUtils";
import Verify from "@/components/Verify";
var checkStatus = (rule, value, callback) => {
console.log(value);
if (!value) {
return callback(new Error("请拖动滑块完成验证"));
} else {
callback();
}
};
export default {
name: "Register",
components: {Verify},
data() {
//
return {
checkStatus,
status: [{ validator: checkStatus, trigger: "change" }],
verifyStatus: false,
logo:require("@/assets/logo/no-word-logo.png"),
logining: false,
loginForm: {
//
name:"",
phone: "",
password: "",
},
Rules: {
//
name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
methods: {
verifySuccess(){
this.verifyStatus = true
},
verifyError(){
},
//
register() {
//
if (this.verifyStatus === true) {
let adminInfo = {
name: this.loginForm.name,
phone: this.loginForm.phone,
password: this.$md5(this.loginForm.password),
};
this.$api.register(adminInfo)
.then((res) => {
console.log(res);
if (res.status === 4) {
Message.warning("该手机号已经注册")
}else if (res.status === 10) {
Message.warning("系统错误")
}else if (res.status === 0){
localStorage.setItem("systemToken",res.token)
pageUtils.openPage(this.$router,"/" +this.$route.params.compId +"/home") //
}
})
.catch(function (res) {
alert(res);
});
}else {
Message.warning("请先进行人机校验")
}
},
//
reset() {
this.$refs.loginForm.resetFields();
},
},
};
</script>
<style scoped lang="scss">
a:hover{
color: rgb(250, 202, 46);
}
a:active{
color: rgb(250, 202, 46);
}
a{
text-decoration: none;
color: #2f2f2f;
}
.login-container {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 20px;
background-clip: padding-box;
margin: 150px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
opacity: 0.9;
//border: 1px solid #eaeaea;
box-shadow: 0 10px 20px #cac6c6;
.title {
margin: 0px auto 40px auto;
text-align: center;
color: #000000;
}
.el-input{
left:0
}
.logo{
width: 130px;
margin-top: -100px;
}
}
</style>
<style>
.loginWraper {
position: absolute;
left: 0;
top: 10%;
bottom: 0;
right: 0;
/*background: url(../../assets/Pic/loginPic.jpg) no-repeat;*/
background-size: cover;
}
.login-container .el-input {
width: 350px;
left: 10px;
}
.login-container .el-form-item__error {
padding-left: 10px;
}
.footer {
font-size: 18px;
}
.el-button--primary {
color: #fff;
background: #466AFF;
border-color: #466AFF;
}
.el-button--primary:hover, .el-button--primary:focus {
background: #7890ee;
border-color: #7890ee;
}
</style>

140
src/components/Verify.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div class="verify-comp">
<div class="verify" :class="rangeStatus?'success':''" >
<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
{{rangeStatus?successText:startText}}
</div>
</div>
</template>
<script>
export default {
name: "Verify",
props: {
//
successFun: {
type: Function
},
//
successIcon: {
type: String,
default: 'el-icon-success'
},
//
successText: {
type: String,
default: '验证成功'
},
//
startIcon: {
type: String,
default: 'el-icon-d-arrow-right'
},
//
startText: {
type: String,
default: '请拖住滑块,拖动到最右边'
},
//
errorFun: {
type: Function
},
//
status: {
type: String
}
},
data(){
return {
disX : 0,
rangeStatus: false
}
},
methods:{
//
rangeMove(e){
let ele = e.target;
let startX = e.clientX;
let eleWidth = ele.offsetWidth;
let parentWidth = ele.parentElement.offsetWidth;
let MaxX = parentWidth - eleWidth;
if(this.rangeStatus){//
return false;
}
document.onmousemove = (e) => {
let endX = e.clientX;
this.disX = endX - startX;
if(this.disX<=0){
this.disX = 0;
}
if(this.disX>=MaxX-eleWidth){//,
this.disX = MaxX;
}
ele.style.transition = '.1s all';
ele.style.transform = 'translateX('+this.disX+'px)';
e.preventDefault();
}
document.onmouseup = ()=> {
if(this.disX !== MaxX){
ele.style.transition = '.5s all';
ele.style.transform = 'translateX(0)';
//
this.errorFun && this.errorFun();
}else{
this.rangeStatus = true;
if(this.status){
this.$parent[this.status] = true;
}
//
this.successFun && this.successFun();
}
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
</script>
<style lang="scss" scoped>
@mixin jc-flex{
display: flex;
justify-content: center;
align-items: center;
}
.verify-comp{
margin: 20px 0;
font-size: 14px;
.verify{
background-color: #e9e9e9;
position: relative;
transition: 1s all;
user-select: none;
color: #585858;
@include jc-flex;
height: 40px; /*no*/
border-radius: 5px;
&.success{
background-color: #538c3d;
color: #fff;
i{
color: #538c3d;
}
}
i{
position: absolute;
left: 0;
width: 40px;/*no*/
border-radius: 5px;
height: 100%;
color: #538c3d;
background-color: #fff;
border: 1px solid #d8d8d8;
cursor: pointer;
font-size: 20px;
@include jc-flex;
}
}
}
</style>

View File

@ -10,13 +10,15 @@ import api from './utils/http/index'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//md5
import md5 from 'js-md5'
// 图标
import "/src/assets/icon/iconfont.css"
/* // echarts
import * as echarts from 'echarts';
// 时间
import moment from "moment"; */
Vue.prototype.$md5 = md5;
Vue.use(api)
Vue.prototype.$axios = Axios

View File

@ -159,8 +159,17 @@ let routes = [
path: '/404',
component:() => import("@/components/404"),
name: '404'
},
{
path: '/:compId/login',
component:() => import("@/components/Login"),
name: 'login'
},
{
path: '/:compId/register',
component:() => import("@/components/Register"),
name: 'login'
}
]

View File

@ -39,11 +39,28 @@ export const getPageData = (compId,page) => {
})
};
export const login = data => {
return axios({
url: '/login',
method: 'post',
data
})
};
export const register = data => {
return axios({
url: '/user/activeUser',
method: 'post',
data
})
};
// 默认全部倒出
// 根据需要进行
export default {
query,
mock,
getComp,
getPageData
getPageData,
login,
register
}

View File

@ -5278,6 +5278,11 @@ js-base64@^2.1.8:
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
js-md5@^0.7.3:
version "0.7.3"
resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
js-message@1.0.7:
version "1.0.7"
resolved "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz"