十大设计创意网站,重庆汉沙科技做网站怎么样,简约好看的网站,网页设计实训心得体会300字一、项目bug
1、多人开发的项目冲突
2、相关框架的的运用
3、后台数据的处理
4、antd框架日期框的回显
5、上传图片的回显
6、请求的端口号不一致#xff0c;需要做前端反向代理
二、项目用到的技术栈
reactts来进行开发后台后台用到的工具则是vite这一去轻量化工具去…一、项目bug
1、多人开发的项目冲突
2、相关框架的的运用
3、后台数据的处理
4、antd框架日期框的回显
5、上传图片的回显
6、请求的端口号不一致需要做前端反向代理
二、项目用到的技术栈
reactts来进行开发后台后台用到的工具则是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.ItemFieldType label上传封面图 namedepartmentImgCrop rotationSliderUploadlistTypepicture-cardfileList{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 前缀了
文章到这里就结束啦大家多多关注哦
