diff --git a/vueadmin-vue/src/App.vue b/vueadmin-vue/src/App.vue
index e215936e9ecd75b82462c24f6744907059368083..bcc1ea2fc62ed1a9ebadce19cc1e1c0fc1c8b478 100644
--- a/vueadmin-vue/src/App.vue
+++ b/vueadmin-vue/src/App.vue
@@ -4,12 +4,35 @@
   </div>
 </template>
 
+<script>
+  export default {
+    name: "App",
+    watch: {
+      $route(to, from) {
+
+        console.log("to")
+        console.log(to)
+
+        if (to.path != '/login') {
+          let obj = {
+            name: to.name,
+            title: to.meta.title
+          }
+
+          this.$store.commit("addTab", obj)
+        }
+
+      }
+    }
+  }
+
+</script>
+
 <style>
   html, body, #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   margin: 0;
   padding: 0;
   height: 100%;
diff --git a/vueadmin-vue/src/assets/MarkerHub.jpg b/vueadmin-vue/src/assets/MarkerHub.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..90e94a0eb20cd967dc485ba684b41a771ec404c6
Binary files /dev/null and b/vueadmin-vue/src/assets/MarkerHub.jpg differ
diff --git a/vueadmin-vue/src/globalFun.js b/vueadmin-vue/src/globalFun.js
new file mode 100644
index 0000000000000000000000000000000000000000..780c6a79c06bd21c3ea5f2292e2b1d9249ba6373
--- /dev/null
+++ b/vueadmin-vue/src/globalFun.js
@@ -0,0 +1,12 @@
+import Vue from "vue"
+// 定义了全局方法，全局都可以调用
+Vue.mixin({
+    methods: {
+        hasAuth(perm) {
+            // 获取到当前用户所拥有的权限
+            var authority = this.$store.state.menus.permList
+
+            return authority.indexOf(perm) > -1
+        }
+    }
+})
diff --git a/vueadmin-vue/src/main.js b/vueadmin-vue/src/main.js
index 6f91144926078aaf646dc5dedaf3ed5da06ab836..d6cfb23d26463a4ceb551b6d0c2998adc81a4082 100644
--- a/vueadmin-vue/src/main.js
+++ b/vueadmin-vue/src/main.js
@@ -10,6 +10,8 @@ Vue.config.productionTip = false
 Vue.use(ElementUI)
 Vue.prototype.$axios = axios
 
+
+import gobal from "./globalFun"
 new Vue({
   router,
   store,
diff --git a/vueadmin-vue/src/mock.js b/vueadmin-vue/src/mock.js
index 559b13597b9d8db55ada66ed5422ba9de699a335..3de594cd0cd8a5a6f49382f46319027d35f34cd5 100644
--- a/vueadmin-vue/src/mock.js
+++ b/vueadmin-vue/src/mock.js
@@ -22,7 +22,451 @@ Mock.mock('/captcha', 'get', () => {
     }
     return Result
 })
+
 Mock.mock('/login', 'post', () => {
     // 无法往header中传入数据
     return Result
 })
+
+Mock.mock('/sys/userInfo', 'get', () => {
+    Result.data = {
+        id: '1',
+        username: 'user666',
+        avatar: 'https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg'
+    }
+    return Result
+})
+
+Mock.mock('/logout', 'post', () => {
+    return Result
+})
+
+Mock.mock('/sys/menu/nav', 'get', () => {
+    // 返回菜单栏的信息和权限信息
+    let nav = [
+        {
+            "id": 1,
+            "title": "系统管理",
+            "icon": "el-icon-s-operation",
+            "path": "",
+            "name": "sys:manage",
+            "component": "",
+            "children": [
+                {
+                    "id": 2,
+                    "title": "用户管理",
+                    "icon": "el-icon-s-custom",
+                    "path": "/sys/users",
+                    "name": "sys:user:list",
+                    "component": "sys/User",
+                    "children": []
+                },
+                {
+                    "id": 3,
+                    "title": "角色管理",
+                    "icon": "el-icon-rank",
+                    "path": "/sys/roles",
+                    "name": "sys:role:list",
+                    "component": "sys/Role",
+                    "children": []
+                },
+                {
+                    "id": 4,
+                    "title": "菜单管理",
+                    "icon": "el-icon-menu",
+                    "path": "/sys/menus",
+                    "name": "sys:menu:list",
+                    "component": "sys/Menu",
+                    "children": []
+                }
+            ]
+        },
+        {
+            "id": 5,
+            "title": "系统工具",
+            "icon": "el-icon-s-tools",
+            "path": "",
+            "name": "sys:tools",
+            "component": null,
+            "children": [
+                {
+                    "id": 6,
+                    "title": "数字字典",
+                    "icon": "el-icon-s-order",
+                    "path": "/sys/dicts",
+                    "name": "sys:dict:list",
+                    "component": "sys/Dict",
+                    "children": []
+                }
+            ]
+        }
+    ];
+
+    let permList = ['sys:user:list', "sys:user:save", "sys:user:delete"]
+
+
+    Result.data = {
+        nav:nav,
+        permList:permList,
+    }
+
+    return Result
+})
+
+//////////////// 菜单管理 ////////////////
+
+Mock.mock('/sys/menu/list', 'get', () => {
+    let menus = [
+        {
+            "id": 1,
+            "created": "2021-01-15T18:58:18",
+            "updated": "2021-01-15T18:58:20",
+            "statu": 1,
+            "parentId": 0,
+            "name": "系统管理",
+            "path": "",
+            "perms": "sys:manage",
+            "component": "",
+            "type": 0,
+            "icon": "el-icon-s-operation",
+            "ordernum": 1,
+            "children": [
+                {
+                    "id": 2,
+                    "created": "2021-01-15T19:03:45",
+                    "updated": "2021-01-15T19:03:48",
+                    "statu": 1,
+                    "parentId": 1,
+                    "name": "用户管理",
+                    "path": "/sys/users",
+                    "perms": "sys:user:list",
+                    "component": "sys/User",
+                    "type": 1,
+                    "icon": "el-icon-s-custom",
+                    "ordernum": 1,
+                    "children": [
+                        {
+                            "id": 9,
+                            "created": "2021-01-17T21:48:32",
+                            "updated": null,
+                            "statu": 1,
+                            "parentId": 2,
+                            "name": "添加用户",
+                            "path": null,
+                            "perms": "sys:user:save",
+                            "component": null,
+                            "type": 2,
+                            "icon": null,
+                            "ordernum": 1,
+                            "children": []
+                        },
+                        {
+                            "id": 10,
+                            "created": "2021-01-17T21:49:03",
+                            "updated": "2021-01-17T21:53:04",
+                            "statu": 1,
+                            "parentId": 2,
+                            "name": "修改用户",
+                            "path": null,
+                            "perms": "sys:user:update",
+                            "component": null,
+                            "type": 2,
+                            "icon": null,
+                            "ordernum": 2,
+                            "children": []
+                        },
+                        {
+                            "id": 11,
+                            "created": "2021-01-17T21:49:21",
+                            "updated": null,
+                            "statu": 1,
+                            "parentId": 2,
+                            "name": "删除用户",
+                            "path": null,
+                            "perms": "sys:user:delete",
+                            "component": null,
+                            "type": 2,
+                            "icon": null,
+                            "ordernum": 3,
+                            "children": []
+                        },
+                        {
+                            "id": 12,
+                            "created": "2021-01-17T21:49:58",
+                            "updated": null,
+                            "statu": 1,
+                            "parentId": 2,
+                            "name": "分配角色",
+                            "path": null,
+                            "perms": "sys:user:role",
+                            "component": null,
+                            "type": 2,
+                            "icon": null,
+                            "ordernum": 4,
+                            "children": []
+                        },
+                        {
+                            "id": 13,
+                            "created": "2021-01-17T21:50:36",
+                            "updated": null,
+                            "statu": 1,
+                            "parentId": 2,
+                            "name": "重置密码",
+                            "path": null,
+                            "perms": "sys:user:repass",
+                            "component": null,
+                            "type": 2,
+                            "icon": null,
+                            "ordernum": 5,
+                            "children": []
+                        }
+                    ]
+                },
+                {
+                    "id": 3,
+                    "created": "2021-01-15T19:03:45",
+                    "updated": "2021-01-15T19:03:48",
+                    "statu": 1,
+                    "parentId": 1,
+                    "name": "角色管理",
+                    "path": "/sys/roles",
+                    "perms": "sys:role:list",
+                    "component": "sys/Role",
+                    "type": 1,
+                    "icon": "el-icon-rank",
+                    "ordernum": 2,
+                    "children": []
+                },
+
+            ]
+        },
+        {
+            "id": 5,
+            "created": "2021-01-15T19:06:11",
+            "updated": null,
+            "statu": 1,
+            "parentId": 0,
+            "name": "系统工具",
+            "path": "",
+            "perms": "sys:tools",
+            "component": null,
+            "type": 0,
+            "icon": "el-icon-s-tools",
+            "ordernum": 2,
+            "children": [
+                {
+                    "id": 6,
+                    "created": "2021-01-15T19:07:18",
+                    "updated": "2021-01-18T16:32:13",
+                    "statu": 1,
+                    "parentId": 5,
+                    "name": "数字字典",
+                    "path": "/sys/dicts",
+                    "perms": "sys:dict:list",
+                    "component": "sys/Dict",
+                    "type": 1,
+                    "icon": "el-icon-s-order",
+                    "ordernum": 1,
+                    "children": []
+                }
+            ]
+        }
+    ]
+
+    Result.data = menus
+
+    return Result
+})
+
+Mock.mock(RegExp('/sys/menu/info/*'), 'get', () => {
+
+    Result.data = {
+        "id": 3,
+        "statu": 1,
+        "parentId": 1,
+        "name": "角色管理",
+        "path": "/sys/roles",
+        "perms": "sys:role:list",
+        "component": "sys/Role",
+        "type": 1,
+        "icon": "el-icon-rank",
+        "orderNum": 2,
+        "children": []
+    }
+
+    return Result
+})
+
+
+Mock.mock(RegExp('/sys/menu/*'), 'post', () => {
+
+    return Result
+})
+
+//////////////// 角色管理 ////////////////
+
+Mock.mock(RegExp('/sys/role/list*'), 'get', () => {
+
+    Result.data = {
+        "records": [
+            {
+                "id": 3,
+                "created": "2021-01-04T10:09:14",
+                "updated": "2021-01-30T08:19:52",
+                "statu": 1,
+                "name": "普通用户",
+                "code": "normal",
+                "remark": "只有基本查看功能",
+                "menuIds": []
+            },
+            {
+                "id": 6,
+                "created": "2021-01-16T13:29:03",
+                "updated": "2021-01-17T15:50:45",
+                "statu": 1,
+                "name": "超级管理员",
+                "code": "admin",
+                "remark": "系统默认最高权限，不可以编辑和任意修改",
+                "menuIds": []
+            }
+        ],
+        "total": 2,
+        "size": 10,
+        "current": 1,
+        "orders": [],
+        "optimizeCountSql": true,
+        "hitCount": false,
+        "countId": null,
+        "maxLimit": null,
+        "searchCount": true,
+        "pages": 1
+    }
+
+    return Result
+
+})
+
+Mock.mock(RegExp('/sys/role/info/*'), 'get', () => {
+
+    Result.data = {
+        "id": 6,
+        "created": "2021-01-16T13:29:03",
+        "updated": "2021-01-17T15:50:45",
+        "statu": 1,
+        "name": "超级管理员",
+        "code": "admin",
+        "remark": "系统默认最高权限，不可以编辑和任意修改",
+        "menuIds": [3]
+    }
+
+    return Result
+})
+
+// 正则表达式，进行模糊的匹配
+Mock.mock(RegExp('/sys/role/*'), 'post', () => {
+
+    return Result
+})
+
+
+//////////////// 用户管理 ////////////////
+
+Mock.mock(RegExp('/sys/user/list*'), 'get', () => {
+    Result.data = {
+        "records": [
+            {
+                "id": 1,
+                "created": "2021-01-12T22:13:53",
+                "updated": "2021-01-16T16:57:32",
+                "statu": 1,
+                "username": "admin",
+                "password": "$2a$10$R7zegeWzOXPw871CmNuJ6upC0v8D373GuLuTw8jn6NET4BkPRZfgK",
+                "avatar": "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg",
+                "email": "123@qq.com",
+                "city": "广州",
+                "lastLogin": "2020-12-30T08:38:37",
+                "roles": [
+                    {
+                        "id": 6,
+                        "created": "2021-01-16T13:29:03",
+                        "updated": "2021-01-17T15:50:45",
+                        "statu": 1,
+                        "name": "超级管理员",
+                        "code": "admin",
+                        "remark": "系统默认最高权限，不可以编辑和任意修改",
+                        "menuIds": []
+                    },
+                    {
+                        "id": 3,
+                        "created": "2021-01-04T10:09:14",
+                        "updated": "2021-01-30T08:19:52",
+                        "statu": 1,
+                        "name": "普通用户",
+                        "code": "normal",
+                        "remark": "只有基本查看功能",
+                        "menuIds": []
+                    }
+                ]
+            },
+            {
+                "id": 2,
+                "created": "2021-01-30T08:20:22",
+                "updated": "2021-01-30T08:55:57",
+                "statu": 1,
+                "username": "test",
+                "password": "$2a$10$0ilP4ZD1kLugYwLCs4pmb.ZT9cFqzOZTNaMiHxrBnVIQUGUwEvBIO",
+                "avatar": "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg",
+                "email": "test@qq.com",
+                "city": null,
+                "lastLogin": null,
+                "roles": [
+                    {
+                        "id": 3,
+                        "created": "2021-01-04T10:09:14",
+                        "updated": "2021-01-30T08:19:52",
+                        "statu": 1,
+                        "name": "普通用户",
+                        "code": "normal",
+                        "remark": "只有基本查看功能",
+                        "menuIds": []
+                    }
+                ]
+            }
+        ],
+        "total": 2,
+        "size": 10,
+        "current": 1,
+        "orders": [],
+        "optimizeCountSql": true,
+        "hitCount": false,
+        "countId": null,
+        "maxLimit": null,
+        "searchCount": true,
+        "pages": 1
+    }
+
+    return Result
+})
+
+
+Mock.mock(RegExp('/sys/user/*'), 'post', () => {
+    return Result
+})
+
+Mock.mock(RegExp('/sys/user/info/*'), 'get', () => {
+
+    Result.data = {
+        "id": 2,
+        "created": "2021-01-30T08:20:22",
+        "updated": "2021-01-30T08:55:57",
+        "statu": 1,
+        "username": "test",
+        "password": "$2a$10$0ilP4ZD1kLugYwLCs4pmb.ZT9cFqzOZTNaMiHxrBnVIQUGUwEvBIO",
+        "avatar": "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg",
+        "email": "test@qq.com",
+        "city": null,
+        "lastLogin": null,
+        "roles": []
+    }
+    return Result
+})
diff --git a/vueadmin-vue/src/router/index.js b/vueadmin-vue/src/router/index.js
index d6dc747e534df6c76611a07e787b472e94981d32..7fda3099cb48d4b7969988d7fa68708ddde45b1b 100644
--- a/vueadmin-vue/src/router/index.js
+++ b/vueadmin-vue/src/router/index.js
@@ -1,6 +1,12 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import User from "../views/sys/User";
+import Role from "../views/sys/Role";
+import Menu from "../views/sys/Menu";
+
+import axios from "axios";
+import store from "../store"
 
 Vue.use(VueRouter)
 
@@ -8,18 +14,46 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    children:[
+      {
+        path: '/userCenter',
+        name: 'UserCenter',
+        meta: {
+          title: "个人中心"
+        },
+        component: () => import('@/views/UserCenter.vue')
+      },
+
+      {
+      path: '/index',
+      name: 'Index',
+      component: () => import('../views/Index.vue')
+    },
+    // {
+    //   path: '/sys/users',
+    //   name: 'SysUser',
+    //   component: User
+    // },
+    // {
+    //   path: '/sys/roles',
+    //   name: 'SysRole',
+    //   component: Role
+    // },
+    // {
+    //   path: '/sys/menus',
+    //   name: 'SysMenu',
+    //   component: Menu
+    // },
+
+    ]
   },
   {
     path: '/login',
     name: 'Login',
     component: () => import('../views/Login.vue')
   },
-  {
-    path: '/index',
-      name: 'Index',
-    component: () => import('../views/Index.vue')
-  },
+
 ]
 
 const router = new VueRouter({
@@ -28,4 +62,90 @@ const router = new VueRouter({
   routes
 })
 
+
+router.beforeEach((to, from, next) => {  //是在SideMenu.vue之后渲染，导致导航栏没数据
+
+  let hasRoute = store.state.menus.hasRoutes
+
+  let token = localStorage.getItem("token")
+
+  if (to.path == '/login') {
+    next()
+
+  } else if (!token) {
+    next({path: '/login'})
+
+
+  } else if(token && !hasRoute) {
+    axios.get("/sys/menu/nav", {
+      headers: {
+        Authorization: localStorage.getItem("token")
+      }
+    }).then(res => {
+
+      console.log(res.data.data)
+
+      // 拿到menuList
+      store.commit("setMenuList", res.data.data.nav)
+
+      // 拿到用户权限
+      store.commit("setPermList", res.data.data.permList)
+
+      console.log(store.state.menus.menuList)
+
+      // 动态绑定路由
+      let newRoutes = router.options.routes; // 现有路由
+
+      res.data.data.nav.forEach(menu => {
+        if (menu.children) {
+          menu.children.forEach(e => { //每一个子菜单进行路由的绑定
+
+            // 转成路由
+            let route = menuToRoute(e)
+
+            // 把路由添加到路由管理中
+            if (route) {
+              newRoutes[0].children.push(route)
+            }
+
+          })
+        }
+      })
+
+      console.log("newRoutes")
+      console.log(newRoutes)
+      router.addRoutes(newRoutes)
+
+      hasRoute = true
+      store.commit("changeRouteStatus", hasRoute)
+    })
+  }
+
+
+
+  next()
+})
+
+
+// 导航转成路由
+const menuToRoute = (menu) => {
+
+  if (!menu.component) {
+    return null
+  }
+
+  let route = {
+    name: menu.name,
+    path: menu.path,
+    meta: {
+      icon: menu.icon,
+      title: menu.title
+    }
+  }
+  route.component = () => import('@/views/' + menu.component +'.vue')
+
+  return route
+}
+
+
 export default router
diff --git a/vueadmin-vue/src/store/index.js b/vueadmin-vue/src/store/index.js
index e91786a52d11350840bef6a95f81e83340de078c..3de606b66a00521b03735903fec329061e9d4009 100644
--- a/vueadmin-vue/src/store/index.js
+++ b/vueadmin-vue/src/store/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import menus from "./modules/menus"
 
 Vue.use(Vuex)
 
@@ -11,10 +12,14 @@ export default new Vuex.Store({
     SET_TOKEN: (state, token) => {
       state.token = token
       localStorage.setItem("token", token)
-    }
+    },
+    // resetState:(state)=> {
+    //   state.token='';
+    // }
   },
   actions: {
   },
   modules: {
+    menus
   }
 })
diff --git a/vueadmin-vue/src/store/modules/menus.js b/vueadmin-vue/src/store/modules/menus.js
new file mode 100644
index 0000000000000000000000000000000000000000..189d957c96811ada717001bb670ae16317d4203a
--- /dev/null
+++ b/vueadmin-vue/src/store/modules/menus.js
@@ -0,0 +1,65 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default {
+    state: {
+
+        menuList: [],
+        permList: [],
+
+        // hasRoutes:sessionStorage.getItem("hasRoutes");
+        hasRoutes: false,
+
+
+        editableTabsValue: 'Index',
+        editableTabs: [{
+            title: '首页',
+            name: 'Index',
+        }]
+    },
+    mutations: {
+        setMenuList(state, menus) {
+            state.menuList = menus
+        },
+        setPermList(state, perms) {
+            state.permList = perms
+        },
+        changeRouteStatus(state, hasRoutes) {
+            state.hasRoutes = hasRoutes
+            // 放入sessionStorage中，每次刷新才不会删除
+            // sessionStorage.setItem("hasRoutes",hasRoutes)
+        },
+
+        addTab(state, tab) { // 添加数组
+
+            let index = state.editableTabs.findIndex(e => e.name === tab.name)
+
+            if (index === -1) {
+                state.editableTabs.push({
+                    title: tab.title,
+                    name: tab.name,
+                });
+            }
+
+            state.editableTabsValue = tab.name;
+        },
+
+        resetState: (state) => {
+            state.menuList = []
+            state.permList = []
+
+            state.hasRoutes = false
+            state.editableTabsValue = 'Index'
+            state.editableTabs = [{
+                title: '首页',
+                name: 'Index',
+            }]
+        }
+
+    },
+    actions: {
+    },
+
+}
diff --git a/vueadmin-vue/src/views/Home.vue b/vueadmin-vue/src/views/Home.vue
index 11b9f0896e00653b69e79c72defb17f416f1f367..529f8a5b34676776217973500029e01cbcf3c6a3 100644
--- a/vueadmin-vue/src/views/Home.vue
+++ b/vueadmin-vue/src/views/Home.vue
@@ -1,16 +1,127 @@
 <template>
-  <div class="home">
-    <h1>主页</h1>
-    <el-button>测试</el-button>
-  </div>
+    <el-container>
+      <el-aside width="200px">
+        <SideMenu></SideMenu>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <strong>VueAdmin后台管理系统</strong>
+          <div class="header-avatar">
+            <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>
+            <el-dropdown>
+                      <span class="el-dropdown-link">
+                        {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
+                      </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :underline="false">
+                  <!--<router-link to="/userCenter">个人中心</router-link>-->
+                  <router-link :to="{name:'UserCenter'}">个人中心</router-link>
+                </el-dropdown-item>
+                <el-dropdown-item @click.native="logout">
+                  退出
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+            <el-link href="#" target="_blank">视频讲解</el-link>
+            <el-link href="#" target="_blank">网站</el-link>
+
+          </div>
+        </el-header>
+        <el-main>
+          <Tabs></Tabs>
+          <div style="margin: 0 15px;">
+            <router-view/>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
 </template>
 
 <script>
-// @ is an alias to /src
-
+import SideMenu from "./inc/SideMenu";
+import Tabs from  "./inc/Tabs"
 export default {
-  name: 'Home',
-  components: {
-  }
+
+  name: "Home",
+  data(){
+    return{
+      userInfo: {
+        id: '',
+        username: '',
+        avatar: ''
+      }
+    }
+  },
+  components:{
+    SideMenu,
+    Tabs
+  },
+  methods: {
+    getUserInfo() {
+      this.$axios.get("/sys/userInfo").then(res => {
+        this.userInfo = res.data.data;
+      })
+    },
+    logout() {
+      this.$axios.post("/logout").then(res => {
+        console.log(res.data.data)
+        localStorage.clear() //token清不清都无所谓
+        sessionStorage.clear()
+        this.$store.commit("resetState") // 退出之后，tab会清空
+        this.$router.push("/login")
+      })
+    }
+  },
+  created() {
+    this.getUserInfo()
+  },
+
 }
 </script>
+
+<style scoped>
+  .el-container{
+    margin: 0;
+    padding: 0;
+    height: 100%;
+  }
+
+  .header-avatar{
+    float: right;
+    width: 210px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .el-dropdown-link {
+    cursor: pointer;
+  }
+
+  .el-header{
+    background-color: rgb(23,179,163);
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    line-height: 200px;
+  }
+
+  .el-main {
+    color: #333;
+    /*!*文本居中*!*/
+    /*text-align: center;*/
+    /*!*line-height: 160px;*!*/
+    padding: 0;
+  }
+
+  a{
+    text-decoration: none;
+  }
+
+</style>
diff --git a/vueadmin-vue/src/views/Index.vue b/vueadmin-vue/src/views/Index.vue
index 0465793c708aea54cce1c49499deae0848213588..6f14e679a6e4006fd87d7d1485057520b81ef9c6 100644
--- a/vueadmin-vue/src/views/Index.vue
+++ b/vueadmin-vue/src/views/Index.vue
@@ -1,13 +1,26 @@
 <template>
-
+    <div>main</div>
 </template>
 
 <script>
+import SideMenu from "./inc/SideMenu";
 export default {
-  name: "index.vue"
+
+    name: "index.vue",
+    components:{
+      SideMenu
+    },
+    data(){
+        return{
+
+        }
+    }
+
 }
 </script>
 
 <style scoped>
 
+
+
 </style>
diff --git a/vueadmin-vue/src/views/UserCenter.vue b/vueadmin-vue/src/views/UserCenter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b3bfd927834de14e8da16a5d498537988871d60a
--- /dev/null
+++ b/vueadmin-vue/src/views/UserCenter.vue
@@ -0,0 +1,105 @@
+<template>
+    <div style="text-align: center;">
+        <h2>你好！{{ userInfo.username }} 同学</h2>
+
+        <el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px">
+            <el-form-item label="旧密码" prop="currentPass">
+                <el-input type="password" v-model="passForm.currentPass" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="新密码" prop="password">
+                <el-input type="password" v-model="passForm.password" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="确认密码" prop="checkPass">
+                <el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('passForm')">提交</el-button>
+                <el-button @click="resetForm('passForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: "UserCenter",
+        data() {
+            var validatePass = (rule, value, callback) => {
+                if (value === '') {
+                    callback(new Error('请再次输入密码'));
+                } else if (value !== this.passForm.password) {
+                    callback(new Error('两次输入密码不一致!'));
+                } else {
+                    callback();
+                }
+            };
+            return {
+                userInfo: {
+
+                },
+                passForm: {
+                    password: '',
+                    checkPass: '',
+                    currentPass: ''
+                },
+                rules: {
+                    password: [
+                        { required: true, message: '请输入新密码', trigger: 'blur' },
+                        { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
+                    ],
+                    checkPass: [
+                        { required: true, validator: validatePass, trigger: 'blur' }
+                    ],
+                    currentPass: [
+                        { required: true, message: '请输入当前密码', trigger: 'blur' },
+                    ]
+                }
+            }
+        },
+        created() {
+            this.getUserInfo()
+        },
+        methods: {
+            getUserInfo() {
+                this.$axios.get("/sys/userInfo").then(res => {
+
+                    this.userInfo = res.data.data;
+                })
+            },
+            submitForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+
+                        const _this = this
+                        this.$axios.post('/sys/user/updatePass', this.passForm).then(res => {
+
+                            _this.$alert(res.data.msg, '提示', {
+                                confirmButtonText: '确定',
+                                callback: action => {
+                                    this.$refs[formName].resetFields();
+                                }
+                            });
+                        })
+
+                    } else {
+                        console.log('error submit!!');
+                        return false;
+                    }
+                });
+            },
+            resetForm(formName) {
+                this.$refs[formName].resetFields();
+            }
+        }
+    }
+
+</script>
+
+<style scoped>
+    .el-form {
+        width: 420px;
+        margin: 50px auto;
+    }
+
+</style>
diff --git a/vueadmin-vue/src/views/inc/SideMenu.vue b/vueadmin-vue/src/views/inc/SideMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e1a7e1b3fdb8813f2e94010817138cb1bcf311f2
--- /dev/null
+++ b/vueadmin-vue/src/views/inc/SideMenu.vue
@@ -0,0 +1,138 @@
+<template>
+    <el-menu
+            :default-active="this.$store.state.menus.editableTabsValue"
+            class="el-menu-vertical-demo"
+            background-color="#545c64"
+            text-color="#fff"
+            active-text-color="#ffd04b">
+        <router-link to="/index">
+            <el-menu-item index="Index" @click="selectMenu({name: 'Index', title: '首页'})">
+                <template slot="title">
+                    <i class="el-icon-s-home"></i>
+                    <span slot="title">首页</span>
+                </template>
+            </el-menu-item>
+        </router-link>
+
+        <!--<el-submenu index="1">
+            <template slot="title">
+                <i class="el-icon-s-operation"></i>
+                <span>系统管理</span>
+            </template>
+
+            <router-link to="/sys/users">
+                <el-menu-item index="1-1">
+                    <template slot="title">
+                        <i class="el-icon-s-custom"></i>
+                        <span slot="title">用户管理</span>
+                    </template>
+                </el-menu-item>
+            </router-link>
+            <router-link to="/sys/roles">
+                <el-menu-item index="1-2">
+                    <template slot="title">
+                        <i class="el-icon-rank"></i>
+                        <span slot="title">角色管理</span>
+                    </template>
+                </el-menu-item>
+            </router-link>
+            <router-link to="/sys/menus">
+                <el-menu-item index="1-3">
+                    <template slot="title">
+                        <i class="el-icon-menu"></i>
+                        <span slot="title">菜单管理</span>
+                    </template>
+                </el-menu-item>
+            </router-link>
+        </el-submenu>
+        <el-submenu index="2">
+            <template slot="title">
+                <i class="el-icon-s-tools"></i>
+                <span>系统工具</span>
+            </template>
+            <el-menu-item index="2-2">
+                <template slot="title">
+                    <i class="el-icon-s-order"></i>
+                    <span slot="title">数字字典</span>
+                </template>
+            </el-menu-item>
+        </el-submenu>-->
+
+        <el-submenu :index="menu.name" v-for="menu in menuList">
+            <template slot="title">
+                <i :class="menu.icon"></i>
+                <span>{{menu.title}}</span>
+            </template>
+            <router-link :to="item.path" v-for="item in menu.children">
+                <el-menu-item :index="item.name" @click="selectMenu(item)">
+                    <template slot="title">
+                        <i :class="item.icon"></i>
+                        <span slot="title">{{item.title}}</span>
+                    </template>
+                </el-menu-item>
+            </router-link>
+        </el-submenu>
+    </el-menu>
+</template>
+
+<script>
+    export default {
+        name: "SideMenu",
+        data() {
+            return {
+                /*menuList: [
+                    {
+                        name: 'SysManga',
+                        title: '系统管理',
+                        icon: 'el-icon-s-operation',
+                        path: '',
+                        children: [
+                            {
+                                name: 'SysUser',
+                                title: '用户管理',
+                                icon: 'el-icon-s-custom',
+                                path: '/sys/users',
+                                children: []
+                            },
+                        ]
+                    },
+                    {
+                        name: 'SysTools',
+                        title: '系统工具',
+                        icon: 'el-icon-s-tools',
+                        path: '',
+                        children: [
+                            {
+                                name: 'SysDict',
+                                title: '数字字典',
+                                icon: 'el-icon-s-order',
+                                path: '/sys/dicts',
+                                children: []
+                            },
+                        ]
+                    }
+                ],*/
+                // menuList:this.$store.state.menus.menuList,
+            }
+        },
+        computed:{
+            // 实现动态的监控,一旦发生变化，菜单栏也发生变化
+            menuList:{
+                get(){
+                    return this.$store.state.menus.menuList;
+                }
+            }
+        },
+        methods: {
+            selectMenu(item) {
+                this.$store.commit("addTab", item)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .el-menu-vertical-demo{
+        height: 100%;
+    }
+</style>
diff --git a/vueadmin-vue/src/views/inc/Tabs.vue b/vueadmin-vue/src/views/inc/Tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f8a6190f3e53dd998196da11af6d99796672155
--- /dev/null
+++ b/vueadmin-vue/src/views/inc/Tabs.vue
@@ -0,0 +1,79 @@
+<template>
+    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
+        <el-tab-pane
+                v-for="(item, index) in editableTabs"
+                :key="item.name"
+                :label="item.title"
+                :name="item.name"
+        >
+        </el-tab-pane>
+    </el-tabs>
+</template>
+
+<script>
+    export default {
+        name: "Tabs",
+        data() {
+            return {
+                // 一次性赋值，后续发生变化之后不会动态监控而发生改变
+                // editableTabsValue: this.$store.state.menus.editableTabsValue,
+                // editableTabs: this.$store.state.menus.editableTabs,
+
+            }
+        },
+        computed: {
+            editableTabs: {
+                get() {
+                    return this.$store.state.menus.editableTabs
+                },
+                set(val) {
+                    this.$store.state.menus.editableTabs = val
+                }
+            },
+            editableTabsValue: {
+                get() {
+                    return this.$store.state.menus.editableTabsValue
+                },
+                set(val) {
+                    this.$store.state.menus.editableTabsValue = val
+                }
+            }
+        },
+        methods: {
+
+            removeTab(targetName) {
+                let tabs = this.editableTabs;
+                let activeName = this.editableTabsValue;
+
+                // 首页不能删除
+                // if (activeName === 'Index') {
+                if(targetName === 'Index'){
+                    return
+                }
+                // 一刷新tab消失，内容还在 原因 editableTabsValue editableTabs 没有存入sessionStorage中
+                // 有时候用户直接通过地址栏访问，sessionStorage中也不会存在tab
+                if (activeName === targetName) {
+                    tabs.forEach((tab, index) => {
+                        if (tab.name === targetName) {
+                            let nextTab = tabs[index + 1] || tabs[index - 1];
+                            if (nextTab) {
+                                activeName = nextTab.name;
+                            }
+                        }
+                    });
+                }
+                this.editableTabsValue = activeName;
+                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+                // 删除之后进行路由的切换
+                this.$router.push({name: activeName})
+            },
+            clickTab (target) {
+                this.$router.push({name: target.name})
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vueadmin-vue/src/views/sys/Dict.vue b/vueadmin-vue/src/views/sys/Dict.vue
new file mode 100644
index 0000000000000000000000000000000000000000..53bde804d0766bedd4e851b99ec4ea5ce973e91d
--- /dev/null
+++ b/vueadmin-vue/src/views/sys/Dict.vue
@@ -0,0 +1,13 @@
+<template>
+    <h1>字典管理</h1>
+</template>
+
+<script>
+    export default {
+        name: "Dict"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vueadmin-vue/src/views/sys/Menu.vue b/vueadmin-vue/src/views/sys/Menu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40cbd8a90ae4afbeafcb6500cf78c2bd77d9288d
--- /dev/null
+++ b/vueadmin-vue/src/views/sys/Menu.vue
@@ -0,0 +1,270 @@
+<template>
+    <div>
+
+        <el-form :inline="true">
+            <el-form-item>
+                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-table
+                :data="tableData"
+                style="width: 100%;margin-bottom: 20px;"
+                row-key="id"
+                border
+                stripe
+                default-expand-all
+                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+
+            <el-table-column
+                    prop="name"
+                    label="名称"
+                    sortable
+                    width="180">
+            </el-table-column>
+            <el-table-column
+                    prop="perms"
+                    label="权限编码"
+                    sortable
+                    width="180">
+            </el-table-column>
+
+            <el-table-column
+                    prop="icon"
+                    label="图标">
+            </el-table-column>
+
+            <el-table-column
+                    prop="type"
+                    label="类型">
+                <!--对行内数据进行修改样式
+                scope可以接收父组件传递过来的值-->
+                <template slot-scope="scope">
+                    <el-tag size="small" v-if="scope.row.type === 0">目录</el-tag>
+                    <el-tag size="small" v-else-if="scope.row.type === 1" type="success">菜单</el-tag>
+                    <el-tag size="small" v-else-if="scope.row.type === 2" type="info">按钮</el-tag>
+                </template>
+
+            </el-table-column>
+
+            <el-table-column
+                    prop="path"
+                    label="菜单URL">
+            </el-table-column>
+            <el-table-column
+                    prop="component"
+                    label="菜单组件">
+            </el-table-column>
+            <el-table-column
+                    prop="orderNum"
+                    label="排序号">
+            </el-table-column>
+            <el-table-column
+                    prop="statu"
+                    label="状态">
+                <template slot-scope="scope">
+                    <el-tag size="small" v-if="scope.row.statu === 1" type="success">正常</el-tag>
+                    <el-tag size="small" v-else-if="scope.row.statu === 0" type="danger">禁用</el-tag>
+                </template>
+
+            </el-table-column>
+            <el-table-column
+                    prop="icon"
+                    label="操作">
+
+                <template slot-scope="scope">
+                    <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
+                    <!--分割线-->
+                    <el-divider direction="vertical"></el-divider>
+
+                    <template>
+                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
+                            <el-button type="text" slot="reference">删除</el-button>
+                        </el-popconfirm>
+                    </template>
+
+                </template>
+            </el-table-column>
+
+        </el-table>
+
+
+        <!--新增对话框-->
+        <el-dialog
+                title="提示"
+                :visible.sync="dialogVisible"
+                width="600px"
+                :before-close="handleClose">
+
+            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
+
+                <el-form-item label="上级菜单" prop="parentId">
+                    <el-select v-model="editForm.parentId" placeholder="请选择上级菜单">
+                        <template v-for="item in tableData">
+                            <!--label：显示的名称-->
+                            <el-option :label="item.name" :value="item.id"></el-option>
+                            <!--循环两次，目录和菜单-->
+                            <template v-for="child in item.children">
+                                <el-option :label="child.name" :value="child.id">
+                                    <span>{{ "- " + child.name }}</span>
+                                </el-option>
+                            </template>
+                        </template>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="菜单名称" prop="name" label-width="100px">
+                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="权限编码" prop="perms" label-width="100px">
+                    <el-input v-model="editForm.perms" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="图标" prop="icon" label-width="100px">
+                    <el-input v-model="editForm.icon" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="菜单URL" prop="path" label-width="100px">
+                    <el-input v-model="editForm.path" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="菜单组件" prop="component" label-width="100px">
+                    <el-input v-model="editForm.component" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="类型" prop="type" label-width="100px">
+                    <el-radio-group v-model="editForm.type">
+                        <el-radio :label=0>目录</el-radio>
+                        <el-radio :label=1>菜单</el-radio>
+                        <el-radio :label=2>按钮</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="状态" prop="statu" label-width="100px">
+                    <el-radio-group v-model="editForm.statu">
+                        <el-radio :label=0>禁用</el-radio>
+                        <el-radio :label=1>正常</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="排序号" prop="orderNum" label-width="100px">
+                    <el-input-number v-model="editForm.orderNum" :min="1" label="排序号">1</el-input-number>
+                </el-form-item>
+
+
+                <el-form-item>
+                    <el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
+                    <el-button @click="resetForm('editForm')">重置</el-button>
+                </el-form-item>
+            </el-form>
+
+        </el-dialog>
+
+
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: "Menu",
+        data() {
+            return {
+                dialogVisible: false,// 默认不显示
+                editForm: {
+
+                },
+                editFormRules: {
+                    parentId: [
+                        {required: true, message: '请选择上级菜单', trigger: 'blur'}
+                    ],
+                    name: [
+                        {required: true, message: '请输入名称', trigger: 'blur'}
+                    ],
+                    perms: [
+                        {required: true, message: '请输入权限编码', trigger: 'blur'}
+                    ],
+                    type: [
+                        {required: true, message: '请选择状态', trigger: 'blur'}
+                    ],
+                    orderNum: [
+                        {required: true, message: '请填入排序号', trigger: 'blur'}
+                    ],
+                    statu: [
+                        {required: true, message: '请选择状态', trigger: 'blur'}
+                    ]
+                },
+                tableData: []
+            }
+        },
+        created() {
+            this.getMenuTree()
+        },
+        methods: {
+            getMenuTree() {
+                // mock会拦截axios的请求并且把mock数据进行一个返回
+                this.$axios.get("/sys/menu/list").then(res => {
+                    this.tableData = res.data.data
+                })
+            },
+            submitForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.$axios.post('/sys/menu/' + (this.editForm.id?'update' : 'save'), this.editForm)
+                            .then(res => {
+
+                                this.$message({
+                                    showClose: true,
+                                    message: '恭喜你，操作成功',
+                                    type: 'success',
+                                    // 关闭时的回调
+                                    onClose:() => {
+                                        this.getMenuTree() // 操作完成之后，更新数据
+                                    }
+                                });
+
+                                this.dialogVisible = false
+                            })
+                    } else {
+                        console.log('error submit!!');
+                        return false;
+                    }
+                });
+            },
+            editHandle(id) {
+                this.$axios.get('/sys/menu/info/' + id).then(res => {
+                    // 数据的回显
+                    this.editForm = res.data.data
+
+                    this.dialogVisible = true
+                })
+            },
+            // 清空表单操作
+            resetForm(formName) {
+                this.$refs[formName].resetFields();
+                this.dialogVisible = false
+                this.editForm = {}
+            },
+            handleClose() {
+                this.resetForm('editForm')
+            },
+            delHandle(id) {
+                this.$axios.post("/sys/menu/delete/" + id).then(res => {
+                    this.$message({
+                        showClose: true,
+                        message: '恭喜你，操作成功',
+                        type: 'success',
+                        onClose:() => {
+                            this.getMenuTree()
+                        }
+                    });
+
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/vueadmin-vue/src/views/sys/Role.vue b/vueadmin-vue/src/views/sys/Role.vue
new file mode 100644
index 0000000000000000000000000000000000000000..473aa6a9c2b570e3552ac03d604607c1ab6b3f63
--- /dev/null
+++ b/vueadmin-vue/src/views/sys/Role.vue
@@ -0,0 +1,369 @@
+<template>
+    <div>
+        <el-form :inline="true">
+            <el-form-item>
+                <el-input
+                        v-model="searchForm.name"
+                        placeholder="名称"
+                        clearable
+                >
+                </el-input>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button @click="getRoleList">搜索</el-button>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
+                    <el-button type="danger" slot="reference" :disabled="delBtlStatu">批量删除</el-button>
+                </el-popconfirm>
+            </el-form-item>
+        </el-form>
+
+        <el-table
+                ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                style="width: 100%"
+                border
+                stripe
+                @selection-change="handleSelectionChange">
+
+            <el-table-column
+                    type="selection"
+                    width="55">
+            </el-table-column>
+
+            <el-table-column
+                    prop="name"
+                    label="名称"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="code"
+                    label="唯一编码"
+                    show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+                    prop="remark"
+                    label="描述"
+                    show-overflow-tooltip>
+            </el-table-column>
+
+            <el-table-column
+                    prop="statu"
+                    label="状态">
+                <template slot-scope="scope">
+                    <el-tag size="small" v-if="scope.row.statu === 1" type="success">正常</el-tag>
+                    <el-tag size="small" v-else-if="scope.row.statu === 0" type="danger">禁用</el-tag>
+                </template>
+
+            </el-table-column>
+            <el-table-column
+                    prop="icon"
+                    label="操作">
+
+                <template slot-scope="scope">
+                    <el-button type="text" @click="permHandle(scope.row.id)">分配权限</el-button>
+                    <el-divider direction="vertical"></el-divider>
+
+                    <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
+                    <el-divider direction="vertical"></el-divider>
+
+                    <template>
+                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
+                            <el-button type="text" slot="reference">删除</el-button>
+                        </el-popconfirm>
+                    </template>
+
+                </template>
+            </el-table-column>
+
+        </el-table>
+
+
+        <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                layout="total, sizes, prev, pager, next, jumper"
+                :page-sizes="[10, 20, 50, 100]"
+                :current-page="current"
+                :page-size="size"
+                :total="total">
+        </el-pagination>
+
+
+        <!--新增对话框-->
+        <el-dialog
+                title="提示"
+                :visible.sync="dialogVisible"
+                width="600px"
+                :before-close="handleClose">
+
+            <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
+
+                <el-form-item label="角色名称" prop="name" label-width="100px">
+                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="唯一编码" prop="code" label-width="100px">
+                    <el-input v-model="editForm.code" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="描述" prop="remark" label-width="100px">
+                    <el-input v-model="editForm.remark" autocomplete="off"></el-input>
+                </el-form-item>
+
+
+                <el-form-item label="状态" prop="statu" label-width="100px">
+                    <el-radio-group v-model="editForm.statu">
+                        <el-radio :label=0>禁用</el-radio>
+                        <el-radio :label=1>正常</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item>
+                    <el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
+                    <el-button @click="resetForm('editForm')">重置</el-button>
+                </el-form-item>
+            </el-form>
+
+        </el-dialog>
+
+        <el-dialog
+                title="分配权限"
+                :visible.sync="permDialogVisible"
+                width="600px">
+
+            <el-form :model="permForm">
+                <!--:default-expand-all=true 默认展开所有元素
+                :check-strictly=true 不强关联-->
+                <el-tree
+                        :data="permTreeData"
+                        show-checkbox
+                        ref="permTree"
+                        :default-expand-all=true
+                        node-key="id"
+                        :check-strictly=true
+                        :props="defaultProps">
+                </el-tree>
+
+            </el-form>
+
+            <span slot="footer" class="dialog-footer">
+			    <el-button @click="permDialogVisible = false">取 消</el-button>
+			    <el-button type="primary" @click="submitPermFormHandle('permForm')">确 定</el-button>
+			</span>
+
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Role",
+        data() {
+            return {
+                searchForm: {},
+                delBtlStatu: true,
+
+                total: 0,
+                size: 10,
+                current: 1,
+
+                dialogVisible: false,
+                editForm: {
+
+                },
+
+                tableData: [],
+
+                editFormRules: {
+                    name: [
+                        {required: true, message: '请输入角色名称', trigger: 'blur'}
+                    ],
+                    code: [
+                        {required: true, message: '请输入唯一编码', trigger: 'blur'}
+                    ],
+                    statu: [
+                        {required: true, message: '请选择状态', trigger: 'blur'}
+                    ]
+                },
+
+                multipleSelection: [],
+
+                permDialogVisible: false,
+                permForm: {},
+                defaultProps: {
+                    children: 'children',
+                    label: 'name'
+                },
+                permTreeData: []
+            }
+        },
+        created() {
+            this.getRoleList()
+
+            this.$axios.get('/sys/menu/list').then(res => {
+                this.permTreeData = res.data.data
+            })
+        },
+        methods: {
+            toggleSelection(rows) {
+                if (rows) {
+                    rows.forEach(row => {
+                        this.$refs.multipleTable.toggleRowSelection(row);
+                    });
+                } else {
+                    this.$refs.multipleTable.clearSelection();
+                }
+            },
+            // 选中复选框时会触发
+            handleSelectionChange(val) {
+                console.log("勾选")
+                console.log(val)
+                this.multipleSelection = val;
+                // 点击了复选框，激活批量删除按钮  如果等于0为true，禁用
+                this.delBtlStatu = val.length == 0
+            },
+
+            handleSizeChange(val) {
+                console.log(`每页 ${val} 条`);
+                this.size = val
+                this.getRoleList()
+            },
+            handleCurrentChange(val) {
+                console.log(`当前页: ${val}`);
+                this.current = val
+                this.getRoleList()
+            },
+
+            resetForm(formName) {
+                this.$refs[formName].resetFields();
+                this.dialogVisible = false
+                this.editForm = {}
+            },
+            handleClose() {
+                this.resetForm('editForm')
+            },
+
+            getRoleList() {
+                this.$axios.get("/sys/role/list", {
+                    params: {
+                        name: this.searchForm.name,
+                        current: this.current,
+                        size: this.size
+                    }
+                }).then(res => {
+                    this.tableData = res.data.data.records
+                    this.size = res.data.data.size
+                    this.current = res.data.data.current
+                    this.total = res.data.data.total
+                })
+            },
+
+            submitForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.$axios.post('/sys/role/' + (this.editForm.id?'update' : 'save'), this.editForm)
+                            .then(res => {
+
+                                this.$message({
+                                    showClose: true,
+                                    message: '恭喜你，操作成功',
+                                    type: 'success',
+                                    onClose:() => {
+                                        this.getRoleList()
+                                    }
+                                });
+
+                                this.dialogVisible = false
+                                this.resetForm(formName)
+                            })
+                    } else {
+                        console.log('error submit!!');
+                        return false;
+                    }
+                });
+            },
+            editHandle(id) {
+                this.$axios.get('/sys/role/info/' + id).then(res => {
+                    this.editForm = res.data.data
+
+                    this.dialogVisible = true
+                })
+            },
+            // 删除单条记录和删除多条记录，复用同一个方法
+            delHandle(id) {
+
+                var ids = []
+
+                if (id) {
+                    // 删除单条记录
+                    ids.push(id)
+                } else {
+                    // 批量删除数据
+                    this.multipleSelection.forEach(row => {
+                        ids.push(row.id)
+                    })
+                }
+
+                console.log(ids)
+                // 将ids数组放到body中
+                this.$axios.post("/sys/role/delete", ids).then(res => {
+                    this.$message({
+                        showClose: true,
+                        message: '恭喜你，操作成功',
+                        type: 'success',
+                        onClose:() => {
+                            this.getRoleList()
+                        }
+                    });
+                })
+            },
+            permHandle(id) {
+                this.permDialogVisible = true
+
+                this.$axios.get("/sys/role/info/" + id).then(res => {
+
+                    this.$refs.permTree.setCheckedKeys(res.data.data.menuIds)
+                    this.permForm = res.data.data
+                })
+            },
+
+            submitPermFormHandle(formName) {
+                // 拿到所有勾选的菜单id 获取到所有的node-key
+                var menuIds = this.$refs.permTree.getCheckedKeys()
+
+                console.log(menuIds)
+                // 要给哪一个角色进行权限的赋值
+                this.$axios.post('/sys/role/perm/' + this.permForm.id, menuIds).then(res => {
+                    this.$message({
+                        showClose: true,
+                        message: '恭喜你，操作成功',
+                        type: 'success',
+                        onClose:() => {
+                            this.getRoleList()
+                        }
+                    });
+                    this.permDialogVisible = false
+                    this.resetForm(formName)
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+    .el-pagination {
+        float: right;
+        margin-top: 22px;
+    }
+
+</style>
diff --git a/vueadmin-vue/src/views/sys/User.vue b/vueadmin-vue/src/views/sys/User.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ace1a2de1850236dda842e695bed32ac40ac6134
--- /dev/null
+++ b/vueadmin-vue/src/views/sys/User.vue
@@ -0,0 +1,409 @@
+<template>
+    <div>
+        <el-form :inline="true">
+            <el-form-item>
+                <el-input
+                        v-model="searchForm.username"
+                        placeholder="用户名"
+                        clearable
+                >
+                </el-input>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button @click="getUserList">搜索</el-button>
+            </el-form-item>
+
+            <el-form-item>
+                <!--当前新增按钮所需要的权限-->
+                <el-button type="primary" @click="dialogVisible = true" v-if="hasAuth('sys:user:save')">新增</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
+                    <el-button type="danger" slot="reference" :disabled="delBtlStatu" v-if="hasAuth('sys:user:delete')">批量删除</el-button>
+                </el-popconfirm>
+            </el-form-item>
+        </el-form>
+
+        <el-table
+                ref="multipleTable"
+                :data="tableData"
+                tooltip-effect="dark"
+                style="width: 100%"
+                border
+                stripe
+                @selection-change="handleSelectionChange">
+
+            <el-table-column
+                    type="selection"
+                    width="55">
+            </el-table-column>
+
+            <el-table-column
+                    label="头像"
+                    width="50">
+                <template slot-scope="scope">
+                    <el-avatar size="small" :src="scope.row.avatar"></el-avatar>
+                </template>
+            </el-table-column>
+
+            <el-table-column
+                    prop="username"
+                    label="用户名"
+                    width="120">
+            </el-table-column>
+            <el-table-column
+                    prop="code"
+                    label="角色名称">
+                <template slot-scope="scope">
+                    <el-tag size="small" type="info" v-for="item in scope.row.sysRoles">{{item.name}}</el-tag>
+                </template>
+
+            </el-table-column>
+            <el-table-column
+                    prop="email"
+                    label="邮箱">
+            </el-table-column>
+            <el-table-column
+                    prop="phone"
+                    label="手机号">
+            </el-table-column>
+
+            <el-table-column
+                    prop="statu"
+                    label="状态">
+                <template slot-scope="scope">
+                    <el-tag size="small" v-if="scope.row.statu === 1" type="success">正常</el-tag>
+                    <el-tag size="small" v-else-if="scope.row.statu === 0" type="danger">禁用</el-tag>
+                </template>
+
+            </el-table-column>
+            <el-table-column
+                    prop="created"
+                    width="200"
+                    label="创建时间"
+            >
+            </el-table-column>
+            <el-table-column
+                    prop="icon"
+                    width="260px"
+                    label="操作">
+
+                <template slot-scope="scope">
+                    <el-button type="text" @click="roleHandle(scope.row.id)">分配角色</el-button>
+                    <el-divider direction="vertical"></el-divider>
+
+                    <el-button type="text" @click="repassHandle(scope.row.id, scope.row.username)">重置密码</el-button>
+                    <el-divider direction="vertical"></el-divider>
+
+                    <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
+                    <el-divider direction="vertical"></el-divider>
+
+                    <template>
+                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
+                            <el-button type="text" slot="reference">删除</el-button>
+                        </el-popconfirm>
+                    </template>
+
+                </template>
+            </el-table-column>
+
+        </el-table>
+
+        <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                layout="total, sizes, prev, pager, next, jumper"
+                :page-sizes="[10, 20, 50, 100]"
+                :current-page="current"
+                :page-size="size"
+                :total="total">
+        </el-pagination>
+
+
+        <!--新增对话框-->
+        <el-dialog
+                title="提示"
+                :visible.sync="dialogVisible"
+                width="600px"
+                :before-close="handleClose">
+
+            <el-form :model="editForm" :rules="editFormRules" ref="editForm">
+                <el-form-item label="用户名" prop="username" label-width="100px">
+                    <el-input v-model="editForm.username" autocomplete="off"></el-input>
+                    <el-alert
+                            title="初始密码为888888"
+                            :closable="false"
+                            type="info"
+                            style="line-height: 12px;"
+                    ></el-alert>
+                </el-form-item>
+
+                <el-form-item label="邮箱"  prop="email" label-width="100px">
+                    <el-input v-model="editForm.email" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="手机号"  prop="phone" label-width="100px">
+                    <el-input v-model="editForm.phone" autocomplete="off"></el-input>
+                </el-form-item>
+
+                <el-form-item label="状态"  prop="statu" label-width="100px">
+                    <el-radio-group v-model="editForm.statu">
+                        <el-radio :label="0">禁用</el-radio>
+                        <el-radio :label="1">正常</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="resetForm('editForm')">取 消</el-button>
+                <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 分配权限对话框 -->
+        <el-dialog title="分配角色" :visible.sync="roleDialogFormVisible" width="600px">
+
+            <el-form :model="roleForm">
+                <el-tree
+                        :data="roleTreeData"
+                        show-checkbox
+                        ref="roleTree"
+                        :check-strictly=checkStrictly
+                        node-key="id"
+                        :default-expand-all=true
+                        :props="defaultProps">
+                </el-tree>
+            </el-form>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="roleDialogFormVisible=false">取 消</el-button>
+                <el-button type="primary" @click="submitRoleHandle('roleForm')">确 定</el-button>
+            </div>
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Role",
+        data() {
+            return {
+                searchForm: {},
+                delBtlStatu: true,
+
+                total: 0,
+                size: 10,
+                current: 1,
+
+                dialogVisible: false,
+                editForm: {
+
+                },
+
+                tableData: [],
+
+                editFormRules: {
+                    username: [
+                        {required: true, message: '请输入用户名称', trigger: 'blur'}
+                    ],
+                    email: [
+                        {required: true, message: '请输入邮箱', trigger: 'blur'}
+                    ],
+                    statu: [
+                        {required: true, message: '请选择状态', trigger: 'blur'}
+                    ]
+                },
+
+                multipleSelection: [],
+
+                roleDialogFormVisible: false,
+                defaultProps: {
+                    children: 'children',
+                    label: 'name'
+                },
+                roleForm: {},
+                roleTreeData:  [],
+                treeCheckedKeys: [],
+                checkStrictly: true
+
+            }
+        },
+        created() {
+            this.getUserList()
+
+            this.$axios.get("/sys/role/list").then(res => {
+                this.roleTreeData = res.data.data.records
+            })
+        },
+        methods: {
+            toggleSelection(rows) {
+                if (rows) {
+                    rows.forEach(row => {
+                        this.$refs.multipleTable.toggleRowSelection(row);
+                    });
+                } else {
+                    this.$refs.multipleTable.clearSelection();
+                }
+            },
+            handleSelectionChange(val) {
+                console.log("勾选")
+                console.log(val)
+                this.multipleSelection = val;
+
+                this.delBtlStatu = val.length == 0
+            },
+
+            handleSizeChange(val) {
+                console.log(`每页 ${val} 条`);
+                this.size = val
+                this.getUserList()
+            },
+            handleCurrentChange(val) {
+                console.log(`当前页: ${val}`);
+                this.current = val
+                this.getUserList()
+            },
+
+            resetForm(formName) {
+                this.$refs[formName].resetFields();
+                this.dialogVisible = false
+                this.editForm = {}
+            },
+            handleClose() {
+                this.resetForm('editForm')
+            },
+
+            getUserList() {
+                this.$axios.get("/sys/user/list", {
+                    params: {
+                        username: this.searchForm.username,
+                        current: this.current,
+                        size: this.size
+                    }
+                }).then(res => {
+                    this.tableData = res.data.data.records
+                    this.size = res.data.data.size
+                    this.current = res.data.data.current
+                    this.total = res.data.data.total
+                })
+            },
+
+            submitForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.$axios.post('/sys/user/' + (this.editForm.id?'update' : 'save'), this.editForm)
+                            .then(res => {
+
+                                this.$message({
+                                    showClose: true,
+                                    message: '恭喜你，操作成功',
+                                    type: 'success',
+                                    onClose:() => {
+                                        this.getUserList()
+                                    }
+                                });
+
+                                this.dialogVisible = false
+                            })
+                    } else {
+                        console.log('error submit!!');
+                        return false;
+                    }
+                });
+            },
+            editHandle(id) {
+                this.$axios.get('/sys/user/info/' + id).then(res => {
+                    this.editForm = res.data.data
+
+                    this.dialogVisible = true
+                })
+            },
+            delHandle(id) {
+
+                var ids = []
+
+                if (id) {
+                    ids.push(id)
+                } else {
+                    this.multipleSelection.forEach(row => {
+                        ids.push(row.id)
+                    })
+                }
+
+                console.log(ids)
+
+                this.$axios.post("/sys/user/delete", ids).then(res => {
+                    this.$message({
+                        showClose: true,
+                        message: '恭喜你，操作成功',
+                        type: 'success',
+                        onClose:() => {
+                            this.getUserList()
+                        }
+                    });
+                })
+            },
+
+            roleHandle (id) {
+                this.roleDialogFormVisible = true
+
+                this.$axios.get('/sys/user/info/' + id).then(res => {
+                    this.roleForm = res.data.data
+
+                    let roleIds = []
+                    res.data.data.sysRoles.forEach(row => {
+                        roleIds.push(row.id)
+                    })
+
+                    this.$refs.roleTree.setCheckedKeys(roleIds)
+                })
+            },
+            submitRoleHandle(formName) {
+                var roleIds = this.$refs.roleTree.getCheckedKeys()
+
+                console.log(roleIds)
+
+                this.$axios.post('/sys/user/role/' + this.roleForm.id, roleIds).then(res => {
+                    this.$message({
+                        showClose: true,
+                        message: '恭喜你，操作成功',
+                        type: 'success',
+                        onClose:() => {
+                            this.getUserList()
+                        }
+                    });
+
+                    this.roleDialogFormVisible = false
+                })
+            },
+            repassHandle(id, username) {
+
+                this.$confirm('将重置用户【' + username + '】的密码, 是否继续?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    this.$axios.post("/sys/user/repass", id).then(res => {
+                        this.$message({
+                            showClose: true,
+                            message: '恭喜你，操作成功',
+                            type: 'success',
+                            onClose: () => {
+                            }
+                        });
+                    })
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+    .el-pagination {
+        float: right;
+        margin-top: 22px;
+    }
+
+</style>