From 82c54f1d3c343717df433e7bbabf0dcd659d34a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=80=97=E6=AF=94?= <754124441@qq.com>
Date: Thu, 8 Nov 2018 15:04:54 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20README.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index e69de29..e10758b 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+抽取后的效果图:
+![输入图片说明](https://images.gitee.com/uploads/images/2018/1108/150414_25ca3029_1636840.png "屏幕截图.png")
+![输入图片说明](https://images.gitee.com/uploads/images/2018/1108/150436_f05a982d_1636840.png "屏幕截图.png")
\ No newline at end of file
-- 
Gitee


From 4fda5799221ce99055816b72e56a8dc22d57c147 Mon Sep 17 00:00:00 2001
From: dinghao <754124441@qq.com>
Date: Thu, 8 Nov 2018 15:12:17 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E4=B9=8B=E5=89=8D?=
 =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E6=97=B6=E7=9A=84=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Main.vue  | 26 +++++++++++++++++++++++++-
 src/views/login.vue |  2 +-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/views/Main.vue b/src/views/Main.vue
index 75e4e73..c97f29e 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -3,6 +3,11 @@
 </style>
 <template>
     <div class="main" :class="{'main-hide-text': shrink}">
+        <!--===========================================================================================================-->
+        <!--
+        shrink boolean 是否显示
+
+        -->
         <div class="sidebar-menu-con" :style="{width: shrink?'60px':'200px', overflow: shrink ? 'visible' : 'auto'}">
             <shrinkable-menu
                     :shrink="shrink"
@@ -17,27 +22,39 @@
                 </div>
             </shrinkable-menu>
         </div>
+        <!--===========================================================================================================-->
+        <!--
+        toggleClick  :  收缩左侧导航
+        currentPath  :  当前面包屑
+        -->
         <div class="main-header-con" :style="{paddingLeft: shrink?'60px':'200px'}">
             <div class="main-header">
+                <!--收缩左侧导航-->
                 <div class="navicon-con">
                     <Button :style="{transform: 'rotateZ(' + (this.shrink ? '-90' : '0') + 'deg)'}" type="text"
                             @click="toggleClick">
                         <Icon type="navicon" size="32"></Icon>
                     </Button>
                 </div>
+                <!--当前面包屑-->
                 <div class="header-middle-con">
                     <div class="main-breadcrumb">
                         <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
                     </div>
                 </div>
                 <div class="header-avator-con">
+                    <!--全屏-->
                     <full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>
+                    <!--锁屏-->
                     <lock-screen></lock-screen>
+                    <!--消息-->
                     <message-tip v-model="mesCount"></message-tip>
+                    <!--切换主题-->
                     <theme-switch></theme-switch>
 
                     <div class="user-dropdown-menu-con">
                         <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
+                            <!--点击用户名-->
                             <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
                                 <a href="javascript:void(0)">
                                     <span class="main-user-name">{{ userName }}</span>
@@ -48,15 +65,19 @@
                                     <DropdownItem name="loginout" divided>退出登录</DropdownItem>
                                 </DropdownMenu>
                             </Dropdown>
+                            <!--图标-->
                             <Avatar :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar>
                         </Row>
                     </div>
                 </div>
             </div>
+            <!-- 查看过的页面 -->
             <div class="tags-con">
                 <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
             </div>
         </div>
+        <!--===========================================================================================================-->
+        <!-- 进入后台后显示框的显示内容 -->
         <div class="single-page-con" :style="{left: shrink?'60px':'200px'}">
             <div class="single-page">
                 <keep-alive :include="cachePage">
@@ -92,19 +113,22 @@
                 shrink: false,
                 userName: '',
                 isFullScreen: false,
-                openedSubmenuArr: this.$store.state.app.openedSubmenuArr
+                openedSubmenuArr: this.$store.state.app.openedSubmenuArr// 要展开的菜单数组
             };
         },
         computed: {
+            //导航栏的菜单列表
             menuList() {
                 return this.$store.state.app.menuList;
             },
+            //打开的页面的页面对象列表
             pageTagsList() {
                 return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
             },
             currentPath() {
                 return this.$store.state.app.currentPath; // 当前面包屑数组
             },
+            //图标路径
             avatorPath() {
                 return localStorage.avatorImgPath;
             },
diff --git a/src/views/login.vue b/src/views/login.vue
index acf30bb..1a45311 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -30,7 +30,7 @@
                             <Button @click="handleSubmit" type="primary" long>登录</Button>
                         </FormItem>
                     </Form>
-                    <p class="login-tip">输入任意用户名和密码即可</p>
+                    <!--<p class="login-tip">输入任意用户名和密码即可</p>-->
                 </div>
             </Card>
         </div>
-- 
Gitee


From 716bc324c301c949c7b2b45fe8f8ec62414a6ca3 Mon Sep 17 00:00:00 2001
From: dinghao <754124441@qq.com>
Date: Fri, 9 Nov 2018 17:47:55 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0axios=E6=9D=A5=E6=A8=A1?=
 =?UTF-8?q?=E6=8B=9F=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.js          | 28 ++++++++++++
 src/libs/auth.js          | 15 +++++++
 src/libs/request.js       | 77 +++++++++++++++++++++++++++++++++
 src/libs/util.js          | 27 ++++++------
 src/router/index.js       | 16 +++++--
 src/store/modules/user.js | 14 ++++--
 src/views/login.vue       | 89 ++++++++++++++++++++++-----------------
 7 files changed, 210 insertions(+), 56 deletions(-)
 create mode 100644 src/api/login.js
 create mode 100644 src/libs/auth.js
 create mode 100644 src/libs/request.js

diff --git a/src/api/login.js b/src/api/login.js
new file mode 100644
index 0000000..ab8a55b
--- /dev/null
+++ b/src/api/login.js
@@ -0,0 +1,28 @@
+import request from '@/libs/request'
+
+export function loginByUsername(username, password) {
+    const data = {
+        username,
+        password
+    }
+    return request({
+        url: '/login/login',
+        method: 'post',
+        data
+    })
+}
+
+export function logout() {
+    return request({
+        url: '/login/logout',
+        method: 'post'
+    })
+}
+
+export function getUserInfo(token) {
+    return request({
+        url: '/admin/info',
+        method: 'get',
+        params: { token }
+    })
+}
diff --git a/src/libs/auth.js b/src/libs/auth.js
new file mode 100644
index 0000000..08a43d6
--- /dev/null
+++ b/src/libs/auth.js
@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
diff --git a/src/libs/request.js b/src/libs/request.js
new file mode 100644
index 0000000..987f05c
--- /dev/null
+++ b/src/libs/request.js
@@ -0,0 +1,77 @@
+import axios from 'axios'
+import {Message, MessageBox} from 'iview'
+import store from '@/store'
+import env from '../../build/env';
+import {getToken} from '@/libs/auth'
+
+
+const ajaxUrl = env === 'development'
+    ? 'http://127.0.0.1:8888'
+    : env === 'production'
+        ? 'https://www.url.com'
+        : 'https://debug.url.com';
+
+
+// create an axios instance
+const service = axios.create({
+    baseURL: ajaxUrl, // api的base_url
+    timeout: 30000 // request timeout
+})
+
+// request interceptor
+service.interceptors.request.use(config => {
+    // Do something before request is sent
+    if (store.token) {
+        config.headers['Admin-Token'] = getToken() // 让每个请求携带token-- ['Admin-Token']为自定义key 请根据实际情况自行修改
+    }
+    return config
+}, error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
+})
+
+// respone interceptor
+service.interceptors.response.use(
+    response => {
+        const res = response.data
+
+        if (res.errno === 501) {
+            MessageBox.alert('系统未登录，请重新登录', '未登录', {
+                confirmButtonText: '确定',
+                type: 'error'
+            }).then(() => {
+                store.dispatch('logout').then(() => {
+                    location.reload()
+                })
+            })
+            return Promise.reject('error')
+        } else if (res.errno === 502) {
+            MessageBox.alert('系统内部错误，请联系管理员维护', '错误', {
+                confirmButtonText: '确定',
+                type: 'error'
+            })
+            return Promise.reject('error')
+        } else if (res.errno === 503) {
+            MessageBox.alert('请求业务目前未支持', '警告', {
+                confirmButtonText: '确定',
+                type: 'error'
+            })
+            return Promise.reject('error')
+        } else if (res.errno !== 0) {
+            // 非5xx的错误属于业务错误，留给具体页面处理
+            return Promise.reject(response)
+        } else {
+            return response
+        }
+    }, error => {
+        console.log('err' + error)// for debug
+        Message({
+            message: '登录连接超时（后台不能连接，请联系系统管理员）',
+            type: 'error',
+            duration: 5 * 1000
+        })
+        return Promise.reject(error)
+    })
+
+export default service
diff --git a/src/libs/util.js b/src/libs/util.js
index 85f99e9..a8e3d7c 100644
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import env from '../../build/env';
-import semver from 'semver';
-import packjson from '../../package.json';
+import semver from 'semver'; // 检查iview更新
+import packjson from '../../package.json'; // 检查iview更新
 
 let util = {
 
@@ -11,17 +11,18 @@ util.title = function (title) {
     window.document.title = title;
 };
 
-const ajaxUrl = env === 'development'
-    ? 'http://127.0.0.1:8888'
-    : env === 'production'
-        ? 'https://www.url.com'
-        : 'https://debug.url.com';
-
-util.ajax = axios.create({
-    baseURL: ajaxUrl,
-    timeout: 30000
-});
+// const ajaxUrl = env === 'development'
+//     ? 'http://127.0.0.1:8888'
+//     : env === 'production'
+//         ? 'https://www.url.com'
+//         : 'https://debug.url.com';
+//
+// util.ajax = axios.create({
+//     baseURL: ajaxUrl,
+//     timeout: 30000
+// });
 
+//数组arr是否是targetArr的子集
 util.inOf = function (arr, targetArr) {
     let res = true;
     arr.forEach(item => {
@@ -32,6 +33,7 @@ util.inOf = function (arr, targetArr) {
     return res;
 };
 
+//元素ele是否在targetArr中
 util.oneOf = function (ele, targetArr) {
     if (targetArr.indexOf(ele) >= 0) {
         return true;
@@ -40,6 +42,7 @@ util.oneOf = function (ele, targetArr) {
     }
 };
 
+
 util.showThisRoute = function (itAccess, currentAccess) {
     if (typeof itAccess === 'object' && Array.isArray(itAccess)) {
         return util.oneOf(currentAccess, itAccess);
diff --git a/src/router/index.js b/src/router/index.js
index 2655239..166fd2d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import iView from 'iview';
 import Util from '../libs/util';
 import VueRouter from 'vue-router';
 import Cookies from 'js-cookie';
+import { getToken } from '@/libs/auth'
 import {routers, otherRouter, appRouter} from './router';
 
 Vue.use(VueRouter);
@@ -17,26 +18,35 @@ export const router = new VueRouter(RouterConfig);
 
 router.beforeEach((to, from, next) => {
     iView.LoadingBar.start();
+    //浏览器上访问显示
     Util.title(to.meta.title);
+    //判断屏幕是否已被锁上
     if (Cookies.get('locking') === '1' && to.name !== 'locking') { // 判断当前是否是锁定状态
         next({
             replace: true,
             name: 'locking'
-        });
+        });//去上锁屏幕
     } else if (Cookies.get('locking') === '0' && to.name === 'locking') {
         next(false);
     } else {
-        if (!Cookies.get('user') && to.name !== 'login') { // 判断是否已经登录且前往的页面不是登录页
+        // if (!Cookies.get('user') && to.name !== 'login') { // 判断是否已经登录且前往的页面不是登录页
+        //通过是否存在token来校验不严谨,可以发ajax判断token是否有效,后台会提供判断token是否有效的接口
+        if (!getToken() && to.name !== 'login') { // 判断未登录且前往的页面不是登录页
             next({
                 name: 'login'
             });
-        } else if (Cookies.get('user') && to.name === 'login') { // 判断是否已经登录且前往的是登录页
+        // } else if (Cookies.get('user') && to.name === 'login') { // 判断是否已经登录且前往的是登录页
+        } else if (getToken() && to.name === 'login') { // 判断已经登录且前往的是登录页
             Util.title();
             next({
                 name: 'home_index'
             });
         } else {
+            // 1.没有登录,去登陆
+            // 2.登录,其他页面
+
             const curRouterObj = Util.getRouterObjByName([otherRouter, ...appRouter], to.name);
+            //存在访问页面,而且有权限设置
             if (curRouterObj && curRouterObj.access !== undefined) { // 需要判断权限的路由
                 if (curRouterObj.access === parseInt(Cookies.get('access'))) {
                     Util.toDefaultPage([otherRouter, ...appRouter], to.name, router, next); // 如果在地址栏输入的是一级菜单则默认打开其第一个二级菜单的页面
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index c3dc8eb..a5ac374 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,11 +1,16 @@
 import Cookies from 'js-cookie';
+import { getToken,removeToken } from '@/libs/auth'
 
 const user = {
-    state: {},
+    state: {
+        token: getToken()
+    },
     mutations: {
         logout (state, vm) {
-            Cookies.remove('user');
-            Cookies.remove('password');
+            //清除用户信息
+            // Cookies.remove('user');
+            // Cookies.remove('password');
+            removeToken();
             Cookies.remove('access');
             // 恢复默认样式
             let themeLink = document.querySelector('link[name="theme"]');
@@ -19,6 +24,9 @@ const user = {
             if (theme) {
                 localStorage.theme = theme;
             }
+        },
+        getToken(){
+            return this.token;
         }
     }
 };
diff --git a/src/views/login.vue b/src/views/login.vue
index 1a45311..d1b6a9f 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -14,14 +14,14 @@
                     <Form ref="loginForm" :model="form" :rules="rules">
                         <FormItem prop="userName">
                             <Input v-model="form.userName" placeholder="请输入用户名">
-                                <span slot="prepend">
+                            <span slot="prepend">
                                     <Icon :size="16" type="person"></Icon>
                                 </span>
                             </Input>
                         </FormItem>
                         <FormItem prop="password">
                             <Input type="password" v-model="form.password" placeholder="请输入密码">
-                                <span slot="prepend">
+                            <span slot="prepend">
                                     <Icon :size="14" type="locked"></Icon>
                                 </span>
                             </Input>
@@ -38,44 +38,57 @@
 </template>
 
 <script>
-import Cookies from 'js-cookie';
-export default {
-    data () {
-        return {
-            form: {
-                userName: 'admin',
-                password: ''
-            },
-            rules: {
-                userName: [
-                    { required: true, message: '账号不能为空', trigger: 'blur' }
-                ],
-                password: [
-                    { required: true, message: '密码不能为空', trigger: 'blur' }
-                ]
-            }
-        };
-    },
-    methods: {
-        handleSubmit () {
-            this.$refs.loginForm.validate((valid) => {
-                if (valid) {
-                    Cookies.set('user', this.form.userName);
-                    Cookies.set('password', this.form.password);
-                    this.$store.commit('setAvator', 'http://pic26.photophoto.cn/20130331/0007020061105912_b.jpg');
-                    if (this.form.userName === 'admin') {
-                        Cookies.set('access', 0);
-                    } else {
-                        Cookies.set('access', 1);
-                    }
-                    this.$router.push({
-                        name: 'home_index'
-                    });
+    import Cookies from 'js-cookie';
+    import {setToken} from '../libs/auth'
+    import {loginByUsername} from '../api/login'
+
+    export default {
+        data() {
+            return {
+                form: {
+                    userName: 'admin',
+                    password: ''
+                },
+                rules: {
+                    userName: [
+                        {required: true, message: '账号不能为空', trigger: 'blur'}
+                    ],
+                    password: [
+                        {required: true, message: '密码不能为空', trigger: 'blur'}
+                    ]
                 }
-            });
+            };
+        },
+        methods: {
+            handleSubmit() {
+                this.$refs.loginForm.validate((valid) => {
+                    if (valid) {
+                        //ajax
+                        loginByUsername(this.from.userName,this.from.password).then(res => {
+                            //登录成功后向Cookies中保存用户信息
+                            // Cookies.set('user', this.form.userName);
+                            Cookies.set('password', this.form.password);//锁屏密码
+                            // setToken(res.data.token);//将返回的token保存在Cookies中
+                            setToken('18772290169')
+                            //保存图标
+                            this.$store.commit('setAvator', 'http://pic26.photophoto.cn/20130331/0007020061105912_b.jpg');
+                            //通过access控制菜单是否显示
+                            if (this.form.userName === 'admin') {
+                                Cookies.set('access', 0);
+                            } else {
+                                Cookies.set('access', 1);
+                            }
+                            this.$router.push({
+                                name: 'home_index'
+                            });
+                        }).catch(err => {
+                            console.log(err)
+                        })
+                    }
+                });
+            }
         }
-    }
-};
+    };
 </script>
 
 <style>
-- 
Gitee


From 23740be25cdbbc3a1514565946e7fd1b63b011d2 Mon Sep 17 00:00:00 2001
From: dinghao <754124441@qq.com>
Date: Mon, 12 Nov 2018 17:48:49 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0vuex,=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=99=BB=E5=87=BA,=E5=B9=B6=E4=B8=8E?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   1 +
 src/libs/request.js                           |  11 +-
 src/libs/util.js                              |  17 +--
 src/main.js                                   |   2 +
 src/router/index.js                           |   4 +-
 src/store/getters.js                          |   7 ++
 src/store/index.js                            |  15 +--
 src/store/modules/app.js                      |   4 +-
 src/store/modules/user.js                     |  97 +++++++++++----
 src/views/Main.vue                            |  21 ++--
 src/views/login.vue                           |  36 +++---
 .../lockscreen/components/unlock.vue          | 110 +++++++++---------
 12 files changed, 182 insertions(+), 143 deletions(-)
 create mode 100644 src/store/getters.js

diff --git a/index.html b/index.html
index 985fd3d..c9ef767 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
     <link rel="stylesheet" href="/dist/main.css">
+    //设置主题
     <link rel="stylesheet" name="theme" href="">
     <link rel="icon" href="./td_icon.ico" type="image/x-icon" />
 </head>
diff --git a/src/libs/request.js b/src/libs/request.js
index 987f05c..dd237f4 100644
--- a/src/libs/request.js
+++ b/src/libs/request.js
@@ -1,18 +1,18 @@
 import axios from 'axios'
 import {Message, MessageBox} from 'iview'
-import store from '@/store'
 import env from '../../build/env';
-import {getToken} from '@/libs/auth'
+import store from '@/store'
+import {getToken} from '../libs/auth'
 
 
 const ajaxUrl = env === 'development'
-    ? 'http://127.0.0.1:8888'
+    ? 'http://127.0.0.1:9988/admin'
     : env === 'production'
         ? 'https://www.url.com'
         : 'https://debug.url.com';
 
 
-// create an axios instance
+// 创建一个 axios 实例
 const service = axios.create({
     baseURL: ajaxUrl, // api的base_url
     timeout: 30000 // request timeout
@@ -21,7 +21,7 @@ const service = axios.create({
 // request interceptor
 service.interceptors.request.use(config => {
     // Do something before request is sent
-    if (store.token) {
+    if (store.getters.token) {
         config.headers['Admin-Token'] = getToken() // 让每个请求携带token-- ['Admin-Token']为自定义key 请根据实际情况自行修改
     }
     return config
@@ -35,7 +35,6 @@ service.interceptors.request.use(config => {
 service.interceptors.response.use(
     response => {
         const res = response.data
-
         if (res.errno === 501) {
             MessageBox.alert('系统未登录，请重新登录', '未登录', {
                 confirmButtonText: '确定',
diff --git a/src/libs/util.js b/src/libs/util.js
index a8e3d7c..cbda0ef 100644
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -1,7 +1,5 @@
-import axios from 'axios';
-import env from '../../build/env';
-import semver from 'semver'; // 检查iview更新
-import packjson from '../../package.json'; // 检查iview更新
+// import semver from 'semver'; // 检查iview更新
+// import packjson from '../../package.json'; // 检查iview更新
 
 let util = {
 
@@ -11,17 +9,6 @@ util.title = function (title) {
     window.document.title = title;
 };
 
-// const ajaxUrl = env === 'development'
-//     ? 'http://127.0.0.1:8888'
-//     : env === 'production'
-//         ? 'https://www.url.com'
-//         : 'https://debug.url.com';
-//
-// util.ajax = axios.create({
-//     baseURL: ajaxUrl,
-//     timeout: 30000
-// });
-
 //数组arr是否是targetArr的子集
 util.inOf = function (arr, targetArr) {
     let res = true;
diff --git a/src/main.js b/src/main.js
index ae67328..72c1cca 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ import util from '@/libs/util';
 Vue.use(VueI18n);
 Vue.use(iView);
 
+Vue.config.productionTip = false;
+
 new Vue({
     el: '#app',
     router: router,
diff --git a/src/router/index.js b/src/router/index.js
index 166fd2d..1fee52c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,7 @@ import iView from 'iview';
 import Util from '../libs/util';
 import VueRouter from 'vue-router';
 import Cookies from 'js-cookie';
+import store from '@/store'
 import { getToken } from '@/libs/auth'
 import {routers, otherRouter, appRouter} from './router';
 
@@ -31,6 +32,7 @@ router.beforeEach((to, from, next) => {
     } else {
         // if (!Cookies.get('user') && to.name !== 'login') { // 判断是否已经登录且前往的页面不是登录页
         //通过是否存在token来校验不严谨,可以发ajax判断token是否有效,后台会提供判断token是否有效的接口
+        console.log('判断是否登录'+getToken())
         if (!getToken() && to.name !== 'login') { // 判断未登录且前往的页面不是登录页
             next({
                 name: 'login'
@@ -48,7 +50,7 @@ router.beforeEach((to, from, next) => {
             const curRouterObj = Util.getRouterObjByName([otherRouter, ...appRouter], to.name);
             //存在访问页面,而且有权限设置
             if (curRouterObj && curRouterObj.access !== undefined) { // 需要判断权限的路由
-                if (curRouterObj.access === parseInt(Cookies.get('access'))) {
+                if (curRouterObj.access === parseInt(store.getters.access)) {
                     Util.toDefaultPage([otherRouter, ...appRouter], to.name, router, next); // 如果在地址栏输入的是一级菜单则默认打开其第一个二级菜单的页面
                 } else {
                     next({
diff --git a/src/store/getters.js b/src/store/getters.js
new file mode 100644
index 0000000..7aecc6b
--- /dev/null
+++ b/src/store/getters.js
@@ -0,0 +1,7 @@
+const getters = {
+    token: state => state.user.token,
+    access: state => state.user.access,
+    lockScreenPassword: state => state.user.lockScreenPassword,
+    username: state => state.user.username,
+}
+export default getters
diff --git a/src/store/index.js b/src/store/index.js
index efcb136..64c5397 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,23 +3,16 @@ import Vuex from 'vuex';
 
 import app from './modules/app';
 import user from './modules/user';
+import getters from './getters'
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
-    state: {
-        //
-    },
-    mutations: {
-        //
-    },
-    actions: {
-
-    },
     modules: {
         app,
-        user
-    }
+        user,
+    },
+    getters
 });
 
 export default store;
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 44b18f9..b76c315 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,6 +1,6 @@
 import {otherRouter, appRouter} from '@/router/router';
 import Util from '@/libs/util';
-import Cookies from 'js-cookie';
+import store from '@/store'
 import Vue from 'vue';
 
 const app = {
@@ -38,7 +38,7 @@ const app = {
             state.tagsList.push(...list);
         },
         updateMenulist (state) {
-            let accessCode = parseInt(Cookies.get('access'));
+            let accessCode = parseInt(store.getters.access);
             let menuList = [];
             appRouter.forEach((item, index) => {
                 if (item.access !== undefined) {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index a5ac374..922a1cd 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,34 +1,83 @@
-import Cookies from 'js-cookie';
-import { getToken,removeToken } from '@/libs/auth'
+import {getToken, removeToken, setToken} from '@/libs/auth'
+import {loginByUsername, logout, getUserInfo} from '@/api/login'
 
 const user = {
+
+
     state: {
-        token: getToken()
+        token: getToken(),
+        access: '',
+        lockScreenPassword: '',
+        username: '',
     },
+
+
     mutations: {
-        logout (state, vm) {
-            //清除用户信息
-            // Cookies.remove('user');
-            // Cookies.remove('password');
-            removeToken();
-            Cookies.remove('access');
-            // 恢复默认样式
-            let themeLink = document.querySelector('link[name="theme"]');
-            themeLink.setAttribute('href', '');
-            // 清空打开的页面等数据，但是保存主题数据
-            let theme = '';
-            if (localStorage.theme) {
-                theme = localStorage.theme;
-            }
-            localStorage.clear();
-            if (theme) {
-                localStorage.theme = theme;
-            }
+        setToken: (state, token) => {
+            state.token = token
+        },
+
+        setAccess: (state, access) => {
+            state.access = access
+        },
+
+        setLockScreenPassword: (state, lockScreenPassword) => {
+            state.lockScreenPassword = lockScreenPassword
         },
-        getToken(){
-            return this.token;
+
+        setUsername: (state, username) => {
+            state.username = username
         }
+    },
+
+
+    actions: {
+        // 用户名登录
+        LoginByUsername: ({commit}, userInfo) => {
+            const username = userInfo.username.trim();
+            return new Promise((resolve, reject) => {
+                loginByUsername(username, userInfo.password).then(response => {
+                    const token = response.data.data;
+                    commit('setToken', token);
+                    commit('setUsername', username);
+                    setToken(token);
+                    resolve(getUserInfo(token)
+                        .then(res => {
+                            commit('setAvator', res.data.data.avatar);
+                            console.log(res.data.data)
+                        }))
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+
+        // 用户登出
+        LogOut({commit, state}) {
+            return new Promise((resolve, reject) => {
+                logout(state.token).then(() => {
+                    commit('setToken', '');
+                    removeToken();
+                    commit('setAccess', '');
+                    // 恢复默认样式
+                    let themeLink = document.querySelector('link[name="theme"]');
+                    themeLink.setAttribute('href', '');
+                    // 清空打开的页面等数据，但是保存主题数据
+                    let theme = '';
+                    if (localStorage.theme) {
+                        theme = localStorage.theme;
+                    }
+                    localStorage.clear();
+                    if (theme) {
+                        localStorage.theme = theme;
+                    }
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
     }
 };
 
-export default user;
+export default user
diff --git a/src/views/Main.vue b/src/views/Main.vue
index c97f29e..d3f3254 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -57,7 +57,7 @@
                             <!--点击用户名-->
                             <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
                                 <a href="javascript:void(0)">
-                                    <span class="main-user-name">{{ userName }}</span>
+                                    <span class="main-user-name">{{userName}}</span>
                                     <Icon type="arrow-down-b"></Icon>
                                 </a>
                                 <DropdownMenu slot="list">
@@ -95,8 +95,9 @@
     import lockScreen from './main-components/lockscreen/lockscreen.vue';
     import messageTip from './main-components/message-tip.vue';
     import themeSwitch from './main-components/theme-switch/theme-switch.vue';
-    import Cookies from 'js-cookie';
-    import util from '@/libs/util.js';
+    import util from '../libs/util.js';
+    import store from "../store";
+
 
     export default {
         components: {
@@ -111,7 +112,7 @@
         data() {
             return {
                 shrink: false,
-                userName: '',
+                userName: '李某某',
                 isFullScreen: false,
                 openedSubmenuArr: this.$store.state.app.openedSubmenuArr// 要展开的菜单数组
             };
@@ -152,7 +153,7 @@
                 if (pathArr.length >= 2) {
                     this.$store.commit('addOpenSubmenu', pathArr[1].name);
                 }
-                this.userName = Cookies.get('user');
+                this.userName = this.$store.getters.username;
                 let messageCount = 3;
                 this.messageCount = messageCount.toString();
                 this.checkTag(this.$route.name);
@@ -169,10 +170,12 @@
                     });
                 } else if (name === 'loginout') {
                     // 退出登录
-                    this.$store.commit('logout', this);
-                    this.$store.commit('clearOpenedSubmenu');
-                    this.$router.push({
-                        name: 'login'
+                    this.$store.dispatch('LogOut').then(()=>{
+                        this.$store.commit('clearOpenedSubmenu');
+                        this.$router.push({
+                            name: 'login'
+                        });
+                        // location.reload()
                     });
                 }
             },
diff --git a/src/views/login.vue b/src/views/login.vue
index d1b6a9f..b98e714 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -12,8 +12,8 @@
                 </p>
                 <div class="form-con">
                     <Form ref="loginForm" :model="form" :rules="rules">
-                        <FormItem prop="userName">
-                            <Input v-model="form.userName" placeholder="请输入用户名">
+                        <FormItem prop="username">
+                            <Input v-model="form.username" placeholder="请输入用户名">
                             <span slot="prepend">
                                     <Icon :size="16" type="person"></Icon>
                                 </span>
@@ -38,19 +38,15 @@
 </template>
 
 <script>
-    import Cookies from 'js-cookie';
-    import {setToken} from '../libs/auth'
-    import {loginByUsername} from '../api/login'
-
     export default {
         data() {
             return {
                 form: {
-                    userName: 'admin',
+                    username: 'admin123',
                     password: ''
                 },
                 rules: {
-                    userName: [
+                    username: [
                         {required: true, message: '账号不能为空', trigger: 'blur'}
                     ],
                     password: [
@@ -63,27 +59,21 @@
             handleSubmit() {
                 this.$refs.loginForm.validate((valid) => {
                     if (valid) {
-                        //ajax
-                        loginByUsername(this.from.userName,this.from.password).then(res => {
-                            //登录成功后向Cookies中保存用户信息
-                            // Cookies.set('user', this.form.userName);
-                            Cookies.set('password', this.form.password);//锁屏密码
-                            // setToken(res.data.token);//将返回的token保存在Cookies中
-                            setToken('18772290169')
-                            //保存图标
-                            this.$store.commit('setAvator', 'http://pic26.photophoto.cn/20130331/0007020061105912_b.jpg');
-                            //通过access控制菜单是否显示
-                            if (this.form.userName === 'admin') {
-                                Cookies.set('access', 0);
+                        this.$store.dispatch('LoginByUsername', this.form).then(() => {
+                            //设置锁屏密码
+                            this.$store.commit('setLockScreenPassword',this.form.password);
+                            //给用户设置权限
+                            if (this.form.username === 'admin') {
+                                this.$store.commit('setAccess', 0);
                             } else {
-                                Cookies.set('access', 1);
+                                this.$store.commit('setAccess', 1);
                             }
                             this.$router.push({
                                 name: 'home_index'
                             });
-                        }).catch(err => {
-                            console.log(err)
                         })
+                    }else {
+                        return false
                     }
                 });
             }
diff --git a/src/views/main-components/lockscreen/components/unlock.vue b/src/views/main-components/lockscreen/components/unlock.vue
index 4b7832d..23c2b91 100644
--- a/src/views/main-components/lockscreen/components/unlock.vue
+++ b/src/views/main-components/lockscreen/components/unlock.vue
@@ -7,7 +7,7 @@
         <div class="unlock-body-con" v-if="showUnlock" @keydown.enter="handleUnlock">
             <div @click="handleClickAvator" class="unlock-avator-con" :style="{marginLeft: avatorLeft}">
                 <img class="unlock-avator-img" :src="avatorPath">
-                <div  class="unlock-avator-cover">
+                <div class="unlock-avator-cover">
                     <span><Icon type="unlocked" :size="30"></Icon></span>
                     <p>解锁</p>
                 </div>
@@ -16,8 +16,12 @@
             <div class="unlock-input-con">
                 <div class="unlock-input-overflow-con">
                     <div class="unlock-overflow-body" :style="{right: inputLeft}">
-                        <input ref="inputEle" v-model="password" class="unlock-input" type="password" placeholder="密码同登录密码" />
-                        <button ref="unlockBtn" @mousedown="unlockMousedown" @mouseup="unlockMouseup" @click="handleUnlock" class="unlock-btn"><Icon color="white" type="key"></Icon></button>
+                        <input ref="inputEle" v-model="password" class="unlock-input" type="password"
+                               placeholder="密码同登录密码"/>
+                        <button ref="unlockBtn" @mousedown="unlockMousedown" @mouseup="unlockMouseup"
+                                @click="handleUnlock" class="unlock-btn">
+                            <Icon color="white" type="key"></Icon>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -27,58 +31,60 @@
 </template>
 
 <script>
-import Cookies from 'js-cookie';
-export default {
-    name: 'Unlock',
-    data () {
-        return {
-            avatorLeft: '0px',
-            inputLeft: '400px',
-            password: '',
-            check: null
-        };
-    },
-    props: {
-        showUnlock: {
-            type: Boolean,
-            default: false
-        }
-    },
-    computed: {
-        avatorPath () {
-            return localStorage.avatorImgPath;
-        }
-    },
-    methods: {
-        validator () {
-            let password = Cookies.get('password');
-            if (password === this.password) {
-                return true; // 你可以在这里写密码验证方式，如发起ajax请求将用户输入的密码this.password与数据库用户密码对比
-            }
-            return false;
-        },
-        handleClickAvator () {
-            this.avatorLeft = '-180px';
-            this.inputLeft = '0px';
-            this.$refs.inputEle.focus();
+    import Cookies from 'js-cookie';
+    import store from '@/store'
+
+    export default {
+        name: 'Unlock',
+        data() {
+            return {
+                avatorLeft: '0px',
+                inputLeft: '400px',
+                password: '',
+                check: null
+            };
         },
-        handleUnlock () {
-            if (this.validator()) {
-                this.avatorLeft = '0px';
-                this.inputLeft = '400px';
-                this.password = '';
-                Cookies.set('locking', '0');
-                this.$emit('on-unlock');
-            } else {
-                this.$Message.error('密码错误,请重新输入。如果忘了密码，清除浏览器缓存重新登录即可，这里没有做后端验证');
+        props: {
+            showUnlock: {
+                type: Boolean,
+                default: false
             }
         },
-        unlockMousedown () {
-            this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
+        computed: {
+            avatorPath() {
+                return localStorage.avatorImgPath;
+            }
         },
-        unlockMouseup () {
-            this.$refs.unlockBtn.className = 'unlock-btn';
+        methods: {
+            validator() {
+                let password = store.getters.lockScreenPassword;
+                if (password === this.password) {
+                    return true; // 你可以在这里写密码验证方式，如发起ajax请求将用户输入的密码this.password与数据库用户密码对比
+                }
+                return false;
+            },
+            handleClickAvator() {
+                this.avatorLeft = '-180px';
+                this.inputLeft = '0px';
+                this.$refs.inputEle.focus();
+            },
+            handleUnlock() {
+                if (this.validator()) {
+                    this.avatorLeft = '0px';
+                    this.inputLeft = '400px';
+                    this.password = '';
+                    Cookies.set('locking', '0');
+                    this.$emit('on-unlock');
+                } else {
+                    this.$Message.error('密码错误,请重新输入。如果忘了密码，清除浏览器缓存重新登录即可，这里没有做后端验证');
+                }
+            },
+            unlockMousedown() {
+                this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
+            },
+            unlockMouseup() {
+                this.$refs.unlockBtn.className = 'unlock-btn';
+            }
         }
-    }
-};
+    };
 </script>
-- 
Gitee


From 00f6cba32e6e620fd785c48016d62f82d74cd34b Mon Sep 17 00:00:00 2001
From: dinghao <754124441@qq.com>
Date: Tue, 13 Nov 2018 10:47:41 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0,store=E6=95=B0=E6=8D=AE=E8=A2=AB=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98,=E4=BB=8E=E8=80=8C?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E5=9C=A8?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E5=90=8E=E6=98=BE=E7=A4=BA=E4=B8=8D=E5=87=BA?=
 =?UTF-8?q?=E6=9D=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                |  2 +-
 src/app.vue               | 11 +++++++++++
 src/store/modules/user.js | 18 +++++++++++++++++-
 src/views/Main.vue        |  9 ++++++---
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index c9ef767..ad4a8aa 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
     <link rel="stylesheet" href="/dist/main.css">
-    //设置主题
+    <!--设置主题-->
     <link rel="stylesheet" name="theme" href="">
     <link rel="icon" href="./td_icon.ico" type="image/x-icon" />
 </head>
diff --git a/src/app.vue b/src/app.vue
index 881536c..0687e8b 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -11,6 +11,17 @@
                 theme: this.$store.state.app.themeColor
             };
         },
+        created () {
+            //在页面加载时读取sessionStorage里的状态信息
+            if (sessionStorage.getItem("store") ) {
+                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
+            }
+
+            //在页面刷新时将vuex里的信息保存到sessionStorage里
+            window.addEventListener("beforeunload",()=>{
+                sessionStorage.setItem("store",JSON.stringify(this.$store.state))
+            })
+        },
         mounted () {
 
         },
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 922a1cd..4d0fb69 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -27,7 +27,8 @@ const user = {
 
         setUsername: (state, username) => {
             state.username = username
-        }
+        },
+
     },
 
 
@@ -77,6 +78,21 @@ const user = {
                 })
             })
         },
+
+        //根据token获取用户信息
+        GetUserInfo({commit, state}, token) {
+            token = token.trim();
+            console.log('进入'+token)
+            return new Promise((resolve, reject) => {
+                getUserInfo(token).then(res => {
+                    commit('setUsername',res.data.data.name);
+                    resolve();
+                }).catch(err => {
+                    reject(err)
+                })
+
+            })
+        }
     }
 };
 
diff --git a/src/views/Main.vue b/src/views/Main.vue
index d3f3254..4c7fcea 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -96,7 +96,7 @@
     import messageTip from './main-components/message-tip.vue';
     import themeSwitch from './main-components/theme-switch/theme-switch.vue';
     import util from '../libs/util.js';
-    import store from "../store";
+    import {getToken} from '../libs/auth'
 
 
     export default {
@@ -112,7 +112,7 @@
         data() {
             return {
                 shrink: false,
-                userName: '李某某',
+                userName: this.$store.getters.username,
                 isFullScreen: false,
                 openedSubmenuArr: this.$store.state.app.openedSubmenuArr// 要展开的菜单数组
             };
@@ -153,7 +153,9 @@
                 if (pathArr.length >= 2) {
                     this.$store.commit('addOpenSubmenu', pathArr[1].name);
                 }
-                this.userName = this.$store.getters.username;
+                //将state里的数据保存一份到本地存储(sessionStorage）中
+                // this.$store.dispatch('GetUserInfo',getToken());
+                // this.userName = this.$store.getters.username;
                 let messageCount = 3;
                 this.messageCount = messageCount.toString();
                 this.checkTag(this.$route.name);
@@ -224,6 +226,7 @@
         created() {
             // 显示打开的页面的列表
             this.$store.commit('setOpenedList');
+
         }
     };
 </script>
-- 
Gitee


From a892b7078ca88ec8d20201f43f66904142a3c7e9 Mon Sep 17 00:00:00 2001
From: dinghao <754124441@qq.com>
Date: Tue, 13 Nov 2018 15:51:58 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC,=E6=84=9F=E8=A7=89=E4=B8=8D=E6=80=8E?=
 =?UTF-8?q?=E4=B9=88=E5=A5=BD=E7=94=A8,=E5=85=88=E6=94=BE=E7=9D=80.?=
 =?UTF-8?q?=E6=84=9F=E8=A7=89=E8=BF=98=E6=98=AFelement-ui=E5=A5=BD?=
 =?UTF-8?q?=E7=94=A8,=E8=80=83=E8=99=91=E5=BC=95=E5=85=A5element-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.vue                          |   4 +-
 src/components/tables/edit.vue       |  79 +++++++
 src/components/tables/handle-btns.js |  33 +++
 src/components/tables/index.js       |   2 +
 src/components/tables/index.less     |  20 ++
 src/components/tables/tables.vue     | 294 +++++++++++++++++++++++++++
 src/libs/table2excel.js              |  21 +-
 src/main.js                          |   2 +-
 src/router/router.js                 |  11 +-
 src/store/modules/app.js             |   8 +-
 src/store/modules/user.js            |   2 +-
 src/views/user/user.vue              | 125 ++++++++++++
 12 files changed, 587 insertions(+), 14 deletions(-)
 create mode 100644 src/components/tables/edit.vue
 create mode 100644 src/components/tables/handle-btns.js
 create mode 100644 src/components/tables/index.js
 create mode 100644 src/components/tables/index.less
 create mode 100644 src/components/tables/tables.vue
 create mode 100644 src/views/user/user.vue

diff --git a/src/app.vue b/src/app.vue
index 0687e8b..4476b14 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -12,12 +12,14 @@
             };
         },
         created () {
-            //在页面加载时读取sessionStorage里的状态信息
+            //在页面加载时读取sessionStorage里的状态信息,这里只存储用户的用户名信息
             if (sessionStorage.getItem("store") ) {
                 this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
             }
 
             //在页面刷新时将vuex里的信息保存到sessionStorage里
+            //beforeunload这个事件在页面刷新时先触发的
+            //state中不能有注释,否则可能出现Unexpected token u in JSON at position 0错误信息
             window.addEventListener("beforeunload",()=>{
                 sessionStorage.setItem("store",JSON.stringify(this.$store.state))
             })
diff --git a/src/components/tables/edit.vue b/src/components/tables/edit.vue
new file mode 100644
index 0000000..a3d0de0
--- /dev/null
+++ b/src/components/tables/edit.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="tables-edit-outer">
+        <div v-if="!isEditting" class="tables-edit-con">
+            <span class="value-con">{{ value }}</span>
+            <Button v-if="editable" @click="startEdit" class="tables-edit-btn" style="padding: 2px 4px;" type="text">
+                <Icon type="md-create"></Icon>
+            </Button>
+        </div>
+        <div v-else class="tables-editting-con">
+            <Input :value="value" @input="handleInput" class="tables-edit-input"/>
+            <Button @click="saveEdit" style="padding: 6px 4px;" type="text">
+                <Icon type="md-checkmark"></Icon>
+            </Button>
+            <Button @click="canceltEdit" style="padding: 6px 4px;" type="text">
+                <Icon type="md-close"></Icon>
+            </Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'TablesEdit',
+        props: {
+            value: [String, Number],
+            edittingCellId: String,
+            params: Object,
+            editable: Boolean
+        },
+        computed: {
+            isEditting() {
+                return this.edittingCellId === `editting-${this.params.index}-${this.params.column.key}`
+            }
+        },
+        methods: {
+            handleInput(val) {
+                this.$emit('input', val)
+            },
+            startEdit() {
+                this.$emit('on-start-edit', this.params)
+            },
+            saveEdit() {
+                this.$emit('on-save-edit', this.params)
+            },
+            canceltEdit() {
+                this.$emit('on-cancel-edit', this.params)
+            }
+        }
+    }
+</script>
+
+<style lang="less">
+    .tables-edit-outer {
+        height: 100%;
+        .tables-edit-con {
+            position: relative;
+            height: 100%;
+            .value-con {
+                vertical-align: middle;
+            }
+            .tables-edit-btn {
+                position: absolute;
+                right: 10px;
+                top: 0;
+                display: none;
+            }
+            &:hover {
+                .tables-edit-btn {
+                    display: inline-block;
+                }
+            }
+        }
+        .tables-editting-con {
+            .tables-edit-input {
+                width: ~"calc(100% - 60px)";
+            }
+        }
+    }
+</style>
diff --git a/src/components/tables/handle-btns.js b/src/components/tables/handle-btns.js
new file mode 100644
index 0000000..ddae233
--- /dev/null
+++ b/src/components/tables/handle-btns.js
@@ -0,0 +1,33 @@
+const btns = {
+    delete: (h, params, vm) => {
+        return h('Poptip', {
+            props: {
+                confirm: true,
+                title: '你确定要删除吗?'
+            },
+            on: {
+                'on-ok': () => {
+                    vm.$emit('on-delete', params)
+                    vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
+                }
+            }
+        }, [
+            h('Button', {
+                props: {
+                    type: 'text',
+                    ghost: true
+                }
+            }, [
+                h('Icon', {
+                    props: {
+                        type: 'md-trash',
+                        size: 18,
+                        color: '#000000'
+                    }
+                })
+            ])
+        ])
+    }
+}
+
+export default btns
diff --git a/src/components/tables/index.js b/src/components/tables/index.js
new file mode 100644
index 0000000..4dabfab
--- /dev/null
+++ b/src/components/tables/index.js
@@ -0,0 +1,2 @@
+import Tables from './tables.vue'
+export default Tables
diff --git a/src/components/tables/index.less b/src/components/tables/index.less
new file mode 100644
index 0000000..29b8a21
--- /dev/null
+++ b/src/components/tables/index.less
@@ -0,0 +1,20 @@
+.search-con {
+  padding: 10px 0;
+  .search {
+    &-col {
+      display: inline-block;
+      width: 200px;
+    }
+    &-input {
+      display: inline-block;
+      width: 200px;
+      margin-left: 2px;
+    }
+    &-btn {
+      margin-left: 2px;
+    }
+    &-add {
+      margin-left: 2px;
+    }
+  }
+}
diff --git a/src/components/tables/tables.vue b/src/components/tables/tables.vue
new file mode 100644
index 0000000..7ba21c1
--- /dev/null
+++ b/src/components/tables/tables.vue
@@ -0,0 +1,294 @@
+<style lang="less">
+    @import './index.less';
+</style>
+<template>
+    <div>
+        <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
+            <Select v-model="searchKey" class="search-col">
+                <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key"
+                        :key="`search-col-${item.key}`">{{ item.title }}
+                </Option>
+            </Select>
+            <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
+            <Button @click="handleAdd" class="search-add" type="primary">
+                <Icon type="search"/>&nbsp;&nbsp;添加
+            </Button>
+            <Button @click="handleSearch" class="search-btn" type="primary">
+                <Icon type="search"/>&nbsp;&nbsp;搜索
+            </Button>
+        </div>
+        <Table
+                ref="tablesMain"
+                :data="insideTableData"
+                :columns="insideColumns"
+                :stripe="stripe"
+                :border="border"
+                :show-header="showHeader"
+                :width="width"
+                :height="height"
+                :loading="loading"
+                :disabled-hover="disabledHover"
+                :highlight-row="highlightRow"
+                :row-class-name="rowClassName"
+                :size="size"
+                :no-data-text="noDataText"
+                :no-filtered-data-text="noFilteredDataText"
+                @on-current-change="onCurrentChange"
+                @on-select="onSelect"
+                @on-select-cancel="onSelectCancel"
+                @on-select-all="onSelectAll"
+                @on-selection-change="onSelectionChange"
+                @on-sort-change="onSortChange"
+                @on-filter-change="onFilterChange"
+                @on-row-click="onRowClick"
+                @on-row-dblclick="onRowDblclick"
+                @on-expand="onExpand"
+        >
+            <slot name="header" slot="header"></slot>
+            <slot name="footer" slot="footer"></slot>
+            <slot name="loading" slot="loading"></slot>
+        </Table>
+        <div v-if="searchable && searchPlace === 'bottom'" class="search-con search-con-top">
+            <Select v-model="searchKey" class="search-col">
+                <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key"
+                        :key="`search-col-${item.key}`">{{ item.title }}
+                </Option>
+            </Select>
+            <Input placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
+            <Button class="search-btn" type="primary">
+                <Icon type="${this.tableData[index].name}"/>&nbsp;&nbsp;搜索
+            </Button>
+        </div>
+        <a id="hrefToExportTable" style="display: none;width: 0px;height: 0px;"></a>
+    </div>
+</template>
+
+<script>
+    import TablesEdit from './edit.vue'
+    import handleBtns from './handle-btns'
+    // import './index.less'
+    export default {
+        name: 'Tables',
+        props: {
+            value: {
+                type: Array,
+                default() {
+                    return []
+                }
+            },
+            columns: {
+                type: Array,
+                default() {
+                    return []
+                }
+            },
+            size: String,
+            width: {
+                type: [Number, String]
+            },
+            height: {
+                type: [Number, String]
+            },
+            stripe: {
+                type: Boolean,
+                default: false
+            },
+            border: {
+                type: Boolean,
+                default: false
+            },
+            showHeader: {
+                type: Boolean,
+                default: true
+            },
+            highlightRow: {
+                type: Boolean,
+                default: false
+            },
+            rowClassName: {
+                type: Function,
+                default() {
+                    return ''
+                }
+            },
+            context: {
+                type: Object
+            },
+            noDataText: {
+                type: String
+            },
+            noFilteredDataText: {
+                type: String
+            },
+            disabledHover: {
+                type: Boolean
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * @description 全局设置是否可编辑
+             */
+            editable: {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * @description 是否可搜索
+             */
+            searchable: {
+                type: Boolean,
+                default: false
+            },
+            /**
+             * @description 搜索控件所在位置，'top' / 'bottom'
+             */
+            searchPlace: {
+                type: String,
+                default: 'top'
+            }
+        },
+        /**
+         * Events
+         * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
+         * @on-cancel-edit 返回值 {Object} 同上
+         * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
+         */
+        data() {
+            return {
+                insideColumns: [],
+                insideTableData: [],
+                edittingCellId: '',
+                edittingText: '',
+                searchValue: '',
+                searchKey: ''
+            }
+        },
+        methods: {
+            suportEdit(item, index) {
+                item.render = (h, params) => {
+                    return h(TablesEdit, {
+                        props: {
+                            params: params,
+                            value: this.insideTableData[params.index][params.column.key],
+                            edittingCellId: this.edittingCellId,
+                            editable: this.editable
+                        },
+                        on: {
+                            'input': val => {
+                                this.edittingText = val
+                            },
+                            'on-start-edit': (params) => {
+                                this.edittingCellId = `editting-${params.index}-${params.column.key}`
+                                this.$emit('on-start-edit', params)
+                            },
+                            'on-cancel-edit': (params) => {
+                                this.edittingCellId = ''
+                                this.$emit('on-cancel-edit', params)
+                            },
+                            'on-save-edit': (params) => {
+                                this.value[params.row.initRowIndex][params.column.key] = this.edittingText
+                                this.$emit('input', this.value)
+                                this.$emit('on-save-edit', Object.assign(params, {value: this.edittingText}))
+                                this.edittingCellId = ''
+                            }
+                        }
+                    })
+                }
+                return item
+            },
+            surportHandle(item) {
+                let options = item.options || []
+                let insideBtns = []
+                options.forEach(item => {
+                    if (handleBtns[item]) insideBtns.push(handleBtns[item])
+                })
+                let btns = item.button ? [].concat(insideBtns, item.button) : insideBtns
+                item.render = (h, params) => {
+                    params.tableData = this.value
+                    return h('div', btns.map(item => item(h, params, this)))
+                }
+                return item
+            },
+            handleColumns(columns) {
+                this.insideColumns = columns.map((item, index) => {
+                    let res = item
+                    if (res.editable) res = this.suportEdit(res, index)
+                    if (res.key === 'handle') res = this.surportHandle(res)
+                    return res
+                })
+            },
+            setDefaultSearchKey() {
+                this.searchKey = this.columns[0].key !== 'handle' ? this.columns[0].key : (this.columns.length > 1 ? this.columns[1].key : '')
+            },
+            handleClear(e) {
+                if (e.target.value === '') this.insideTableData = this.value
+            },
+            handleAdd() {
+
+            },
+            handleSearch() {
+                this.insideTableData = this.value.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
+            },
+            handleTableData() {
+                this.insideTableData = this.value.map((item, index) => {
+                    let res = item
+                    res.initRowIndex = index
+                    return res
+                })
+            },
+            exportCsv(params) {
+                this.$refs.tablesMain.exportCsv(params)
+            },
+            clearCurrentRow() {
+                this.$refs.talbesMain.clearCurrentRow()
+            },
+            onCurrentChange(currentRow, oldCurrentRow) {
+                this.$emit('on-current-change', currentRow, oldCurrentRow)
+            },
+            onSelect(selection, row) {
+                this.$emit('on-select', selection, row)
+            },
+            onSelectCancel(selection, row) {
+                this.$emit('on-select-cancel', selection, row)
+            },
+            onSelectAll(selection) {
+                this.$emit('on-select-all', selection)
+            },
+            onSelectionChange(selection) {
+                this.$emit('on-selection-change', selection)
+            },
+            onSortChange(column, key, order) {
+                this.$emit('on-sort-change', column, key, order)
+            },
+            onFilterChange(row) {
+                this.$emit('on-filter-change', row)
+            },
+            onRowClick(row, index) {
+                this.$emit('on-row-click', row, index)
+            },
+            onRowDblclick(row, index) {
+                this.$emit('on-row-dblclick', row, index)
+            },
+            onExpand(row, status) {
+                this.$emit('on-expand', row, status)
+            }
+        },
+        watch: {
+            columns(columns) {
+                this.handleColumns(columns)
+                this.setDefaultSearchKey()
+            },
+            value(val) {
+                this.handleTableData()
+                this.handleSearch()
+            }
+        },
+        mounted() {
+            this.handleColumns(this.columns)
+            this.setDefaultSearchKey()
+            this.handleTableData()
+        }
+    }
+</script>
diff --git a/src/libs/table2excel.js b/src/libs/table2excel.js
index 2e0017a..a3aa06d 100644
--- a/src/libs/table2excel.js
+++ b/src/libs/table2excel.js
@@ -1,5 +1,6 @@
 var idTmr;
-function getExplorer () {
+
+function getExplorer() {
     var explorer = window.navigator.userAgent;
     if (explorer.indexOf('MSIE') >= 0) {
         // ie
@@ -16,9 +17,11 @@ function getExplorer () {
     } else if (explorer.indexOf('Safari') >= 0) {
         // Safari
         return 'Safari';
-    };
+    }
+    ;
 };
-function tranform (table, aId, name) {
+
+function tranform(table, aId, name) {
     let tableHead = table.$children[0].$el;
     let tableBody = table.$children[1].$el;
     let tableInnerHTML = '<thead><tr>';
@@ -74,16 +77,22 @@ function tranform (table, aId, name) {
         tableToExcel(tableInnerHTML, aId, name);
     }
 }
-function Cleanup () {
+
+function Cleanup() {
     window.clearInterval(idTmr);
     // CollectGarbage();
 }
+
 let tableToExcel = (function () {
     let uri = 'data:application/vnd.ms-excel;base64,';
     let template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>';
-    let base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); };
+    let base64 = function (s) {
+        return window.btoa(unescape(encodeURIComponent(s)));
+    };
     let format = function (s, c) {
-        return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
+        return s.replace(/{(\w+)}/g, function (m, p) {
+            return c[p];
+        });
     };
     return function (table, aId, name) {
         let ctx = {worksheet: name || 'Worksheet', table: table};
diff --git a/src/main.js b/src/main.js
index 72c1cca..760727d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,7 @@ import App from './app.vue';
 import '@/locale';
 import 'iview/dist/styles/iview.css';
 import VueI18n from 'vue-i18n';
-import util from '@/libs/util';
+// import util from '@/libs/util';
 
 Vue.use(VueI18n);
 Vue.use(iView);
diff --git a/src/router/router.js b/src/router/router.js
index c2dd595..824e07d 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -58,7 +58,16 @@ export const otherRouter = {
 
 // 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里
 export const appRouter = [
-
+    {
+        path: '/user',
+        icon: 'key',
+        name: 'user',
+        title: '用户管理',
+        component: Main,
+        children: [
+            { path: 'index', title: '用户管理', name: 'user_index', component: resolve => { require(['@/views/user/user.vue'], resolve); } },
+        ]
+    },
 ];
 
 // 所有上面定义的路由都要写在下面的routers里
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index b76c315..59ac30e 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -8,8 +8,8 @@ const app = {
         cachePage: [],
         lang: '',
         isFullScreen: false,
-        openedSubmenuArr: [], // 要展开的菜单数组
-        menuTheme: 'dark', // 主题
+        openedSubmenuArr: [], /* 要展开的菜单数组 */
+        menuTheme: 'dark', /* 主题 */
         themeColor: '',
         pageOpenedList: [{
             title: '首页',
@@ -23,7 +23,7 @@ const app = {
                 path: '',
                 name: 'home_index'
             }
-        ], // 面包屑数组
+        ], /* 面包屑数组 */
         menuList: [],
         routers: [
             otherRouter,
@@ -31,7 +31,7 @@ const app = {
         ],
         tagsList: [...otherRouter.children],
         messageCount: 0,
-        dontCache: ['text-editor', 'artical-publish'] // 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
+        dontCache: ['text-editor', 'artical-publish'] /* 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js) */
     },
     mutations: {
         setTagsList (state, list) {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 4d0fb69..c3f314a 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -8,7 +8,7 @@ const user = {
         token: getToken(),
         access: '',
         lockScreenPassword: '',
-        username: '',
+        username: ''
     },
 
 
diff --git a/src/views/user/user.vue b/src/views/user/user.vue
new file mode 100644
index 0000000..94d02ee
--- /dev/null
+++ b/src/views/user/user.vue
@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <Card>
+            <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"/>
+            <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
+            <div style="margin: 10px;overflow: hidden">
+                <div style="float: right;">
+                    <Page :total="100" :current="1" @on-change="changePage"></Page>
+                </div>
+            </div>
+        </Card>
+    </div>
+</template>
+
+<script>
+    import Tables from '../../components/tables'
+
+    export default {
+        name: 'user_index',
+        components: {
+            Tables
+        },
+        data() {
+            return {
+                columns: [
+                    {title: 'Name', key: 'name', sortable: true},
+                    {title: 'Email', key: 'email', editable: true},
+                    {title: 'Create-Time', key: 'createTime'},
+                    {
+                        title: 'Action',
+                        key: 'action',
+                        width: 150,
+                        align: 'center',
+                        render: (h, params) => {
+                            return h('div', [
+                                h('Button', {
+                                    props: {
+                                        type: 'primary',
+                                        size: 'small'
+                                    },
+                                    style: {
+                                        marginRight: '5px'
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.show(params.index)
+                                        }
+                                    }
+                                }, '查看'),
+                                h('Button', {
+                                    props: {
+                                        type: 'error',
+                                        size: 'small'
+                                    },
+                                    on: {
+                                        click: () => {
+                                            this.remove(params.index)
+                                        }
+                                    }
+                                }, '删除')
+                            ]);
+                        }
+                    }
+
+                ],
+                tableData: [
+                    {
+                        name: '张三',
+                        email: '754124441@qq.com',
+                        createTime: new Date()
+                    },
+                    {
+                        name: '李四',
+                        email: '754124441@qq.com',
+                        createTime: new Date()
+                    },
+                    {
+                        name: '王五',
+                        email: '754124441@qq.com',
+                        createTime: new Date()
+                    },
+
+                ]
+            }
+        },
+        methods: {
+            mockTableData() {
+                let data = [];
+                for (let i = 0; i < 10; i++) {
+                    data.push({
+                        name: 'Business' + Math.floor(Math.random() * 100 + 1),
+                        email: '123234354@qq.com',
+                        createTime: new Date()
+                    })
+                }
+                return data;
+            },
+            exportExcel() {
+                this.$refs.tables.exportCsv({
+                    filename: `table-${(new Date()).valueOf()}.csv`
+                })
+            },
+            show(index) {
+                this.$Modal.info({
+                    title: 'User Info',
+                    content: `Name：${this.tableData[index].name}<br>Age：${this.tableData[index].email}<br>Address：${this.tableData[index].createTime}`
+                })
+            },
+            remove(index) {
+                this.tableData.splice(index, 1);
+            },
+            changePage() {
+                // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
+                this.tableData = this.mockTableData();
+            }
+
+        },
+        mounted() {
+        }
+    }
+</script>
+
+<style>
+
+</style>
-- 
Gitee