1. 项目概述：图书电商系统的技术选型与架构设计
这个基于SpringBoot+Vue的图书电商管理系统，是我在2022年为本地一家中型书店开发的线上销售平台。系统上线后日均订单量稳定在300-500单，峰值时期能承受每秒20次的并发访问。整个项目采用前后端分离架构，后端用Java+SpringBoot构建RESTful API，前端使用Vue.js实现响应式界面，数据库选用MySQL 8.0配合MyBatis-Plus进行数据持久化操作。
选择这套技术栈主要基于三个实际考量：首先，SpringBoot的自动配置特性让后端服务能快速搭建，内置Tomcat容器简化了部署流程；其次，Vue的组件化开发模式非常适合电商这类交互复杂的场景；最后，MyBatis的灵活性让我们能精细控制SQL语句，这对需要处理复杂商品查询的电商系统尤为重要。
提示：在技术选型阶段，我们对比过JPA和MyBatis，最终选择MyBatis是因为图书电商涉及大量动态查询（如多条件筛选、排序），需要直接编写优化SQL
2. 核心模块设计与实现
2.1 后端SpringBoot架构
采用经典的三层架构设计：
- Controller层：处理HTTP请求，参数校验使用Hibernate Validator
- Service层：业务逻辑实现，包含事务管理(@Transactional)
- DAO层：MyBatis实现数据库操作，配合PageHelper分页插件
图书模块的核心代码示例：
java复制@RestController
@RequestMapping("/api/books")
public class BookController {
@Autowired
private BookService bookService;
@GetMapping
public Result<PageInfo<Book>> listBooks(
@RequestParam(required = false) String title,
@RequestParam(required = false) String author,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
return Result.success(bookService.queryBooks(title, author, pageNum, pageSize));
}
}
2.2 前端Vue.js实现
使用Vue CLI搭建项目骨架，主要技术点：
- Vue Router管理路由，采用懒加载优化性能
- Vuex进行状态管理，购物车数据持久化到localStorage
- Element UI组件库快速构建界面
- Axios封装HTTP请求，统一处理错误和权限
图书列表页的关键实现：
javascript复制<template>
<el-table :data="bookList" v-loading="loading">
<el-table-column prop="cover" label="封面">
<template #default="{row}">
<el-image :src="row.cover" fit="contain" style="height:80px"/>
</template>
</el-table-column>
<el-table-column prop="title" label="书名" sortable/>
<el-table-column prop="price" label="价格" sortable>
<template #default="{row}">¥{{row.price.toFixed(2)}}</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
bookList: [],
loading: false
}
},
async created() {
this.loading = true
try {
const res = await this.$api.get('/api/books', {
params: this.queryParams
})
this.bookList = res.data.list
} finally {
this.loading = false
}
}
}
</script>
3. 数据库设计与优化
3.1 MySQL表结构设计
核心表包括：
- 图书表(book)：id, isbn, title, author, price, stock, cover_img等
- 用户表(user)：id, username, password(加密存储), phone, address等
- 订单表(order)：id, user_id, total_amount, status, payment_time等
- 订单明细表(order_item)：id, order_id, book_id, quantity, price等
索引优化方案：
sql复制-- 为高频查询字段添加索引
ALTER TABLE book ADD INDEX idx_title_author (title, author);
ALTER TABLE `order` ADD INDEX idx_user_status (user_id, status);
-- 使用覆盖索引优化商品搜索
EXPLAIN SELECT id, title, price FROM book
WHERE title LIKE '%Java%' AND price BETWEEN 50 AND 100;
3.2 MyBatis动态SQL实践
使用MyBatis的动态SQL处理复杂查询：
xml复制<select id="selectBooks" resultType="Book">
SELECT * FROM book
<where>
<if test="title != null and title != ''">
AND title LIKE CONCAT('%', #{title}, '%')
</if>
<if test="author != null and author != ''">
AND author = #{author}
</if>
<if test="minPrice != null">
AND price >= #{minPrice}
</if>
<if test="maxPrice != null">
AND price <= #{maxPrice}
</if>
</where>
ORDER BY
<choose>
<when test="sortField == 'price'">price ${sortOrder}</when>
<when test="sortField == 'sales'">sales ${sortOrder}</when>
<otherwise>id DESC</otherwise>
</choose>
</select>
注意：使用${}直接拼接SQL存在注入风险，本项目通过前端限制+后端白名单校验双重防护
4. 关键业务逻辑实现
4.1 购物车与订单流程
购物车实现要点：
- 未登录用户使用浏览器本地存储
- 已登录用户同步到服务端
- 合并本地和服务端购物车数据
下单核心逻辑：
java复制@Transactional
public String createOrder(OrderDTO orderDTO) {
// 1. 校验库存
List<OrderItem> itemList = orderDTO.getItems();
for (OrderItem item : itemList) {
Book book = bookMapper.selectById(item.getBookId());
if (book.getStock() < item.getQuantity()) {
throw new BusinessException(book.getTitle() + "库存不足");
}
}
// 2. 扣减库存（乐观锁）
for (OrderItem item : itemList) {
int update = bookMapper.reduceStock(item.getBookId(), item.getQuantity());
if (update == 0) {
throw new ConcurrentOrderException("库存变更冲突，请重试");
}
}
// 3. 生成订单
Order order = new Order();
BeanUtils.copyProperties(orderDTO, order);
orderMapper.insert(order);
// 4. 生成订单明细
for (OrderItem item : itemList) {
item.setOrderId(order.getId());
orderItemMapper.insert(item);
}
return order.getId();
}
4.2 支付对接与回调处理
支付宝支付对接流程：
- 后端生成支付参数（使用官方SDK）
- 前端调起支付宝支付页面
- 配置异步通知接口处理支付结果
- 处理可能出现的重复通知问题
支付回调处理代码：
java复制@PostMapping("/notify")
public String notify(HttpServletRequest request) {
// 验证签名
boolean verifyResult = AlipaySignature.rsaCheckV1(...);
if (!verifyResult) {
return "failure";
}
// 处理业务逻辑
String orderId = request.getParameter("out_trade_no");
Order order = orderService.getById(orderId);
if (order.getStatus() != OrderStatus.UNPAID) {
return "success";
}
// 更新订单状态
order.setStatus(OrderStatus.PAID);
order.setPaymentTime(new Date());
orderService.updateById(order);
return "success";
}
5. 安全防护与性能优化
5.1 安全措施实施
-
SQL注入防护：
- 使用#{}替代${}（MyBatis参数化查询）
- 对必须使用${}的场景进行白名单校验
java复制private static final Set<String> ALLOWED_SORT_FIELDS = Set.of("price", "sales", "create_time"); public PageInfo<Book> queryBooks(BookQuery query) { if (!ALLOWED_SORT_FIELDS.contains(query.getSortField())) { query.setSortField(null); } // ... } -
XSS防护：
- 前端使用vue-sanitize过滤富文本
- 后端对用户输入进行HTML转义
-
CSRF防护：
- 使用Spring Security的CSRF保护
- 敏感操作要求验证码
5.2 性能优化实践
-
缓存策略：
- 使用Redis缓存热门图书信息
- 本地缓存(Caffeine)存储不常变的配置数据
-
数据库优化：
- 读写分离（主库写，从库读）
- 慢SQL监控与优化
-
前端性能：
- 图片懒加载
- 路由懒加载
- 使用CDN加速静态资源
6. 部署与监控
6.1 生产环境部署
采用Docker Compose部署方案：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
redis:
image: redis:6
ports:
- "6379:6379"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
6.2 系统监控配置
- SpringBoot Actuator暴露健康检查端点
- Prometheus + Grafana监控系统指标
- ELK日志收集系统
关键监控指标：
- 接口响应时间(P99 < 500ms)
- 数据库连接池使用率(<80%)
- JVM内存使用(GC频率)
- 订单创建成功率(>99.9%)
7. 开发中的经验教训
-
分页查询的坑：
- 避免使用
SELECT *+LIMIT，这种写法在深分页时性能极差 - 推荐使用主键ID分页：
WHERE id > ? ORDER BY id LIMIT ?
- 避免使用
-
事务处理的注意事项：
- 事务方法不要捕获所有异常，否则@Transactional不会回滚
- 大事务拆分为小事务，避免长事务占用连接
-
Vue组件设计心得：
- 保持组件单一职责
- 合理划分容器组件和展示组件
- 使用provide/inject替代深层prop传递
-
接口版本管理：
- URL路径包含版本号：
/api/v1/books - 使用Swagger维护接口文档
- 向后兼容至少两个版本
- URL路径包含版本号：
这个项目从技术选型到上线运维历时4个月，最大的收获是理解了如何根据业务特点选择合适的技术方案。比如在电商系统中，库存扣减必须使用乐观锁而非悲观锁，这样才能保证高并发下的性能。另外，前后端分离架构虽然开发效率略低，但带来的团队协作优势和系统可维护性提升非常明显