梦学谷管理系统（一）

系列文章目录

---

---

前言

最后决定模仿 梦学谷管理系统 做一个项目。可能时间隔得有点久了，之前学的东西很多都差不多忘记了，做这个项目基本上都是看着官方的文档一点一点做的。在家里也免不了有各种各样的事情耽误了项目的进度。现在终于差不多做好了，分享出来，新手上路，如有错误，请多多指教

---

一、项目架构

• element-ui
• mock.js
• moment
• axios
• api封装请求

二、项目技术栈

• 前端 Vue+Vue-router+Vuex+Element-ui+Axios
• 后端 mock模拟数据

三、项目所有模块

• 用户登录
• 首页
• 会员管理
• 供应商管理
• 商品管理
• 员工管理

登录模块操作如下：

梦学谷后台管理系统的数据都是采用mock.js自己模拟的数据接口来请求数据的,有许多地方都不是很正规!

用户登录

登录的表单校验以及登录：

<template>
  <div class="login-container">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
          <h2 class="login-title">梦学谷会员管理系统</h2>
          <el-form-item label="帐号" prop="username">
              <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('form')">登录</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>
<script>
import {
   login, getUserInfo} from '@/api/login'

  export default {
   
    data() {
   
      return {
   
        form: {
   
            username: '',
            password: ''
         },
         rules: {
   
             username: [
                  {
   required: true, message: '帐号不能为空', trigger: 'blur' },
             ],
             password: [
                 {
   required: true, message: '密码不能为空', trigger: 'blur' },
             ]
         }
      }
    },
    methods: {
   
      submitForm(formName) {
   
        this.$refs[formName].validate(valid => {
   
            // console.log(valid)
            if (valid) {
   
                // 提交表单给后台进行验证是否正确
                this.$store.dispatch