做新闻资讯系统这套东西市面上源码其实不少但真正能“拿过来就本地跑起来前端后端不打架数据库不报错”的真不多见。我今天想拆解的这套SpringBoot Vue MySQL的新闻资讯信息管理系统就是偏“可直接运行”的类型。它的价值不在于用了多新的技术栈而在于把前后端分离项目的核心链路串得很完整后端有完好的权限控制和CRUD前端有正常可用的页面交互和数据联动数据库脚本跑完就有基础数据前后端端口、跨域、JWT鉴权这些“新手劝退项”都已经配好。对刚学完框架、想找一个完整项目练手的人或者要做毕业设计、课程设计的人来说这套代码的参考价值很高。说说这套系统具体有什么用。新闻资讯管理系统本质上就是一个内容管理平台管理员登录后台维护新闻分类、发布新闻、管理用户评论、审核稿件普通用户在前台浏览新闻、查看分类、搜索内容、点开新闻详情看正文如果接入了视频模块还能在线播放视频新闻。它把“内容生产端”和“内容消费端”放在一个平台里用不同的角色权限切开。要学习前后端分离项目长什么样这就是一个很典型、又不复杂的样本。这套源码的技术选型放在现在的企业级项目里依然很主流。后端用SpringBoot它把Spring的配置复杂度压得很低内嵌Tomcat一个java -jar就能启动服务非常适合做前后端分离项目的API层。前端用Vue不管是Vue 2还是Vue 3核心思路都是组件化开发、数据驱动视图。MySQL负责持久化存用户、存新闻、存分类、存评论。三个部分组成一个完整闭环。接下来我从前端、后端、数据库到部署这个顺序把每一块的实现细节和我在实践中遇到的问题都梳理一遍。1. 整体架构拆解前后端分离到底在分离什么在讲具体代码之前得先把架构这个概念捋清楚。很多新手拿到源码之后最困惑的就是“这个项目怎么有两个文件夹”“后端项目怎么启动”“前端项目怎么启动”“为什么他们俩要分开跑”。这套系统的架构方式就是标准的前后端分离模式。后端SpringBoot项目跑在服务器的某个端口上默认常见的是8080这套源码如果用8080那后端就是纯粹的API服务不返回页面只返回JSON数据。所有业务逻辑、数据校验、权限验证、数据库读写都在这一层完成。前端Vue项目跑在另一个端口上常见的有8080端口被后端占用了就会给Vue配5173或者8081它负责渲染页面、监听用户操作、把数据展示出来。前端通过HTTP请求访问后端的API接口拿到JSON数据之后再动态渲染到页面上。这样做最大的好处是前后端可以并行开发后端只管把接口定义好前端拿Mock数据就能先写页面也可以灵活部署前端静态文件扔到Nginx后端服务单独部署随时水平扩展。缺点是引入了跨域问题这也是新手最容易卡住的地方后面我专门列一章节讲。这套系统的目录结构我建议你拿到源码后先看长什么样再动手跑。后端是典型的Maven工程有个pom.xml下面分controller、service、mapper、entity这些包。前端就是一个Vue工程有package.json下面分views、components、router、api这些目录。看懂目录结构再对照着功能去定位代码学起来会快很多。2. 后端SpringBoot实现从接口设计到权限控制2.1 分层架构与工程目录后端工程的核心思路就是分层Controller层负责接收请求、参数校验、返回结果Service层负责业务逻辑比如新增新闻的时候要同时处理分类校验、作者信息填充Mapper层如果用MyBatis负责数据库操作。实体类对应数据库表结构。DTO数据传输对象用于接口入参出参。VO视图对象用于向前端返回特定结构的数据。在这套新闻资讯系统里分层的意义很明显。举个例子“发布一条新闻”这个操作Controller接收到前端传过来的JSON第一件事不是直接往数据库里插而是做参数校验标题不能为空、分类ID是否存在、正文不能超过长度。校验通过后交给Service层Service层要补全创建时间、更新状态、作者ID这些字段再调用Mapper插入数据。如果中间某一步出错全局异常处理器会捕获并返回统一结构的错误信息而不是让服务直接崩掉或者返回一个不友好的堆栈信息。所以看这套源码的时候我建议你带着一个目的去看一条数据从“前端表单”到“数据库表”中间经历了哪些方法、哪些校验。把这个链路捋明白后端这块就算吃透了。2.2 JWT鉴权与登录状态管理新闻资讯系统的后台管理功能不是所有人都能访问的必须登录。这套源码用的是JWTJSON Web Token做认证这也是目前前后端分离项目最常用的方案。JWT的原理说人话就是用户登录成功后后端根据用户信息生成一个加密的token字符串返回给前端。前端把token存到localStorage或者SessionStorage里之后每次请求都在HTTP请求头里带上Authorization: Bearer 。后端每次收到请求时先取token验签、解析过期时间解析成功就知道是谁在请求有权限就放行没权限就返回401。在SpringBoot里实现这套流程核心是两个部分一个是过滤器Filter或者拦截器Interceptor用来拦截需要认证的接口另一个是JWT工具类用来生成和解析token。这套源码里应该都有现成的你找一下JwtUtil、JwtInterceptor这类类名基本就能定位。实际使用中有几个地方容易踩坑token过期时间设置建议后台系统2小时左右太短频繁登录影响体验太长有安全风险。密码存储问题源码里如果直接用MD5加密可以跑通但不算严谨正式项目建议换BCrypt。不过作为学习项目MD5也能帮你理解加密的流程。拦截器要放行登录接口和前端静态资源路径否则会出现“明明没登录也调不了登录接口”的死循环问题。2.3 核心接口与业务状态流转新闻资讯系统后端接口归纳起来就几类登录认证接口、新闻CRUD接口、分类管理接口、评论管理接口可能还有统计接口。每个接口的Controller路径、请求参数、返回结构其实就是一份现成的API文档前端调用全靠它。拿到源码第一件事我建议你启动后先访问后端的Swagger地址如果集成了的话比如http://localhost:8080/swagger-ui.html把接口全部过一遍这样前端的页面就好理解了。这里重点说一下新闻的状态流转这是这个系统的业务核心。一条新闻从创建到展示给用户通常有几个状态草稿、待审核、已发布、已下架。如果是带审核功能的系统管理员创建或编辑新闻后状态为待审核审核通过后状态变已发布前台才能看到出现问题可以下架状态变为已下架。这些状态在数据库里一般用一个int类型字段表示0草稿、1待审核、2已发布、3已下架对应关系可以定义在常量类或者枚举类里。我在跑这套源码的时候发现一个问题很多源码的状态逻辑写得不够严谨比如“编辑已发布新闻后状态没有自动回到草稿或者待审核”这样用户端就会直接看到未审核的旧内容被替换成新内容。如果你要拿这套源码做二次开发这个点建议优先补上。2.4 后端配置与跨域处理后端application.yml里面主要配置三块服务端口、数据库连接信息、JWT密钥。数据库连接这一段新手最爱出错尤其是用户名密码改成自己本地的之后出现连接失败。跨域问题是前后端分离项目绕不开的坎。前端跑在5173后端跑在8080浏览器的同源策略会拦截跨端口请求。解决办法就是后端配置CORS跨域资源共享。配置方式有几种用CrossOrigin注解加在Controller类上或者写一个WebMvcConfigurer的实现类全局配置允许跨域的路径、请求头、请求方法。这套源码在“可直接运行”这个点上肯定已经处理好了跨域但你要理解这样配置的原因因为自己从零搭项目时早晚会碰一次。除了CORS还有一个常见的坑是“预检请求”。前端发复杂请求比如带Content-Type: application/json的POST请求时浏览器会先发一个OPTIONS请求试探后端。如果后端不处理OPTIONS请求前端会报跨域错误。很多后端框架默认配置了跨域但遇到OPTIONS还是放行不了需要在过滤器里明确放行OPTIONS请求。这套源码如果已经能跑通前后端联调说明这些细节都已经处理了你可以顺着代码看一看具体怎么处理的。3. 前端Vue实现组件化页面与数据联动3.1 Vue工程结构与页面路由设计Vue前端的目录结构拿到手先看几个关键文件router/index.js是路由配置文件看每一个路径对应的页面组件api目录是封装好的axios请求接口views目录是页面组件一般一个文件夹对应一个模块。这套源码的前端大致有这些页面登录页、后台管理布局页包含新闻列表、分类管理、用户管理、评论管理等子页面、前台门户页包含新闻首页、新闻列表页、新闻详情页、分类浏览页。路由配置里有一个要点路由懒加载。新闻资讯系统的前端页面不算多但路由懒加载的习惯要养成。写法就是在import的时候不直接静态导入而是用const Home () import(/views/Home.vue)这种形式Webpack或Vite会在访问到这个路由时才加载对应的JS文件首屏加载速度会快很多。这套源码如果路由配置是直接静态import的你可以自己尝试改成懒加载也算一个练习。路由的另一个关键点是动态路由和权限控制。后台管理页面的路由一般需要在登录之后根据用户的角色动态追加。如果前端把所有管理页面路由都放在静态配置里用户直接在浏览器地址栏输入URL就能未授权访问管理页面这等于把后台的门敞开着。这套源码如果处理了这个会在路由守卫里做判断如果没处理建议自己补上这个逻辑。3.2 axios封装与拦截器前端请求后端接口不会在每个页面里直接用axios.get这样散着写而是统一封装在api目录下。封装的目的是减少重复代码统一管理接口路径。比如src/api/news.js里export function getNewsList(params) { return request({ url: /api/news/list, method: get, params }) }页面里直接调用getNewsList(params)就行。核心的封装点是请求拦截器和响应拦截器。请求拦截器里做两件事把token加到请求头里把用户信息或者公共参数带上。响应拦截器里做三件事判断HTTP状态码200就正常返回数据业务状态码不是预期值就提示错误遇到401就跳转登录页清理本地token。这三个逻辑缺一个项目用起来都不顺手。尤其是401跳登录如果不处理用户token过期之后的第一次请求会报错但用户看到的是白屏和一个看不懂的错误提示体验很差。我在实际项目里还喜欢在响应拦截器里加一个Loading处理但这套源码不一定有。你可以看一下axios封装文件里有没有类似“showLoading”“hideLoading”的逻辑。如果没有自己加也不难大项目里这个是刚需因为列表加载、详情加载都需要给用户一个等待反馈。3.3 新闻列表、详情与分类筛选实现新闻列表页是前台的门面核心功能是拉取新闻列表接口数据、按分类筛选、分页加载更多或者点击分页器翻页、点击标题跳转详情页。这里前端有3个重点第一个是分页参数。前端列表页一般维护一个query对象也有的叫searchParams里面至少包括pageNum、pageSize、categoryId、keyword。用户点第2页就是修改query.pageNum然后重新请求接口。查询条件变化时比如选择一个新的分类要把pageNum重置为1否则可能出现“在第5页选了分类结果列表是空的”这种情况。这是个很小的细节但新手经常漏。第二个是路由参数传递。点击新闻标题跳详情页常用的做法是this.$router.push({ path: /news/detail, query: { id: newsId } })然后详情页用this.$route.query.id拿到这条新闻的ID去请求详情接口。如果是Vue 3就是useRouter和useRoute。query方式传参刷新不丢失比较稳。但这个点关系到路由的配置你查看前端路由配置时news/detail这个路由对应的组件是Detail.vue这个是固定的。第三个是图片处理。新闻列表页一般会展示封面图后端存的是相对路径比如/images/xxx.jpg。前端请求图片时需要拼接后端服务地址。如果后端返回的就是完整URL那没这个问题如果返回相对路径前端常常要写一个公共的baseURL来拼接。很多源码直接写死了localhost:8080你要是把后端换到服务器上图片就加载不出来。这个问题可以作为一个排查经验记下来。3.4 Vue播放m3u8视频流的实现热搜词里“vue播放m3u8”在这个新闻系统里很贴切因为带视频新闻功能的管理系统后台需要上传视频前台需要在线播放。m3u8是一种视频流媒体播放列表格式常用于HLSHTTP Live Streaming协议。浏览器原生video标签不能直接播放m3u8所以我们在Vue项目里一般用video.js配合videojs-contrib-hls插件或者用hls.js这个轻量库。具体实现流程先install依赖然后把video.js相关样式引入在组件里初始化播放器实例传入m3u8的视频地址。hls.js是m3u8解析播放的库支持在Chrome、Firefox等现代浏览器上稳定播放。如果这套源码没有实现视频播放但你业务需要可以用hls.js自己写一遍核心代码量并不大。播放这块有几个现实问题第一个是CORS如果m3u8文件和切片.ts文件存储的服务器没有配置允许跨域访问播放器会报错。第二个是地址乱写接到了视频播放接口但传的是文件上传接口的地址肯定播不出来。第三个是格式不支持有些转码生成的m3u8带有加密信息比如AES-128加密前端播放需要拿到对应的密钥密钥无法访问时播放器同样会卡住。跑源码的时候遇到视频黑屏先从这三个方向排查。4. MySQL数据库设计与数据初始化4.1 核心表结构设计这套系统的数据库至少会有这几张表用户表sys_user或者user、新闻分类表news_category、新闻表news、评论表news_comment可能还有操作日志表。表结构设计是理解业务逻辑的关键。用户表核心字段id、username、password、nickname、avatar、role管理员/普通用户/审核员、status、create_time、update_time。role字段大多数系统用字符串“ADMIN”“USER”或者数字1/0标识前端根据角色控制按钮显示。新闻分类表id、name、sort排序、status。分类通常层级不会太深一级分类就够如果做多级分类再增加parent_id字段。新闻表是核心中的核心字段一般有id、category_id外键关联分类、title、summary摘要、content正文、cover_image封面图、video_url视频地址如果支持视频新闻、author_id作者ID、status状态、view_count浏览量、create_time、update_time、publish_time发布时间。评论表id、news_id、user_id、content、parent_id如果是回复关联到父评论、create_time。这几张表之间的关系就是一个简单的电商内容系统模型。看源码时先不急着看代码把这几张表的字段搞懂前后端的接口和页面就都好理解了。4.2 索引和查询优化新闻列表页最常见的查询条件是什么按分类查、按关键词查、按状态查分页。这种查询场景下索引很重要。比如news表里status和category_id经常出现在WHERE条件里可以考虑建联合索引create_time经常用在ORDER BY上也需要索引支撑。很多学习项目源码根本没有建索引数据只有十几条感觉不到问题但如果真上了线几十万条数据同样的SQL查询能慢到秒级别。我在跑这套源码的时候会自己打开数据库的慢查询日志看看自动生成的SQL有没有出现全表扫描。比如评论列表按news_id查询如果news_id上没有索引每条新闻详情页查评论都是全表扫这是可以优化的最低成本的点。如果你有精力给这套源码关注的表都加上合适的索引也算一次数据库优化的实战练习。4.3 数据库初始化与常用命令这套源码直接运行的条件之一就是必须把项目里的sql文件导入到本地MySQL数据库。一般sql文件放在项目根目录或sql目录下文件名类似news_admin.sql。导入方式有两种命令行方式mysql -u root -p news_admin.sql或者用Navicat、DataGrip等可视化工具直接运行SQL文件。导入前有一点要确认SQL文件里的数据库名和你后端application.yml里的数据库名是否一致不一致就要改一处。很多初学者在MySQL安装配置这步就卡住了其实核心就是版本选择、初始化密码、字符集设置三个点。装完MySQL 8.x之后在配置文件里设置utf8mb4字符集这是支持中文和emoji的基础配置。登录之后再手动创建数据库create database news_db default character set utf8mb4;再use news_db;再执行SQL文件。这整个流程不要跳步跳一步后面大概率报错。5. 本地完整部署运行实录5.1 环境准备要跑通这套源码需要准备的环境有这些JDK建议1.8或11SpringBoot 2.x版本用JDK 8就能跑SpringBoot 3.x需要JDK 17。先看源码pom.xml里的spring-boot-starter-parent版本再决定用什么JDK。Maven3.6用来下载后端依赖。国内建议配置阿里云镜像否则依赖下载会让人等到怀疑人生。Node.js如果前端是Vue 2Node 14/16比较稳妥Vue 3 ViteNode 16/18都行。前端启动报错一半以上是Node版本不对。MySQL5.7或者8.x都行前提是后端JDBC驱动版本要匹配。IDE后端用IDEA前端用VS Code前后端配置文件都改好之后分别启动就行。5.2 后端启动步骤第一步用IDEA打开后端文件夹等Maven自动下载依赖下载完成后看右下角进度条是否归零。第二步在application.yml里改数据库账号密码。第三步确认MySQL里已经导入好SQL文件。第四步找到Application启动类比如NewsApplication.java右键运行。看到日志里出现Tomcat started on port(s): 8080说明后端启动成功了。启动失败的常见情况我列在前面“Access denied for user”数据库账号密码错误。“Unknown database”SQL文件没导入或者库名不一致。“Port 8080 was already in use”端口被占用改application.yml里的server.port。“Failed to configure a DataSource”依赖下载不完整Maven重新reimport。5.3 前端启动步骤第一步用VS Code打开前端文件夹。第二步确认已安装Node.js命令行执行node -vnpm -v。第三步执行npm install安装依赖。这一步能安装成功很关键因为前端依赖包版本冲突或者网络问题经常导致卡住国内网络建议配置npm淘宝镜像。第四步npm run serveVue 2默认或npm run devVite看到页面地址输出后浏览器打开。前端启动成功但页面白屏的情况我遇到过几种第一种是路由模式问题使用了history模式但没有后端配置支持浏览器刷新就404Vue的开发服务器默认是可以支持history模式的但生产环境需要Nginx配置try_files。第二种是请求后端跨域报错需要看Network面板。第三种是环境变量文件.env.development里配置的API地址写错了。5.4 前后端联调自测清单前后端都启动之后不是说“页面出来了”就算成功。真正联调要过一遍这些场景打开登录页用初始账号登录。初始账号密码一般写在SQL文件或README里常见的有admin/admin123。登录成功后进入后台左上角用户名正常显示。新增一条新闻填好标题、选好分类、写正文保存后列表出现这条新闻。退出登录直接访问后台编辑页URL看是否被拦截到登录页。前台打开首页能看到已发布的新闻未发布或已下架的状态不能出现。点击新闻详情内容正常渲染图片能打开浏览量1。如果支持视频新闻上传一个视频或者配置一个m3u8地址打开详情页看播放器是否正常。这条清单走完系统才算真正“能运行”。6. 常见问题与排查技巧实战6.1 前端请求接口报跨域错误跨域报错的信息很长核心是blocked by CORS policy。排查步骤确认后端接口能通过浏览器地址栏或Postman正常访问。确认后端是否配置CORS。确认前端请求的baseURL是否指向后端正确端口。最简单粗暴的方案是前端开发环境下配置代理Vite的server.proxy或Vue CLI的devServer.proxy把/api开头的请求转发到后端代理在开发服务器这一层处理浏览器看不到跨域。生产环境则用Nginx反向代理把前后端合并成同一个域名下的两个路径即可。我在实操中强烈推荐前端代理方案因为它不用改后端CORS逻辑还能顺便处理一些公共前缀是最省心、最不容易出错的方式。6.2 前端npm install装不上依赖最常见的情况是源太慢或者网络波动直接换成淘宝镜像npm config set registry https://registry.npmmirror.com。还有一个坑是队友提交了package-lock.json里面锁定的版本和你系统不兼容这时候可以先删掉package-lock.json和node_modules重新执行npm install。Node版本导致的依赖安装失败也很常见比如node-sass这类的老依赖在Node 17以上经常编译失败建议nvm安装一个项目要求的Node版本。如果你运行的是Vue 3 Vite命令是npm create vite依赖安装失败就删掉node_modules和lock文件重来不要一个个手动补依赖容易补漏。6.3 后端启动时数据库连接失败除了账号密码错、库名不一致之外还有一个容易忽略的点MySQL 8.x默认的认证插件是caching_sha2_password而一些旧版本的JDBC驱动只支持mysql_native_password连接时会直接报Public Key Retrieval is not allowed。解决办法是改JDBC URL加一个参数allowPublicKeyRetrievaltrueuseSSLfalse。如果是连接MySQL 5.7一般没这个问题。另外如果MySQL没启动Windows服务或者Linux下mysqld没跑起来那不管怎么改配置都是连接不上先用命令行mysql -u root -p试一下能否登录。6.4 JWT登录成功但请求接口还是401这种情况说明两种可能一是前端没有把token放到请求头检查axios拦截器是不是漏了二是后端拦截器没有放行/login接口或者放行路径写错了。还有一种隐藏比较深的情况是服务器时间或操作系统时间不对JWT的expired时间判断就会异常解析直接失败。如果是这种问题同步一下系统时间就好。6.5 图片显示不出来后台列表有数据但封面图显示成裂图这是前后端分离项目最常见的问题。原因很简单后端返回的是相对路径/upload/xxx.jpg前端直接拿这个路径去加载实际请求的是前端服务器的/upload/xxx.jpg但图片文件在后端服务器上。解决办法前端加一个图片地址前缀把后端服务地址拼上或者后端接口返回完整URL。另外检查后端是否有静态资源映射配置SpringBoot默认只映射static目录下的静态资源如果你把图片传到其他目录需要配置addResourceHandlers。这属于一个“看起来是前端问题实际是后端问题”的典型案例。6.6 数据库导入报错或中文乱码SQL文件导入报错先看SQL文件头部是不是有CREATE DATABASE语句。如果有可以直接在命令行里执行source /path/to/news.sql不用手动创建库。中文乱码问题根本原因就是字符集不一致。确保MySQL配置文件里character-set-serverutf8mb4SQL文件本身是UTF-8编码用VS Code或Notepad转换导入时再指定字符集比如mysql --default-character-setutf8mb4 -u root -p三层都对了才不会乱。如果不小心把乱码数据写进了库最省事的做法是删掉表重新导入。不要把时间花在手动一条条改数据上重新初始化干净数据比修数据要快得多。7. 二次开发思路与个人经验总结这套源码跑通之后通常就不是“运行”这个目标了而是要做二次开发。我总结几个我认为最有价值的方向后台加一个数据统计大屏前台加一个搜索关键词高亮新闻详情加一个上一篇/下一篇的导航评论支持二级回复和点赞。这几个功能点覆盖了后端SQL编写、前端交互组件封装、接口设计多个维度的进阶非常适合拿来练手。学习这套源码的具体路线我个人建议不要把时间平均分给每一个文件。优先级排序是先跑通再改后端一个业务接口再改前端一个页面交互最后试着加一张新表。比如给新闻表增加一个“是否置顶”字段后端需要加字段、加接口逻辑前端需要加表单控件、列表展示、排序规则一条链路全部走完比从头到尾看十遍代码都管用。还有一点想说的是这套源码适合拿来学习但直接拿去生产环境还差一些事密码加密方式、SQL防注入细节、接口限流、操作日志、数据备份方案这些都是真实上线前要补的。不过能把源码吃透这些问题对你来说只是时间问题。最后分享一个小技巧在这类前后端分离项目里面调试信息最有用的是浏览器F12的Network面板后端报错信息也有用但前端看到的信息往往不准。先看Network里请求是否成功、响应状态码是什么、响应体提示什么再去后端日志里搜对应的异常。这套排查路径走熟了后面遇到任何前后端联调问题你心里都有底。
