【起步】常规软件系统架设方案
注:本文的技术选型存在时间的局限性,请关注新技术的发展,再做抉择。
一、系统划分
在常规的软件系统中,一般包含三个独立的系统:
- 后台管理系统
- 官网系统
- 业务系统
如果是一些比较复杂的软件系统,还需拆解出中台管理系统,用于专门处理面向业务系统的各类数据管理;在业务系统中,也需根据不同的用户设计不同的业务子系统。
1.1 后台管理系统
- 负责管理整个软件系统内的数据,以及对各个功能模块进行权限控制等。
1.2 官网系统
- 负责品牌宣发,通常用于增加品牌曝光度,可以将品牌的一些重要的宣传信息、品牌能力展示到上面,方便客户进行了解。
1.3 业务系统
- 负责处理具体的业务。业务系统内的功能、子系统划分通常是根据公司具体业务需要来设计。
二、系统概要
2.1 后台管理系统
后台管理系统一般包含如下三类模块,每一类模块大下包含相关的子模块:
- 基本模块
- 系统管理(含权限管理、角色管理、用户管理等子模块)。
- 通用模块
- 官网管理(包含官网的各种可配置化信息的管理,具体功能根据实际情况确定)。
- 会员管理(管理业务系统的会员机制)。
- 业务模块(根据不同的业务、资源,设计对应的管理模块)
- 商品管理
- 工单管理
- ...
2.2 官网系统
官网包含的是品牌宣发信息,通常包含如下信息模块:
- 公司简介
- 业务介绍
- 招聘信息
- 联系我们
- ...
2.3 业务系统
业务系统是比较庞杂的系统,需要根据实际业务来设计专门的功能。通常,在进行业务系统设计之前,要进行充分的需求调研,掌握实际生产中的流程,把这个流程抽象、归纳、总结。
根据不同的使用场景、承载客户端,可以将业务系统大致分为如下几类:
- PC 桌面应用
- PC Web 应用
- 移动端 H5 应用
- 移动端小程序应用
- 移动端 APP 应用
- 微信公众号/服务号
通常,在微信公众号/服务号中会引用一些移动端H5页面来共同实现一些业务功能。
三、技术选型
整个系统采用前后端分离架构,因此技术选型分为前端选型和后端选型,此外,为了方便部署应用和代码托管,还需要选择代码托管的技术和CICD技术。
3.1 后端技术
选择技术栈:NestJS。
选择原因:Node 版的 Spring Boot,目前热度高,社区活跃,可用插件丰富。
3.2 前端技术
3.2.1 官网系统
选择技术栈:Nuxt3。
选择原因:基于 Vue3 + Vite 技术栈的 SSR 框架,能非常好地支持 SEO,开发体验也不错。
Q:为什么不选择 next?
A:主流 SSR 技术栈,且个人更倾向于 Vue 技术栈。
3.2.2 业务系统
业务系统需要根据不同的平台选择不同的技术栈。
- PC Web 应用(含中后台管理系统)
- 基础框架:Vue3
- 构建工具:Vite
- 组件库:Ant Design of Vue
- 状态管理:Pinia
- 路由管理:Vue Router
- HTTP请求:Axios
- WebSocket:Socket.IO
- CSS预处理:Less
自己封装了一套中后台系统的常用高阶组件。没有选择用 antd Pro,因为太重了,且个人不喜欢 React。
-
PC 桌面应用
- 基础平台:Electron
- 其他技术与
PC Web 应用一致
-
移动端跨平台应用
- 基础平台:Uni App
- 基础框架:Vue3
- 构建工具:Vite
- 组件库:uView
- 状态管理:Pinia
- 路由管理:内置路由
- HTTP请求:内置
request - WebSocket:内置
WebSocket - CSS预处理器:SASS
-
移动端 H5 应用
- 主要采用移动端跨平台应用技术栈。
- 路由管理:Vue Router
-
移动端小程序应用
- 与移动端跨平台应用技术栈相同。
-
移动端 APP 应用
- 主要采用移动端跨平台应用技术栈。
- 组件库:Uni UI
3.3 代码托管
3.4 部署方式
Docker 容器化部署。
3.5 服务器选型
我的选型:阿里云 + 阿里云OSS。云服务器用于部署应用,OSS用于静态资源存储。
四、通用功能
- 登录/注册
- 每一个端都需要提供登录功能,通常移动端可提供注册功能。
- 鉴权
- 非公开的接口都需要鉴权。
- 部分接口在提供了鉴权信息和未提供鉴权信息这两种情况下,响应的内容不同。
- 文件上传下载
- 通常,后台管理系统、业务系统涉及到一些静态文件的上传和下载。