基于SSM与Vue的电脑评测平台设计与实现
系统概述
随着信息化管理的不断深入，个人用户对信息展示与交互平台的需求日益增长。基于Java技术栈的电脑评测系统在当前开发环境中已具备成熟的技术基础。本文阐述了一个以SSM（Spring、Spring MVC、MyBatis）为核心架构，结合Vue前端框架构建的B/S模式评测平台的设计与实现过程。系统通过分析用户对电脑设备评测、品牌分类及互动交流的实际需求，完成了从功能规划到数据库建模的完整开发流程。
该平台主要面向两类用户：管理员与普通用户。管理员拥有全面的后台管理权限，包括用户账户管理、电脑类型与分类维护、品牌信息配置、设备数据录入、评测内容审核、论坛模块监管以及系统参数设置等。普通用户则可进行个人信息管理、浏览和收藏电脑设备、发布与查看评测内容、参与社区讨论等操作，满足个性化使用需求。
系统采用前后端分离架构，后端基于Java语言，使用Spring作为核心容器，Spring MVC处理Web请求，MyBatis实现数据持久化；前端采用Vue.js结合HTML/CSS进行界面渲染。数据库选用MySQL 5.7及以上版本，确保数据存储的稳定性与高效性。项目构建工具为Maven，开发环境支持IntelliJ IDEA或Eclipse，服务器运行环境为Tomcat 7至10系列。
关键技术实现
跨域请求处理
由于前端与后端部署在不同域名或端口，需配置跨域资源共享（CORS）。通过自定义拦截器实现全局跨域支持，同时集成Token认证机制，保障接口安全。
package com.interceptor;
import com.alibaba.fastjson.JSONObject;
import com.annotation.IgnoreAuth;
import com.entity.EIException;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.R;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@Component
public class AuthTokenInterceptor implements HandlerInterceptor {
public static final String HEADER_TOKEN = "Token";
@Autowired
private TokenService tokenService;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
// 设置跨域响应头
String origin = request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Token, Authorization, X-Requested-With");
response.setHeader("Access-Control-Allow-Credentials", "true");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
return true;
}
IgnoreAuth ignoreAuth = null;
if (handler instanceof HandlerMethod) {
ignoreAuth = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
}
if (ignoreAuth != null) {
return true;
}
String token = request.getHeader(HEADER_TOKEN);
if (StringUtils.isBlank(token)) {
sendAuthFailure(response);
return false;
}
TokenEntity tokenInfo = tokenService.getTokenEntity(token);
if (tokenInfo == null) {
sendAuthFailure(response);
return false;
}
request.getSession().setAttribute("userId", tokenInfo.getUserid());
request.getSession().setAttribute("role", tokenInfo.getRole());
request.getSession().setAttribute("tableName", tokenInfo.getTablename());
request.getSession().setAttribute("username", tokenInfo.getUsername());
return true;
}
private void sendAuthFailure(HttpServletResponse response) {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
try (PrintWriter writer = response.getWriter()) {
writer.write(JSONObject.toJSONString(R.error(401, "请先登录")));
writer.flush();
} catch (IOException e) {
e.printStackTrace();
}
}
}
用户认证与会话管理
系统提供标准的注册、登录、登出及密码重置功能。用户身份通过生成唯一Token并存储于服务端进行验证，避免敏感信息暴露。
package com.controller;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.TokenEntity;
import com.entity.UserEntity;
import com.service.TokenService;
import com.service.UserService;
import com.utils.MD5Util;
import com.utils.PageUtils;
import com.utils.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
@Autowired
private TokenService tokenService;
// 用户登录
@IgnoreAuth
@PostMapping("/login")
public R login(@RequestParam String username, @RequestParam String password, HttpServletRequest req) {
UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
if (user == null || !user.getPassword().equals(password)) {
return R.error("用户名或密码错误");
}
String token = tokenService.generateToken(user.getId(), username, "users", user.getRole());
return R.ok().put("token", token);
}
// 用户注册
@IgnoreAuth
@PostMapping("/register")
public R register(@RequestBody UserEntity newUser) {
if (userService.selectOne(new EntityWrapper<UserEntity>().eq("username", newUser.getUsername())) != null) {
return R.error("该用户名已被使用");
}
userService.insert(newUser);
return R.ok("注册成功");
}
// 获取当前登录用户信息
@GetMapping("/profile")
public R getProfile(HttpServletRequest request) {
Long userId = (Long) request.getSession().getAttribute("userId");
if (userId == null) {
return R.error(401, "未登录");
}
UserEntity user = userService.selectById(userId);
return R.ok().put("data", user);
}
// 修改用户信息
@PostMapping("/update")
public R updateProfile(@RequestBody UserEntity user) {
userService.updateById(user);
return R.ok("更新成功");
}
// 用户登出
@GetMapping("/logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("已安全退出");
}
// 密码重置（简易版）
@IgnoreAuth
@GetMapping("/reset")
public R resetPassword(String username) {
UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
if (user == null) {
return R.error("用户不存在");
}
user.setPassword("123456"); // 实际应用中应使用加密
userService.updateById(user);
return R.ok("密码已重置为123456");
}
// 分页查询用户列表
@GetMapping("/list")
public R listUsers(@RequestParam Map params, UserEntity userQuery) {
EntityWrapper<UserEntity> wrapper = new EntityWrapper<>();
MPUtil.allLike(wrapper, userQuery);
MPUtil.between(wrapper, params);
PageUtils page = userService.queryPage(params, MPUtil.sort(wrapper, params));
return R.ok().put("data", page);
}
}
系统界面展示
管理员可通过后台界面完成用户管理、电脑类型维护、品牌信息编辑及评测内容审核等操作。以下为关键功能页面示意图：
- 用户管理界面支持增删改查操作，便于维护平台用户数据。
- 电脑类型管理允许管理员定义如"游戏本"、"轻薄本"等分类。
- 电脑信息管理界面提供完整的设备录入表单，包含型号、配置、价格等字段。
- 普通用户登录后可在首页浏览最新电脑信息，并通过"我的收藏"查看感兴趣的内容。
- 评测中心页面展示专业测评报告，用户可发表评论并与他人互动。
整体系统界面简洁直观，操作流畅，功能覆盖全面，有效提升了电脑评测信息的组织与传播效率。
