SpringBoot+Vue毕业设计项目实战与架构解析

伊凹遥

1. 项目背景与技术选型

作为一名长期从事Java Web开发的工程师，我深知毕业设计对于计算机专业学生的重要性。这个基于SpringBoot+Vue的网站平台项目，正是为了解决学生在毕业设计阶段面临的三大痛点：技术栈选择困难、前后端联调复杂、文档资料不完整。

为什么选择SpringBoot+Vue这套技术组合？从实际开发经验来看，SpringBoot的自动配置特性可以让学生免去复杂的XML配置，快速搭建后端服务。而Vue的渐进式框架设计，则让前端开发变得直观简单。两者结合形成的RESTful API通信模式，是目前企业开发中最主流的架构方案。

2. 系统架构设计

2.1 前后端分离架构

项目采用经典的前后端分离架构，这种设计带来了几个显著优势：

开发解耦：前后端可以并行开发，通过接口文档约定数据格式
部署独立：前端静态资源与后端服务可分别部署，便于扩展
技术栈灵活：前后端可以分别选择最适合的技术方案

在实际教学中发现，学生最容易犯的错误是混淆了前后端的职责边界。比如在前端处理业务逻辑，或者在后端返回HTML片段。本项目的架构设计严格遵循了"前端负责展示，后端负责数据"的原则。

2.2 数据库设计要点

数据库设计是项目的基础，我特别注重了几个关键点：

用户表(user_info)设计考量：

使用BIGINT作为用户ID，避免自增INT可能的上限问题
password_hash字段采用64位长度，为SHA-256等加密算法预留空间
status字段使用TINYINT而非BOOLEAN，便于扩展多种状态

新闻表(news_content)优化技巧：

content字段使用TEXT类型而非VARCHAR，支持长文本存储
添加view_count计数器，避免频繁更新主表带来的性能问题
建立category_id索引，提高分类查询效率

文件表(file_resource)注意事项：

file_path存储相对路径而非绝对路径，提高系统可移植性
is_public字段实现简单的权限控制
file_size字段为后续做存储配额功能预留接口

3. 核心功能实现

3.1 用户认证模块

用户认证是系统的门户，我采用了JWT(JSON Web Token)方案而非传统的Session，主要基于以下考虑：

无状态特性更适合RESTful API
天然支持跨域访问
便于移动端集成

核心代码解析：

java复制@RestController
@RequestMapping("/yonghu")
public class YonghuController {
    @Autowired
    private TokenService tokenService;
    
    @IgnoreAuth
    @RequestMapping(value = "/login")
    public R login(String username, String password, HttpServletRequest request) {
        YonghuEntity u = yonghuService.selectOne(
            new EntityWrapper<YonghuEntity>()
            .eq("yonghuzhanghao", username));
        
        if(u==null || !u.getMima().equals(password)) {
            return R.error("账号或密码不正确");
        }
        
        String token = tokenService.generateToken(
            u.getId(), username, "yonghu", "用户");
        return R.ok().put("token", token);
    }
}

关键点提示：在实际项目中，密码应该使用BCrypt等加密算法存储，而非示例中的明文比对。同时建议添加验证码机制防止暴力破解。

3.2 新闻管理模块

新闻模块实现了完整的CRUD功能，特别值得关注的是：

使用MyBatis Plus提供的Wrapper构建动态查询条件
采用@Transactional注解保证数据一致性
通过EntityWrapper实现灵活的条件组合

分页查询实现示例：

java复制@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, 
    YonghuEntity yonghu, HttpServletRequest request){
    
    EntityWrapper<YonghuEntity> ew = new EntityWrapper<>();
    PageUtils page = yonghuService.queryPage(params, 
        MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yonghu), params), params));
    
    return R.ok().put("data", page);
}

3.3 文件上传下载

文件处理采用了经典的三层设计：

前端通过FormData上传文件
后端接收并保存到指定目录
数据库记录文件元信息

安全注意事项：

限制上传文件类型（白名单机制）
重命名存储文件，避免文件名冲突
设置合理的文件大小限制
对非公开文件进行权限校验

4. 项目部署与调试

4.1 后端部署要点

SpringBoot项目部署非常简单，主要两种方式：

打包为可执行JAR：mvn package后直接java -jar运行
部署到外部Tomcat：需要继承SpringBootServletInitializer

数据库配置建议：

properties复制spring.datasource.url=jdbc:mysql://localhost:3306/db_name?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.jpa.hibernate.ddl-auto=update

4.2 前端部署指南

Vue项目部署步骤：

执行npm run build生成dist目录
配置Nginx指向dist目录
设置API代理，解决跨域问题

示例Nginx配置：

nginx复制server {
    listen       80;
    server_name  yourdomain.com;
    
    location / {
        root   /path/to/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }
}

5. 常见问题排查

5.1 跨域问题解决方案

开发阶段常见跨域问题，可通过以下方式解决：

后端添加CORS配置：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*");
    }
}

前端配置代理（vue.config.js）：

javascript复制module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}