Vue+Element-UI 电商后台管理系统详细总结

已于 2022-05-11 09:44:11 修改
阅读量1.1w 收藏 137
点赞数 17
分类专栏： vue 项目 文章标签： vue.js 前端 javascript elementui
于 2022-05-09 22:11:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winnerFly/article/details/124676700
版权

一、概述

基于 Vue 和 Element-UI 的电商后台管理系统

1.1 实现功能

  • 用户登录/退出

  • 用户管理

    • 用户列表
      • 实现用户的增删改查、分页查询以及分配角色功能

  • 权限管理

    • 角色列表
      • 实现角色的增删改查以及分配权限、删除权限功能
    • 权限列表
      • 展示所有权限以及权限等级

  • 商品管理

    • 商品列表
      • 实现商品的增删改、分页查询
    • 分类参数
      • 实现分类参数的增删改
    • 商品分类
      • 实现商品分类的增删改以及查看该分类下的所有子分类

  • 订单管理

    • 订单列表
      • 实现修改地址
      • 实现查看物流进度

  • 数据统计

    • 数据报表

1.2 前端技术栈

电商后台管理里系统整体采用前后端分离的开发模式，其中前端是基于 Vue 技术栈的 SPA 项目

  • vue
  • vue-router
  • Element-UI
  • Axios
  • Echarts

1.3 前端项目初始化步骤

  1. 安装 Vue 脚手架
  2. 通过 Vue 脚手架创建项目
  3. 配置 Vue 路由
  4. 配置 Element-UI 组件库
  5. 配置 axios 库
  6. 初始化 git 远程仓库
  7. 将本地项目托管到 Gitee 中

二、登录与退出

2.1 登录布局

布局代码

<template>
  <div class="login_container">
    <!-- 登录区域 -->
    <div class="login_box">
      <div class="logo_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 表单区域 -->
      <el-form class="login_form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }

  // 登录部分
  .login_box {
      width: 450px;
      height: 300px;
      background-color: #fff;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      // 图表盒子
      .logo_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #eee;
        }
      }

      // 表单
      .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;

        // 按钮
        .btns {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
</style>

实现页面

2.2 登录业务逻辑

2.2.1 表单预验证

用户在输入账号和密码后，点击登录时表单会进行预验证，判断用户输入的账号和密码是否符合规范，验证通过后向服务器发送 axios 请求

验证规则

// 用户名的验证规则
username: [
    { required: true, message: '请输入用户名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
// 密码的验证规则
password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
]

实现效果

2.2.2 关于 Token

在登录成功后，服务器会向我们返回一个 token，我们需要将这个 token 保存到客户端的 sessionStorage 中

发送请求并保存 token

<script>
    const { data: res } = await this.$http.post('login', this.loginForm)
    if (res.meta.status === 200) {
        this.$msg.success('登录成功')
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
    } else {
        this.$msg.error('用户名或密码输入错误')
    }
</script>

注意

  • 为什么要保存 token
    • 因为项目中除了登录之外的其他 API 接口必须在登录之后才能访问，在访问的时候携带这个 token 就证明我们已经登录了
  • 为什么要将 token 保存在 sessionStorage 中
    • 因为 sessionStorage 是会话期间的存储机制，关闭浏览器过后， sessionStorage 就会被清空，token只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中

2.2.3 路由导航守卫

如果用户没有登录，但是直接通过 URL 访问特定页面，需要重新导航到登录页面。

在 index.js 中挂载路由导航守卫

// 挂载路由导航守卫
// to 代表将要访问的页面路径，from 代表从哪个页面路径跳转而来，next 代表一个放行的函数
router.beforeEach((to, from, next) => {
    // 如果用户访问的是登录页，那么直接放行
  if (to.path === '/login') return next()
  // 获取 token
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有 token，强制跳转到登录页面
  if (!tokenStr) return next('/login')
  next()
})

2.3 退出功能

基于 token 的方式在退出时需要销毁本地的 token 。这样，后续的请求就不会携带 token，必须重新登录生成一个新的 token 之后才可以访问页面。

退出代码

logout() {
    // 销毁本地 token
    window.sessionStorage.removeItem('token')
    // 通过编程式导航返回到上一页
    this.$router.go(-1)
}

三、主页部分

3.1 主页布局

引入 Element-UI 中的 Header Aside Main 组件

样式代码

<style lang="less" scoped>
  .home_container {
    height: 100%;
  }

  // 头部区域
  .el-header {
    display: flex;
    justify-content: space-between;
    background-color: #373d41;

    .el-button {
      align-self: center;
    }
  }

  // 侧边栏区域
  .el-aside {
    background-color: #333744;
    .el-menu {
      border-right: none
    }
  }

  // 主题内容区域
  .el-main {
    background-color: #eaedf1;
  }

  .toggle-button {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>

实现效果

3.2 菜单部分

向服务器发送 axios 请求获取菜单数据

注意

  • 需要授权的 API 必须在请求头中使用 Authorization 字段提供的 token 令牌，那些授权的 API 才能被正常调用
  • 如何在每一个的 API 请求头中添加 Authorization 字段
    • 通过 axios 请求拦截器添加 token，保证拥有获取数据的权限

在 main.js 中添加拦截器

// axios 请求拦截
axios.interceptors.request.use(config => {
  // 为请求头对象，添加 Token 验证的 Authorization 字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必须 return config
  return config
})

发起请求获取所有菜单数据

<script>
    methods: {
        // 获取所有菜单数据
        async getMenuList() {
            const { data: res } = await this.$http.get('menus')
            if (res.meta.status !== 200) return this.$msg.error('获取菜单列表失败')
            this.menulist = res.data
        }
    },
    created() {
        this.getMenuList()
    }
</script>

渲染到页面

<el-menu
         background-color="#333744"
         text-color="#fff"
         active-text-color="#409Eff"
         <!-- 只保持一个子菜单的展开 -->
         unique-opened
		<!-- 水平折叠收起菜单 -->
         :collapse="isCollapse"
         :collapse-transition="false"
         router
         :default-active="activePath">
    <!-- 一级菜单 -->
    <!-- index 只接收字符串，所以在后面拼接一个空字符串 -->
    <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
        <template slot="title">
            <i :class="iconObj[item.id]"></i>
            <span>{{ item.authName }}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="'/' + secitem.path" v-for="secitem in item.children" :key="secitem.id" 		 			@click="savaNavState('/' + secitem.path)">
            <i class="el-icon-menu"></i>
            <span>{{ secitem.authName }}</span>
        </el-menu-item>
    </el-submenu>
</el-menu>

通过 Element-UI 为菜单名称添加图标

实现效果

3.3 用户管理模块

3.3.1 用户列表

1、渲染用户列表

引入 Element-UI 中的 Breadcrumb, BreadcrumbItem, Card, Row, Col 组件，实现面包屑导航和卡片视图

样式代码

<!-- 面包屑导航区域 -->
<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-card>

<style>  
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}
</style>

实现效果

向服务器发送请求获取用户数据列表

<script>
    data() {
        return {
            // 查询参数，实现分页
            queryInfo: {
                // 查询字段
                query: '',
                // 当前页码
                ./pagenum: 1,
                // 每页显示的条数
                ./pagesize: 5
            }
        }
    }
    methods: {
        // 获取用户列表
        async getUserList() {
          const { data: res } = await this.$http.get('users', { params: this.queryInfo })
          if (res.meta.status !== 200) {
            return this.$msg.error('获取用户列表失败')
          }
          this.userTable = res.data.users
          this.total = res.data.total
        },
        // 每页显示条数发生变化触发此事件
        handleSizeChange(val) {
          this.queryInfo../pagesize = val
          this.getUserList()
        },
        // 页码值发生变化触发此事件
        handleCurrentChange(val) {
          this.queryInfo../pagenum = val
          this.getUserList()
        }
    },
    created() {
        this.getUserList()
    }
</script>

引入 Table, TableColumn 将用户数据渲染到表格中，引入 Pagination 实现分页效果

实现效果

2、 实现用户的增删改查
  • 添加用户

引入 Dialog 结合表单展示一个添加用户的对话框

实现效果

为表单添加验证规则

<script>
  data() {
    // 自定义校验规则
    // 邮箱验证
    var checkEmail = (rule, val, cb) => {
      const regEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (regEmail.test(val)) return cb()
      cb(new Error('请输入合法的邮箱'))
    }
    // 手机验证
    var checkMobile = (rule, val, cb) => {
      const regMobile = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
      if (regMobile.test(val)) return cb()
      cb(new Error('请输入合法的手机号码'))
    }
    return {
      // 添加用户验证规则
      addRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        email: [
          // 验证是否为空
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          // 验证长度
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          // 验证是否合法
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
</script>

实现效果

向服务器发送添加用户请求

<script>
export default {
  data() {
    return {
      // 控制添加对话框显示与隐藏
      dialogVisible: false,
      // 与表单动态绑定，保存添加用户的数据，将作为参数发送给服务器
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      }
    }
  },
  methods: {
    // 重置添加用户表单
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 添加用户
    addUser() {
      // 添加用户预验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return false
        const { data: res } = await this.$http.post('users', this.addForm)
        if (res.meta.status !== 201) {
          if (res.meta.status === 400) return this.$msg.error('用户名已存在')
          this.$msg.error('用户添加失败')
        }
        this.$msg.success('用户添加成功')
        // 隐藏添加用户的对话框
        this.dialogVisible = false
        // 重新获取列表
        this.getUserList()
      })
    }
  }
}
</script>
  • 删除用户
    • 引入 MessageBox 提示用户

实现效果

向服务器发送删除用户请求

<template>
	<el-table-column label="操作" width="180">
        <!-- 添加作用域插槽 -->
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <!-- scope.row 就是这一行的数据 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)">               </el-button>
          </template>
      </el-table-column>
</template>

<script>
	// 删除用户,点击删除按钮时，将该用户的 id 传过来
    async deleteById(id) {
      // 弹框提示是否删除
      const res = await this.$cfm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) // 捕获异常
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (res !== 'confirm') { return this.$msg.info('已取消删除') }
      // 如果确认了删除，则发起 axios 删除请求
      const { data: deleteres } = await this.$http.delete('users/' + id)
      if (deleteres.meta.status !== 200) {
        if (deleteres.meta.status === 400) return this.$msg.error('不允许删除admin账户！')
        return this.$msg.error('删除失败')
      }
      this.getUserList()
      this.$msg.success('删除成功')
    }
</script>
  • 修改用户
    • 在点击编辑按钮时候，需要将此用户的 id 传递过来，并且根据此 id 查询用户的信息，然后将用户的信息渲染到表单上
<script>
	// 展示编辑用户对话框
    async showEditUser(id) {
      const { data: res } = await this.$http.get('users/' + id)
      if (res.meta.status !== 200) return this.$msg.error('查询用户信息失败！')
      this.editdialogVisible = true
      // 将查询到的用户信息渲染到表单上
      this.editForm = res.data
    }
</script>

实现效果

点击确定按钮向服务器发送编辑用户请求

<script>
	// 编辑用户
    editUser() {
      // 用户预验证
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return false
        const { data: res } = await this.$http.put('users/' + this.editForm.id, {
          email: this.editForm.email,
          mobile: this.editForm.mobile
        })
        if (res.meta.status !== 200) return this.$msg.error('修改用户信息失败！')
        this.$msg.success('修改用户信息成功！')
        // 重新获取列表
        this.getUserList()
        // 关闭编辑对话框
        this.editdialogVisible = false
      })
    },
    // 修改用户的状态按钮
    // 监听 Switch 状态的改变
    async userStateChanged(userinfo) {
      const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
      if (res.meta.status !== 200) {
        // 如果修改失败需要将状态还原
        userinfo.mg_state = !userinfo.mg_state
        this.$msg.error('用户状态更新失败')
      }
      this.$msg.success('用户状态更新成功')
    }
</script>
  • 查询用户
    • 查询用户就是将用户信息 queryInfo 中的 query 属性和输入框动态绑定，然后向服务器发送获取用户列表的请求

3.4 权限管理模块

3.4.1 权限列表

布局和用户列表一致

向服务器发送请求获取权限数据列表

<script>
  data() {
    return {
      // 权限列表数据
      rightsTable: []
    }
  },
  methods: {
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) return this.$msg.error('获取权限列表失败！')
      this.rightsTable = res.data
    }
  },
  created() {
    this.getRightsList()
  }
</script>

实现效果

3.4.2 角色列表

1、渲染角色列表

布局和用户列表一致

向服务器发送请求获取角色数据列表

<script>
methods: {
    // 获取角色列表
    async getRoleList() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return this.$msg.error('获取角色列表失败！')
      this.roleTable = res.data
    }
},
created() {
    this.getRoleList()
 }
</script>

实现效果

2、分配角色
  • 使用 Dialog 组件结合表单展示一个分配角色的对话框
  • 引入 Select、Option 组件展示一个选择角色的下拉选择器
  • 展示对话框之前先向服务器发送请求获取角色列表数据

具体代码

<script>
	// 展示分配角色对话框
    async showSetRolesDialog(userinfo) {
      this.setRoleInfo = userinfo
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return this.$msg.error('获取角色列表失败')
      this.rolesList = res.data
      this.setRolesDialogVisible = true
    }
</script>
  • 将获取过来的角色列表数据展示到分配角色对话框的表单中

实现效果

  • 向服务器发送分配角色请求
<script>
	// 提交分配角色
    async commitSetRoles() {
      if (!this.selectRoleId) return this.$msg.error('请选择要分配的角色')
      const { data: res } = await this.$http.put(`users/${this.setRoleInfo.id}/role`, {
        rid: this.selectRoleId
      })
      if (res.meta.status !== 200) return this.$msg.error('分配角色失败')
      this.$msg.success('分配角色成功')
      this.getUserList()
      this.setRolesDialogVisible = false
    },
    // 关闭分配角色对话框后的操作
    closeSetRoleDialog() {
      this.setRoleInfo = ''
      this.selectRoleId = ''
    }
</script>
3、实现角色的增删改

和用户的增删改查一致，只是调用接口不一样。

4、展示当前角色下的所有权限

当用户点击某个角色的下拉箭头时，该角色的所有权限数据会以类似于树结构的形式展示出来。

用户也可以删除该角色下的某个权限。

效果如图

  • 为表格设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
  • 通过 scope.row 可以获取该行也就是该角色的数据
<!-- 展开列 -->
<el-table-column type="expand">
    <template slot-scope="scope">
        {{ scope.row }}
    </template>
</el-table-column>

效果如图

  • 布局思路

    • 引入 Element-UI 中的 Layout 布局，可以实现基础的 24 分栏，迅速简便地创建布局。

  • 业务逻辑

    • 通过 scope.row 获取的数据就是该角色的所有信息，数据是一个对象，每一个对象下都有一个 children 属性，这个 children 属性就是该角色的所有权限了，children 是一个数组，每一个 children 属性下又嵌套这一个 children 属性，一共嵌套三层，这分别就是该角色下的一级、二级、三级权限了。
    • 可以循环 children 下的每个对象，就可以把一级权限渲染出来，在每一个一级权限中又嵌套着二级权限，所以，要想渲染出所有的一级、二级、三级权限需要使用三层 v-for 循环的嵌套。

  • 具体实现

    引入 Tag 组件将权限名称以标签的形式展示，并且将 closable 设置为 true，每个权限标签后面就会显示一个叉号，为后面的删除权限功能做铺垫。

    为每一个权限标签后面添加 <i class="el-icon-caret-right"></i> 进行美化。

    <!-- 展开列 -->
<el-table-column type="expand">
    <template slot-scope="scope">
        <el-row :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id" class="first-row">
            <!-- 渲染一级权限 -->
            <el-col :span="5">
                <el-tag closable  @close="removeRightById(scope.row, item1.id)">{{ item1.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
            </el-col>
            <!-- 渲染二级权限 -->
            <el-col :span="19">
                <el-row :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id">
                    <el-col :span="6">
                        <el-tag type="success" closable  @close="removeRightById(scope.row, item2.id)">{{ item2.authName }}</el-tag>
                        <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!-- 渲染三级权限 -->
                    <el-col :span="18">
                        <el-tag v-for="item3 in item2.children" :key="item3.id" type="warning" closable  @close="removeRightById(scope.row, item3.id)">{{ item3.authName }}</el-tag>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </template>
</el-table-column>
<style>
	// 添加边框
    // 上边框
    .bdtop {
        border-top: 1px solid #eee;
    }
    // 下边框
    .bdbottom {
        border-bottom: 1px solid #eee;
    }
    // 上下居中
    .vcenter {
        display: flex;
        align-items: center;
    }
</style>

    效果如图

5、删除权限

使用 MessageBox 提示用户

点击确定按钮时分别将该角色的信息和权限 id 作为参数传递过来

<script>
 	// 删除权限
    async removeRightById(role, rightId) {
        const res = await this.$cfm('此操作将永久删除该权限, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).catch(err => err)
        if (res !== 'confirm') return this.$msg.info('已取消删除')
		// 发送请求
        const { data: res1 } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
        if (res1.meta.status !== 200) return this.$msg.error('删除权限失败！')
        role.children = res1.data
        this.$msg.success('删除权限成功！')
    }
</srcipt>

注意：

  • 在发送请求成功后不要调用获取角色列表数据的方法，这样整个列表都会刷新，下拉列也会收上，用户体验感差；
  • 应该将服务器返回过来的数据赋值给该角色下的 children 属性：
    • role.children = res1.data
6、分配权限

  • 布局

    • 使用 Dialog 组件展示一个分配权限的对话框

    • 弹出对话框之前向服务器发送请求获取所有权限

      <script>
    // 展示分配权限的对话框
    async showRightsDialog(role) {
        this.defKeys = []
        this.setRightsUserId = role.id
        const { data: res } = await this.$http.get('rights/tree')
        if (res.meta.status !== 200) return this.$msg.error('获取权限列表失败！')
        this.rightsTree = res.data
        // 递归获取三级节点的 id
        this.getLaefKeys(role, this.defKeys)
        this.setRightsDialogVisible = true
    },
    // 通过递归的形式，获取角色下所有三级权限的 id，并保存到 defKeys 数组中
    getLaefKeys(node, arr) {
      // 如果当前 node 节点不包含 children 属性，那么这个节点就是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(item => this.getLaefKeys(item, arr))
    }
</script>

    • 引用 Tag 组件将权限列表渲染成树形结构

      <template>
<!-- 分配权限对话框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="setRightsDialogVisible"
      width="50%">
      <el-tree :data="rightsTree" :props="treeProps" show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="defKeys" ref="treeRef"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitSetRights">确 定</el-button>
      </span>
    </el-dialog>
</template>

      效果如下

  • 提交分配权限

    • 展示分配权限对话框时需要获取当前角色下的所有权限，在树结构中默认勾选上。
    <script>
	// 提交分配的权限
    async commitSetRights() {
      // ... 数组合并
      const setRights = [
        // getCheckedKeys() 返回目前被选中的节点的 key（id）所组成的数组
        ...this.$refs.treeRef.getCheckedKeys(),
        // getHalfCheckedKeys() 返回目前半选中的节点所组成的数组
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      // 将数组转换为用逗号分隔的字符串
      const str = setRights.join(',')
      const { data: res } = await this.$http.post(`roles/${this.setRightsUserId}/rights`, { rids: str })
      if (res.meta.status !== 200) return this.$msg.error('分配权限失败')
      this.$msg.success('分配权限成功')
      // 重新获取权限列表数据
      this.getRoleList()
      // 关闭对话框
      this.setRightsDialogVisible = false
    }
</script>

3.5 商品管理模块

3.5.1 商品分类

1、渲染商品分类列表

  • 布局

    • 和角色列表布局一致

    • 表格部分引用第三方组件 vue-table-with-tree-grid （树形表格组件），可以使商品分类以树形结构分级展示

    • 安装 vue-table-with-tree-grid

      • npm i vue-table-with-tree-grid -S

    • 在 main.js 中引入 vue-table-with-tree-grid

      // 引入列表树
import TreeTable from 'vue-table-with-tree-grid'
// 使用列表树
Vue.component('tree-table', TreeTable)

    • 以组件组件标签的形式使用 vue-table-with-tree-grid

      <template>
	<!-- data 绑定的是数据源；columns 为 table 指定的列 -->
	<tree-table :data="catelist" :columns="columns"
      :selection-type="false" :expand-type="false"
      show-index index-text="#" border
      :show-row-hover="false">
    </tree-table>
</template>

    • 向服务器发送请求获取商品分类数据列表

      <script>
	// 获取商品分类数据
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) return this.$msg.error('获取商品分类列表失败')
      // 将获取过来的数据赋值给表格绑定的数据源
      this.catelist = res.data.result
    },
    created() {
      this.getCateList()
  	}
</script>

      效果如图

  • 设置自定义列

    • 设置自定义列需要将 columns 绑定的对应列的 type 属性设置为 template，将 template 属性设置为当前列使用的模板名称

      <script>
	columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          // 表示将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用的模板名称
          template: 'isok'
        },
        {
          label: '排序',
          // 表示将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用的模板名称
          template: 'order'
        },
        {
          label: '操作',
          // 表示将当前列定义为模板列
          type: 'template',
          // 表示当前这一列使用的模板名称
          template: 'opt'
        }
      ]
</script>

    <template>
		<!-- 是否有效 列 -->
		<!-- slot 绑定的是当前列模板的名称 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen;"></i>
          <i class="el-icon-error" v-else style="color: red;"></i>
        </template>
        <!-- 排序 列 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!-- 操作 列 -->
        <template slot="opt">
          <el-button icon="el-icon-edit" size="mini" type="primary">编辑</el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger">删除</el-button>
        </template>
</template>

    效果如下

2、实现商品的增删改

  • 添加分类

    • 使用 Dialog 组件结合表单展示一个添加分类的对话框

    • 引用 Cascader 级联选择器组件展示所有商品分类

      <template>
	<!-- 添加分类对话框 -->
	<el-dialog
      title="提示"
      :visible.sync="addCateDialogVisible"
      width="50%">
      <!-- 添加分类的表单 -->
      <el-form ref="addCateFormRef" :model="addCateForm" :rules="addCateRules" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- 级联选择器 -->
          <!-- options 绑定的数据源 -->
          <el-cascader :options="parentCateList" clearable
          :props="parentCateListProps" v-model="selectKeys"
          @change="parentCateChanged">
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</template>

      效果如图

    • 向服务器发送请求获取所有父级分类商品

    • 将服务器返回的数据赋值给级联选择器绑定的数据源

      <script>
	// 获取父级分类的列表数据
    async getParentCateList() {
      const { data: res } = await this.$http.get('categories', {
        // type 参数指定为2，就是获取父级分类商品
        params: { type: 2 }
      })
      if (res.meta.status !== 200) return this.$msg.error('获取列表数据失败')
      this.parentCateList = res.data
    }
</script>

      效果如图

  • 编辑分类

    • 使用 Dialog 对话框展示一个编辑分类的对话框

      <template>
	<!-- 编辑分类对话框 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="editCateDialogVisible"
      width="50%" @close="closeEditCateDialog">
      <!-- 编辑分类的表单 -->
      <el-form ref="editCateFormRef" :model="editCateForm" :rules="editCateRules"
       label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitEditCate">确 定</el-button>
      </span>
    </el-dialog>
</template>

    • 使用作用域插槽，当点击编辑按钮时，获取当前分类的 id，将这个 id 作为参数向服务器发起编辑请求，获取当前分类的名称并展示到表单的输入框中

      <script>
	// 展示编辑分类的对话框
    async showEditCateDialogVisible(id) {
      this.editCateDialogVisible = true
      const { data: res } = await this.$http.get(`categories/${id}`)
      if (res.meta.status !== 200) return this.$msg.error('查询分类数据失败')
      this.editCateForm.cat_name = res.data.cat_name
      this.editCateId = res.data.cat_id
    }
</script>

      效果如图

    • 点击确定按钮向服务器发送请求提交此次编辑操作

      <script>
	// 提交编辑分类
    async commitEditCate() {
      const { data: res } = await this.$http.put(`categories/${this.editCateId}`, this.editCateForm)
      if (res.meta.status !== 200) return this.$msg.error('编辑分类失败')
      this.$msg.success('编辑分类成功')
      this.getCateList()
      this.editCateDialogVisible = false
    }
</script>

  • 删除分类

    • 使用 MessageBox 对话框提示用户再次确认

    • 使用作用域插槽，当点击删除按钮时，获取当前分类的 id，当点击确定按钮时，将这个 id 作为参数向服务器发起删除请求

      <script>
	// 删除分类
    async deleteEditCateById(id) {
      // 弹框提示是否删除
      const res = await this.$cfm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) // 捕获异常

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (res !== 'confirm') { return this.$msg.info('已取消删除') }
      const { data: res1 } = await this.$http.delete(`categories/${id}`)
      if (res1.meta.status !== 200) return this.$msg.error('删除分类失败')
      this.$msg.success('删除成功')
      this.getCateList()
    }
</script>

3.5.2 分类参数

1、渲染分类参数布局

  • 布局

    • 也是使用卡片布局

    • 引用 Alert 组件提示用户

    • 引用 Tabs 标签页组件实现动态参数页和静态属性页的局部切换

      <template>
<!-- 卡片试图区域 -->
    <el-card>
      <!-- 警告区域 -->
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        :closable="false"
        show-icon>
      </el-alert>

      <!-- 选择商品分类区域 -->
      <el-row class="cat_opt">
        <el-col>
          <span>选择商品分类：</span>
          <!-- 级联选择器 -->
          <el-cascader
            v-model="selectKeys"
            :options="catelist"
            @change="handleChange">
          </el-cascader>
        </el-col>
      </el-row>

      <!-- Tab 页签区域 -->
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <!-- 动态参数页签 -->
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" size="mini"
          @click="showAddDialogVisible">添加参数</el-button>
          <!-- 动态参数表格 -->
          <el-table>
             <!-- 展开列 -->
            <el-table-column type="expand"></el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" 		                                     @click="deleteParamsById(scope.row.attr_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 静态属性页签 -->
        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" size="mini"
          @click="showAddDialogVisible">添加属性</el-button>
          <!-- 静态属性表格 -->
          <el-table>
             <!-- 展开列 -->
            <el-table-column type="expand"></el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column label="属性名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" 		                                     @click="deleteParamsById(scope.row.attr_id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
</template>

      效果如图

  • 获取商品分类列表

    • 获取商品分类列表，并渲染到级联选择器当中

      <script>
	// 获取商品分类列表
    async getCateList() {
      const { data: res } = await this.$http.get('categories')
      if (res.meta.status !== 200) return this.$msg.error('获取商品分类失败')
      // 将获取过来的数据赋值给级联选择器绑定的数据源
      this.catelist = res.data
    }
</script>

  • 当用户选中商品分类时，向服务器发送请求获取商品参数了列表并在表格中展示该分类的所有参数

    <script>
	// 当级联选择器选中项发生变化，会触发这个函数
    handleChange() {
      this.getCateParams()
    },
    // 获取参数列表
    async getCateParams() {
      // 判断是否选择的是三级分类
      if (this.selectKeys.length !== 3) {
        // this.$msg.warning('只能选择三级分类')
        this.selectKeys = []
      } else {
        const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
          params: { sel: this.activeName }
        })
        if (res.meta.status !== 200) return this.$msg.error('获取参数列表失败')
        if (this.activeName === 'many') {
          this.manyTableDate = res.data
        } else {
          this.onlyTableName = res.data
        }
      }
    }
</script>

    效果如图

2、实现分类参数的增删改

  • 添加分类参数

    • 分类参数包括动态参数和静态属性

    • 当用户点击添加参数/属性时，弹出对话框

      • 因为添加参数和添加属性的对话框布局一样，所以可以共用一个对话框

        <template>
	 <!-- 添加参数/属性共用一个对话框 -->
	 <el-dialog
      :title="'添加' + titleText"
      :visible.sync="addDialogVisible"
      width="30%"
      @closed="handleClose">
      <el-form ref="addFormRef" :model="addForm" label-width="120px" :rules="addFormRules">
        <el-form-item :label="titleText + '名称'" prop="attr_name">
          <el-input v-model="addForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitAdd">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
	computed: {
    // 对话框标题
    titleText() {
      if (this.activeName === 'many') return '动态参数'
      return '静态属性'
    }
  }
</script>

    • 提交添加操作

      <script>
	// 提交添加操作
    commitAdd() {
      // 表单预验证
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return false
        const { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`, {
          attr_name: this.addForm.attr_name,
          attr_sel: this.activeName
        })
        if (res.meta.status !== 201) return this.$msg.error('添加失败')
        this.$msg.success('添加成功')
        this.getCateParams()
        this.addDialogVisible = false
      })
    }
</script>

  • 删除分类参数

    • 当用户点击删除按钮时，通过作用域插槽获取当前分类参数的 id

    • 提交删除操作

      <script>
    // 根据 id 删除参数
    async deleteParamsById(id) {
      // 弹框提示是否删除
      const res = await this.$cfm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) // 捕获异常

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (res !== 'confirm') { return this.$msg.info('已取消删除') }
      const { data: res1 } = await this.$http.delete(`categories/${this.cateId}/attributes/${id}`)
      if (res1.meta.status !== 200) return this.$msg.error('删除失败')
      this.$msg.success('删除成功')
      this.getCateParams()
    }
</script>

  • 编辑分类参数

    • 点击编辑按钮后，将要编辑的分类参数额 id 传递过来
    • 将 id 作为参数向服务器发送请求获取当前要编辑的分类参数的名称
    • 将获取过来的名称展示到编辑对话框的输入框中
    • 展示编辑对话框
    <template>
	<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" 	                            @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
        </template>
    </el-table-column>
</template>

<script>
    // 显示编辑对话框
    async showEditDialog(id) {
      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes/${id}`, {
        params: { attr_sel: this.activeName }
      })
      if (res.meta.status !== 200) return this.$msg.error(`${res.meta.msg}`)
      this.editForm = res.data
      this.editDialogVisible = true
    }
</script>

    效果如图

    • 提交编辑操作
    <script>
    // 提交编辑操作
    commitEdit() {
      // 表单预验证
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return false
        const { data: res1 } = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {
          attr_name: this.editForm.attr_name,
          attr_sel: this.activeName
        })
        if (res1.meta.status !== 200) return this.$msg.error('编辑失败')
        this.$msg.success(`${res1.meta.msg}`)
        this.getCateParams()
        this.editDialogVisible = false
      })
    }
</script>
3、添加删除分类参数的属性

  • 添加分类参数的属性

    • 在表格展开列当中，引入 Tag 组件，循环渲染每一个标签
    <template>
    <!-- 展开列 -->
    <el-table-column type="expand">
      <template slot-scope="scope">
        <!-- 循环渲染每一个标签 -->
        <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="deleteTag(i, scope.row)">
            {{ item }}
        </el-tag>
        <!-- 添加标签的输入框 -->
        <el-input
              class="input-new-tag"
              v-if="scope.row.inputVisible"
              v-model="scope.row.inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(scope.row)"
              @blur="handleInputConfirm(scope.row)"
              >
        </el-input>
        <!-- 添加按钮 -->
        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
      </template>
    </el-table-column>
</template>

    效果如图

    • 点击 + New Tag 按钮展示文本框，并且隐藏按钮
    • 当文本框失去焦点或者用户按下 Enter 键后，向服务器发送请求，提交此次添加操作
    <script>
	// 文本框失去焦点或按下空格键触发这个函数
    async handleInputConfirm(row) {
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return false
      }
      // 如果没用 return 出去，就证明用户输入了内容
      // 数组追加属性
      row.attr_vals.push(row.inputValue.trim())
      row.inputValue = ''
      row.inputVisible = false
      this.saveAttrVal(row)
    },
    // 将保存属性的方法抽取出来
    async saveAttrVal(row) {
      const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(' ')
      })
      if (res.meta.status !== 200) return this.$msg.error('更新参数属性失败')
      this.$msg.success('更新参数属性成功')
    }
</script>

  • 删除分类参数的属性

    • 点击叉号，将当前标签的索引作为参数传递过来
    • 根据传递过来的索引将该标签移除
    • 重新调用保存属性的方法
    <script>
	// 删除标签
    deleteTag(i, row) {
      // 根据传递过来的索引删除
      row.attr_vals.splice(i, 1)
      this.saveAttrVal(row)
    }
</script>

3.5.3商品列表

1、渲染商品列表

  • 布局

    • 采用面包屑导航加卡片布局
    • 向服务器发送请求获取商品列表数据
    • 将获取过来的数据渲染到列表当中
    <template>
		<!-- 表格区域 -->
      <el-table :data="goodsTable" stripe border>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）" width="120px"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="90px"></el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="160px">
          <template slot-scope="scope">
            {{ scope.row.add_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteGoodsById(scope.row.goods_id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
</template>

<script>
	// 获取商品列表
    async getGoodsTable() {
      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
      // console.log(res)
      if (res.meta.status !== 200) return this.$msg.error('获取商品列表失败')
      this.goodsTable = res.data.goods
      this.total = res.data.total
    },
    created() {
      this.getGoodsTable()
    }
</script>
    • 添加分页导航

    效果如图

2、查询商品
  • 用户点击查询按钮后，将输入框里的数据作为参数向服务器发送请求
3、删除商品
  • 用户点击删除按钮后，将该商品对应的 id 作为参数传递过来
  • 将此 id 作为参数向服务器发送删除请求
<script>
	// 根据 id 删除商品
    async deleteGoodsById(id) {
      // 弹框提示是否删除
      const res = await this.$cfm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err) // 捕获异常

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (res !== 'confirm') { return this.$msg.info('已取消删除') }
      const { data: res1 } = await this.$http.delete(`goods/${id}`)
      if (res1.meta.status !== 200) return this.$msg.error('删除商品失败')
      this.$msg.success('商品删除成功')
      this.getGoodsTable()
    }
</script>
4、添加商品
  1. 创建一个添加商品组件，并注册路由规则
  2. 点击添加商品按钮跳转到此页面

  • 添加商品页面布局

    • 整体采用面包屑导航加卡片视图布局
    • 引用 Step 步骤条组件，使用 Tab 标签页
    • 在基本信息标签页中添加表单
      <template>
  <!-- 卡片区域 -->
      <el-card>
          <!-- 提示消息框 -->
          <el-alert
            title="添加商品信息"
            type="info"
            center
            show-icon
            :closable="false">
          </el-alert>
  
          <!-- 步骤条 -->
          <el-steps :active="activeIndex - 0" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
  
          <!-- 标签页区域 -->
          <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="100px" label-position="top">
            <el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave" @tab-click="tabClicked">
              <el-tab-pane label="基本信息" name="0">
                <el-form-item label="商品名称" prop="goods_name">
                  <el-input v-model="addForm.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                  <el-input v-model="addForm.goods_price" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                  <el-input v-model="addForm.goods_number" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                  <el-input v-model="addForm.goods_weight" type="number"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="goods_weight">
                  <!-- 级联选择器 -->
                  <el-cascader
                    v-model="addForm.goods_cat"
                    :options="catelist"
                    :props="{ expandTrigger: 'hover', ...cateProps }"
                    @change="handleChange"
                    clearable>
                  </el-cascader>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
      </el-card>
  </template>

    效果如图

    • 在商品参数标签页引入 checkbox-group 复选框组组件展示参数
      • 先循环动态参数表格数据的每一项，将属性名称展示到页面上
      • 再循环表格数据中的属性项，通过复选框组渲染到页面
    <template>
	<el-tab-pane label="商品参数" name="1">
        <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
            <!-- 复选框组 -->
            <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox :label="cb" v-for="(cb, i) in item.attr_vals" :key="i" border></el-checkbox>
    		</el-checkbox-group>
    	</el-form-item>
    </el-tab-pane>
</template>

    效果如图

    • 在商品属性标签页循环静态属性表格数据的每一项，并展示到输入框当中
    <template>
	<el-tab-pane label="商品属性" name="2">
        <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
            <el-input v-model="item.attr_vals"></el-input>
    	</el-form-item>
    </el-tab-pane>
</template>

    效果如图

    • 在商品图片标签页 Upload 上传组件实现图片上传的功能
    <template>
	<el-tab-pane label="商品图片" name="3">
        <!-- 上传图片 -->
        <!-- action 表示图片要上传到的后台 API 地址 -->
        <el-upload
             action="http://127.0.0.1:8888/api/private/v1/upload"
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             list-type="picture"
             :headers="headerObj"
             :on-success="handleSuccess">
             <el-button size="small" type="primary">点击上传</el-button>
    	</el-upload>
    </el-tab-pane>
</template>

    效果如图

    • 在商品内容标签页引入 vue-quill-editor 富文本编辑器插件
    • 在 main.js 中导入并注册
    // 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
// 使用富文本编辑器
Vue.use(VueQuillEditor)

    <template>
	<el-tab-pane label="商品内容" name="4">
        <quill-editor v-model="addForm.goods_introduce"></quill-editor>
        <el-button type="primary" class="addBtn" @click="addGoods">添加商品</el-button>
    </el-tab-pane>
</template>

    效果如图

  • 提交添加商品操作

<script>
	// 添加商品
    async addGoods() {
      this.$refs.addFormRef.validate(valid => {
        if (!valid) return this.$msg.error('请填写必要的表单项')
      })
      // 执行添加的业务逻辑
      // _.cloneDeep(obj) 深拷贝
      // 因为级联选择器绑定的数据源格式必须是数组，但是向服务器发送请求传递参数的格式是字符串
      // 所以进行深拷贝
      const form = _.cloneDeep(this.addForm)
      form.goods_cat = form.goods_cat.join(',')
      // 处理动态参数
      this.manyTableData.forEach(item => {
        const newInfo = {
          attr_id: item.attr_id,
          attr_value: item.attr_vals.join(' ')
        }
        this.addForm.attrs.push(newInfo)
      })
      // 处理静态属性
      this.onlyTableData.forEach(item => {
        const newInfo = {
          attr_id: item.attr_id,
          attr_value: item.attr_vals
        }
        this.addForm.attrs.push(newInfo)
      })
      form.attrs = this.addForm.attrs

      // 发起添加商品请求
      // 商品名称只能是唯一的
      const { data: res } = await this.$http.post('goods', form)
      if (res.meta.status !== 201) return this.$msg.error(`${res.meta.msg}`)
      this.$msg.success('商品添加成功')
      this.$router.push('/goods')
    }
</script>

3.6 订单管理模块

3.6.1 订单列表

1、渲染订单列表
  • 布局
    • 采用面包屑导航加卡片布局
    • 向服务器发送请求获取商品列表数据
    • 将获取过来的数据渲染到列表当中
    • 添加分页导航
<temaplate>
	  <!-- 表格区域 -->
      <el-table :data="orderlist" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="订单编号" prop="order_number" width="600px"></el-table-column>
        <el-table-column label="订单价格" prop="order_price" width="95px"></el-table-column>
        <el-table-column label="是否付款" prop="pay_status" width="85px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status === '1'">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send" width="95px"></el-table-column>
        <el-table-column label="下单时间" prop="create_time">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button size="mini" type="primary" class="el-icon-edit" @click="showEditLocationDialog"></el-button>
            <el-button size="mini" type="success" class="el-icon-location" @click="showProcessDialog"></el-button>
          </template>
        </el-table-column>
      </el-table>
    
        <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-./page="queryInfo../pagenum"
            :./page-sizes="[1, 5, 10]"
            :./page-size="queryInfo../pagesize"
            layout="total, sizes, prev, ./pager, next, jumper"
            :total="total">
          </el-pagination>
</temaplate>

<script>
    data() {
      return {
        queryInfo: {
          query: '',
          // 当前页码
          ./pagenum: 1,
          // 每页显示条数
          ./pagesize: 10
        },
        total: 0,
        // 订单数据
        orderlist: []
      }
    },
    methods: {
        // 获取订单列表数据
        async getOrderList() {
          const { data: res } = await this.$http.get('orders', {
            params: this.queryInfo
          })
          if (res.meta.status !== 200) return this.$msg.error('获取订单列表失败')
          this.total = res.data.total
          this.orderlist = res.data.goods
        },
        // 每页显示条数发生变化触发这个函数
        handleSizeChange(val) {
          this.queryInfo../pagesize = val
          this.getOrderList()
        },
        // 当前页发生变化触发这个函数
        handleCurrentChange(val) {
          this.queryInfo../pagenum = val
          this.getOrderList()
        }
    },
    created() {
    	this.getOrderList()
  }
</script>

效果如图

2、修改地址
  • 点击修改按钮，弹出修改地址对话框
  • 导入 citydata.js 包，渲染到表单的级联选择器当中
<template>
	<!-- 修改地址的对话框 -->
    <el-dialog
      title="修改地址"
      :visible.sync="editAddressDialogVisible"
      width="50%"
      @close="addressDialogClosed">
      <el-form :model="addressForm" :rules="addressRules" ref="addressRef" label-width="100px">
        <el-form-item label="省市区/县" prop="address1">
          <el-cascader :options="cityData" v-model="addressForm.address1" :props="{ expandTrigger: 'hover' }">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editAddressDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAddressDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import cityData from './citydata'
    
    data() {
    return {
      // 控制修改地址对话框的显示与隐藏
      editAddressDialogVisible: false,
      addressForm: {
        address1: [],
        address2: ''
      },
      addressRules: {
        address1: {
          required: true, message: '请选择省市区/县', trigger: 'blur'
        },
        address2: {
          required: true, message: '请输入详细地址', trigger: 'blur'
        }
      },
      // 省市区/县数据
      cityData
    }
  },
  methods: {
      // 显示修改地址对话框
    showEditLocationDialog() {
      this.editAddressDialogVisible = true
    },
    // 修改地址对话框关闭触发
    addressDialogClosed() {
      this.$refs.addressRef.resetFields()
    }
  }
</script>

效果如图

3、查看物流进度
  • 引入 Timeline 时间线组件
  • 因为查看物流进度的 API 无法使用，这里使用了 Mock.js 根据接口文档的响应数据模拟了查看物流进度的接口
// 使用 Mock
var Mock = require('mockjs')
var menuMock = Mock.mock({
  data: [
    {
      time: '2018-05-10 09:39:00',
      ftime: '2018-05-10 09:39:00',
      context: '已签收,感谢使用顺丰,期待再次为您服务',
      location: ''
    },
    {
      time: '2018-05-10 08:23:00',
      ftime: '2018-05-10 08:23:00',
      context: '[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件',
      location: ''
    },
    {
      time: '2018-05-10 07:32:00',
      ftime: '2018-05-10 07:32:00',
      context: '快件到达 [北京海淀育新小区营业点]',
      location: ''
    },
    {
      time: '2018-05-10 02:03:00',
      ftime: '2018-05-10 02:03:00',
      context: '快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]',
      location: ''
    },
    {
      time: '2018-05-09 23:05:00',
      ftime: '2018-05-09 23:05:00',
      context: '快件到达 [北京顺义集散中心]',
      location: ''
    },
    {
      time: '2018-05-09 21:21:00',
      ftime: '2018-05-09 21:21:00',
      context: '快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]',
      location: ''
    },
    {
      time: '2018-05-09 13:07:00',
      ftime: '2018-05-09 13:07:00',
      context: '顺丰速运 已收取快件',
      location: ''
    },
    {
      time: '2018-05-09 12:25:03',
      ftime: '2018-05-09 12:25:03',
      context: '卖家发货',
      location: ''
    },
    {
      time: '2018-05-09 12:22:24',
      ftime: '2018-05-09 12:22:24',
      context: '您的订单将由HLA（北京海淀区清河中街店）门店安排发货。',
      location: ''
    },
    {
      time: '2018-05-08 21:36:04',
      ftime: '2018-05-08 21:36:04',
      context: '商品已经下单',
      location: ''
    }
  ],
  meta: { status: 200, message: '获取物流信息成功！' }
})

Mock.mock('http://127.0.0.1:8888/api/private/v1/mock/process', 'get', menuMock)
  • 点击查看物流进度的按钮，发送请求，并渲染到时间线中
<template>
	<!-- 显示物流进度的对话框 -->
    <el-dialog
      title="物流进度"
      :visible.sync="processDialogVisible"
      width="50%">
      <!-- 时间线 -->
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in processData"
          :key="index"
          :timestamp="item.time">
          {{item.context}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
</template>

<script>
	// 显示物流进度的对话框
    async showProcessDialog() {
      const { data: res } = await this.$http.get('/mock/process')
      if (res.meta.status !== 200) return this.$msg.error('获取物流信息失败')
      this.processData = res.data
      this.processDialogVisible = true
    }
</script>

效果如图

3.7 数据统计模块

3.7.1 数据报表

  • 引入 Apache ECharts 数据可视化插件
  • 向服务器发起数据请求
  • 将请求回来的数据与现有数据进行合并
  • 展示数据
<script>
// 引入 echarts
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  // 此时页面上的元素已经加载完毕了
  async mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 发起请求
    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) return this.$message.error('获取折线图数据失败')
    // 准备数据和配置数据项
    // 调用 lodash 的 merge() 方法，将 res.data 和 this.options 合并成一个新的数据对象
    const result = _.merge(res.data, this.options)
    // 展示数据
    myChart.setOption(result)
  }
}
</script>

效果如图

四、项目优化

1.1 项目优化策略

  • 生成打包报告

  • 通过命令行参数的形式生成报告

    // 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析打包内容
vue-cli-service build --report

  • 通过可视化的 UI 面板直接查看报告 推荐

    在可视化的 UI 面板中，通过**控制台**和分析面板，可以方便地看到项目中所存在的问题
  1. 第三方库启用 CDN

  • 通过 externals 加载外部 CDN 资源

    默认情况下，通过 import 语法导入的第三方依赖包最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大大的问题。

    为了解决上述的问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。

    • 凡是声明在 externals 中的第三方依赖包，都不会被打包。
    module.exports = {
chainWebpack:config=>{
   //发布模式
   config.when(process.env.NODE_ENV === 'production',config=>{
       //entry找到默认的打包入口，调用clear则是删除默认的打包入口
       //add添加新的打包入口
       config.entry('app').clear().add('./src/main-prod.js')

       //使用externals设置排除项
       config.set('externals',{
           vue:'Vue',
           'vue-router':'VueRouter',
           axios:'axios',
           lodash:'_',
           echarts:'echarts',
           nprogress:'NProgress',
           'vue-quill-editor':'VueQuillEditor'
       })
   })
   //开发模式
   config.when(process.env.NODE_ENV === 'development',config=>{
       config.entry('app').clear().add('./src/main-dev.js')
   })
}

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。

  • 打开开发入口文件main-prod.js，删除掉默认的引入代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
//导入全局样式
import './assets/css/global.css'
//导入第三方组件vue-table-with-tree-grid
import TreeTable from 'vue-table-with-tree-grid'
//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
// import 'nprogress/nprogress.css'
// //导入axios
import axios from 'axios'
// //导入vue-quill-editor（富文本编辑器）
import VueQuillEditor from 'vue-quill-editor'
// //导入vue-quill-editor的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false

//全局注册组件
Vue.component('tree-table', TreeTable)
//全局注册富文本组件
Vue.use(VueQuillEditor)

//创建过滤器将秒数过滤为年月日，时分秒
Vue.filter('dateFormat',function(originVal){
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth()+1+'').padStart(2,'0')
  const d = (dt.getDate()+'').padStart(2,'0')

  const hh = (dt.getHours()+'').padStart(2,'0')
  const mm = (dt.getMinutes()+'').padStart(2,'0')
  const ss = (dt.getSeconds()+'').padStart(2,'0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  • 打开index.html添加外部cdn引入代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>电商后台管理系统</title>

    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

  1. Element-UI 组件按需加载

  2. 路由懒加载

  3. 首页内容定制

winnerFly
关注
  • 17
    点赞
  • 踩
  • 137
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
2024年前端最全基于 vue + Element-ui 开发的后台管理系统(1)，h5前端开发培训
2401_84447065的博客
05-06 789
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。提交用户输入的登录信息，调用接口要做验证。
黑马Element-UI+Vue实战项目电商管理系统后台项目源码
最新发布
02-23
黑马Element-UI+Vue实战项目电商管理系统后台项目源码
Vue+ElementUI 搭建后台管理系统（实战系列五）
前端视听
08-18 7968
前言 使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。 关于开发过程中，确实使用到很大一部分的文档，都说前端开发离不开文档，重要的话说三遍，一定要多看文档。 管理后台解决方案 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k Github 地址：https://github.com/Pa
vue-elementUI后台管理系统
2201_76092588的博客
12-27 3412
首先，我们要了解Vue.js是什么？Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。简单小巧是指Vue体量轻，压缩后大小仅有33KB；
项目总结 【电商后台管理系统】
qq_44810886的博客
05-29 5968
问题： 如何进行登录页面的预校验 登录组件预验证，通过调用表单的validate函数 登录组件根据预验证决定是否发起请求 如何实现登录功能 发起请求需要对应的axios包，配置axios 注意：登录组件弹框提示，用message，需要全局挂载 如何退出登录 什么是树形控件 分页效果是怎么实现的 如何使用axios，创建get、post请求 ......
使用vue3+element-ui plus 快速构建后台管理模板
m0_63622279的博客
10-12 9725
使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。
Vue+Element UI
偷往事的人
03-25 137
Vue集成Element UI Element UI 后台管理系统主要的标签： el-container：构建整个页面框架 el-aside：构建左侧菜单 el-menu：左侧菜单内容，常用属性： :default-opened...
vue + element-ui+nodejs 商城管理系统源码.rar
10-27
商城管理系统源码，包含三部分： 1、node-elm 商城后台系统，提供数据。 技术栈：nodejs + express + mongodb + mongoose + es6/7 + vue + element-ui 2、vue2-manage 商城后台系统前端，跟node-elm是配套的 技术栈...
基于vue + element UI 的后台管理系统模板
09-12
在本项目"基于vue + element UI 的后台管理系统模板"中，开发者可以利用这些组件和功能，快速搭建起一个具备基本管理功能的后台系统。通过动态路由的实现，系统可以根据用户权限动态加载相应的组件和页面，提高用户...
基于Vue+element-ui开发的后台管理系统
07-28
前端电商管理系统项目，技术栈vue.js+element-ui+axios+ECharts. 运行方式：在node环境下运行yarn安装依赖，然后执行yarn serve运行，运行项目需要联网。有问题私信解决
mall-manage-system:vue-cli 3.0 + element-ui + vue-router + axios + Vuex + Mock + echarts实现电商管理系统后台
03-11
总述 一，项目效果 整体效果 ...后台首页 用户管理页 说明这里所有的数据都不是直接通过引入获取的...mall-manage-system # 电商后台管理系统 | ---src | ---api | # axios实例 编写统一的请求响应拦截信息 ---annota
通过Vue+node.js+Element-UI+MySql实现超市管理系统.rar
12-16
本文旨在设计一个超市后台管理系统，运用Visual Studio Code编辑器和Vue-cli工具完成超市后台管理系统为超市管理员用户提供一个方便快捷的管理平台，其主要功能模块含有用户登陆模块，用户管理模块，权限管理模块，...
vue3+电商后台管理系统+elementplus+axios
07-04
在这个电商后台管理系统中，Vue3是基础架构的核心，用于构建整个应用的视图层。 ElementPlus 是一套基于 Vue3 的高质量UI组件库，它继承了 Element UI 的设计理念，提供了丰富的组件，如表格、按钮、输入框、通知等...
vue-shop:Vue + Element UI电商后台管理系统演示
03-11
总的来说，“vue-shop”是一个基于Vue.js和Element UI的电商后台管理系统，利用NPM管理依赖，通过Vue CLI提供开发和生产环境的构建流程。这个开源项目不仅展示了Vue.js和Element UI在实际应用中的强大功能，也为...
爱马仕后台管理系统源码，Vue+element-ui.zip
05-20
【标题】"爱马仕后台管理系统源码，Vue+element-ui.zip" 提供的是一个基于Vue.js和Element-UI框架的后台管理系统实现。Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易学易用的特点在开发界受到广泛欢迎。...
基于Element-Plus的电商后台管理系统，功能丰富
11-09
总的来说，这个基于Element-Plus的电商后台管理系统充分利用了Vue.js和Element-Plus的优势，为电商平台提供了一套强大且易用的后台工具，无论是对于开发者学习现代前端技术，还是对于实际的电商运营，都具有很高的...
电商后台管理系统项目总结（一）
Z_hai_yan的博客
05-05 5690
项目模块分析：用户管理模块、权限管理模块、商品管理模块、订单管理模块、数据统计模块 各模块技术点： 用户管理模块 登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换 权限管理模块 添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换 商品管理模块 添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类 订单管理模块 数据渲染、分页 数据统计模块 echarts图表、数据渲染 用户管理模块展示： 权限管理模块展示： 商品管理模块展示： 订单管理模块展示： 数据统计模块效果
Vue+Element-UI的后台管理系统项目（一）
weixin_45817780的博客
07-10 4306
前言 这个夏天依旧喧闹，窗外蝉鸣不止，燥热的微风拂起了年少的热情，从此，我们与夏日长存，夏日与我们永在。 项目分述 项目预览 由于该项目我还在学习和完善当中，自己是第一次做vue项目，所以在写这篇博客时还在继续敲，这里就不一一展示。我将按照分述的版块来写下这个项目的细节和具体实现步骤，以此来促进自己的学习和知识的回顾。 1.项目概述 1.1基本业务概述 根据不同的应用场景，电商系统一般都提供了PC端，移动端app，web，小程序等多种终端访问方式。 1.2功能 如图所示，大体分为这几类了。 登录
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
前端互助会
06-04 3807
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板 技术：Vue + Element-ui 功能：后台管理系统基础模板，路由配置，加载页面jin
vue项目实战-电商后台管理系统
02-18
Vue项目实战-电商后台管理系统是一个基于Vue框架开发的前端项目，用于管理电商网站的后台业务。该项目包含了常见的电商后台管理功能，如商品管理、订单管理、用户管理等。 以下是该项目的一些特点和实现方式： 1. 使用Vue.js框架：Vue.js是一个轻量级的JavaScript框架，具有响应式数据绑定和组件化开发的特点，适合构建单页面应用。 2. 使用Vue Router进行路由管理：Vue Router是Vue.js官方提供的路由管理插件，可以实现前端路由的配置和跳转。 3. 使用Vuex进行状态管理：Vuex是Vue.js官方提供的状态管理插件，可以集中管理应用的状态，并实现状态共享和响应式更新。 4. 使用Element UI进行界面设计：Element UI是一套基于Vue.js的UI组件库，提供了丰富的组件和样式，可以快速构建美观的后台管理界面。 5. 实现权限管理：通过路由守卫和权限控制中间件，可以对用户进行权限验证和访问控制，确保只有具备相应权限的用户才能进行操作。 6. 实现数据交互：通过与后端API进行数据交互，实现商品列表展示、订单管理、用户信息修改等功能。 7. 实现数据可视化：使用ECharts等数据可视化工具，将数据以图表的形式展示，方便管理员进行数据分析和决策。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值