wen
/
jialuomaadmin
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity
Browse Source

修改

master
wen 2 years ago
parent
3a0ec8619d
commit
dec258311c
4 changed files with 169 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 8
      src/main.js
  3. 262
      src/views/login/index.vue
  4. 20
      vue.config.js

2
package.json
Unescape View File

@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
"test:ci": "npm run lint && npm run test:unit"
},
"dependencies": {
"axios": "0.18.1",
"axios": "^1.1.2",
"core-js": "3.6.5",
"element-ui": "2.13.2",
"js-cookie": "2.2.0",

8
src/main.js
Unescape View File

@ -23,10 +23,10 @@ import '@/permission' // permission control如果 @@ -23,10 +23,10 @@ import '@/permission' // permission control如果
* 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()
}
// if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }
// set ElementUI lang to EN
//Vue.use(ElementUI, { locale })

262
src/views/login/index.vue
Unescape View File

@ -40,6 +40,25 @@ @@ -40,6 +40,25 @@
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<div class="captcha_k">
<el-form-item prop="captcha">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input
ref="captcha"
v-model="loginForm.captcha"
placeholder="验证码"
name="用户名"
type="text"
tabindex="3"
auto-complete="on"
/>
</el-form-item>
<div class="captcha_main" v-loading="captcha_loading">
<img class="captcha_img" :src="captchaimg" alt="验证码"/>
</div>
</div>
<el-button class="bt_login" :loading="loading" type="primary" @click.native.prevent="handleLogin">登入</el-button>
<el-button class="bt_rest bt_login" @click="resetForm('loginForm')">重置</el-button>
@ -53,19 +72,141 @@ @@ -53,19 +72,141 @@
</template>
<script>
//import { validUsername } from '@/utils/validate'
import axios from 'axios'
export default {
mounted: function () {
this.getCustomers();
},
data() {
const validateUsername = (rule, value, callback) => {
if (value.length < 3) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('请输入正确的密码'))
} else {
callback()
}
}
const validateCaptcha = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('请输入正确的验证码'))
} else {
callback()
}
}
return {
loginForm: {
username: '',
password: '',
captcha: ''
},
captchaimg: '', // 验证码图片
loginRules: {
username: [
{ required: true, trigger: 'blur', validator: validateUsername }
],
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
captcha: [{ required: true, trigger: 'blur', validator: validateCaptcha }]
},
loading: false,
captcha_loading: false,
passwordType: 'password',
redirect: undefined
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
methods: {
// 页面数据
getCustomers() {
let thiss = this;
axios.post('/api/captcha', 'refresh').then(function (response) {
let datamain = response.data;
thiss.captchaimg = datamain.data;
console.log(response);
}).catch(function (error) {
//console.log(error);
this.$message({
showClose: true,
message: error,
type: 'error'
});
});
},
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = 'text'
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
// console.log(valid);
if (valid) {
this.loading = true
let thiss = this;
axios.post('/api/login', this.loginForm, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function (response) {
console.log(thiss.$router)
thiss.$router.push({path: '/usermange'})
console.log('6666');
}).catch(function (error) {
//console.log(error);
this.$message({
showClose: true,
message: error,
type: 'error'
});
});
// this.$store.dispatch('user/login', this.loginForm).then(() => {
// this.$router.push({ path: this.redirect || '/' })
// this.loading = false
// }).catch(() => {
// this.loading = false
// })
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="scss">
$bg:#283443;
$light_gray:#fff;
$cursor: #3c3535;
// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
// .login-container .el-input input {
// color: $cursor;
// }
// }
/* reset element-ui css */
//input::placeholder{color:#5a5252 !important;}
.login-container {
.el-input {
display: inline-block;
@ -98,7 +239,7 @@ $cursor: #3c3535; @@ -98,7 +239,7 @@ $cursor: #3c3535;
}
</style>
<style lang="scss" scoped>
<style lang="scss">
.login-container {
min-height: 100%;
@ -158,106 +299,9 @@ $cursor: #3c3535; @@ -158,106 +299,9 @@ $cursor: #3c3535;
cursor: pointer;
user-select: none;
}
.captcha_k{display:flex;}
.captcha_k .captcha_main{width:100px;height:54px;margin: 0 0 0 15px;}
.captcha_k .captcha_img{border-radius:6px;display:block;max-width:100%;height:100%;}
.captcha_k>.el-form-item{flex:1;}
}
</style>
<script>
//import { validUsername } from '@/utils/validate'
import axios from 'axios'
export default {
data() {
const validateUsername = (rule, value, callback) => {
if (value.length < 3) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('请输入正确的密码'))
} else {
callback()
}
}
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, trigger: 'blur', validator: validateUsername }
],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
loading: false,
passwordType: 'password',
redirect: undefined
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = 'text'
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
// console.log(valid);
if (valid) {
this.loading = true
let thiss = this;
// axios.post('/api/mkdir', {
// firstName: 'Fred',
// lastName: 'Flintstone'
// })
// .then(function (response) {
// console.log(thiss.$router)
// thiss.$router.push({ path: '/usermange'})
// console.log(response + 'ffef');
// })
// .catch(function (error) {
// console.log(error);
// });
// this.$message({
// showClose: true,
// message: '错了哦，这是一条错误消息',
// type: 'error'
// });
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: this.redirect || '/' })
this.loading = false
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>

20
vue.config.js
Unescape View File

@ -39,16 +39,16 @@ module.exports = { @@ -39,16 +39,16 @@ module.exports = {
},
inline: false,
//before: require('./mock/mock-server.js'),
proxy: {
'/api': {
target: 'http://192.168.1.8:1080',// 你要请求的后端接口ip+port
changeOrigin: true,// 允许跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: true,// 开启webSocket
pathRewrite: {
'^/api': '/api'// 替换成target中的地址
}
}
}
proxy: {
'/api': {
target: 'https://dev.filesite.io',// 你要请求的后端接口ip+port
changeOrigin: true,// 允许跨域，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
ws: true,// 开启webSocket
pathRewrite: {
'^/api': '/api'// 替换成target中的地址
}
}
}
},
configureWebpack: {

Write Preview
Loading…
Cancel
Save