关于新需求的解决方案

子禛

已于 2022-02-22 15:08:11 修改

阅读量529

点赞数

文章标签： javascript 前端 vue.js

于 2022-02-22 15:01:29 首次发布

本文链接：https://blog.csdn.net/qq_46740017/article/details/123068558

版权

关于新需求的解决方案

需求说明：用户消息管理相关的功能。

1.项目搭建

1.1 init

# use by npm
npx create-umi myapp
# use by yarn
yarn create umi myapp

选择对应开发语言：JavaScript
选择对应的模板：simple
进入项目文件夹
安装依赖

yarn
tyarn
npm i
cnpm i

启动项目

npm run start
yarn start

2.实施方案

2.1 关于请求封装的解决方案

`antd-proV4`版本

1.在src文件夹中的utils文件夹中创建request.js文件，用于封装一些基本的拦截、请求头等。
2.在src文件中的services中创建对应组件的js文件。这里我使用Badge.js文件，文件中主要使用utils文件中的request.js对请求进行二次封装，本次封装主要封装请求地址，传递参数等数据。
3.因为是新项目

`antd-proV5`版本

1.使用 openAPI的方式只要接入 swagger ，获取swagger的 url到config文件夹中的config.js文件中的openapi 配置。
2.会在services文件中自动生成一个对应的文件夹。这个文件夹就是相关请求的封装，可以直接使用。

在接口没有写好是，通过mock来进行一个前端的调试。

在mock文件中创建专属的js文件。
在service文件中进行封装。

2.2 关于页面布局的解决方案

`antd-proV5`版本

在v5版本中没有了layout这个文件夹。但我们需要在系统右上角添加一个头像和相关消息的通知。

在src文件夹中找到components文件中找到对应需要修改的位置，这里需改的是
- Footer：页脚组件
- HeaderDropdown：头部下拉组件。
- HeaderSearch: 头部搜索组件
- NoticeIcon：头部图标组件
- RightContent：头部右侧内容组件。
在components文件中创建如下文件。

请添加图片描述

这里使用是antd中的Badge组件。当然也可以自己封装。
给这个组件被一个div包裹，通过给你div添加点击事件来出发对话框。显示对应的数据。
在数据获取方面因数据功能简单不使用dva来进行请求，可以直接调用services文件夹中对应的请求即可。

3.项目实施

框架：antd-pro

版本：v5

项目介绍：通过antd-pro创建的初始化项目。

3.1 项目初始化

通过上述1中内容进行项目的初始化。

3.2 项目配置

进行services文件的自动生成，生成对应的api接口。

3.3 页面构建

1、在components文件夹中创建相关文件夹，并在文件中创建index.jsx文件。
2、引入antd中的Badge和Badge·组件，来进行页面的实现。
- 这里需要引入services文件的中api，在componentDidMount中发送数据请求（class组件），也可使用Hooks获取数据，并渲染到组件上。
  这里存在两种情况：
  - 1、我们在当前组件中进行数据请求，会获取到全部消息（已读和未读）的数据。我们点击消息框，触发点击事件，弹出对话框，在点击的时候把刚才请求的数据全部传递到对话框组件中。一次请求
  - 2、我们在当前组件中进行数据请求，只请求未读的数据，并渲染到页面上。当用户点击消息框时，触发点击事件，在初始化对话框的时候进行全部消息数据的请求。二次请求
  总结：
  - 方式一：不需要多次请求，但是一次请求的数据量比较大，可能会造成卡顿。并且不管用户点不点击消息框都会进行数据的请求，这样造成了不必要的性能浪费。
  - 方式二：比较符合微前端的理念，这样每次只要当用户点击消息栏的时候才会进行数据的请求，这样避免了一些不必要的性能浪费。
3、对于弹出框组件，使用antd中的Modal当点击消息框的时候，显示Modal对话框。
- 关于对话框的ui设计参考，他们更多的是通过页面配置路由的方式来实现的。
- 我们可以在Modal对话框中来嵌套这种结构，来实现一个美观的消息通知弹框。
- 根据上述分析，我们可以使用antd中的Tabs组件来实现。
- 只需要在Modal对话框中内嵌Tabs组件。
- 在不同标签页显示不同的数据即可。