一、项目bug

1、多人开发的项目冲突

2、相关框架的的运用

3、后台数据的处理

4、antd框架日期框的回显

5、上传图片的回显

6、请求的端口号不一致，需要做前端反向代理

二、项目用到的技术栈

react+ts来进行开发后台后台用到的工具则是vite这一去轻量化工具去开发的，前台则是vue2

框架两个项目主要是用到了 antd +tailwindcss  前台呢则是用到了element-ui

三、项目功能描述

该后台主要是管理前台页面的各个部分，前台的新闻资讯则是通过后台来控制位置来现显示在不同地方，登录则是用到了token鉴权，唤起登录接口，会有一个token返回来做这个权限的控制，后台也是增加了不少的角色来控制，以及发布文章的身份，前台banner图的显示位置，后台角色的身份也分布的十分明确明确，前台则是展示后台的数据，例如新闻和资讯等等

四、项目的带来的收获

收获了项目中问题的解决办法，以及框架的使用，因为框架的很多组件和你的项目并不是很贴切，所以，懂得修改这个组件并应用到你的项目才是重重之重，以及多人开发的项目的冲突，

五、项目bug具体解决

项目中代码冲突，我用的工具则是githubdesktop图形化管理工具，处理代码冲突的话很明显的就知道哪里出现了问题

项目中遇到了一个问题就是编辑功能则是需要数据回显到页面上面，

表单组件有一个日期选择框回显的的一个功能

这里呢则是需要日期管理工具来转换这个功能

const dateFormat = "YYYY-MM-DD";const [searchParams] = useSearchParams();const { state } = useLocation();const id = searchParams.get("rowid");useEffect(() => {if (id) {form.setFieldsValue({...indicators,DatePicker: dayjs(indicators?.releaseTime, dateFormat),});if (indicators?.content) {setHtml(indicators.content);}}}, [indicators]);

这里我是用的dayjs这个日期管理工具

第二个bug

则是上传图片的功能，则是需要自定义处理函数来进行上传

 const customRequest = async (options) => {console.log(options);const formData = new FormData();formData.append("key", `image/20240307/${options.file.name}`);formData.append("policy", img?.data.data.policy);formData.append("OSSAccessKeyId", img?.data.data.OSSAccessKeyId);formData.append("success_action_status", img?.status);formData.append("callback", img?.data.data.callback);formData.append("signature", img?.data.data.signature);formData.append("file", options.file);// const res = await post(//   "https://bailiban-hz.oss-cn-hangzhou.aliyuncs.com/",//   formData// );axios({url: "https://bailiban-hz.oss-cn-hangzhou.aliyuncs.com/",method: "post",cache: false,contentType: false,processData: false,data: formData,}).then((res) => {console.log(res);});setimage(options.file.name);const res1 = await serveget(`apis/api/oss/aliyun/oss/signature?keys=${options.file.name}`);console.log(res1);setEdit(res1?.data);};<Form.Item<FieldType> label="上传封面图" name="department"><ImgCrop rotationSlider><UploadlistType="picture-card"fileList={fileList}onChange={onChange}onPreview={onPreview}customRequest={customRequest}data={{policy: img?.data.data.policy,OSSAccessKeyId: img?.data.data.OSSAccessKeyId,success_action_status: img?.status,callback: img?.data.data.callback,signature: img?.data.data.signature,}}><PlusOutlined /></Upload></ImgCrop></Form.Item>

第二个请求则是请求完整的图片路径，通判断是否传参来是否来进行发送这个获取完整图片路径的这个请求，

接着就是请求完整的图片这个请求的端口号和项目中封装的axios二次基路径冲突，则做了一个前端的反向代理

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],server: {proxy: {'/apis': {target: 'http://192.168.101.199:8030',changeOrigin: true,rewrite: (path) => path.replace(/^\/apis/, '')},},},
})

这里的apis呢则是路径中所匹配的值，target则是所要代理的路径，changeOrigin则是允许跨域

这个函数会将路径中的 /apis 替换为空字符串，这样在实际代理时就不会包含 /apis 前缀了

文章到这里就结束啦，大家多多关注哦