梦学谷后台管理系统分析（1）

前言：后台管理系统是内容管理系统Content Manage System（简称CMS）的一个子集。 内容管理系统是企业信息化建设和电子政务的新宠，也是一个相对较新的市场。对于内容管理，业界还没有一个统一的定义，不同的机构有不同的理解。
今天分析一个前后端分离的项目梦学谷管理系统，感兴趣的可以去看一下，请多多指点，大佬勿喷梦学谷管理系统

一、项目架构

使用vue": “^2.6.11"框架，用@vue/cli 4.5.9版本脚手架搭建项目，css样式结构"element-ui”:"^2.15.1" 渲染 element-ui地址，并搭配"node-sass": “^4.12.0”，“sass-loader”: “^8.0.2” CSS 预处理器，调用后台接口使用"axios": "^0.21.1"axios，“vue-router”: "^3.2.0"实现路由切换，后台数据使用mock.js模拟数据
二、项目技术栈
本项目所用到的主要技术栈有Vue-cli、vue-router、axios、sass、element-ui、mock.js，axios简单封装

三、项目所有模块

项目的模块主要模块有：登陆模块、首页模块、会员管理、供应商管理、商品管理、员工管理

四、各模块技术点

1、登陆模块
登陆模块账号和密码需要正则，使用element -ui 的表单验证自带正则验证规则（登陆模块没有固定的用户名密码，任何人都可以登陆）

  rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }

2、首页模块
登陆成功后直接跳转到首页面，把首页面设置路由重定向，页面布局使用布局容器

左侧导航使用菜单NavMenu 导航菜单

 <!-- 左侧菜单栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <div class="menuToggle" @click="isCollapse = !isCollapse">|||</div>
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="isCollapse"
            v-for="item in menusList"
            :key="item.id"
            router
          >
            <el-submenu index="1">
              <template slot="title">
                <i :class="icons[item.id]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item
                :index="'/' + el.path"
                v-for="el in item.children"
                :key="el.id"
              >
                <i :class="iconsLcon[el.id]"></i>
                <span slot="title">{{ el.authName }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

用户密码修改

在这里插入代码片

var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.password !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

3、会员管理
封装面包屑导航，在每个模块直接引入面包屑导航，如果代码较多方便后期维护，在每个路由上添加meta属性

封装单个面包屑组件

<template>
  <div class="bread">
    <el-card>
      <p>
        <span></span>
        <span v-for="(item, index) in breadList" :key="index">{{ item }}</span>
      </p></el-card
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      breadList: [],
    };
  },
  mounted() {
    this.breadList = this.$route.meta.bread;
  },
};

在路由上添加meta属性

 {
      path: "/member",
      component: () => import( /* webpackChunkName: "about" */ "../components/member.vue"),
      meta: {
        bread: ['会员管理']
      }
    },

在模块组件上直接引入面包屑组件

import Bread from "./bread";

使用mock.js模拟数据

对应模块内功能接口

模块内的出生日期使用element-ui DatePicker 日期选择器,使用数据双向绑定获取所选日期

<el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="formInline.birthday"
            style="width: 100%"
          ></el-date-picker>

页面分页通过分页器和对所有数据的截取将数据分页显示

:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 

  <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[3, 6, 12, 18]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>