SpringBoot+Vue全栈博客系统开发实践

1. 项目概述这个基于SpringBootVue的博客系统开发项目是一个典型的Java Web全栈实践案例。作为毕业设计选题它完美涵盖了前后端分离架构的核心技术栈从数据库设计到接口文档生成一应俱全。我在实际开发过程中发现这类项目最能锻炼学生的工程化思维——不仅要实现功能更要考虑代码规范、接口设计和文档维护。整套系统采用MVC分层架构后端基于SpringBoot 2.7.x构建RESTful API前端使用Vue 3组合式API开发管理后台。特别值得一提的是项目附带的SQL脚本和Swagger接口文档这些在真实开发环境中都是不可或缺的工程化组件。下面我将从技术选型到具体实现详细拆解这个博客系统的开发要点。2. 技术栈解析2.1 SpringBoot后端架构选择SpringBoot作为后端框架主要基于三点考虑自动配置特性大幅减少XML配置内嵌Tomcat简化部署流程Starter依赖机制规范技术集成核心依赖配置示例pom.xml关键片段dependencies !-- Web支持 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- MyBatis Plus -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.2/version /dependency !-- Swagger文档 -- dependency groupIdio.springfox/groupId artifactIdspringfox-swagger2/artifactId version3.0.0/version /dependency /dependencies2.2 Vue前端技术选型前端采用Vue 3 Element Plus组合其优势在于Composition API提供更好的逻辑复用Vite构建工具带来极速热更新TypeScript支持增强代码健壮性项目初始化时需要注意的配置项// vite.config.js export default defineConfig({ plugins: [ vue(), // 必须配置的路径别名 { resolve: { alias: { : path.resolve(__dirname, src) } } } ], server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })3. 数据库设计与实现3.1 核心表结构设计博客系统主要包含5张核心表用户表(sys_user)文章表(blog_article)分类表(blog_category)标签表(blog_tag)评论表(blog_comment)建表SQL示例MySQL语法CREATE TABLE blog_article ( id bigint NOT NULL AUTO_INCREMENT COMMENT 主键, title varchar(100) NOT NULL COMMENT 标题, content longtext NOT NULL COMMENT 内容, cover varchar(255) DEFAULT NULL COMMENT 封面图, user_id bigint NOT NULL COMMENT 作者ID, category_id bigint DEFAULT NULL COMMENT 分类ID, view_count int DEFAULT 0 COMMENT 浏览量, status tinyint DEFAULT 0 COMMENT 状态0-草稿 1-发布, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id), KEY idx_user (user_id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT文章表;3.2 MyBatis Plus实践技巧使用MyBatis Plus时有两个关键优化点逻辑删除配置# application.yml mybatis-plus: global-config: db-config: logic-delete-field: deleted # 逻辑删除字段 logic-not-delete-value: 0 logic-delete-value: 1自动填充处理Slf4j Component public class MyMetaObjectHandler implements MetaObjectHandler { Override public void insertFill(MetaObject metaObject) { this.strictInsertFill(metaObject, createTime, LocalDateTime.class, LocalDateTime.now()); } Override public void updateFill(MetaObject metaObject) { this.strictUpdateFill(metaObject, updateTime, LocalDateTime.class, LocalDateTime.now()); } }4. 接口开发与文档生成4.1 RESTful API设计规范遵循以下接口设计原则资源使用复数名词如/articlesGET请求不修改资源状态状态码准确反映操作结果典型控制器代码结构RestController RequestMapping(/api/articles) Api(tags 文章管理) public class ArticleController { Autowired private ArticleService articleService; GetMapping ApiOperation(分页查询文章) public ResultPageArticleVO listArticles( RequestParam(required false) String title, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { return Result.success(articleService.pageArticles(title, pageNum, pageSize)); } }4.2 Swagger集成要点实现完善的接口文档需要关注基础配置类Configuration EnableSwagger2 public class SwaggerConfig { Bean public Docket createRestApi() { return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.basePackage(com.example.blog)) .paths(PathSelectors.any()) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title(博客系统API文档) .description(毕业设计项目接口说明) .version(1.0) .build(); } }实体类注解示例ApiModel(文章详情VO) Data public class ArticleDetailVO { ApiModelProperty(文章ID) private Long id; ApiModelProperty(文章标题) private String title; ApiModelProperty(value 文章内容, example p这里是HTML格式的内容/p) private String content; }5. 前后端联调实战5.1 Axios请求封装前端请求层建议采用如下封装结构// src/utils/request.js import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 5000 }) // 请求拦截器 service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer ${token} } return config }) // 响应拦截器 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { return Promise.reject(new Error(res.message || Error)) } return res } ) export default service5.2 典型页面组件实现文章列表页面的关键实现逻辑script setup import { ref, onMounted } from vue import { getArticleList } from /api/article const tableData ref([]) const loading ref(false) const total ref(0) const fetchData async (page 1) { loading.value true try { const res await getArticleList({ pageNum: page }) tableData.value res.data.list total.value res.data.total } finally { loading.value false } } onMounted(() fetchData()) /script template el-table :datatableData v-loadingloading el-table-column proptitle label标题 / el-table-column propviewCount label浏览量 width100 / el-table-column label操作 width180 template #defaultscope el-button sizesmall编辑/el-button el-button sizesmall typedanger删除/el-button /template /el-table-column /el-table el-pagination current-changefetchData :totaltotal layoutprev, pager, next / /template6. 项目部署与优化6.1 多环境配置方案SpringBoot支持通过profile区分环境application.yml # 基础配置 application-dev.yml # 开发环境 application-test.yml # 测试环境 application-prod.yml # 生产环境启动时指定环境参数# 开发环境 java -jar blog.jar --spring.profiles.activedev # 生产环境 java -jar blog.jar --spring.profiles.activeprod6.2 前端部署优化Vite项目构建时需要特别注意配置基础路径// vite.config.js export default defineConfig({ base: /blog-admin/, build: { outDir: dist, assetsDir: static, rollupOptions: { output: { chunkFileNames: static/js/[name]-[hash].js, entryFileNames: static/js/[name]-[hash].js, assetFileNames: static/[ext]/[name]-[hash].[ext] } } } })Nginx配置示例server { listen 80; server_name blog.example.com; location / { root /usr/share/nginx/html/blog-admin; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; } }7. 常见问题解决方案7.1 跨域问题处理SpringBoot解决跨域的三种方式全局配置类Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .maxAge(3600); } }单控制器注解CrossOrigin(origins http://localhost:3000) RestController RequestMapping(/api) public class TestController {}过滤器方式Bean public FilterRegistrationBeanCorsFilter corsFilter() { UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); CorsConfiguration config new CorsConfiguration(); config.addAllowedOrigin(*); config.addAllowedHeader(*); config.addAllowedMethod(*); source.registerCorsConfiguration(/**, config); return new FilterRegistrationBean(new CorsFilter(source)); }7.2 接口文档访问问题当Swagger无法访问时检查是否添加了springfox-swagger-ui依赖拦截器是否放行了/doc.html路径项目是否启用了Spring Security需要配置白名单典型安全配置示例Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/doc.html).permitAll() .antMatchers(/webjars/**).permitAll() .antMatchers(/swagger-resources).permitAll() .antMatchers(/v2/api-docs).permitAll() .anyRequest().authenticated(); } }8. 毕设项目扩展建议如果想提升项目竞争力可以考虑增加Elasticsearch实现全文检索集成Redis缓存热门文章添加第三方登录微信、GitHub实现Markdown编辑器与HTML双向转换开发移动端适配页面技术实现示例Redis缓存Service public class ArticleServiceImpl implements ArticleService { Autowired private RedisTemplateString, Object redisTemplate; private static final String CACHE_PREFIX blog:article:; Override public ArticleDetailVO getArticleDetail(Long id) { String cacheKey CACHE_PREFIX id; ArticleDetailVO detail (ArticleDetailVO) redisTemplate.opsForValue().get(cacheKey); if (detail null) { detail articleMapper.selectDetailById(id); redisTemplate.opsForValue().set(cacheKey, detail, 1, TimeUnit.HOURS); } return detail; } }