xguihur / graduate-design

这个仓库存放关于毕业设计的项目，目前是先开发一个后台管理系统

manage-system

一个基于 Vue 2.0 + Element-UI + Axios 的最基本的后台管理系统模版。包含功能有：路由、接口封装、登录、主页分侧边栏和右侧展示、面包屑、Search 组件、Table 组件、Navigation 组件、Form 组件。以上就是一个后台项目最基本的几个模块，因此抽成一个项目模版供后续快速搭建。

左侧菜单和面包屑都能够根据当前路由自动生成，以及实现点击跳转。后续加入权限控制可以由后端将菜单返回给前端进行绑定route。

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

使用指南

使用项目

1. 项目跑起来后，是一个空壳。这个壳是指
   1. 左侧的菜单能够根据路由自动生成
   2. 面包屑也会自动生成
   3. 点击菜单能正常跳转路由
   4. 菜单能够点击进行伸缩隐藏展示
   5. 路由守卫和接口拦截器已经完全设置好了，可以暂时不予理会
2. 需要去修改的地方：
   1. 登录页面的校验需要自己去设置一下
   2. 登录或者获取列表信息的接口还需要自己去设置以及编写
   3. 路由如果有其他需求可以自行去设置，需要到 router 文件夹中去配置路由。注意meta需要设置，这是菜单适配的关键。

开发页面

1. 可以参考动物信息管理页面，那里有一个基础的模板去使用目前自己封装好的组件，如：table、navigation、search、dialog等
2. 如果要在新页面开发，在他下面新建一个 components 文件夹，拷贝一份 table、search、dialog 等公共组件，直接在对应的页面开发即可 （这样的开发流程或许会造成代码冗余，但能够保证每一个页面适配性很高，减少很多耦合的麻烦，能清晰易懂地快速开发）

项目里程碑

• 使用 vue 2.0 搭建 vue 项目

• 导入一些常用库： axios、element-ui、vue-router

• 封装接口相关的方法：axios 二次封装、不同的请求模版

• 成功配置 less 、less-loader 预处理器

• 成功导入并且使用 element-ui

• 配置页面路由

  • 主页路由
  • 登录路由
  • 404 路由器

• 设置好了路由层级以及 NavMenu 中 点击跳转路由的功能

• 在主页路由中设置好侧边栏

  • 侧边栏需要随屏幕自适应，并且缩小到一定宽度后隐藏侧边栏文字
  • 侧边栏点击能跳转对应的路由

• 配置路由面包屑

  • 点击侧边栏展开右侧路由时，面包屑也会随之弹出，点击 叉叉 可以删除面包屑
  • 点击面包屑也会跳转对应的路由

• 封装好 Search 组件

  • 父组件中传入 form 给 Search 组件绑定数据
  • 点击 Search 组件的 查询 按钮时，向父组件触发事件，父组件可以监听这个事件做处理
  • 点击 Search 组件的 查询 按钮时，会修改传入的 form 对象，并且将这个 form 对象存入缓存，更新 路由参数，重新 push 路由

• 封装好 Table 组件

  • 父组件设置好 tableColumn对象 和 tableData 对象，传入 Table 组件。建议通过 v-bind 直接绑定一个对象
  • Table 组件可以根据 tableColumn 渲染 普通列、特殊列
  • Table 组件根据 tableData 和 tableColumn 渲染表格数据
  • Table 组件根据 在操作事件中监听点击事件，将一行的参数携带着传递给父组件进行事件触发，由 父组件进行处理

• 封装好 Navigation 组件

  • 父组件设置好 initPagination 对象，传递给 Navigation 组件
  • Navigation 组件 拿到 props 对象，传递给分页器属性进行绑定
  • Navigation 组件 在触发对应的事件（如change-size、change-page）时，对 props 进行重新赋值，并且向外触发事件，由父组件监听
  • 父组件监听到对应的 change 事件时，使用 分页器参数对 路由参数 进行修改，并且刷新页面

• 封装好 Form 组件

  • 父组件设置好 form 对象，传递给 Form 组件
  • Form 组件拿到 props 对象，绑定给对应的表单
  • Form 组件内部封装了多个函数，用于校验一些常用的表单特性
  • Form 组件内部对 submit 按钮进行了监听，当点击时会进行一次校验。若不通过则拦截，若通过则向父组件触发 事件，由父组件进行监听
  • 父组件监听到 submit 事件后，进行一些接口请求的操作，完成对应的行为。这里的行为包括成功和失败都要监听，还需要控制弹窗之类的
  • 每次进入 Form 组件 时，对上一次的校验进行清空
  • 每次进入 Form 组件 时，判断是 回显还是新建，如果是新建则执行 reset 方法，回显则调用对应的方法赋值数据

• 封装好 Dialog 弹窗组件

  • 表单和校验规则在组件中自行编辑
  • 父组件传递一个 控制展示的 flag 即可

• 在 父组件 中，自行选择地使用以上的组件

  • 一旦进入父组件，在 mounted 中从 缓存中 获取 search 参数；从路由中获取 pagination 参数，对本地的 相关对象进行初始化
  • 初始化数据后，调用 getTableList 获取对应的页面数据。此方法中拿到本地的 参数，封装好 params 后调用后端接口拿到数据

• 封装通用方法，如时间格式化、日期格式化、时间日期格式化、校验函数、节流、防抖、对本地缓存的操作优化

• 提供 vscode 对于 vue2 的好用的 模版片段

• 本地的一些配置，如 env 环境配置、国际化、打包优化等工程化的东西（这部分暂时不太熟悉）

二期功能记录

• 对于 Search 组件的那些用户的选择框，还不能拆分成通用的组件，目前还是需要用户拷贝一份去自己编辑，封装的还不够抽象，二期看看能不能封装的抽象一些
• Table 组件也是，对于一些想要定制化的列，还得自己去修改 Table 组件，后期看看能不能也写一个更加抽象的组件，父组件中就可以自定义，实现 Table 组件的高度使用
• 对于组件封装的解藕**，云智老哥给的思路，看看能不能 get 到他的点并且封装好一些
• Form 表单还没有封装，目前封装了 Dialog 组件，后续要用到 Form 的在那里面看看逻辑拆出来复用就好