yxt_group
/
supervise
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

go home

master
fengdong777 2 years ago
parent
15aebd7dd6
commit
54daa73367
4 changed files with 135 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      warehousing-system/project_web/src/components/Home.vue
  2. 226
      warehousing-system/project_web/src/components/Login.vue
  3. 2
      warehousing-system/project_web/src/main.js
  4. 6
      warehousing-system/project_web/src/router/index.js

3
warehousing-system/project_web/src/components/Home.vue
View File

@ -121,7 +121,8 @@ export default {
}, },
mounted () { mounted () {
this.user = window.sessionStorage.getItem('token').substr(32) // this.user = window.sessionStorage.getItem('token').substr(32)
this.user = "9a3860f0f2af471982e919657099913dddd"
} }
} }
</script> </script>

226
warehousing-system/project_web/src/components/Login.vue
View File

@ -1,26 +1,47 @@
<template> <template>
<div class='background'> <div class="background">
<div class="login_box"> <div class="login_box">
<div class="box_Central" > <div class="box_Central">
<div><img></div> <div><img /></div>
<el-form :rules="rules" :model="loginForm" ref="loginFormRef" label-width="80px">
<el-form-item label="用户名"prop="username">
<el-input v-model="loginForm.username" style="width: 200px" ></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" style="width: 200px" show-password ></el-input>
</el-form-item>
<div class="cl">
<div class="box_cn"> <el-row >
<el-button type="primary" @click="login">登录</el-button>
</el-row></div>
<div class="box_cv"> <el-row >
<el-button type="info" style="background-color: orange;border-color: orange;" @click="resetBtn">重置</el-button>
</el-row></div></div>
<el-form
:rules="rules"
:model="loginForm"
ref="loginFormRef"
label-width="80px"
>
<el-form-item label="用户名" prop="username">
<el-input
v-model="loginForm.username"
style="width: 200px"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="loginForm.password"
style="width: 200px"
show-password
></el-input>
</el-form-item>
<div class="cl">
<div class="box_cn">
<el-row>
<el-button type="primary" @click="login">登录</el-button>
</el-row>
</div>
<div class="box_cv">
<el-row>
<el-button
type="info"
style="background-color: orange; border-color: orange"
@click="resetBtn"
>重置</el-button
>
</el-row>
</div>
</div>
</el-form> </el-form>
</div > </div>
<!-- 外层 --> <!-- 外层 -->
<div class="face face2">欢迎使用</div> <div class="face face2">欢迎使用</div>
</div> </div>
@ -29,129 +50,140 @@
<script> <script>
export default { export default {
data () { data() {
return { return {
loginForm: { loginForm: {
username: '', username: "",
password: '' password: "",
}, },
rules: { // key:value rules: {
// key:value
username: [ username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }, { required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } {
min: 3,
max: 30,
message: "长度在 3 到 30 个字符",
trigger: "blur",
},
], ],
password: [ password: [
{ required: true, message: '请输入密码', trigger: 'blur' }, { required: true, message: "请输入密码", trigger: "blur" },
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } {
] min: 3,
} max: 30,
} message: "长度在 3 到 30 个字符",
trigger: "blur",
},
],
},
};
}, },
methods: { methods: {
resetBtn () { resetBtn() {
// 获取当前表单对象 之后重置数据 // 获取当前表单对象 之后重置数据
this.$refs.loginFormRef.resetFields() this.$refs.loginFormRef.resetFields();
}, },
login () { login() {
this.$refs.loginFormRef.validate(async valid => { this.$refs.loginFormRef.validate(async (valid) => {
if (!valid) return if (!valid) return;
const { data: result } = const { data: result } = await this.$http.post(
await this.$http.post('/user/login', this.loginForm) "/user/login",
if (result.status !== 200) return this.$message.error('用户名或密码错误!') this.loginForm
this.$message.success('用户登录成功!') );
const token = result.data if (result.status !== 200)
console.log(token) return this.$message.error("用户名或密码错误!");
window.sessionStorage.setItem('token', token) this.$message.success("用户登录成功!");
this.$router.push('/home') const token = result.data;
}) console.log(token);
} window.sessionStorage.setItem("token", token);
} this.$router.push("/home");
} });
},
},
};
</script> </script>
<style> <style>
.background{ .background {
/* 渐变背景 */ /* 渐变背景 */
background: linear-gradient(90deg,#00aaff,#ffffff,#4eecec); background: linear-gradient(90deg, #00aaff, #ffffff, #4eecec);
height: 100%; height: 100%;
width: 100%; width: 100%;
}
}
.box_Central{ .box_Central {
margin-top: 60px; margin-top: 60px;
margin-left: 60px; margin-left: 60px;
} }
.box_cn{ .box_cn {
float:left; float: left;
margin-left: 80px; margin-left: 80px;
} }
.box_cv{ .box_cv {
float: left; float: left;
margin-left: 50px; margin-left: 50px;
} }
.cl{ .cl {
clear: both; clear: both;
} }
.login_box{ .login_box {
width: 450px; width: 450px;
height: 330px; height: 330px;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
right: 50%; right: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.face{ .face {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
font-size: 50px; font-size: 50px;
} }
.login_box .face2{ .login_box .face2 {
background: #111; background: #111;
transition: .5s; transition: 0.5s;
} }
/* 经过外层高度变小 */ /* 经过外层高度变小 */
.login_box:hover .face2{ .login_box:hover .face2 {
height: 60px; height: 60px;
} }
/* 经过字体变小 */ /* 经过字体变小 */
.login_box:hover .face2 h2{ .login_box:hover .face2 h2 {
font-size: 2em; font-size: 2em;
} }
/* 三个卡片外层渐变色 */ /* 三个卡片外层渐变色 */
.login_box:nth-child(1) .face2{ .login_box:nth-child(1) .face2 {
background: linear-gradient(45deg,#00aaff,#4eeaea); background: linear-gradient(45deg, #00aaff, #4eeaea);
} }
.login_box .face2::before{ .login_box .face2::before {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width:50% ; width: 50%;
height: 100%; height: 100%;
background: rgba(255, 255,255, .1); background: rgba(255, 255, 255, 0.1);
} }
.login_box .face2 h2{ .login_box .face2 h2 {
margin:0; margin: 0;
padding: 0; padding: 0;
font-size: 10em; font-size: 10em;
color: #fff; color: #fff;
transition: 0.5s; transition: 0.5s;
} }
</style> </style>

2
warehousing-system/project_web/src/main.js
View File

@ -16,7 +16,7 @@ import 'quill/dist/quill.bubble.css' // for bubble theme
import axios from 'axios' import axios from 'axios'
/* 设定axios的请求根目录 */ /* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:9050/' axios.defaults.baseURL = 'http://192.168.3.183:9050/'
// axios.defaults.baseURL = 'http://manage.jt.com/' // axios.defaults.baseURL = 'http://manage.jt.com/'
// axios.defaults.baseURL = 'http://yichuwh.com/' // axios.defaults.baseURL = 'http://yichuwh.com/'

6
warehousing-system/project_web/src/router/index.js
View File

@ -24,8 +24,8 @@ Vue.use(VueRouter)
const routes = [ const routes = [
{ path: '/login', component: Login }, { path: '/login', component: Login },
{ path: '/', redirect: '/login' }, // { path: '/', redirect: '/login' },
// {path: '/',redirect:'/home'}, { path: '/', redirect: '/home' },
{ {
path: '/home', path: '/home',
component: Home, component: Home,
@ -61,7 +61,7 @@ export default router
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.path === '/login') return next() if (to.path === '/login') return next()
// 2.获取token信息 // 2.获取token信息
const token = window.sessionStorage.getItem('token') const token = "9a3860f0f2af471982e919657099913dddd" // window.sessionStorage.getItem('token')
// 3.判断token是否有数据?? if(token) 如果token不为null // 3.判断token是否有数据?? if(token) 如果token不为null
// 如果token为null 则跳转到登录页面 // 如果token为null 则跳转到登录页面
if (!token) return next('/login') if (!token) return next('/login')

Write Preview
Loading…
Cancel
Save