当前位置：首页 > news >正文

vue项目前后端分离设计

news 来源：原创 2025/6/23 20:09:37

在Vue前端架构中，通过分层结构和模块化设计实现高效的前后端分离，需要系统性规划各层职责、接口管理和数据流控制。以下是结合业界最佳实践的完整方案：

一、分层架构设计

1. 分层结构（自上而下）

层级	职责	示例	技术实现建议
视图层	UI渲染/用户交互	`*.vue`单文件组件	组合式API + Pinia状态绑定
服务层	API调用/业务逻辑聚合	`user.service.js`	Axios实例封装 + 拦截器
数据模型层	数据格式定义/类型校验	`models/User.ts`	TypeScript接口 + Zod校验
工具层	通用工具函数/常量	`utils/auth.js`	纯函数 + Tree-shaking优化
基础设施层	HTTP客户端/全局配置	`http-client.js`	Axios + 请求重试机制

**2. 模块化设计原则

按功能垂直拆分：

src/
├── modules/
│   ├── user/          # 用户相关功能
│   │   ├── UserList.vue
│   │   ├── user.api.js
│   │   └── user.store.js
│   └── product/       # 商品模块

公共模块水平复用：

src/
├── shared/
│   ├── components/    # 全局通用组件
│   └── hooks/         # 可复用逻辑

二、API调用标准化实现

1. HTTP客户端封装

// src/core/http-client.js
import axios from 'axios';const http = axios.create({baseURL: import.meta.env.VITE_API_BASE,timeout: 10000,
});// 请求拦截器（添加Token）
http.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${getToken()}`;return config;
});// 响应拦截器（统一错误处理）
http.interceptors.response.use(response => response.data,error => {if (error.response?.status === 401) {logout();}return Promise.reject(error.response?.data?.message || error.message);}
);export default http;

2. 服务层组织

// src/modules/user/user.api.js
import http from '@/core/http-client';export const UserService = {getList: (params) => http.get('/users', { params }),create: (data) => http.post('/users', data),// ...
};// 在组件中使用
import { UserService } from '@/modules/user/user.api';
UserService.getList({ page: 1 });

3. 类型安全的API契约

// src/models/user.ts
export interface User {id: number;name: string;email: string;
}// 使用Zod进行运行时校验
import { z } from 'zod';
export const UserSchema = z.object({id: z.number(),name: z.string().min(2),
});

三、前后端分离关键实践

1. 接口文档自动化

OpenAPI/Swagger：后端提供swagger.json

前端Mock方案：

// vite.config.js
import { defineConfig } from 'vite';
import { createMockServer } from 'vite-plugin-mock';export default defineConfig({plugins: [createMockServer({mockPath: 'mock',enable: process.env.NODE_ENV === 'development',}),],
});

2. 状态管理设计

// src/modules/user/user.store.js
import { defineStore } from 'pinia';
import { UserService } from './user.api';export const useUserStore = defineStore('user', {state: () => ({list: [],current: null,}),actions: {async fetchUsers(params) {this.list = await UserService.getList(params);},},
});

3. 依赖注入控制

// src/core/dependency-injection.js
export const container = {services: {user: () => import('@/modules/user/user.api'),},
};// 使用时动态加载
const { UserService } = await container.services.user();

四、稳定性保障策略

1. API容错机制

策略	实现方式	代码示例
请求重试	指数退避算法	`axios-retry` 插件
缓存降级	本地存储+过期时间	`localStorage + SWR`
熔断机制	错误率阈值控制	`@nestjs/circuit-breaker`

2. 监控与日志

// 请求日志拦截器
http.interceptors.request.use(config => {console.log(`[API] ${config.method?.toUpperCase()} ${config.url}`);return config;
});// Sentry错误上报
import * as Sentry from '@sentry/vue';
Sentry.captureException(error);

3. 版本兼容方案

API URL设计：
- /v1/users
- /v2/users

五、可维护性优化

1. 代码生成工具

OpenAPI生成：使用openapi-generator-cli自动生成API客户端

npx openapi-generator-cli generate \-i http://api/swagger.json \-g typescript-axios \-o src/api-client

2. 架构约束检查

ESLint规则：

{"rules": {"no-restricted-imports": ["error", {"patterns": ["@/views/*/*/api"] // 禁止视图层直接调用API}]}
}

3. 文档自动化

JSDoc生成：

/*** 获取用户列表* @param {Object} params - 查询参数* @param {number} params.page - 页码* @returns {Promise<User[]>}*/
export function getUsers(params) { ... }

六、性能优化补充

API请求合并：

// 使用GraphQL或BFF层聚合请求
query {user { id name }products { id price }
}

按需加载模块：

// 动态导入服务
const UserService = () => import('@/modules/user/user.api');

七、演进路线建议

初级阶段：规范API调用层，统一错误处理
中级阶段：引入类型系统（TypeScript）和自动化Mock
高级阶段：实现BFF层（Backend for Frontend）做数据聚合

通过以上分层设计和模块化方案，可实现：

前后端完全解耦：通过API契约和Mock数据并行开发
调用稳定性提升：错误处理覆盖率达到95%+
维护成本降低：类型系统减少30%以上低级错误

vue项目前后端分离设计

在Vue前端架构中，通过分层结构和模块化设计实现高效的前后端分离，需要系统性规划各层职责、接口管理和数据流控制。以下是结合业界最佳实践的完整方案： 一、分层架构设计 1. 分层结构（自上而下） 层级职责示例技术实现…...

编程日记 2025/6/23 20:09:37

Steam游戏服务器攻防全景解读——如何构建游戏级抗DDoS防御体系？

Steam游戏服务器的DDoS攻防体系设计，从协议层漏洞利用到业务连续性保障，深度拆解反射型攻击、TCP状态耗尽等7类威胁场景。基于全球15个游戏厂商攻防实战数据，提供包含边缘节点调度、AI流量指纹识别、SteamCMD加固配置的三维防护方案&#xff…...

编程日记 2025/6/21 22:42:38

七、web自动化测试03

目录一、xpath定位1. 属性定位2.属性与逻辑结合3. 属性与层级结合二、cookie1. 验证码处理方案2. cookie3. 案例：cookie跳过登录三、pytest1. 介绍及安装2. 定义用例3. 执行测试用例3.1 命令行运行3.2 配置文件运行3.3 项目配置文件config.py 4. 参数化5. 断言6.…...

编程日记 2025/6/22 12:24:19

企业级AI开发利器：Spring AI框架深度解析与实战

企业级AI开发利器：Spring AI框架深度解析与实战一、前言：Java生态的AI新纪元在人工智能技术爆发式发展的今天，Java开发者面临着一个新的挑战：如何将大语言模型（LLMs）和生成式AI（GenAI&#…...

编程日记 2025/5/30 19:18:21

docker-compose安装RustDesk远程工具

以下是使用 docker-compose 部署 RustDesk 服务端（ID服务器 hbbs + 中继服务器 hbbr）的完整流程： 1. 创建 docker-compose.yml mkdir -p ~/rustdesk && cd ~/rustdesk vi docker-compose.ymlversion: 3.8services...

编程日记 2025/5/29 17:33:25

Qt基础009(HTTP编程和QJSON)

文章目录软件开发网络架构BS架构/CS架构 HTTP基本概念QT的HTTP编程JSON数据概述QT生成JSON数据QT解析JSON数据软件开发网络架构 BS架构/CS架构在计算机网络和软件开发中，CS架构（Client-Server Architecture，客户端-服务器架构&#x…...

编程日记 2025/6/22 6:00:57

学习整理在centos7上安装mysql8.0版本教程

学习整理在centos7上安装mysql8.0版本教程查看linux系统版本下载mysql数据库安装环境检查解压mysql安装包创建MySQL需要的目录及授权新增用户组新增组用户配置mysql环境变量编写MySQL配置文件初始化数据库初始化msyql服务启动mysql修改初始化密码配置Linux 系统服务工具，使My…...

编程日记 2025/5/31 10:05:58

第R4周：LSTM-火灾温度预测

文章目录一、前期准备工作1.导入数据2. 数据集可视化二、构建数据集1. 数据集预处理2. 设置X, y3. 划分数据集三、模型训练1. 构建模型2. 定义训练函数3. 定义测试函数4. 正式训练模型四、模型评估1. Loss图片2. 调用模型进行预测3. R2值评估总结： &#x1f36…...

编程日记 2025/6/23 20:04:48

Linux文件管理完全指南：从命名规则到压缩解压

一、文件命名规则：避免踩坑的关键 1. 允许的字符与命名建议允许字符：除 / 外所有字符均可使用，但需避免 <, >, ?, * 等特殊符号。命名建议： 统一使用小写字母（Linux严格区分大小写）。用下划线…...

编程日记 2025/5/30 5:09:53

react和vue的区别之一

前言小编在学react的时候，发现react在使用ant-design组件的from表单，有点惊奇，跟vue差别确实有点大。 1-React 与 Vue 表单处理对比指南核心差异概述特性VueReact (Ant Design Form)数据定义必须显式定义 reactive/ref通过 name 隐式定…...

编程日记 2025/6/23 1:45:35

电力系统最小惯性常数解析

1. 什么是惯性常数？ 电力系统的惯性常数（Inertia Constant）可以理解为系统抵抗频率突变的能力，类似于“惯性”。传统电力系统中，同步发电机（如火电厂）的旋转部件（如涡轮、转子&…...

编程日记 2025/6/22 11:11:08

Linux软硬链接和动静态库(20)

文章目录前言一、软硬链接基本认知实现原理应用场景取消链接ACM时间二、动静态库认识库库的作用三、制作静态库静态库的打包静态库的使用四、制作动态库动态区的打包动态库的链接与使用动态库的链接原理总结前言我有款非常喜欢玩的游戏，叫做《饥荒》&#xf…...

编程日记 2025/5/31 1:35:25

FX10（CYUSB4014）USB3.2（10Gbps）开发笔记分享（1）：硬件设计与开发环境搭建

作者：Hello，Panda 大家早上好，中午好，下午好，晚上好，熊猫君又来了。这次计划做一个连载，大概6期左右，主要介绍英飞凌最新的FX5/10/20的器件应用。目前，熊猫君手上调试的…...

编程日记 2025/5/29 13:37:29

【工具变量】上市公司-“链主“企业相关数据（2001-2024年）

上市公司的"链主企业"（Anchor Enterprise）指在其供应链中具有较较高中心度的公司。这些公司通过其规模、技术优势、资源整合能力等，影响和带动整个产业链的发展与运作。这些企业往往是供应链中最重要的节点，其决策和行为…...

编程日记 2025/6/23 6:35:04

Qt知识点1『16进制数值与文本互相转换』

工作中可能会遇到QByteArray保存着16进制的数据，例如网络传输中的数据在抓包软件下就会显示为16进制的文本格式。本次是在串口通讯首发消息时遇到的这类转换问题，做一下记录。一、16进制的文本字符串如何转换数值解决：形如QString("0…...

编程日记 2025/6/20 2:01:06

# MongoDB Shard Cluster 集群规划 132上面单独安装mongos 在 1,2,3上面安装shard1和config 在 4,5,6上面安装shard2 节点host如下 172.20.192.20 member1.blockin.ai 172.20.192.21 member2.blockin.ai 172.20.192.31 member3.blockin.ai …...

编程日记 2025/6/22 11:29:07

Pycharm（六）:可变与不可变类型

一、引用在java中既有值传递，也有引用传递，我们思考一下在python中值的传递方式是哪种类型呢？答案是引用传递。概述： Python中存储变量是需要占用内存空间的，为了更好地管理这些空间，每块空间都是有自己的地址值的。格式： id(变量名/值) 可以查看变量/…...

编程日记 2025/5/29 16:52:34

每日算法-250425

每日算法打卡 - 2025年4月25日记录今天完成的几道 LeetCode 算法题，分享解题思路和代码。 2178. 拆分成最多数目的正偶数之和题目解题思路贪心算法解题过程题目要求我们将一个偶数 finalSum 拆分成尽可能多的不同正偶数之和。为了使拆分出的数字数量…...

编程日记 2025/6/23 11:22:08

github把自己的jar包发送到maven中央仓库

maven中央仓库注册账号《Maven中央仓库官网》注册账号直接使用github账号他会自动帮我们创建一个github的命名空间获取自己的User Token 切记立马复制、保存username和password，后面maven的settings.xml会用到，因为这个页面会在一分钟以后自动关闭…...

编程日记 2025/6/2 4:28:15

链表系列一＞两两交换链表中的结点

目录题目：解析：代码： 题目： 链接: link 解析： 代码： /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int va…...

编程日记 2025/6/20 2:06:18

【深度强化学习 DRL 快速实践】异步优势演员评论员算法 (A3C)

Asynchronous Advantage Actor-Critic A3C (2016, DeepMind) 异步优势演员评论员算法 (A3C): 继承 actor-critic 的优势，同时通过异步多线程 (团队作战) 加速了训练过程 model-free, actor-critic 核心改进点说明异步并行训练 – Asynchronous (无经验回放)通过多个…...

编程日记 2025/6/22 1:24:23

240425 leetcode exercises

240425 leetcode exercises jarringslee 文章目录 240425 leetcode exercises[147. 对链表进行插入排序](https://leetcode.cn/problems/insertion-sort-list/)🔁插入排序 [1721. 交换链表中的节点](https://leetcode.cn/problems/swapping-nodes-in-a-linked-list…...

编程日记 2025/6/19 19:56:06

找三维gis开发的工作，Mapbox要学到什么程度？

Mapbox 是⼀个可以创建各种⾃定义地图的⽹站，如 Pinterest、Evernote、Github、500px 等⼤牌都使⽤ Mapbox 创建⾃⼰的地图，Mapbox 宣称要构建世界上最漂亮的地图。已为 Foursquare、Pinterest、Evernote、⾦融时报、天⽓频道、优步科技等公司的⽹站提供…...

编程日记 2025/6/20 23:01:30

ThinkPHP6模型中多组条件逻辑或Or查询的使用

直接进入正题，如我们的查询条件是这样的： (age > 20 and job_id 3) or (sex 1 and age < 20) 上面两组数据之间是 Or 的关系。可使用两个闭包进行查询，代码如下： $map1 [age > 30,sex > $id,];$map2 …...

编程日记 2025/6/20 23:46:35

《AI大模型趣味实战》基于RAG向量数据库的知识库AI问答助手设计与实现

基于RAG向量数据库的知识库AI问答助手设计与实现引言随着大语言模型（LLM）技术的快速发展，构建本地知识库AI问答助手已成为许多企业级应用的需求。本研究报告将详细介绍如何基于FLASK开发一个使用本地OLLAMA大模型底座的知识库AI问答助手&…...

编程日记 2025/6/22 20:43:50

netcore8.0项目发布到centos，利用nginx反向代理（宝塔面板篇）

1、发布netcore项目在program.cs中配置nginx代理 // 添加Nginx反向代理支持 builder.Services.Configure<ForwardedHeadersOptions>(options > {options.ForwardedHeaders ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;options.KnownNetwo…...

编程日记 2025/6/21 5:15:16

项目笔记1：通用 Service的常见方法

通用 Service 通常封装了常见的业务逻辑操作，以提高代码的复用性和可维护性。不同的框架和业务场景下，通用 Service 的方法会有所差异，但一般都会包含一些基本的增删改查（CRUD）操作，以下为你详细介绍&#…...

编程日记 2025/6/22 5:58:52

VUE3父子组件defineModel动态值获取及处理

需求：子组件获取父组件value值时需处理，子组件加载时用onMounted，value变化时用watch 父组件： <template><div><p>父组件的值: {{ parentValue }}</p><button click"changeValue">改变…...

编程日记 2025/6/1 1:43:01

CUDA编程之Grid、Block、Thread线程模型

一、线程模型：Grid、Block、Thread概念 ‌1. 层级定义‌ ‌Thread（线程）‌ CUDA中最基本的执行单元，对应GPU的单个CUDA核心（SP）。每个线程独立执行核函数指令，拥有独立的寄存器和局部内存空间‌。 ‌Block（线程块）‌ 由多个线程组成（通常为32的倍数），是逻辑上的并…...

编程日记 2025/5/30 21:19:14

BT151-ASEMI无人机专用功率器件BT151

编辑：ll BT151-ASEMI无人机专用功率器件BT151 型号：BT151 品牌：ASEMI 封装：TO-220F 批号：最新引脚数量：3 特性：单向可控硅工作温度：-40℃~150℃ ‌BT151单向可控硅产品解…...

编程日记 2025/5/31 4:14:45

无人机环境适应性与稳定性技术要点！

1. 环境感知与传感器融合多传感器集成：结合IMU（惯性测量单元）、GPS、气压计、激光雷达（LiDAR）、视觉传感器（RGB/深度相机）、超声波等，实现冗余数据采集。实时环境建模&#xff1…...

编程日记 2025/6/22 23:02:45

BiliNote：开源的AI视频笔记生成工具，让知识提取与分享更高效——跨平台自动生成结构化笔记，实现从视频到Markdown的智能转化

引言：视频学习的痛点与BiliNote的解决方案随着知识视频化趋势的加速，B站、YouTube等平台成为学习与信息获取的重要渠道，但手动记录笔记耗时低效、信息碎片化等问题依然突出。BiliNote的出现，通过AI驱动的自动化流程，将视频内容转化为结构清晰的Markdown笔记，支持截图插…...

编程日记 2025/6/22 9:52:42

HTMLcss实现网站抽奖

代码由 HTML、CSS 和 JavaScript 三部分组成，HTML 负责页面的结构搭建，CSS 负责页面的样式设计，JavaScript 负责实现抽奖的交互逻辑。 HTML 部分 <!DOCTYPE html> <html lang"en"><head><meta charset"…...

编程日记 2025/6/1 21:34:18

字节：视频一致性生成论文速读

一、引言 Phantom: Subject-Consistent Video Generation via Cross-Modal Alignment 是北京字节跳动智能创作团队提出的一种新型视频生成方法，旨在解决主体一致性视频生成的难题。该方法通过平衡文本和图像的双重模态提示，实现文本和视觉内容的深度对齐…...

编程日记 2025/5/31 3:07:33

JAVA常用分布式锁Redisson

1. 加锁过程底层命令与数据结构 Redis 数据结构：使用 Hash 结构存储锁信息，Key 为锁名称，Field 为客户端唯一标识（如 UUID 线程ID），Value 为锁的重入次数。 Lua 脚本原子性：通过 Lua 脚本在…...

编程日记 2025/6/22 13:15:40

9.ArkUI List的介绍和使用

ArkUI List 组件详解与使用指南 List 是 ArkUI（HarmonyOS 开发框架）中用于展示长列表数据的高性能滚动容器组件。以下是 List 的详细介绍和使用方法。基本介绍 List 组件特点： 支持垂直/水平滚动高性能渲染（仅渲染可视区域内…...

编程日记 2025/5/31 15:49:08

深度解析：从12306看混合云架构下的高并发系统设计

作为曾参与12306余票查询系统高并发升级的技术从业者，笔者注意到公众对于12306底层技术常存在认知盲区。为破解这一迷思，特此分享十年前的架构解密文献（该技术之前名叫 gemfire 现已晋升为Apache顶级项目Geode，代码库详见&#xf…...

编程日记 2025/6/1 22:09:25

解决 EasyExcel 填充图片占满单元格问题

本篇主要记录解决使用EasyExcel 填充图片的两个问题： 1. 如何根据标识填充 2.如果完全占满要显示的单元格 import com.alibaba.excel.EasyExcel; import com.alibaba.excel.ExcelWriter; import com.alibaba.excel.metadata.data.ImageData; import com.alibaba.e…...

编程日记 2025/6/3 17:25:00

汽车售后 D - PDU 和 J2543 详细介绍

D - PDU（Diagnostic Protocol Data Unit） 定义与标准1：D - PDU 是指诊断协议数据单元，ISO 22900 - 2 - 2017 D - PDU - API 是针对道路车辆的模块化车辆通信接口（MVCI）中诊断协议数据单元的编程接口标准。…...

编程日记 2025/6/19 19:51:43

【linux】Chrony服务器

简介 1.1 时间的重要性由于 IT 系统中，准确的计时非常重要，有很多种原因需要准确计时： 在网络传输中，数据包括和日志需要准确的时间戳各种应用程序中，如订单信息，交易信息等都需要准确的时间戳 1.2 时区…...

编程日记 2025/6/2 10:24:37

深度剖析！GPT-image-1 API 开放对 AI 绘画技术生态的冲击！

4月24日凌晨，OpenAI正式发布了全新的图像生成模型“gpt-image-1”，并通过API向全球开发者开放使用，这意味着其GPT-4o的图像生成能力正式向开发者开放！ 在这之前，GPT-4o的图像生成功能于今年3月25日由 OpenAI 创始人兼 …...

编程日记 2025/6/23 11:14:38

天能资管（SkyAi）：精准投资匹配，定制资产配置新体验

在资产配置领域,随着市场环境的日益复杂和投资者需求的日益多样化,个性化和精准化已成为投资者最为关注的核心诉求。天能资管(SkyAi)作为新加坡BEAVER TOKEN基金会旗下的科技先锋,凭借其强大的AI技术和丰富的市场经验,创新性地推出了精准投资匹配服务,为投资者带来了前所未有的…...

编程日记 2025/6/19 22:38:12

volatile缓存可见性实现原理

1.缓存一致性问题在多核处理器架构中，每个核心都有自己的缓存（Cache），而主内存是所有核心共享的。当一个线程在某个核心上修改了一个共享变量时，这个修改可能只会更新到该核心的缓存中，并不会立刻写回到主…...

编程日记 2025/5/31 8:13:50

【计算机视觉】CV实战- 深入解析基于HOG+SVM的行人检测系统：Pedestrian Detection

深入解析基于HOGSVM的行人检测系统：从理论到实践技术核心：HOGSVM检测框架HOG特征原理SVM分类器项目架构与数据准备INRIA Person数据集目录结构实战指南：从零构建检测系统环境配置完整训练流程检测应用关键技术问题与解决方案1. 难例挖掘不…...

编程日记 2025/6/3 3:41:40

HDRnet——双边滤波和仿射变换的摇身一变

主页：Deep Bilateral Learning paper：https://groups.csail.mit.edu/graphics/hdrnet/data/hdrnet.pdf coeffs 这部分的处理对象是低分辨率图，利用CNN进行特征提取（局部和全局），最后fuse得到grid&#xff…...

编程日记 2025/6/2 5:53:14

Spring的xxxAware接口工作原理-笔记

1.Aware 接口的工作原理 Spring 提供了多个 XXXAware 接口（如 ApplicationEventPublisherAware、ApplicationContextAware、BeanFactoryAware 等），这些接口的核心作用是让 Bean 在初始化过程中自动获取特定的依赖。实现 Aware 接口的 Bean…...

编程日记 2025/6/22 20:43:50

flume整合Kafka和spark-streaming核心编程

flume整合Kafka 需求1：利用flume监控某目录中新生成的文件，将监控到的变更数据发送给kafka，kafka将收到的数据打印到控制台： 1.查看topic 2.编辑flume-Kafka.conf，并启动flume 3.启动Kafka消费者 4.新增测试数据 5.查…...

编程日记 2025/6/23 10:43:05

第十四届蓝桥杯刷题——day20

第十四届蓝桥杯刷题——day20 引言题目一：工作时长题目二：与或异或题目三：翻转题目四：阶乘的和题目五：公因数匹配附录：源码gitee仓库引言蓝桥杯C研究生组（河北赛区）快要开赛了&…...

编程日记 2025/6/2 20:56:54

Python MCP客户端SDK实现

以下是一个用于与大模型MCP协议交互的Python客户端SDK实现： ```python import json import requests import uuid from typing import Dict, List, Any, Optional, Union from enum import Enum from datetime import datetime class MCPTaskType(Enum): TEXT_GENERATION…...

编程日记 2025/6/21 12:33:12

使用el-table表格动态渲染表头数据之后，导致设置fixed的列渲染出现问题

问题如下： 解决方法： 使用$nextTick和v-if，让el-table在页面渲染完成之后再显示 <el-table v-if"visile"></el-table> 获取数据的方法 getdata(){ //这里处理数据 this.visilefalse //不显示table组件 this.$nex…...

编程日记 2025/5/31 18:50:25