github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge 10877dc630 into ef426d0724

pull/42/merge
Don 2017-05-23 03:53:59 +00:00 committed by GitHub
parent ef426d0724 10877dc630
commit 3116d184d3
8 changed files with 130 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -20,7 +20,8 @@
"vue-echarts-v3": "1.0.3",
"vue-quill-editor": "2.1.6",
"vue-router": "^2.3.1",
"vue-simplemde": "0.3.8"
"vue-simplemde": "0.3.8",
"vuex": "^2.2.1"
},
"devDependencies": {
"autoprefixer": "^6.7.2",

4
src/components/common/Header.vue
View File

@ -23,14 +23,14 @@
},
computed:{
username(){
let username = localStorage.getItem('ms_username');
let username = this.$store.state.user.username;
return username ? username : this.name;
}
},
methods:{
handleCommand(command) {
if(command == 'loginout'){
localStorage.removeItem('ms_username')
this.$store.commit('logout');
this.$router.push('/login');
}
}

73
src/components/page/Login.vue
View File

@ -7,7 +7,8 @@
<el-input v-model="ruleForm.username" placeholder="username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
<el-input type="password" placeholder="password" v-model="ruleForm.password"
@keyup.enter.native="submitForm('ruleForm')"></el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
@ -20,7 +21,7 @@
<script>
export default {
data: function(){
data: function () {
return {
ruleForm: {
username: '',
@ -28,10 +29,10 @@
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
{required: true, message: '请输入用户名', trigger: 'blur'}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
{required: true, message: '请输入密码', trigger: 'blur'}
]
}
}
@ -41,10 +42,26 @@
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
localStorage.setItem('ms_username',self.ruleForm.username);
self.$router.push('/readme');
this.$axios.post('/api/user', this.$qs.stringify({
'username': self.ruleForm.username,
'password': self.ruleForm.password
}))
.then(function (response) {
if (response.data['errno'] == 0) {
self.$store.commit('login', response.data.user);
self.$router.push('/readme');
} else {
self.$alert(response.data['errmsg'], '错误', {
confirmButtonText: '确定'
});
}
})
.catch(function (error) {
self.$alert(error, '错误', {
confirmButtonText: '确定'
});
});
} else {
console.log('error submit!!');
return false;
}
});
@ -54,37 +71,41 @@
</script>
<style scoped>
.login-wrap{
.login-wrap {
position: relative;
width:100%;
height:100%;
width: 100%;
height: 100%;
}
.ms-title{
.ms-title {
position: absolute;
top:50%;
width:100%;
top: 50%;
width: 100%;
margin-top: -230px;
text-align: center;
font-size:30px;
font-size: 30px;
color: #fff;
}
.ms-login{
.ms-login {
position: absolute;
left:50%;
top:50%;
width:300px;
height:160px;
margin:-150px 0 0 -190px;
padding:40px;
left: 50%;
top: 50%;
width: 300px;
height: 160px;
margin: -150px 0 0 -190px;
padding: 40px;
border-radius: 5px;
background: #fff;
}
.login-btn{
.login-btn {
text-align: center;
}
.login-btn button{
width:100%;
height:36px;
.login-btn button {
width: 100%;
height: 36px;
}
</style>
</style>

7
src/main.js
View File

@ -7,9 +7,14 @@ import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
import "babel-polyfill";
import './mock/index.js';
import qs from 'qs';
import store from 'store';
Vue.use(ElementUI);
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
Vue.prototype.$store = store;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
}).$mount('#app');

5
src/mock/index.js
View File

@ -1,11 +1,12 @@
import Mock from 'mockjs';
import {vuetable} from './vuetable.js';
import {datasource} from './datasource.js';
import {user} from './user.js';
let data = [].concat(vuetable,datasource);
let data = [].concat(vuetable,datasource,user);
data.forEach(function(res){
Mock.mock(res.path, res.data);
});
export default Mock;
export default Mock;

23
src/mock/user.js Normal file
View File

@ -0,0 +1,23 @@
export const user = [
{
path: '/api/user',
data: {
'errno|0-1': 1,
'errmsg': function () {
if (this.errno == 1) {
return '用户名或密码错误';
}
return '';
},
'user': {
"id": "@natural",
"username": "@cname",
"auth": function () {
var base = ["/basetable", "/vuetable", "/baseform", "/vueeditor", "/markdown", "/upload", "/basecharts", "/mixcharts"]
var start = Math.floor(Math.random() * (base.length - 1))
return ["/", "/login", "/logout", "/readme"].concat(base.slice(-start));
}
}
}
}
]

28
src/router/index.js
View File

@ -3,7 +3,7 @@ import Router from 'vue-router';
Vue.use(Router);
export default new Router({
const router = new Router({
routes: [
{
path: '/',
@ -12,7 +12,7 @@ export default new Router({
{
path: '/readme',
component: resolve => require(['../components/common/Home.vue'], resolve),
children:[
children: [
{
path: '/',
component: resolve => require(['../components/page/Readme.vue'], resolve)
@ -57,3 +57,27 @@ export default new Router({
},
]
})
router.beforeEach((to, from, next) => {
if (to.path === '/login' || to.name === 'login') {
next()
} else {
var user = router.app.$store.state.user
// 通过state获取权限，登录成功时，获取列表
if (!user.id) {
return next({path: '/login'})
}
var auth = user.auth.some(auth => to.path == auth);
if (!auth) {
router.app.$alert('没有权限', '错误', {
confirmButtonText: '确定'
})
}
next(auth)
}
})
export default router

21
src/store.js Normal file
View File

@ -0,0 +1,21 @@
/**
* Created by Administrator on 2017.05.16.
*/
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {}
},
mutations: {
login (state, user) {
state.user = user;
},
logout (state) {
state.user = {};
}
}
})