vue3 ts pinia openapi vue-query pnpm docker前端架构小记

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-router4
  • UI组件库 - element-plus
  • 全局数据共享 - pinia
  • 自动生成api - openapi
  • 网络请求 - axios
  • 数据请求利器 - vue-query
  • 通用hook - vueuse
  • hack - babel
  • 代码检查 - eslint
  • ts代码检查插件 - typescript-eslint
  • 代码美化 - prettier
  • git钩子 - husky
  • commit格式化 -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 request<Api.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 request<Api.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.前端架构源码

点此查看前端架构源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/138500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java获取近期视频流关键帧与截图

1、背景 最近在做视频转发的开发时&#xff0c;遇到一个问题&#xff0c;前端订阅播放h264视频流时&#xff0c;有时会出现一段时间黑屏&#xff0c;经过测试发现是没有收到关键帧&#xff0c;只有第一帧是关键帧才能保证后续播放正常。所以后端需要实现一个功能&#xff0c;就…

Verilog 之 initial 模块与always 模块的用法与差异

文章目录 initial语法和用法特点和注意事项用途 always语法和用法特点和注意事项用途 二者差异 initial 在 Verilog 中&#xff0c;initial 块是用来在模拟开始时执行一次性初始化操作的一种建模方式。它通常用于模拟初始条件或进行一次性的初始化设置&#xff0c;而且只会在模…

经典OJ题:奇偶链表

目录 题目&#xff1a; 示例&#xff1a; 解题思路&#xff1a; 方法一&#xff1a;双链表链接法 图例&#xff1a; 代码演示&#xff1a; 解题效果&#xff1a; 方法二&#xff1a;奇偶指针 图例&#xff1a; 代码演示&#xff1a; 题目&#xff1a; 给定单链表…

LeetCode:2300. 咒语和药水的成功对数(C++)

目录 2300. 咒语和药水的成功对数 题目描述&#xff1a; 实现代码与解析&#xff1a; 二分 原理思路&#xff1a; 2300. 咒语和药水的成功对数 题目描述&#xff1a; 给你两个正整数数组 spells 和 potions &#xff0c;长度分别为 n 和 m &#xff0c;其中 spells[i] 表…

设计模式-创建型

文章目录 设计模式-创建型工厂模式简单工厂工厂方法抽象工厂 建造者模式单例模式原型模式 设计模式-创建型 本章主要介绍有关对象创建的几种设计模式。 工厂模式 工厂模式&#xff1a;封装了对象的创建&#xff0c;使得获得对象更加符合实际逻辑 简单工厂 将所有对象的生产…

栈 和 队列

什么是栈? 一种特殊的线性表&#xff0c;只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出&#xff08;LIFO - Last In First Out&#xff09;的原则。   从数据结构的角度来看&…

使用 pubsub-js 进行消息发布订阅

npm 包地址 github 包地址 pubsub-js 是一个轻量级的 JavaScript 基于主题的消息订阅发布库 &#xff0c;压缩后小于1b。它具有使用简单、性能高效、支持多平台等优点&#xff0c;可以很好地满足各种需求。 功能特点&#xff1a; 无依赖同步解耦ES3 兼容。pubsub-js 能够在…

基于Quartz实现动态定时任务

生命无罪&#xff0c;健康万岁&#xff0c;我是laity。 我曾七次鄙视自己的灵魂&#xff1a; 第一次&#xff0c;当它本可进取时&#xff0c;却故作谦卑&#xff1b; 第二次&#xff0c;当它在空虚时&#xff0c;用爱欲来填充&#xff1b; 第三次&#xff0c;在困难和容易之…

vue3+vite搭建后台项目-3 使用自定义插件批量注册全局组件

使用自定义插件批量注册全局组件 1.在components文件夹目录下创建一个index.ts文件&#xff1a;用于注册components文件夹内部全部全局组件 //引入组件 import SvgIcon from ./SvgIcon/index.vue import type { App, Component } from vue const components: { [name: string]…

Flink SQL -- 概述

1、Flink SQL中的动态表和连续查询 1、动态表&#xff1a; 因为Flink是可以做实时的&#xff0c;数据是在不断的变化的&#xff0c;所以动态表指的是Flink中一张实时变换的表&#xff0c;表中会不断的有新的数据。但是这张表并不是真正的物理表。 2、连续查询&#xff1a; 连续…

王道考研--》顺序表课后习题C语言代码实现(冲刺)

考研是许多计算机科学专业学生追求高学历、寻求更好就业前景的途径。在考研过程中&#xff0c;数据结构是一个非常重要的科目&#xff0c;而代码实现题更是其中的难点之一。在这篇文章中&#xff0c;我们将探讨如何通过实现数据结构代码问题来提升考研成绩。无论您是否有编程经…

python 调用Oracle有返回参数的存储过程

python 调用Oracle有返回参数的存储过程 1. 存储过程 create or replace procedure pro_test_args(a in integer,b in integer, c out integer) is beginc: a * b ;end pro_test_args;2. Python调用存储过程 import cx_Oracle import os import sys# 连接数据库 #conn cx_O…

C++ 常用方法,刷oj必备(持续更新!!!)

输出结果保留小数点后n位(4位) #include<iostream> #include <iomanip> using namespace std;int main(){double s ;cin >> s ;cout<<fixed << setprecision(4) << s ;return 0; } 类型转换 string 转 int #include <iostream> …

ClickHouse主键索引最佳实践

在本文中&#xff0c;我们将深入研究ClickHouse索引。我们将对此进行详细说明和讨论&#xff1a; ClickHouse的索引与传统的关系数据库有何不同ClickHouse是怎样构建和使用主键稀疏索引的ClickHouse索引的最佳实践 您可以选择在自己的机器上执行本文给出的所有Clickhouse SQL…

RabbitMQ集群

RabbitMQ概述 1.RabbiMQ简介 RabbiMQ是⽤Erang开发的&#xff0c;集群⾮常⽅便&#xff0c;因为Erlang天⽣就是⼀⻔分布式语⾔&#xff0c;但其本身并不⽀持负载均衡。支持高并发&#xff0c;支持可扩展。支持AJAX&#xff0c;持久化&#xff0c;用于在分布式系统中存储转发消…

【CocoaPods安装环境和流程以及各种情况】

CocoaPods 环境HomebrewRubyrbenvRubyGems 和 Bundler安装Ruby管理Ruby更新Ruby替换Ruby镜像方式1方式2 CocoaPods安装CocoaPodsCocoaPods使用安装的一些问题单元测试引用问题 参考的链接 环境 Homebrew $ brew --config *可以发现打印有下面一行&#xff1a; Homebrew Ruby: …

Pandas groupby方法中的group_keys属性

pandas版本1.5.3中groupby方法&#xff0c;当设置group_keysTrue时&#xff0c;会以groupby的字段为第一级索引&#xff0c;如下述代码中time_id作为第一级索引&#xff0c;同时保留了原dataframe&#xff08;df&#xff09;中的索引作为第二级索引。 >>> df.groupby…

293_C++_告警类

2、IncPos S32 AlarmList::IncPos(U32 *pu32Pos, U32 *pu32Cycle) {if((pu32Pos == NULL) || (pu32Cycle == NULL))</

《013.Springboot+vue之旅游信息推荐系统》【前后端分离有开发文档】

《013.Springbootvue之旅游信息推荐系统》【前后端分离&有开发文档】 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;idea jdk1.8 maven MySQL 前后端分离; 后台&#xff1a;SpringBootMybatisMySQL; 前台&#xff1a;Vue; [2]功能模块展…

Python+requests+unittest+excel接口自动化测试框架

一、框架结构&#xff1a; 工程目录 二、Case文件设计 三、基础包 base 3.1 封装get/post请求&#xff08;runmethon.py&#xff09; impimport jsonclass RunMethod:def post_main(self,url,data,headerNone):res Noneif header !None: res requests.post(urlurl,datadata,…