# CTSdemoV3

**Repository Path**: gugengbing/ctsdemo-v3

## Basic Information

- **Project Name**: CTSdemoV3
- **Description**: cts项目，v3版本开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-16
- **Last Updated**: 2023-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 买吧项目管理

## 1、环境准备

效果地址：http://124.223.14.236:7006/public/admin/index.html#/dashboard

接口地址： http://124.223.14.236:7006/admin

### 1.1、界面改造

- 登录界面 `login.vue`

  <img src="assets/image-20230320141152170.png" alt="image-20230320141152170" style="zoom:50%;" />

![image-20230320141219995](assets/image-20230320141219995.png)

- 环境变量标题名称

  <img src="assets/image-20230320141343266.png" alt="image-20230320141343266" style="zoom:50%;" />

- index.html里面修改标题

  <img src="assets/image-20230320141426395.png" alt="image-20230320141426395" style="zoom:50%;" />

- 侧边栏logo的文字

  <img src="assets/image-20230320141630835.png" alt="image-20230320141630835" style="zoom:67%;" />

![image-20230320141723827](assets/image-20230320141723827.png)

### 1.2、 修改基准地址

![image-20230320141929908](assets/image-20230320141929908.png)



## 2、登录流程

- 登录页面`login.vue` 修改表单的字段

  ![image-20230320144229242](assets/image-20230320144229242.png)

- 发生请求，存储token

  ![image-20230320144309184](assets/image-20230320144309184.png)

- 修改请求方法

  ![image-20230320144331093](assets/image-20230320144331093.png)

- 响应拦截器里面，修改代码

  ![image-20230320144416497](assets/image-20230320144416497.png)



## 3、导航守卫和获取用户资料

<img src="assets/image-20230320151409674.png" alt="image-20230320151409674" style="zoom:67%;" />

<img src="assets/image-20230320151442876.png" alt="image-20230320151442876" style="zoom:80%;" />

![image-20230320151507451](assets/image-20230320151507451.png)

![image-20230320151533278](assets/image-20230320151533278.png)

![image-20230320151555339](assets/image-20230320151555339.png)





## 4、使用mock模拟退出请求

![image-20230320155458416](assets/image-20230320155458416.png)

![image-20230320155045463](assets/image-20230320155045463.png)

<img src="assets/image-20230320155149853.png" alt="image-20230320155149853" style="zoom:80%;" />

<img src="assets/image-20230320155303866.png" alt="image-20230320155303866" style="zoom:80%;" />

<img src="assets/image-20230320155352763.png" alt="image-20230320155352763" style="zoom:80%;" />

## 5、配置路由和权限介绍

### 5.1、路由配置

注意：下级路由的配置，不能已`/`开头，程序到时候会自动给你带上上级

| 路径             | 层级 | 组件                      | 作用             |
| ---------------- | ---- | ------------------------- | ---------------- |
| /dasboard        | 2级  | views/index.vue           | 数据面板         |
| /good            | 1级  | layout                    | 商品管理【目录】 |
| /good/category   | 2级  | views/good/category.vue   | 分类管理         |
| /good/commodity  | 2级  | views/good/commodity.vue  | 商品管理         |
| /good/seek       | 2级  | views/good/seek.vue       | 求购管理         |
| /topic           | 1级  | layout                    | 帖子管理【目录】 |
| /topic/          | 2级  | views/topic/topic.vue     | 帖子列表         |
| /user            | 1级  | layout                    | 用户管理【目录】 |
| /user/           | 2级  | views/user/user.vue       | 用户列表         |
| /message         | 1级  | layout                    | 信息管理【目录】 |
| /message/inform  | 2级  | views/message/inform.vue  | 举报信息         |
| /message/message | 2级  | views/message/message.vue | 消息公告         |
| /adv             | 1级  | layout                    | 广告管理【目录】 |
| /adv/            | 2级  | views/adv/adv.vue         | 广告管理         |

创建对应的页面文件

![image-20230320163304655](assets/image-20230320163304655.png)



定义路由位置： `router/index.js`

```js
// 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [
  {
    path: '/good',
    component: Layout,
    redirect: '/good/category',
    meta: { title: '商品管理', icon: 'good' },
    children: [
      {
        path: 'category',
        component: () => import('@/views/good/category'),
        name: 'category',
        meta: { title: '分类管理', icon: 'good' }
      },
      {
        path: 'commodity',
        component: () => import('@/views/good/commodity'),
        name: 'commodity',
        meta: { title: '商品管理', icon: 'dashboard' }
      },
      {
        path: 'seek',
        component: () => import('@/views/good/seek'),
        name: 'seek',
        meta: { title: '求购管理', icon: 'dashboard' }
      }
    ]
  }
  // 其他模块的路由配置
]
```

- 图标放在`assets/icons/svg/xxx.svg` 注意清楚干净，不要有填充色



### 5.2、权限相关

- 此项目**没有权限**，如果有权限需要处理以下逻辑

  ![image-20230320164004785](assets/image-20230320164004785.png)

![image-20230320163919862](assets/image-20230320163919862.png)



- **有权限**，如果有权限需要处理以下逻辑

  ![image-20230320164248812](assets/image-20230320164248812.png)

![image-20230320164217142](assets/image-20230320164217142.png)

![image-20230320164422216](assets/image-20230320164422216.png)

![image-20230320164508916](assets/image-20230320164508916.png)





## 6、功能模块的增删改查

略...



## 7、打包

![image-20230320164729361](assets/image-20230320164729361.png)

- 准备工作： 修改接口的基准地址`.env.production`
- 打包指令： `npm run build:prod`
- 产出内容： `dist`目录，提交给后端去部署即可。 如果本地要预览：需要通过`vscode`的`liveServe`插件对`dist`目录单独打开起服务的方式。