[前端项目]课程管理系统小demo

Part1项目名称

《豆子课程管理系统》

Part2项目定位

• 个人学习项目

Part3项目周期

2020-11 ~ 2020-12

Part4项目介绍

• 《豆子商城》是我本人个人经过课程学习后开发的个人学习项目。

1技术栈

• 架构：前后端分离

• 开发IDE：VScode

• 数据模拟：mock.js

• 图表：echart.js

• UI：elementUI

• 框架：vuecli4 + vue2.6 + vue-router3.2 + vuex

• 网络请求：axios0.19 + promise + async/await

2学习重点

使用vuex实现切换tab页功能

• 在Main.vue中引入CommonTab.vue组件

• 在vuex中定义存取标签的tagList，方便非父子传递数据

• 定义vuex中侧边栏点击后将菜单加入到tagList中的方法

• 定义vuex中点击标签后触发删除的方法

构建页面组件

• 建立每个页面组件

• 连通面包屑

• 连通侧边栏

• 连通标签栏

连通公共组件

• vuex的使用

• 挂载一个公共vuex，this.$bus

页面布局整体样式优化

• 侧边栏背景色改变

• tag选中样式优化

• 面包屑当前激活菜单样式优化

  细节优化

mock.js

npm install mockjs

// 根据数据模板生成模拟数据
Mock.mock(rurl,rtype,template)
Mock.Random(rurl,rtype,template)

axios全局配置

npm install axios

import axios from 'axios'


// 创建一个axios实例
const service = axios.create({
    // 请求超时时间
    timeout: 3000,

})

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 其他操作  例如加上用户的token
        return config
    },
    err => {
        console.log(err)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        let res = {}
        res.status = response.status
        res.data = response.data
        return res
    },
    err=>{
        console.log(err)
    }
)

export default service

通用表格组件封装及思路

• 表格基本参数分析

• data：传入的数据列表

• prop：传入的数据字段

• label：列名

• 表格可选参数分析

• width：列宽

• type：类型

• 表格拓展

• loading：布尔值

• total：数据条数总计

• papge：当前页数

• 分页参数

• 加载状态：

封装EChart组件的思路

• 官网：戳这里

• 图表的大分类

• 组件的一些动态参数抽离

• 组件的基本配置

• 主题颜色

  color: [
    '#2ec7c9',
    '#b6a2de',
    '#5ab1ef',
    '#ffb980',
    '#d87a80',
    '#8d98b3',
    '#e5cf0d',
    '#97b552',
    '#95706d',
    '#dc69aa',
    '#07a2a4',
    '#9a7fd1',
    '#588dd5',
    '#f5994e',
    '#c05050',
    '#59678c',
    '#c9ab00',
    '#7eb00a',
    '#6f5553',
    '#c14089'
  ],
  
  

用户管理页面功能实现

• 表格加载状态

• 分页功能

• 编辑功能

• 删除功能

总结

• 项目当中遇到的坑以及解决思路

• 通过vue-devtool调试

• 通过console输出测试

• 组件的封装思路

• 提高其适应性

• v-if和v-else根据父组件传入的条件来生成对应的模板

• 自定义事件、判断传出哪些参数

• 插槽拓展

• 哪些写死

• 哪些要传进来

• 判断的基本参数

• 拓展

• 优化

• 其它技术

• 分成几部分，在对应部分查找文档

• 大局观

• 直接看快速教程

• EChart的使用

Part5项目仓库地址

• gitee：https://gitee.com/BruceCat/VueAdmin

git clone https://gitee.com/BruceCat/VueAdmin.git

直接clone下来，然后npm install + npm run serve就跑起来了。

Part6部分项目截图