# vue3+ts后台管理系统

**Repository Path**: sevenfighting/cms

## Basic Information

- **Project Name**: vue3+ts后台管理系统
- **Description**: 一个用于练手的后台管理系统 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-11
- **Last Updated**: 2023-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-ts-cms

This template should help get you started developing with Vue 3 in Vite.

### 技术栈

```sh
开发工具: Visual Studio Code
编程语言: TypeScript 4.x + JavaScript
构建工具: Vite 3.x / Webpack 5.x
前端框架: Vue 3.x + setup
路由工具: Vue Router 4.x
状态管理: Vuex 4.x / Pinia
UI 框架: Element Plus
可视化: Echart 5.x
工具库: @vueuse/core + dayjs + countup.js 等等
CSS 预编译: Sass / Less
HTTP 工具: Axios
Git Hook 工具: Husky
代码规范: EditorConfig + Prettier + ESLint
提交规范: Commitizen + Commitlint
自动部署: Centos + Jenkins + Nginx
```

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

### 基本实现

这里说一下这个Demo的实现，通过什么技术，用的哪些知识点完成开发。以及，关于对于权限管理的一些理解与实现，大体分为以下几类：

#### 视图

模板是通过[ElementUI](https://element.eleme.cn/)来搭建的，这个基于的UI组件库非常好用。

#### 数据

后端接口

#### 请求

请求数据的库，我使用的是[axios](http://www.axios-js.com/)这个库，这个库使用也非常的方便简单。

#### 数据保存

数据的保存通过pinia和sesstionStorage等来实现的。

### 权限判断

#### 路由级别的判定

通过**beforeEach**全局守卫钩子，来进行token验证，是否能通过路由来登入其他页面；

#### 菜单级别的判定

通过后端返回的`json`菜单权限数据，进行动态渲染，可以通过`router.addRoutes`动态添加菜单等，这里通过调接口，处理数据获得根据权限所得的菜单，然后存Pinia和本地，项目里面封装了很多函数

#### 请求级别的判定

通过axios的拦截器，判定某个用户在某个页面的操作是否有权限，通过`router.currentRoute`获取元信息来判定。

# 开发日志简记

# 项目架构

## 一. 项目的介绍

### 1.1. 后台管理系统的定位和核心







### 1.2. 后台管理系统项目功能介绍







### 1.3. 创建项目-npm init vue@latest





### 1.4. 解析目录结构每个文件作用





### 1.5. tsconfig文件的作用和解析





## 二. 项目代码规范

### 2.1. editorconfig文件





### 2.2. prettier配置





### 2.4. eslint配置





## 三. 项目内容搭建

### 3.1. 目录结构的创建





### 3.2. css样式的重置





### 3.3. vue-router路由





### 3.4. pinia状态管理





### 3.5. axios网络请求





### 3.6. 区分开发和生产环境

# Element-Plus集成与登陆

## 一. Element-Plus集成

### 1.1. 全局引入





### 1.2. 按需引入

- vite插件配置



### 1.3. 图标的引入





### 1.4. ElMessage引入





## 二. 搭建登录页面

### 2.1. 背景的搭建

- 100vw/vh





### 2.2. 登录界面Panel

#### 2.2.1. 整体界面的搭建

- 标题
- tabs
- 记住密码/忘记链接(组件)
- 立即登录(组件)



#### 2.2.2. tabs搭建过程

- label的插槽使用
- 内容显示



#### 2.2.3. 账号登录form

- ElForm/ElFormItem/ElInput
- 绑定属性



#### 2.2.4. form的校验规则





#### 2.2.5. 点击立即登录

- 父组件发生点击, 执行子组件的函数.
- defineExpose()
- const accountRef = ref<InstanceType<typeof PaneAccount>>()



### 2.3. 登录的操作

#### 2.3.1. form通过验证

- formRef.validate(回调)



#### 2.3.2. 登录接口的调用

- post
- data: {name, password}



#### 2.3.3. 将登录操作store中





#### 2.3.4. IAccount类型的定义







### 2.4. postman的使用





### 2.5. token缓存和cache封装

# 完善登陆和注册路由

## 一. 登录页面的功能

### 1.1. 导航守卫

```ts
router.beforeEach((to) => {
  // 只有登录成功(token), 才能真正进入到main页面
  const token = localCache.getCache(LOGIN_TOKEN)
  if (to.path.startsWith('/main') && !token) {
    return '/login'
  }
})
```





### 1.2. 记住密码功能







### 1.3. main权限管理

- RBAC: role based access control
  - 基于角色访问控制(权限管理)
- 后台数据库设计表(了解)



### 1.4. 请求用户信息

- 用户的角色



### 1.5. 根据角色id获取菜单信息





### 1.6. userInfo/userMenus进行本地缓存







## 二. 首页的界面搭建

### 2.1. 整体的布局ElContainer







### 2.2. 侧边栏的菜单Menu

#### 2.2.1. 分析ElMenu每一个组件的作用





#### 2.2.2. 手动的搭建整个菜单结构





#### 2.2.3. 根据userMenus动态遍历





#### 2.2.4. 图标动态: 动态组件



### 2.3. Main的头部Header展示

#### 2.3.1. menu-icon的图标点击

- 点击切换自己的图标
- 切换aside的宽度(动画)
- 切换menu的折叠效果



#### 2.3.2. 个人信息的展示

- 退出登录
- 样式的调整





### 2.4. 注册所有的路由, 页面跳转

- 动态的菜单进行权限管理
- 但是所有的路由都是被注册进去

# 动态路由

## 一. 动态路由

### 1.1. 基于角色添加路由





### 1.2. 基于菜单动态匹配





### 1.3. 动态创建页面和路由对象

- coderwhy add3page_setup xxxxx





### 1.4. 从文件中读取所有的路由

- localRoutes



### 1.5. 根据菜单动态的映射路由

- routes
- router.addRoute('main', xxxx)



### 1.6. 刷新保持路由的注册状态







### 1.7. 登录进入匹配第一个页面







### 1.8. 刷新页面匹配menu菜单





### 1.9. 面包屑的功能实现







## 二. 用户User界面

### 3.1. search搜索区域的布局







### 3.2. content的整体布局





### 3.3. 获取user的数据展示

- el-table展示
- 自定义column



### 3.4. 自定义Table的Column

- 作用域插槽
- enable
- createAt/updateAt
  - dayjs封装utc转换



### 3.5. 分页pagination组件展示







### 3.6. 页码改变/点击查询/重置 - 发送网络请求







### 3.7. 删除某一条数据





### 3.8. 新建用户的Modal

- user-modal.vue组件
- 布局组件
- 点击确定按钮, 创建数据



### 3.9. 编辑用户的Modal

- 编辑的数据, 进行回显
- 编辑操作网络请求





## 三. 页面的重构

### 3.1. 组件进行拷贝

- 修改它的网络请求的部分
- store/service





### 3.2. 组件进行配置

- page-search的配置

# 主页封装和细节处理

## 一. 高阶组件封装

### 1.1. PageContent

- header
- propsList
  - 插槽 => 作用于插槽 => 完全的定制化
- pageName



### 1.2. PageModal

配置文件:

- pageName
- header:
  - newTitle
  - editTitle
- formItems
  - el-form-item => el-input/el-select

某些select的options数据来自服务器

- modalConfig => mainStore => computed



### 1.3. 页面hooks抽取

- usePageContent
- usePageModal



### 1.4. 小bug的处理

- 多余的导入文件
- defineProps<不能来自文件引入>()



## 二. 页面的细节处理

### 2.1. 菜单的页面

- 展示子菜单
  - row-key

### 2.2. PageModal自定义插槽







### 2.3. ElTree的展示

- 获取完整的菜单
- 创建角色时, 携带选中的菜单
  - otherInfo属性

### 2.4. 编辑角色数据回显

- mapMenuListToIds
- elTree.value?.setCheckKeys([])

### 2.5. nextTick

- 使用场景
- 原理
- 源码

# 按钮权限和Echarts图表

## 一. 按钮权限

### 1.1. 从菜单中获取所有的按钮权限







### 1.2. 在组件中按钮权限的判断逻辑

- 抽到usePermissions





## 二. 新建/编辑/删除重置currentPage









## 三. 数据统计dashboard页面

### 3.1. 顶部数字的数据展示

- countup.js





### 3.2. Echarts图表的展示

- base-echart
- 各种图形
  - pie-echart
    - option => computed
  - rose-echart
  - line-echart
  - bar-echart
  - map-echart
- dashboard中获取数据
  - service
  - store
  - page



## 四. Git的代码提交规范

### 4.1. husky对提供阶段拦截





### 4.2. 对message进行规范

- cz生成message的规范
- 不规范的lint限制