Big-Data-Lab
/
AI-VUE
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加登录

This commit is contained in:
Cool 2024-07-04 17:41:31 +08:00
parent cd868d0a31
commit a8ab611694
9 changed files with 211 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@ -14,7 +14,8 @@
"element-ui": "^2.15.14",
"less-loader": "^12.2.0",
"vue": "^2.6.14",
"vue-router": "^2.8.1"
"vue-router": "^2.8.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
@ -10895,6 +10896,14 @@
"prettier": "^1.18.2 || ^2.0.0"
}
},
"node_modules/vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
"peerDependencies": {
"vue": "^2.0.0"
}
},
"node_modules/watchpack": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",
@ -20009,6 +20018,12 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuex": {
"version": "3.6.2",
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
"requires": {}
},
"watchpack": {
"version": "2.4.1",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",

3
package.json
View File

@ -14,7 +14,8 @@
"element-ui": "^2.15.14",
"less-loader": "^12.2.0",
"vue": "^2.6.14",
"vue-router": "^2.8.1"
"vue-router": "^2.8.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",

3
src/main.js
View File

@ -1,7 +1,7 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router';
import store from './store'; // 导入你配置好的store
Vue.config.productionTip = false
// 注册element-ui
import ElementUI from 'element-ui';
@ -10,6 +10,7 @@ Vue.use(ElementUI);
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')

5
src/router/index.js
View File

@ -15,7 +15,10 @@ const routes = [
{
path: 'user',
name: 'User',
component: User
component: User,
meta: {
isLogin: true
},
},
{
path: 'login',

22
src/router/permission.js Normal file
View File

@ -0,0 +1,22 @@
import router from "./index";
//路由守护
router.beforeEach((to, from, next) => {
if (to.meta.isLogin) {
if (to.path === '/login') {
next()
}
else {
var tokenStr = window.localStorage.getItem('token')
if (!tokenStr) {
return next('/login')
}
else {
next()
}
}
}
else {
next();
}
})

26
src/store/index.js Normal file
View File

@ -0,0 +1,26 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
token: localStorage.getItem('token') ? localStorage.getItem('token') : 'abc'
},
getters: {
},
mutations: {
setToken(state, token) {
state.token = token
localStorage.setItem("token", token)//存储token
},
delToken(state) {
state.token = ''
localStorage.removeItem("token")//删除token
}
},
actions: {
},
modules: {
}
})

55
src/store/request.js Normal file
View File

@ -0,0 +1,55 @@
import router from "@/router";
import axios from "axios";
import { Message } from "element-ui";
//创建axios实例
const axiosInstance = axios.create({
// baseURL: 'http://119.29.254.99:8887', // 设置默认发送地址为后端端口
baseURL: 'http://localhost:8081',
});
//添加拦截器，在每次ajax之前都会执行这个操作
axiosInstance.interceptors.request.use(function (config) {
//从本地缓存获得token
const token = window.localStorage.getItem('token')
//如果存在将其加入请求头中
if (token) {
config.headers.token = token;
}
return config;
}, function (error) {
return Promise.reject(error);//发生错误返回一个拒绝的promise对象
})
axiosInstance.interceptors.response.use(function (response) {
return response
},
function (error) {
if (error.response.status === 401) {
router.push({ path: "/login" }, () => { }, () => { })
var msg = "登录超时,请重新登录"
Message({
message: msg,
type: 'error',
duration: 3000
})
localStorage.removeItem('token')
}
else if (error.response.status === 402) {
router.push({ path: "/login" });
}
else if (error.response.status === 500) {
var msg1 = '出现未知错误'
Message({
message: msg1,
type: 'error',
duration: 3000
})
}
}
)
export default axiosInstance;

156
src/views/Login.vue
View File

@ -24,7 +24,7 @@
<el-form-item label="账号" label-width="80px" prop="account">
<el-input type="text" v-model="registerForm.account"></el-input>
</el-form-item>
<el-form-item label="邮箱" label-width="80px" prop="email">
<el-form-item label="电话" label-width="80px" prop="email">
<el-input type="text" v-model="registerForm.email"></el-input>
</el-form-item>
<el-form-item label="密码" label-width="80px" prop="password">
@ -34,13 +34,13 @@
<el-form-item label="确认密码" label-width="80px" prop="checkPassword">
<el-input type="password" v-model="registerForm.checkPassword"></el-input>
</el-form-item>
<el-form-item label="验证码" label-width="80px" prop="code">
<!-- <el-form-item label="验证码" label-width="80px" prop="code">
<el-input type="text" v-model="registerForm.code" class="code"></el-input>
<span v-if="codeShow" style="color: rgb(0, 238, 255);cursor: pointer; /*悬停变小手的属性*/"
@click="getCode()">获取验证码</span>
<span v-if="!codeShow" style="color: rgb(0, 238, 255);">{{ count }}秒后重试</span>
</el-form-item>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
</el-form-item>
@ -52,7 +52,7 @@
</template>
<script>
// import axiosInstance from "@/store/request";
import axiosInstance from "@/store/request";
export default {
data() {
@ -104,13 +104,13 @@
callback();
}
};
var validateCode = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入验证码"));
} else {
callback();
}
};
// var validateCode = (rule, value, callback) => {
// if (!value) {
// return callback(new Error("请输入验证码"));
// } else {
// callback();
// }
// };
return {
codeShow: true,
count: "",
@ -155,19 +155,19 @@
trigger: "blur",
},
],
code: [
{
validator: validateCode,
trigger: "blur",
},
],
// code: [
// {
// validator: validateCode,
// trigger: "blur",
// },
// ],
},
};
},
methods: {
getCode() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const emailRegex = /^(\+?\d{1,3}[-.\s]?)?\d{10}$/;
if (!emailRegex.test(this.registerForm.email)) {
this.$message({
message: '请输入正确的邮箱',
@ -176,9 +176,9 @@
}
else {
const TIME_COUNT = 60;
// axiosInstance.post("/sendCode", {
// email: this.registerForm.email,
// });
axiosInstance.post("/sendCode", {
email: this.registerForm.email,
});
if (!this.timer) {
this.count = TIME_COUNT;
this.codeShow = false;
@ -198,81 +198,85 @@
},
submitForm(formname) {
// const that = this;
const that = this;
this.$refs[formname].validate((valid) => {
if (valid) {
if (this.activeTab === "login") {
console.log(this.loginForm.username);
console.log(this.loginForm.password);
// axiosInstance
// .post("/login", {
axiosInstance
.post("/login", {
// account: this.loginForm.account,
// password: this.loginForm.password,
phone: this.loginForm.account,
password: this.loginForm.password,
// })
// .then(function (response) {
// if (response.data.responseStr !== "No") {
// that.$store.commit("setToken", response.data.responseStr);
// localStorage.setItem("account", that.loginForm.account);
// that.$router.push({ path: "/home" });
// } else {
// that.$message.error('账号或密码错误');
// }
// });
})
.then(function (response) {
console.log(that.$store, "store")
console.log(response);
if (response.data !== "登录失败") {
that.$store.commit("setToken", response.data);
localStorage.setItem("account", that.loginForm.account);
that.$router.push({ path: "/user" });
} else {
that.$message.error('账号或密码错误');
}
});
// console.log(this.username+"pass"+this.password);
}
if (this.activeTab === "register") {
// const that = this;
// axiosInstance.post("/checkCode", {
// email: that.registerForm.email,
// code: that.registerForm.code,
// }).then(function (response) {
// if (response.data === true) {
const that = this;
axiosInstance
.post("/register", {
// that.$message({
// message: '验证码正确',
// type: 'success'
// });
// axiosInstance
// .post("/register", {
username: that.registerForm.account,
password: that.registerForm.password,
phone: that.registerForm.email,
// account: that.registerForm.account,
// password: that.registerForm.password,
// email: that.registerForm.email,
})
.then(function (response) {
if (response.data.status === 200) {
that.$message({
message: '注册成功',
type: 'success'
});
} else if (response.data.status === 1001) {
that.$message.error('账号已存在');
} else if (response.data.status === 1002) {
that.$message.error('该邮箱已被注册');
} else {
that.$message.error('注册失败');
}
// })
// .then(function (response) {
// if (response.data.status === 200) {
// that.$message({
// message: '注册成功',
// type: 'success'
// });
// } else if (response.data.status === 1001) {
// that.$message.error('账号已存在');
// } else if (response.data.status === 1002) {
// that.$message.error('该邮箱已被注册');
// } else {
// that.$message.error('注册失败');
// }
});
// axiosInstance.post("/checkCode", {
// email: that.registerForm.email,
// code: that.registerForm.code,
// }).then(function (response) {
// if (response.data === true) {
// });
// that.$message({
// message: '验证码正确',
// type: 'success'
// });
// } else if (response.data === false) {
// that.$message.error('验证码错误');
// } else {
// that.$message.error('验证码失效');
// }
// });
// } else if (response.data === false) {
// that.$message.error('验证码错误');
// } else {
// that.$message.error('验证码失效');
// // .catch(){
// // //抛出网络请求异常
// // }
// console.log(this.registerForm);
// }
// });
// .catch(){
// //抛出网络请求异常
// }
// console.log(this.registerForm);
}
} else {
console.log("abc");

6
src/views/User.vue
View File

@ -73,11 +73,11 @@ export default {
<style lang="less">
.outer {
background-image: url('../image/back.png');
display: flex;
.video {
width: 100%;
//居中
display: flex;
justify-content: center;
align-items: center;
@ -87,7 +87,7 @@ export default {
}
video {
width: 100%;
max-width: 700px;
max-width: 900px;
}