兔尾巴老李1. 项目背景与技术选型
电影评价管理系统是一个典型的Web+移动端全栈项目，需要同时满足PC端管理后台和移动端用户访问的需求。在技术选型上，我们采用了目前企业级开发中最主流的组合方案：
- 后端框架：SpringBoot 2.7 + SSM（Spring+SpringMVC+MyBatis）
- 前端技术：Vue 3.x（管理后台） + uni-app（移动端跨平台）
- 数据库：MySQL 8.0 + Redis缓存
提示：这个技术栈组合在2023年仍然是大多数Java全栈岗位的首选方案，特别适合需要快速开发的中小型项目。
选择SpringBoot而非传统SSM单独搭建的主要原因在于：
- 自动配置减少了80%以上的XML配置
- 内嵌Tomcat简化部署流程
- Starter依赖机制让第三方集成更便捷
- Actuator提供了完善的生产级监控
而Vue+uni-app的组合则实现了：
- 一套Vue语法同时开发Web和移动端
- uni-app编译到iOS/Android/小程序的多端发布
- 相比原生开发节省50%以上的代码量
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 整体架构分层
code复制┌───────────────────────────────────────┐
│ 客户端层 │
│ ┌───────────┐ ┌───────────┐ │
│ │ Vue管理后台 │ │ uni-app移动端│ │
│ └───────────┘ └───────────┘ │
└───────────────────┬──────────────────┘
│ HTTP/HTTPS
┌───────────────────▼──────────────────┐
│ API网关层 │
│ ┌───────────────────────────────┐ │
│ │ SpringCloud Gateway │ │
│ └───────────────────────────────┘ │
└───────────────────┬──────────────────┘
│
┌───────────────────▼──────────────────┐
│ 业务服务层 │
│ ┌───────────┐ ┌───────────┐ │
│ │ 用户服务 │ │ 电影服务 │ │
│ └───────────┘ └───────────┘ │
└───────────────────┬──────────────────┘
│
┌───────────────────▼──────────────────┐
│ 数据持久层 │
│ ┌───────────┐ ┌───────────┐ │
│ │ MySQL │ │ Redis │ │
│ └───────────┘ └───────────┘ │
└───────────────────────────────────────┘
2.2 核心功能模块
-
用户模块
- JWT令牌认证
- 角色权限管理（RBAC模型）
- 用户画像分析
-
电影模块
- 电影信息CRUD
- 多维度分类管理
- 封面图片上传（阿里云OSS）
-
评价模块
- 评分系统（1-5星）
- 短评/长评发布
- 敏感词过滤（DFA算法实现）
-
推荐模块
- 基于用户的协同过滤
- 热门榜单计算
- 个性化推荐
3. 关键技术实现
3.1 跨域解决方案
前后端分离架构必须解决的跨域问题，我们采用以下方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.maxAge(3600);
}
}
同时在前端axios配置中需要设置：
javascript复制axios.defaults.withCredentials = true
注意：生产环境应该严格限制allowedOrigins，避免使用通配符*
3.2 文件上传处理
电影封面采用分片上传方案，核心代码如下：
java复制@PostMapping("/upload")
public Result upload(@RequestParam("file") MultipartFile file) {
// 校验文件类型
String contentType = file.getContentType();
if (!"image/jpeg".equals(contentType) && !"image/png".equals(contentType)) {
return Result.error("仅支持JPEG/PNG格式");
}
// 生成唯一文件名
String fileName = UUID.randomUUID() + getFileExtension(file.getOriginalFilename());
// 上传到OSS
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, "covers/" + fileName, file.getInputStream());
// 返回访问URL
String url = "https://" + bucketName + "." + endpoint + "/covers/" + fileName;
return Result.success(url);
}
3.3 评价敏感词过滤
使用DFA算法实现高效敏感词检测：
java复制public class SensitiveFilter {
private static final String REPLACEMENT = "***";
private TrieNode root = new TrieNode();
private class TrieNode {
private boolean isEnd;
private Map<Character, TrieNode> subNodes = new HashMap<>();
public void addSubNode(Character c, TrieNode node) {
subNodes.put(c, node);
}
public TrieNode getSubNode(Character c) {
return subNodes.get(c);
}
}
public String filter(String text) {
StringBuilder result = new StringBuilder();
TrieNode tempNode = root;
int begin = 0;
int position = 0;
while (position < text.length()) {
char c = text.charAt(position);
// 处理特殊符号
if (isSymbol(c)) {
if (tempNode == root) {
result.append(c);
begin++;
}
position++;
continue;
}
tempNode = tempNode.getSubNode(c);
if (tempNode == null) {
result.append(text.charAt(begin));
position = begin + 1;
begin = position;
tempNode = root;
} else if (tempNode.isEnd()) {
result.append(REPLACEMENT);
position = position + 1;
begin = position;
tempNode = root;
} else {
position++;
}
}
result.append(text.substring(begin));
return result.toString();
}
}
4. 前端工程实践
4.1 Vue管理后台关键配置
vue.config.js 的代理设置解决开发环境跨域：
javascript复制module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
4.2 uni-app多端适配方案
通过条件编译处理平台差异：
javascript复制// #ifdef H5
console.log('这是H5平台')
// #endif
// #ifdef MP-WEIXIN
console.log('这是微信小程序平台')
// #endif
// #ifdef APP-PLUS
console.log('这是App平台')
// #endif
样式适配使用rpx单位：
css复制.movie-card {
width: 350rpx;
/* 在H5端会自动转换为px，小程序端使用rpx */
}
5. 部署方案
5.1 后端部署
采用Docker Compose编排服务：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: movie_db
ports:
- "3306:3306"
volumes:
- ./mysql/data:/var/lib/mysql
redis:
image: redis:6
ports:
- "6379:6379"
app:
build: .
ports:
- "8080:8080"
depends_on:
- mysql
- redis
5.2 前端部署
Nginx配置示例：
nginx复制server {
listen 80;
server_name admin.movie.com;
location / {
root /usr/share/nginx/html/admin;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
6. 性能优化实践
6.1 缓存策略设计
采用多级缓存架构：
-
本地缓存：Caffeine实现
java复制@Bean public Cache<String, Object> caffeineCache() { return Caffeine.newBuilder() .expireAfterWrite(10, TimeUnit.MINUTES) .maximumSize(1000) .build(); } -
分布式缓存：Redis + Redisson
java复制@Cacheable(value = "movies", key = "#id") public Movie getMovieById(Long id) { return movieMapper.selectById(id); } -
浏览器缓存：通过HTTP头控制
java复制@GetMapping("/images/{filename}") public ResponseEntity<byte[]> getImage(@PathVariable String filename) { byte[] image = imageService.getImage(filename); return ResponseEntity.ok() .cacheControl(CacheControl.maxAge(7, TimeUnit.DAYS)) .body(image); }
6.2 SQL优化案例
电影搜索接口的优化前后对比：
优化前：
sql复制SELECT * FROM movies
WHERE title LIKE '%战%'
ORDER BY rating DESC
LIMIT 10
优化后：
sql复制SELECT m.* FROM movies m
JOIN (
SELECT id FROM movies
WHERE MATCH(title) AGAINST('战*' IN BOOLEAN MODE)
ORDER BY rating DESC
LIMIT 10
) tmp ON m.id = tmp.id
配合索引创建：
sql复制ALTER TABLE movies ADD FULLTEXT INDEX ft_title (title);
实测性能提升：从1200ms → 80ms
7. 安全防护措施
7.1 XSS防御
前端使用vue-sanitize过滤输入：
javascript复制import sanitizeHTML from 'sanitize-html'
Vue.prototype.$sanitize = sanitizeHTML
后端统一处理：
java复制@ControllerAdvice
public class XssAdvice implements ResponseBodyAdvice<Object> {
@Override
public boolean supports(MethodParameter returnType,
Class<? extends HttpMessageConverter<?>> converterType) {
return true;
}
@Override
public Object beforeBodyWrite(Object body, MethodParameter returnType,
MediaType selectedContentType,
Class<? extends HttpMessageConverter<?>> selectedConverterType,
ServerHttpRequest request, ServerHttpResponse response) {
return XssUtils.clean(body);
}
}
7.2 CSRF防护
Spring Security配置：
java复制@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
.and()
// 其他配置...
}
前端在axios拦截器中添加token：
javascript复制axios.interceptors.request.use(config => {
config.headers['X-XSRF-TOKEN'] = getCookie('XSRF-TOKEN')
return config
})
8. 项目经验总结
在实际开发中，我们遇到了几个典型问题及解决方案：
-
Vue和uni-app样式冲突
解决方案：通过scoped样式和自定义前缀解决css复制/* 全局样式添加前缀 */ [data-vue] .container { /* vue专属样式 */ } [data-uniapp] .container { /* uniapp专属样式 */ } -
SpringBoot多环境配置
最佳实践：code复制application.yml application-dev.yml application-prod.yml启动时指定profile：
bash复制
java -jar app.jar --spring.profiles.active=prod -
MyBatis结果映射问题
使用ResultMap解决复杂映射：xml复制<resultMap id="movieDetailMap" type="Movie"> <id property="id" column="id"/> <collection property="comments" ofType="Comment" select="selectCommentsByMovieId" column="id"/> </resultMap> -
uni-app打包体积过大
优化方案：- 启用分包加载
- 使用图片压缩工具
- 移除未使用的组件
这个项目完整实现了电影评价的全流程管理，从技术架构到具体实现都采用了当前主流的最佳实践方案。在开发过程中，特别需要注意前后端协作的接口规范、多端样式兼容以及生产环境的安全防护。