跟前端架构说easy(3):架构设计（前端架构图怎么画）
ccwgpt 2024-09-26 07:58 30 浏览 0 评论
架构设计就好比是搭建高楼的架子，这个高楼最后什么形状、是否稳健，全部看这个架构设计这个架子的稳定性和扩展性。
团队技术栈
我们团队是在长期学习和沉淀中，逐渐形成了以uniapp和vue两大技术为主，同时保留了一定微信小程序、Android原生、iOS原生的开发能力，技术架构我主要会从uniapp和vue做说明和分析。
uniapp的架构设计
我们是使用uniapp技术，基于自己的前端开发规范，通过调用后台接口来实现我们的业务需求。
1. 网络层
网络层的设计会分为三部分，底层、过渡层、调用层，底层重点是稳定性、可扩展性，调用层的使用一定是要简单方便，所以我们会在中间层根据这个项目的要求做更多灵活的封装。这部分直接上代码：
//基础层
const baseRequest = (args) => {
//args 会有url、param、header、method等信息，
//这部分一定要充分考虑，因为底层就是地基，不可随意改变
}
//过渡层
let execApi = (url, method, param, loadingTip, hideErrorMsg = false, loginType = 1) => {
// 通过本项目的业务，参数可以细化，多增加默认值，方便调用
}
//过渡层进一步封装
let postApi = (url, param, loadingTip) => {
return execApi(url, "POST", param, loadingTip)
}
let getApi = (url, param, loadingTip) => {
return execApi(url, "GET", param, loadingTip)
}
//调用层
register:(param) => requestUtil.postApi('/api/user/register',param),2. 基础层封装
基础层的封装其实也是规范的一种，网络层+基础层是为了更好的建立统一，为业务组件的封装打下基础，让业务组件能够在多项目中快速复用，同时保持一套基础层的维护。
3. 组件封装
组件主要分为UI组件和业务组件。UI组件主要是根据某些设计的要求，实现一些界面展示。业务组件主要是针对业务的封装，能够将该业务快速复制到其他项目中使用。业务组件拥有自己所特有的UI组件、工具类以及界面，另外每个业务组件必须有使用说明的readme.md。具体结构如下图：
vue的架构设计
我们是使用antdesign和element两个UI框架，基于自己的前端开发规范，通过调用后台接口来实现我们的业务需求。vue也是做了网络层、服务层、工具层、组件等，这部分和uniapp的基本类似，就不再重复描述。
架构的目的
架构的好处有很多，比如说会给我带来稳健、可扩展的程序等等。在作者来看，架构设计的很重要的一个目的就是提高效率，作者希望用10%-20%的架构时间来赚取50%的项目时间，用赚取的项目一部分回馈到架构时间，逐渐形成良性循环。
The END
如果您觉得这篇内容对您有帮助，我想请你帮我两个小忙：
1、给作者点个赞，分享让更多的人也能看到这篇文章
2、关注头条号「前端百思说」，加入我们一起学习
点赞、转发、关注头条号，私信“学习资料”向小编索取更多VUE相关的资料
上一篇文章
相关推荐
- 如何基于Spring Security框架实现权限管理
-
SpringSecurity是一个功能强大且高度可定制的身份验证和访问控制框架，用于保护基于Spring的应用程序。SpringSecurity主要是从两个方面解决安全性问题：web请求级别：使...
- 一个轻量级 Java 权限认证框架，Sa-Token 让鉴权变得简单、优雅!
-
一、框架介绍Sa-Token是一个轻量级Java权限认证框架，主要解决：登录认证、权限认证、单点登录、OAuth2.0、分布式Session会话、微服务网关鉴权等一系列权限相关问题。官网文档:...
- 16.3K Star!简洁高效的Java权限认证与会话管理框架——Sa-Token
-
简介今天给大家推荐一个轻量级的Java权限认证框架——Sa-Token。它可以为JavaWeb应用同完整的权限认证解决方案，它的目标是简化权限管理和登录认证的流程，具备高度灵活性和简单易用的特点。S...
- 从Shiro迁移到Sa-Token:老版JeecgBoot项目权限框架平滑升级方案
-
背景介绍对于许多维护老版JeecgBoot项目的开发者来说，权限框架的升级一直是个棘手问题。这篇文章分享一种实用的方案，用于将老版JeecgBoot中的ApacheShiro替换为更现代的Sa-To...
- 刑法框架体系，对照着框架体系学习可以事半功倍哦
-
有了它，妈妈再也不用担心我司考过不啦！有了它，妈妈再也不用担心我司考过不了啦！其他部门法正在陆续整理制作中哦看不清的话请戳http://mp.weixin.qq.com/s?__biz=MzA3NDE...
- 全新体验版Windows QQ上线，实现三端统一
-
7月3日，全新体验版WindowsQQ正式上线官网，面向用户开放官方下载渠道。记者从腾讯获悉，继QQ对macOS、Linux版本进行升级后，本次Windows版本的更新，标志QQ基于NT技术架构...
- 农村自建房造价多少?包工头教你怎么算
-
通常我们在找专业人士设计农村自建房设计图时，不管你是打算建独栋一层别墅还是独栋二层别墅或是独栋三层别墅，你是否也找他们打听过相应的房屋工程造价呢？下面简单介绍一下农村自建房的傻瓜式造价估算：1、砖混结...
- QQ大会员品牌运营策划与设计（qq大会员有哪些个性装扮）
-
编辑导语：在互联网产品越来越同质化的今天，做出有差异性和符合品牌调性的设计是品牌运营过程中需要重视的问题。本文作者从QQ大会员品牌项目实践出发，分享了品牌运营设计过程中遇到的一些问题以及具体操作方案，...
- 支持鸿蒙平台，腾讯视频ovCompose跨平台框架发布
-
IT之家6月3日消息，腾讯开源今日官宣发布腾讯视频ovCompose跨平台框架，其是腾讯大前端领域Oteam中，腾讯视频团队基于ComposeMultiplatform生态推出的...
- 腾讯 QQ Mac 版推倒重做，全新 1.0 版本开启内测
-
IT之家9月1日消息，据多位IT之家小伙伴投稿，腾讯QQMac版近日迎来了全新通用版内测，版本号重新由1.0开始，目前放出的体验版为1.0.4-305。从下图可以看到，该版本在U...
- 全新体验版Windows QQ正式上线官网，实现三端统一
-
7月3日，全新体验版WindowsQQ正式上线官网，面向用户开放官方下载渠道。记者从腾讯获悉，继QQ对macOS、Linux版本进行升级后，本次Windows版本的更新，标志QQ基于NT技术架构...
- QQ，到了不能不变的境地（怎么发qq邮件到别人邮箱）
-
相比微信一个小更新，乃至一个小动作，都能上热搜的顶级热度。隔壁的老大哥QQ，显得有些冷清。即使更新再快，功能再激情，都很难引起用户们的集体讨论。机友们细想一番，咱们的老朋友QQ，有多久没上过热搜啦？真...
- 基于Electron框架全面重做:全新Linux版QQ开启公测
-
来源：快科技不久前，腾讯QQ项目组曾发布预告，宣布QQforLinux新版本即将开启公测。现在，新的Linux版QQ已经开启公测，不过目前仅支持x86架构，arm64架构还仍在适配中。与此前极为简...
- QQ全面升级?基于Electron技术的Windows内测版本预计将于明年推出
-
在2022年，作为经典的聊天软件的QQ在经历多次的功能调整后，正式选择基于新技术开发新版本的QQ。今日，据相关媒体报道，腾讯QQ项目组发布预告：QQforLinux将在本周迎来公测，全新的QQf...
- 跨平台三端重构正式统一，QQ Windows全新体验版上架官网
-
7月3日，全新体验版WindowsQQ正式上线官网，面向用户开放官方下载渠道。继QQ对macOS、Linux版本进行升级后，本次Windows版本的更新，标志QQ基于NT技术架构，实现了桌面端Q...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 如何基于Spring Security框架实现权限管理
- 一个轻量级 Java 权限认证框架，Sa-Token 让鉴权变得简单、优雅!
- 16.3K Star!简洁高效的Java权限认证与会话管理框架——Sa-Token
- 从Shiro迁移到Sa-Token:老版JeecgBoot项目权限框架平滑升级方案
- 刑法框架体系，对照着框架体系学习可以事半功倍哦
- 全新体验版Windows QQ上线，实现三端统一
- 农村自建房造价多少?包工头教你怎么算
- QQ大会员品牌运营策划与设计（qq大会员有哪些个性装扮）
- 支持鸿蒙平台，腾讯视频ovCompose跨平台框架发布
- 腾讯 QQ Mac 版推倒重做，全新 1.0 版本开启内测
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)