网站后台超链接怎么做,重庆营销型网站建设沛宣,wordpress文件类型,网站建设 设计 优化 维护1.引言
开发中#xff0c;我们是否经常遇到以下痛点#xff1a;
项目越大#xff0c;启动和热更新越来越慢#xff0c;启动都要花个3-5分钟以上没有类型保障#xff0c;接口返回的Object不拿到真实数据都不知道有哪些字段#xff0c;接手别人js项目(无类型)很痛苦需要手…1.引言
开发中我们是否经常遇到以下痛点
项目越大启动和热更新越来越慢启动都要花个3-5分钟以上没有类型保障接口返回的Object不拿到真实数据都不知道有哪些字段接手别人js项目(无类型)很痛苦需要手动写很多request函数去调用api手动书写各种判断枚举值缺乏代码格式化代码错误检查git commit规范数据流要么太死板对ts支持很差(dva)要么太灵活(mobx)npm包管理问题比如多版本的npm包冲突、npm包依赖嵌套、npm僵尸包、npm依赖包平铺到nodule_modules首层手动变更接口的loading状态、手动管理modal的visible状态很多热门的开源chatgpt产品: dify、fastgpt他们都用很新的前端技术但是仍然是大批量的手写request函数手写各种枚举以及interface很痛苦
此前端架构优势以及展望如下
支持自动根据openapi生成api request函数、类型、枚举等, openapi数据格式参考支持前端工程化完美的ts开发体验ts eslint tslint prettier commitlint husky支持前端容器化(需要安装docker环境)跨环境运行同步接口请求状态实现自动loading支持接口联动方便跨父子组件刷新相关联的接口支持容器化变量注入无需前端配置文件写死方便通过 k8s 动态注入
基于以上痛点我整合了一些开源技术搭了一套脚手架供自己使用并分享给大家学习如果对你有帮助请在github上面给我一个star
俗话说王婆卖瓜自卖自夸各位大佬轻喷
openapi 规范文档对于前端来说绝对是超级省事的必须安排起来
很多细节没有在文章中提及
2.脚手架核心技术
打包编译 - vite包管理 - pnpm编程语言 - typescript前端框架 - vue3路由 - vue-router4UI组件库 - element-plus全局数据共享 - pinia自动生成api - openapi网络请求 - axios数据请求利器 - vue-query通用hook - vueusehack - babel代码检查 - eslintts代码检查插件 - typescript-eslint代码美化 - prettiergit钩子 - huskycommit格式化 -commitlint
2.自动基于后端openapi文件生成request函数
// src/core/openapi/index.ts// 示例代码
generateService({// openapi地址schemaPath: ${appConfig.baseURL}/${urlPath},// 文件生成目录serversPath: ./src,// 自定义网络请求函数路径requestImportStatement: /// reference types./typings.d.ts /\nimport request from request,// 代码组织命名空间, 例如Apinamespace: Api,
});3.调用接口示例
// HelloGet是一个基于axios的promise请求
export async function HelloGet(// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)params: Api.HelloGetParams,options?: { [key: string]: any },
) {return requestApi.HelloResp(/demo-docker/api/v1/hello, {method: GET,params: {...params,},...(options || {}),});
}// 自动调用接口获取数据
const name ref(zhangsan);
const { data, isPending, refetch } useQuery({queryKey: [helloGet, name],queryFn: () HelloGet({ name: name.value || }),
});// HelloPost是一个基于axios的promise请求
export async function HelloPost(body: Api.HelloPostParam, options?: { [key: string]: any }) {return requestApi.HelloResp(/demo-docker/api/v1/hello, {method: POST,headers: {Content-Type: application/json,},data: body,...(options || {}),});
}// 提交编辑数据
const queryClient useQueryClient();
const userStore useUserStore();
const { mutate, isPending } useMutation({mutationFn: HelloPost,onSuccess: (res) {// 第一种刷新方式修改storeuserStore.updateUserInfo({ name: res.data });// 第二种刷新方式通过清除vue-query缓存keyqueryClient.invalidateQueries({ queryKey: [helloGet] });},
});mutate({ name: lisi });4.技术说明
自动生成api request函数(openapi): 后端接入apenapi后前端可以根据openapi文件自动生成api request后端通常使用swagger转换成openapi规范供前端使用通用hook(vueuse): 一个hook工具库就是hook增强该库可以依据个人喜好选择是否使用前端日志(sentry): 暂时未集成需要进一步调研实用性和可用性
5.前端架构源码
点此查看前端架构源码
