起凡商城
大约 4 分钟
起凡商城
前言
电商项目中的各种业务可以说是软件开发中的经典业务。比如多规格商品，优惠券，订单状态机，支付等等。每个一个经典业务都有它的设计思想，首先就是表的设计，表结构如何拆分。如果业务复杂的话还需要考虑到设计模式，比如策略模式，模板模式，状态模式，适配器模式。再深入到细节时就需要具备各种技术知识，比如ORM框架，Web框架（SpringMVC），多线程，IO，计算机基础知识，前端开发框架，UI框架等等。
而本项目没有深入到各种技术知识，不过在代码上看到也是会有注释的，主要是在于实现这些业务场景，理解其中业务设计思想。
技术栈
微信小程序端
在小程序端我选择使用京东的Taro小程序开发框架。其实采用Taro，Uni-App，微信小程序官方语法这三个框架开发并没有多大的差别。它们的配置，目录结构，API，都是遵循统一的规范。主要差别是在于Taro对于Vue3+TypeScript支持较好。
| 技术 | 说明 | 官网 |
|---|---|---|
| Taro | 小程序统一开发框架 | https://docs.taro.zone/ |
| Vue3 | Vue 基于标准 HTML 拓展了一套模板语法。Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM | https://cn.vuejs.org/ |
| NutUI | 支持TypeScript提示的TaroUI组件库，80+ 高质量组件，覆盖移动端主流场景 | https://nutui.jd.com/taro/vue/4x/#/zh-CN/guide/intro |
| Pinia | 全局状态管理框架，支持TypeScript类型提示 | https://pinia.web3doc.top/ |
| TypeScript | 让 JS 具备类型声明 | https://www.typescriptlang.org/ |
| ESLint | 语法校验和格式整理 | https://eslint.org/ |
Java服务端
以我做过十几个小程序项目和实际工作的经验来说，实际上大部分的需求都是增删改查，我前三年的所有项目的ORM框架都是选用MyBatis（Plus）。每次写动态查询、多表查询、字段映射、字段修改（增加/删除/修改）都需要耗费很多精力去修改Mapper。特别是当需求比较多时，大量的时间被这种无聊地增删改查SQL占用，写代码就变得很无趣。
最近我发现了一个国产的ORM框架Jimmer，它和不仅有Mybatis的灵活也有JPA的简便，非常适合自己开发项目。
| 技术 | 说明 | 官网 |
|---|---|---|
| SpringBoot3 | Web应用开发框架，需要JDK17及以上版本 | https://spring.io/projects/spring-boot |
| SaToken | 一个轻量级 Java 权限认证框架，主要解决：登录认证、权限认证、单点登录、OAuth2.0、分布式Session会话、微服务网关鉴权 等一系列权限相关问题 | https://sa-token.cc/ |
| Jimmer | 不仅有Mybatis的灵活性也有Hibernate的复用性 | https://babyfish-ct.gitee.io/jimmer-doc/ |
| QiFanGenerator | 自己写的代码生成器，快速生成前后端增删改查。 | 无官网，在代码里面参考@GenEentity和@GenField就两个注解就行了 |
| 阿里云OSS | 存储图片，学习用途基本上免费。 | 对象存储 OSS-阿里云帮助中心 (aliyun.com) |
| 微信小程序服务端API | 用户登录，订阅消息等接口 | 微信开放文档 (qq.com) |
| 微信支付V3 | 用户支付订单 | 微信支付开发者文档 (qq.com) |
后台管理端
后台管理端和小程序端使用的技术栈差不多。主要差别在后台管理的打包框架是Vite+Vue官方插件。小程序端是Webpack+Taro插件。当你了解各种技术的作用是什么之后就会发现，原来好多知识是可以复用的。只需要针对主要差别的地方去学习，这样才能够看懂官方文档。
| 技术 | 说明 | 官网 |
|---|---|---|
| Vite | 开箱即用的现代前端打包工具 | https://cn.vitejs.dev/ |
| Vue3 | Vue 基于标准 HTML 拓展了一套模板语法。Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM | https://cn.vuejs.org/ |
| Vue Router | Vue官方路由管理框架 | https://router.vuejs.org/ |
| ElementUI Plus | 支持TypeScript提示的Vue3前端UI框架 | https://element-plus.gitee.io/zh-CN/ |
| Pinia | 全局状态管理框架，支持TypeScript类型提示 | https://pinia.web3doc.top/ |
| TypeScript | 让 JS 具备类型声明 | https://www.typescriptlang.org/ |
| ESLint | 语法校验和格式整理 | https://eslint.org/ |
| DayJS | 日期取值/赋值/运算等操作 | https://dayjs.fenxianglu.cn/ |
| LodashJs | JS各种常用的工具方法 | https://www.lodashjs.com/ |