添加主页和用户列表

.eslintrc.js

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 14:34:40
- * @LastEditTime: 2021-11-21 18:51:27
+ * @LastEditTime: 2021-11-21 21:09:23
  */
 module.exports = {
     root: true,
@@ -21,6 +21,7 @@ module.exports = {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'space-before-function-paren': 0,
-        indent: 'off'
+        indent: 'off',
+        "eslint-disable-next-line": false
     }
 }

.prettierrc

@@ -1,5 +0,0 @@
-{
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 4
-}

src/assets/css/global.css

@@ -2,4 +2,11 @@ html, body , #app {
     height: 100%;
     margin: 0;
     padding: 0;
+}
+.el-breadcrumb{
+    margin-bottom: 15px;
+    font-size: 12px;
+}
+.el-card {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
 }

src/components/Home.vue

@@ -3,25 +3,161 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 18:27:01
- * @LastEditTime: 2021-11-21 18:40:41
+ * @LastEditTime: 2021-11-21 22:36:07
 -->
 
 <template>
-  <div>
-    <el-button type="info"
-               @click="logout">退出</el-button>
-  </div>
+  <!-- 头部区域 -->
+  <el-container class="home-container">
+
+    <el-header>
+      <div>
+        <img src="../assets/heima.png"
+             alt="电商后台管理系统">
+        <span>电商后台管理系统</span>
+      </div>
+      <el-button type="info"
+                 @click="logout">注销</el-button>
+    </el-header>
+    <!-- 页面主题区 -->
+    <el-container>
+      <!-- 侧边栏 -->
+      <el-aside :width="isCollapse ?'64px':'200px'">
+        <div class="toggle-button"
+             @click="toggleCollapse">|||</div>
+        <!-- 侧边栏菜单区
+         :router="true" 可以将index当做路径
+         -->
+        <el-menu background-color="
+                #333744"
+                 text-color="#fff"
+                 active-text-color="#409EFF"
+                 unique-opened
+                 :collapse="isCollapse"
+                 :collapse-transition="false"
+                 :router="true"
+                 :default-active="activePath">
+          <!-- 一级菜单 -->
+          <el-submenu :index="'/'+item.path"
+                      v-for="item in menuList"
+                      :key="item.id+''">
+            <!-- 一级菜单模板区 -->
+            <template slot="title">
+              <!-- 图标 -->
+              <i :class="iconsObj[item.id+'']"></i>
+              <span> {{item.authName}}</span>
+            </template>
+
+            <!-- 二级菜单 -->
+            <el-menu-item :index="'/'+subItem.path"
+                          v-for="subItem in item.children"
+                          :key="subItem.id+''"
+                          @click="saveNavState('/'+subItem.path)">
+              <!-- 二级菜单模板区 -->
+              <template slot="title">
+                <!-- 图标 -->
+                <i class="el-icon-menu"></i>
+                <span>{{subItem.authName}}</span>
+              </template>
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+      <!-- 右侧主体 -->
+      <el-main>
+        <!-- 路由占位符 -->
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
 export default ({
+  data () {
+    return {
+      menuList: {},
+      iconsObj: {
+        '125': 'el-icon-s-custom',
+        '103': 'el-icon-s-management',
+        '101': 'el-icon-s-shop',
+        '102': 'el-icon-tickets',
+        '145': 'el-icon-data-line'
+      },
+      isCollapse: false,
+      activePath: ''
+    }
+
+  },
+  created () {
+    this.getMenuList()
+    this.activePath = window.sessionStorage.getItem('activePath')
+  },
   methods: {
     logout () {
       window.sessionStorage.clear()
       this.$router.push('/login')
+    },
+    // 获取所有的菜单
+    async getMenuList () {
+      const { data: res } = await this.$http.get('menus')
+      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
+      //   this.$message.success(res.meta.msg)
+      this.menuList = res.data
+      //   console.log(res)
+    },
+    // 折叠和展开
+    toggleCollapse () {
+      this.isCollapse = !this.isCollapse
+    },
+    saveNavState (activePath) {
+      window.sessionStorage.setItem('activePath', activePath)
+      this.activePath = activePath
     }
   }
 })
 </script>
 <style lang="less" scoped>
+.home-container {
+  height: 100%;
+}
+.el-header {
+  background-color: #373d41;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+}
+.el-header > div {
+  display: flex;
+  align-items: center;
+}
+.el-header > div > span {
+  margin-left: 15px;
+}
+.el-aside {
+  background-color: #333744;
+  text-align: center;
+  margin-left: 0;
+}
+.el-aside .el-menu {
+  border-right: none;
+}
+.el-main {
+  background-color: #eaedf1;
+}
+.el-submenu i {
+  margin-right: 10px;
+}
+.toggle-button {
+  background-color: #4a5064;
+  font-size: 10px;
+  line-height: 24px;
+  color: #fff;
+  text-align: center;
+  letter-spacing: 0.2em;
+  cursor: pointer;
+}
 </style>

src/components/Welcome.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-21 21:22:58
+ * @LastEditTime: 2021-11-21 21:22:58
+-->
+<template>
+  <div>
+    <h3>Welcome</h3>
+  </div>
+</template>

src/components/user/Users.vue

@@ -0,0 +1,262 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-21 21:32:18
+ * @LastEditTime: 2021-11-21 23:54:52
+-->
+<template>
+  <div>
+    <!-- 面包屑导航区 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
+      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <!-- 卡片式图区域 -->
+    <el-card>
+      <!-- 搜索与添加区域 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-input placeholder="请输入内容"
+                    class="input-with-select"
+                    v-model="queryInfo.query"
+                    clearable
+                    @clear="getUserList">
+            <el-button slot="append"
+                       icon="el-icon-search"
+                       @click="getUserList"></el-button>
+          </el-input>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary"
+                     icon="el-icon-user"
+                     @click="addDialogVisible = true">添加用户</el-button>
+        </el-col>
+      </el-row>
+      <!-- 用户列表区 -->
+      <el-table :data="userList"
+                border
+                stripe>
+        <el-table-column label="序号"
+                         type="index">
+        </el-table-column>
+        <el-table-column label="姓名"
+                         prop="username">
+        </el-table-column>
+        <el-table-column label="邮箱"
+                         prop="email">
+        </el-table-column>
+        <el-table-column label="电话"
+                         prop="mobile">
+        </el-table-column>
+        <el-table-column label="角色"
+                         prop="role_name">
+        </el-table-column>
+        <el-table-column label="状态">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark"
+                        :content="!scope.row.mg_state ?'启用':'禁用'"
+                        placement="top"
+                        :enterable="false">
+              <el-switch v-model="scope.row.mg_state"
+                         @change="userStateChanegd(scope.row)">
+              </el-switch>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作"
+                         width="180px">
+          <template>
+            <!-- 修改按钮 -->
+            <el-tooltip effect="dark"
+                        content="修改"
+                        placement="top"
+                        :enterable="false">
+              <el-button type="primary"
+                         icon="el-icon-edit"
+                         size="mini"></el-button>
+            </el-tooltip>
+            <!-- 删除按钮 -->
+            <el-tooltip effect="dark"
+                        content="删除"
+                        placement="top"
+                        :enterable="false">
+              <el-button type="danger"
+                         icon="el-icon-delete"
+                         size="mini"></el-button>
+            </el-tooltip>
+            <!-- 分配权限 -->
+            <el-tooltip effect="dark"
+                        content="分配角色"
+                        placement="top"
+                        :enterable="false">
+              <el-button type="success"
+                         icon="el-icon-setting"
+                         size="mini"></el-button>
+            </el-tooltip>
+
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @size-change="handleSizeChange"
+                     @current-change="handleCurrentChange"
+                     :current-page="queryInfo.pagenum"
+                     :page-sizes="[2, 5, 10, 20]"
+                     :page-size="queryInfo.pagesize"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="total">
+      </el-pagination>
+    </el-card>
+    <!-- 添加用户对话框 -->
+    <el-dialog title="添加用户"
+               :visible.sync="addDialogVisible"
+               width="50%">
+      <!-- 内容主体区 -->
+      <el-form :model="addForm"
+               :rules="addFormRules"
+               ref="addFormRef"
+               label-width="70px">
+
+        <!-- 用户名称 -->
+        <el-form-item label="用户名"
+                      prop="username">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="addForm.username"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+
+        <!-- 密码 -->
+        <el-form-item label="密码"
+                      prop="password">
+          <!-- <el-input prefix-icon="iconfont icon-3702mima"></el-input> -->
+          <el-input v-model="addForm.password"
+                    prefix-icon="el-icon-lock"
+                    type="password"></el-input>
+        </el-form-item>
+        <!-- 邮箱 -->
+        <el-form-item label="邮箱"
+                      prop="email">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="addForm.email"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+
+        <el-form-item label="手机号"
+                      prop="mobile">
+          <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
+          <el-input v-model="addForm.mobile"
+                    prefix-icon="el-icon-user"
+                    type="text"></el-input>
+        </el-form-item>
+      </el-form>
+      <!-- 底部区 -->
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="info"
+                   @click="resetAddForm">重 置</el-button>
+        <el-button type="primary"
+                   @click="addDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    //   验证邮箱规则
+    var checkEmail = (rule, value, cb) => {
+      const regEmail = /^\w{3,15}@[\w-]+\.(com|cn|net|org|edu|com\.cn)$/gi
+      if (regEmail.test(value)) {
+        return cb
+      }
+      cb(new Error('请输入合法邮箱'))
+    }
+    // 校验手机号
+    var checkMobile = (rule, value, cb) => {
+      const regMobile = /1[34578]\d{9}$/g
+      if (regMobile.test(value)) {
+        return cb
+      }
+      cb(new Error('请输入合法手机号'))
+    }
+    return {
+      userList: [],
+      queryInfo: {
+        query: '',
+        pagenum: 1,
+        pagesize: 2
+      },
+      total: 0,
+      addDialogVisible: false,
+      addForm: {},
+      addFormRules: {
+        // 验证用户名是否合法
+        username: [
+          { required: true, message: '请输入登录名称', trigger: 'blur' },
+          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+        ],
+        // 验证密码是否合法
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度在 6到 20 个字符', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱' },
+          { trigger: 'blur', validator: checkEmail }
+        ],
+        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
+        { trigger: 'blur', validator: checkMobile }]
+      },
+
+    }
+  },
+  created () {
+    this.getUserList()
+  },
+  methods: {
+    async getUserList () {
+      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
+      //   console.log(res)
+      if (res.meta.status !== 200) return this.$message.error("数据获取失败")
+      this.userList = res.data.users
+      this.total = res.data.total
+    },
+    // 监听pagesize值改变事件
+    handleSizeChange (newSize) {
+      this.queryInfo.pagesize = newSize
+      this.getUserList()
+    },
+    // 监听页码值改变的事件
+    handleCurrentChange (newPage) {
+      this.queryInfo.pagenum = newPage
+      this.getUserList()
+    },
+    async userStateChanegd (userinfo) {
+      const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
+      if (res.meta.status !== 200) {
+        return this.$message.error('更新用户状态失败')
+      }
+      this.$message.success('更新用户状态成功')
+    },
+    // 点击重置按钮 重置登录表单
+    resetAddForm () {
+      //   console.log(this)
+      this.$refs.addFormRef.resetFields()
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.el-table {
+  margin-top: 15px;
+  font-size: 12px;
+}
+.el-pagination {
+  margin-top: 15px;
+}
+</style>

src/main.js

@@ -8,6 +8,13 @@ import './assets/css/global.css'
 // import './assets/fonts/iconfont.css'
 
 import axios from 'axios'
+// 拦截器 设置请求头中的token
+axios.interceptors.request.use(config => {
+    // console.log(config)
+    // 预处理将session中的token放入 请求头中
+    config.headers.Authorization = window.sessionStorage.getItem('token')
+    return config
+})
 // 配置请求根路径
 axios.defaults.baseURL = 'http://localhost:8888/api/private/v1'
 Vue.prototype.$http = axios

src/plugins/element.js

@@ -1,7 +1,30 @@
 import Vue from 'vue'
-import { Button, Form, FormItem, Input, Message } from 'element-ui'
+import {
+    Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Footer,
+    Menu, MenuItem, Submenu, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table,
+    TableColumn, Switch, Tooltip, Pagination, Dialog
+} from 'element-ui'
 Vue.use(Button)
 Vue.use(Form)
 Vue.use(FormItem)
 Vue.use(Input)
+Vue.use(Container)
+Vue.use(Header)
+Vue.use(Aside)
+Vue.use(Main)
+Vue.use(Footer)
+Vue.use(Menu)
+Vue.use(MenuItem)
+Vue.use(Submenu)
+Vue.use(Breadcrumb)
+Vue.use(BreadcrumbItem)
+Vue.use(Card)
+Vue.use(Row)
+Vue.use(Col)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(Switch)
+Vue.use(Tooltip)
+Vue.use(Pagination)
+Vue.use(Dialog)
 Vue.prototype.$message = Message

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
+import Welcome from '../components/Welcome.vue'
+import Users from '../components/user/Users.vue'
 
 Vue.use(VueRouter)
 
@@ -18,7 +20,18 @@ const routes = [
     {
         path: '/home',
         name: 'Home',
-        component: Home
+        component: Home,
+        redirect: '/welcome',
+        children: [
+            {
+                path: '/welcome',
+                component: Welcome
+            },
+            {
+                path: '/users',
+                component: Users
+            }
+        ]
     }
 ]