尧图网站建设 
1. 项目概述1.1 核心需求解析非遗展示系统本质上是一个内容管理 信息门户类型的网站。它要解决的核心问题很直接把散落在各地、各传承人手里、各文献资料中的非物质文化遗产信息集中到一个数字化平台上让普通用户能浏览、能搜索、能了解让管理员能维护、能更新、能运营。这个选题放在计算机毕业设计里属于典型的中等复杂度、知识覆盖面广、业务故事完整的项目。它不涉及高并发的电商秒杀也不涉及复杂的算法模型但SpringBoot的基础使用、MyBatis的数据库操作、Spring Security的权限控制、Vue的前后端分离交互、文件上传与静态资源映射、服务器部署这些毕业设计的高频考点它全都能覆盖到。更关键的是非遗这个业务主题有真实的社会价值和文化内涵答辩的时候比学生管理系统图书管理系统这种通用模板更有记忆点老师也会更愿意听你讲业务设计。从技术选型的角度前后端分离是最推荐的方向。后端用SpringBoot前端用Vue全家桶中间通过RESTful API通信。这个方案几乎成了近年来毕业设计的标准配置原因很简单一是社区资料极其丰富遇到问题搜一搜就有一堆解决方案二是面试和工作中这套技术栈也是主流做了不亏三是前后端分离可以让后端同学专注接口设计前端同学专注页面交互分工清晰项目结构看起来也专业。1.2 系统建设目标整个系统的建设目标我总结成三个层次第一层是信息展示。门户端要有清爽的首页、分类清晰的词条列表、内容丰富的详情页让访问者第一次进来就知道这个网站是干什么的能在这里看到什么。非遗项目的图片、简介、传承人、地区这些信息都要有合理的展示位置。第二层是内容管理。管理员要能通过后台管理系统方便地对词条、分类、资讯、评论、留言进行增删改查。这里的关键是方便——后台的操作路径要短表单校验要完整数据列表要支持分页和搜索不然数据量一上去后台就变成了灾难现场。第三层是互动传播。用户浏览之余能评论、能留言、能收藏管理员能审核、能回复。这一层把静态的展示网站升级成了有交流氛围的文化社区。虽然功能本身不复杂但有了这一层系统的业务故事就完整了演示的时候也能多几个可操作的交互点。这三层目标对应着项目里最重要的三块代码门户端页面、后台管理端、权限与互动模块。后面所有的设计决策都围绕这三个目标展开。2. 技术选型与设计思路2.1 为什么是SpringBoot Vue这个组合已经成为毕业设计的标准答案背后是有充分理由的不是人云亦云。SpringBoot的优势在于约定大于配置。相比传统的SSHSpring Struts Hibernate或者SSMSpring SpringMVC MyBatis繁琐的XML配置SpringBoot通过自动配置把大部分样板代码省掉了。你只需要引入依赖写好application.yml一个能跑起来的Web项目就搭好了。这对时间有限的毕业生来说意味着可以把精力放在业务代码上而不是消耗在环境配置里。同时SpringBoot内嵌Tomcat打包成jar直接运行部署成本也低。Vue作为前端框架核心优势是响应式数据绑定和组件化开发。页面被拆成一个个组件每个组件维护自己的状态数据变化自动驱动视图更新。做后台管理这种表单密集型、表格密集型的界面Vue的v-model双向绑定能省掉大量手动操作DOM的代码。Element UI组件库则进一步加速了开发——表格、表单、弹窗、分页这些现成组件一套就用界面简洁统一演示的时候观感也好。我还想多说一句关于MyBatis vs MyBatis-Plus的选择。如果你对SQL很熟想展示手写SQL的能力用MyBatis没问题如果你更想快速完成项目强烈建议直接用MyBatis-Plus。它的BaseMapper帮你把单表的增删改查全封装好了分页插件也现成LambdaQueryWrapper写条件查询又安全又简洁。毕业设计阶段效率是第一位的MyBatis-Plus能帮你省下至少一周的CRUD时间。2.2 SpringBoot非遗传展示系统的提前准备动手写代码之前有几件事一定要提前准备好否则中途容易卡壳甚至返工。第一个是数据。非遗展示系统是个内容型网站没有数据页面再漂亮也是空壳。我当时用一个周末整理了一份包含80多条非遗词条的Excel词汇表覆盖传统技艺、传统美术、传统戏剧、民间文学、传统医药等大类每条包含名称、类别、地区、级别、传承人、简介等字段。这些数据演示的时候很有说服力——分类点进去有货搜索框能搜出结果而不是满屏的暂无数据。第二个是素材。图片是门户型网站的颜值担当。我从公开的图库和官方公开报道里找了一些非遗项目的代表性图片统一压缩处理过再上传到服务器。注意这里不要直接盗用版权不明的商业图库图片用公开渠道的素材或者自己拍的实物图最稳妥。答辩的时候如果有人问版权你也能交代清楚。第三个是接口设计文档。不需要写得很正式但前后端联调之前至少要把每个接口的路径、请求方法、请求参数、返回结构列出来。比如POST /api/user/login参数{username, password}返回{token, userInfo}。这东西看起来繁琐一旦开始写代码作用立竿见影——前端不用问你要字段你也不用返工改接口。我见过太多项目因为接口没对齐前后端联调时互相等浪费了大量时间。2.3 非遗数据的词条结构化建模用Excel做词汇表的时候我定义了一个相对通用的结构词条名称、所属类别、非遗级别、传承人、地区、简介、详细描述、图片URL、视频URL、状态。这套字段设计既满足了展示需求也为后续扩展预留了空间。比如传承人字段虽然只有少数词条有值但一旦有页面上的信息层次感立刻就不一样了——官方的非遗站通常都有传承人专栏这也是评审老师可能会关注的细节点。图片和视频URL我存的是相对路径文件本体在服务器upload目录访问的时候通过Nginx映射静态资源这样数据库里不会塞满Base64字符串性能更可控。导入方式我做了两套一是一键批量导入Excel二是后台管理页逐条手动添加。批量导入用的是Apache POIEasyExcel也行但POI更直接解析第一个sheet按列名映射到实体字段校验必填项跳过空行导入完成后返回成功条数和失败条数失败原因记录在日志里。这里有个很容易翻车的点Excel的日期列在POI里读出来可能是数字格式比如单元格数字45291代表的其实是某个日期序列值。如果你直接把单元格转成字符串得到的是一串数字而不是日期。所以读取日期列的时候必须用getDateCellValue()拿Date对象再手动格式化成字符串。这个坑踩过一次就长记性了。除了Excel导入我还接了一个小工具从公开的非遗名录页面抓取基础信息用HttpClient请求页面、JSoup解析HTML把词条名称、类别、地区这些结构化字段抽取出来存库。这个思路做毕业设计挺好的一方面能展示爬虫和解析能力另一方面数据量能快速撑起来。但要注意版权和规范问题只保留公开的基础信息不抓取版权保护的图片和长文演示用完全足够也不越界。词条管理模块的前端页面我用的是Element UI的表格组件配合后端PageHelper分页插件或者MyBatis-Plus的分页看你用哪个。每一行操作列放了查看编辑删除三个按钮点击查看弹出抽屉Drawer展示该词条的完整信息和高清图片预览点击编辑跳转到表单页提交时用PUT请求更新删除时前端先弹一次确认框防止手滑。这个地方有一个体验细节无论是新增、编辑还是删除操作完成后前端都要重新刷新当前页数据而不是跳回第一页不然用户翻到第三页改了一条数据刷新后回到第一页体验很割裂。这个操作后停留在当前页的逻辑虽然简单但不少项目都懒得做做完以后答辩演示的时候能给评委留下这个学生考虑很周全的印象。2.4 首页信息门户与非遗场景展示非遗展示系统说到底是个信息门户型网站首页的观感基本决定了整个项目的印象分。所以我把首页做成了图文轮播 分类入口 热门词条 数据看板的组合。顶部导航栏依次是首页、非遗项目、非遗资讯、传承人、关于我们。轮播图区域放3-5张精选非遗项目的封面图我用了前后端分离下最常见的做法——图片地址存数据库前端拿到URL后通过Nginx静态资源映射加载。每张轮播图配一句简短的介绍文案点到对应的详情页。分类入口这一块我用了图标文字的方式把传统美术、传统技艺、传统戏剧、民间文学等项目类别做成卡片点击任意卡片进入该分类下的词条列表。做这个功能的时候要特别注意一个细节分类名的设计。列表里常用的中文名称和数据库里的字典编码是一一对应的比如传统技艺对应字典值tech前端请求列表时带上这个编码后端按字典值过滤。这块如果设计得不好后期新增一个分类就要改前后端多处代码。热门词条是首页的点睛之笔。我最初设计的推荐逻辑是按浏览量倒序取前6条做法是在词条表加一个view_count字段每次详情页被访问时自增。这个方案简单有效但有一个小隐患浏览量一高热门词条很容易固化成榜新词条永远上不了首页。后来我加了一条规则热门榜排除最近48小时新增的词条或者用时间衰减因子打分让新旧词条都有机会展示。这个优化虽然不起眼但我在答辩时被问到你的热门推荐怎么实现的时候直接把公式和思路讲出来老师明显对这种考虑到了冷启动问题的设计很感兴趣。数据看板放的是几个关键数字非遗项目总数、代表性传承人数量、资讯数量、累计访问量。这个数据看板的后端实现很简单就是几个COUNT查询加上一个SUM。设计成纯数字展示而不是搞复杂的图表是因为我发现很多毕设项目一上来就堆图表ECharts拉了一堆配置最后答辩演示的时候自己都讲不清每个图的含义。而数字看板配合一个简单的趋势图按月份统计浏览量既能展示数据能力又能让页面有个视觉亮点足够了。首页还有一个容易被忽略的隐藏功能搜索框。我放在导航栏右侧支持按词条名称、分类、地区模糊搜索。后端接口是GET /api/intangible/search?keywordxxx用MySQL的LIKE配合全文索引返回命中的词条列表。搜索结果的排序我做了个小优化完全匹配的词条排在前面包含匹配的排在后面再按浏览量降序。实现方式是在SQL里用CASE WHEN计算匹配权重或者直接查出结果后在Java里二次排序。这个小细节对用户体验的提升很明显也方便在答辩时讲出我不只是做了个拼SQL的搜索。2.5 后台管理端设计与角色权限后台管理端是整个项目的数据入口我用的是较为普遍的前后端一体方案也就是独立的admin前端页面配合SpringBoot端的权限拦截器。考虑到毕设项目的完成效率我选择了前后端分离但后台管理系统保持了简洁克制的设计——左侧导航栏是仪表盘、词条管理、分类管理、资讯管理、留言管理、用户管理顶部是欢迎信息和管理员头像。权限模型上我没有把问题复杂化只设了普通用户和管理员两种角色。普通用户在门户端可以浏览、搜索、留言、收藏管理员在后台可以增删改查所有模块的数据。权限控制的实现方式是在Spring Security里配置两个接口路径集合/api/admin/**需要ADMIN角色其余接口只需要登录态或者完全公开。加了Spring Security之后登录逻辑也顺手做好了登录用JSON请求体提交用户名密码成功后返回一个Token前端把它存在localStorage每次请求在Header里带Authorization: Bearer 。这样不需要维护Session前后端分离环境下非常好用。关于Token令牌有一个特别容易踩的坑有效期设置太短用户在门户端逛了20分钟再去后台操作结果Token过期被弹回登录页体验极差。我设置的默认有效期是2小时答辩演示之前如果担心时间拖太久可以在配置中心临时调长到12小时演示完再改回来。这个细节在答辩当天非常重要我就是因为提前想到了演示全程没有出现过突然掉线的尴尬场面。后台的表单验证也是一个值得展开的点词条表单里的必填字段词条名称、类别、地区前端做了一次校验后端在Service层又做了一次校验。有人觉得重复校验啰嗦但我的经验是前端校验是为了用户体验提示快后端校验是为了数据安全防止绕过前端直接调接口。前后端双重校验既能保证演示流畅也能在老师问安全方面做了什么的时候有理有据地回答。2.6 评论互动模块与留言管理非遗展示系统如果不做用户互动就显得像个静态官网所以我加了一个轻量级的评论留言模块。用户在门户端浏览完一个词条后可以在详情页底部发表评论评论内容包含文字和评分1-5星。后端接口是POST /api/intangible/{id}/comments校验用户登录态之后把评论写入数据库的comment表。列表区展示最新评论按时间倒序每条评论显示用户昵称、头像初始化为默认头像支持上传修改、评论时间和内容。这个模块看起来简单但有两个必须处理的细节。第一个是XSS问题用户提交评论时如果直接存HTML或脚本片段一旦在前端用v-html渲染就可能触发弹窗甚至恶意脚本。我的处理方式是后端入库前做HTML转义把 SpringBoot+Vue前后端分离非遗展示系统设计与实现解析
1. 项目概述1.1 核心需求解析非遗展示系统本质上是一个内容管理 信息门户类型的网站。它要解决的核心问题很直接把散落在各地、各传承人手里、各文献资料中的非物质文化遗产信息集中到一个数字化平台上让普通用户能浏览、能搜索、能了解让管理员能维护、能更新、能运营。这个选题放在计算机毕业设计里属于典型的中等复杂度、知识覆盖面广、业务故事完整的项目。它不涉及高并发的电商秒杀也不涉及复杂的算法模型但SpringBoot的基础使用、MyBatis的数据库操作、Spring Security的权限控制、Vue的前后端分离交互、文件上传与静态资源映射、服务器部署这些毕业设计的高频考点它全都能覆盖到。更关键的是非遗这个业务主题有真实的社会价值和文化内涵答辩的时候比学生管理系统图书管理系统这种通用模板更有记忆点老师也会更愿意听你讲业务设计。从技术选型的角度前后端分离是最推荐的方向。后端用SpringBoot前端用Vue全家桶中间通过RESTful API通信。这个方案几乎成了近年来毕业设计的标准配置原因很简单一是社区资料极其丰富遇到问题搜一搜就有一堆解决方案二是面试和工作中这套技术栈也是主流做了不亏三是前后端分离可以让后端同学专注接口设计前端同学专注页面交互分工清晰项目结构看起来也专业。1.2 系统建设目标整个系统的建设目标我总结成三个层次第一层是信息展示。门户端要有清爽的首页、分类清晰的词条列表、内容丰富的详情页让访问者第一次进来就知道这个网站是干什么的能在这里看到什么。非遗项目的图片、简介、传承人、地区这些信息都要有合理的展示位置。第二层是内容管理。管理员要能通过后台管理系统方便地对词条、分类、资讯、评论、留言进行增删改查。这里的关键是方便——后台的操作路径要短表单校验要完整数据列表要支持分页和搜索不然数据量一上去后台就变成了灾难现场。第三层是互动传播。用户浏览之余能评论、能留言、能收藏管理员能审核、能回复。这一层把静态的展示网站升级成了有交流氛围的文化社区。虽然功能本身不复杂但有了这一层系统的业务故事就完整了演示的时候也能多几个可操作的交互点。这三层目标对应着项目里最重要的三块代码门户端页面、后台管理端、权限与互动模块。后面所有的设计决策都围绕这三个目标展开。2. 技术选型与设计思路2.1 为什么是SpringBoot Vue这个组合已经成为毕业设计的标准答案背后是有充分理由的不是人云亦云。SpringBoot的优势在于约定大于配置。相比传统的SSHSpring Struts Hibernate或者SSMSpring SpringMVC MyBatis繁琐的XML配置SpringBoot通过自动配置把大部分样板代码省掉了。你只需要引入依赖写好application.yml一个能跑起来的Web项目就搭好了。这对时间有限的毕业生来说意味着可以把精力放在业务代码上而不是消耗在环境配置里。同时SpringBoot内嵌Tomcat打包成jar直接运行部署成本也低。Vue作为前端框架核心优势是响应式数据绑定和组件化开发。页面被拆成一个个组件每个组件维护自己的状态数据变化自动驱动视图更新。做后台管理这种表单密集型、表格密集型的界面Vue的v-model双向绑定能省掉大量手动操作DOM的代码。Element UI组件库则进一步加速了开发——表格、表单、弹窗、分页这些现成组件一套就用界面简洁统一演示的时候观感也好。我还想多说一句关于MyBatis vs MyBatis-Plus的选择。如果你对SQL很熟想展示手写SQL的能力用MyBatis没问题如果你更想快速完成项目强烈建议直接用MyBatis-Plus。它的BaseMapper帮你把单表的增删改查全封装好了分页插件也现成LambdaQueryWrapper写条件查询又安全又简洁。毕业设计阶段效率是第一位的MyBatis-Plus能帮你省下至少一周的CRUD时间。2.2 SpringBoot非遗传展示系统的提前准备动手写代码之前有几件事一定要提前准备好否则中途容易卡壳甚至返工。第一个是数据。非遗展示系统是个内容型网站没有数据页面再漂亮也是空壳。我当时用一个周末整理了一份包含80多条非遗词条的Excel词汇表覆盖传统技艺、传统美术、传统戏剧、民间文学、传统医药等大类每条包含名称、类别、地区、级别、传承人、简介等字段。这些数据演示的时候很有说服力——分类点进去有货搜索框能搜出结果而不是满屏的暂无数据。第二个是素材。图片是门户型网站的颜值担当。我从公开的图库和官方公开报道里找了一些非遗项目的代表性图片统一压缩处理过再上传到服务器。注意这里不要直接盗用版权不明的商业图库图片用公开渠道的素材或者自己拍的实物图最稳妥。答辩的时候如果有人问版权你也能交代清楚。第三个是接口设计文档。不需要写得很正式但前后端联调之前至少要把每个接口的路径、请求方法、请求参数、返回结构列出来。比如POST /api/user/login参数{username, password}返回{token, userInfo}。这东西看起来繁琐一旦开始写代码作用立竿见影——前端不用问你要字段你也不用返工改接口。我见过太多项目因为接口没对齐前后端联调时互相等浪费了大量时间。2.3 非遗数据的词条结构化建模用Excel做词汇表的时候我定义了一个相对通用的结构词条名称、所属类别、非遗级别、传承人、地区、简介、详细描述、图片URL、视频URL、状态。这套字段设计既满足了展示需求也为后续扩展预留了空间。比如传承人字段虽然只有少数词条有值但一旦有页面上的信息层次感立刻就不一样了——官方的非遗站通常都有传承人专栏这也是评审老师可能会关注的细节点。图片和视频URL我存的是相对路径文件本体在服务器upload目录访问的时候通过Nginx映射静态资源这样数据库里不会塞满Base64字符串性能更可控。导入方式我做了两套一是一键批量导入Excel二是后台管理页逐条手动添加。批量导入用的是Apache POIEasyExcel也行但POI更直接解析第一个sheet按列名映射到实体字段校验必填项跳过空行导入完成后返回成功条数和失败条数失败原因记录在日志里。这里有个很容易翻车的点Excel的日期列在POI里读出来可能是数字格式比如单元格数字45291代表的其实是某个日期序列值。如果你直接把单元格转成字符串得到的是一串数字而不是日期。所以读取日期列的时候必须用getDateCellValue()拿Date对象再手动格式化成字符串。这个坑踩过一次就长记性了。除了Excel导入我还接了一个小工具从公开的非遗名录页面抓取基础信息用HttpClient请求页面、JSoup解析HTML把词条名称、类别、地区这些结构化字段抽取出来存库。这个思路做毕业设计挺好的一方面能展示爬虫和解析能力另一方面数据量能快速撑起来。但要注意版权和规范问题只保留公开的基础信息不抓取版权保护的图片和长文演示用完全足够也不越界。词条管理模块的前端页面我用的是Element UI的表格组件配合后端PageHelper分页插件或者MyBatis-Plus的分页看你用哪个。每一行操作列放了查看编辑删除三个按钮点击查看弹出抽屉Drawer展示该词条的完整信息和高清图片预览点击编辑跳转到表单页提交时用PUT请求更新删除时前端先弹一次确认框防止手滑。这个地方有一个体验细节无论是新增、编辑还是删除操作完成后前端都要重新刷新当前页数据而不是跳回第一页不然用户翻到第三页改了一条数据刷新后回到第一页体验很割裂。这个操作后停留在当前页的逻辑虽然简单但不少项目都懒得做做完以后答辩演示的时候能给评委留下这个学生考虑很周全的印象。2.4 首页信息门户与非遗场景展示非遗展示系统说到底是个信息门户型网站首页的观感基本决定了整个项目的印象分。所以我把首页做成了图文轮播 分类入口 热门词条 数据看板的组合。顶部导航栏依次是首页、非遗项目、非遗资讯、传承人、关于我们。轮播图区域放3-5张精选非遗项目的封面图我用了前后端分离下最常见的做法——图片地址存数据库前端拿到URL后通过Nginx静态资源映射加载。每张轮播图配一句简短的介绍文案点到对应的详情页。分类入口这一块我用了图标文字的方式把传统美术、传统技艺、传统戏剧、民间文学等项目类别做成卡片点击任意卡片进入该分类下的词条列表。做这个功能的时候要特别注意一个细节分类名的设计。列表里常用的中文名称和数据库里的字典编码是一一对应的比如传统技艺对应字典值tech前端请求列表时带上这个编码后端按字典值过滤。这块如果设计得不好后期新增一个分类就要改前后端多处代码。热门词条是首页的点睛之笔。我最初设计的推荐逻辑是按浏览量倒序取前6条做法是在词条表加一个view_count字段每次详情页被访问时自增。这个方案简单有效但有一个小隐患浏览量一高热门词条很容易固化成榜新词条永远上不了首页。后来我加了一条规则热门榜排除最近48小时新增的词条或者用时间衰减因子打分让新旧词条都有机会展示。这个优化虽然不起眼但我在答辩时被问到你的热门推荐怎么实现的时候直接把公式和思路讲出来老师明显对这种考虑到了冷启动问题的设计很感兴趣。数据看板放的是几个关键数字非遗项目总数、代表性传承人数量、资讯数量、累计访问量。这个数据看板的后端实现很简单就是几个COUNT查询加上一个SUM。设计成纯数字展示而不是搞复杂的图表是因为我发现很多毕设项目一上来就堆图表ECharts拉了一堆配置最后答辩演示的时候自己都讲不清每个图的含义。而数字看板配合一个简单的趋势图按月份统计浏览量既能展示数据能力又能让页面有个视觉亮点足够了。首页还有一个容易被忽略的隐藏功能搜索框。我放在导航栏右侧支持按词条名称、分类、地区模糊搜索。后端接口是GET /api/intangible/search?keywordxxx用MySQL的LIKE配合全文索引返回命中的词条列表。搜索结果的排序我做了个小优化完全匹配的词条排在前面包含匹配的排在后面再按浏览量降序。实现方式是在SQL里用CASE WHEN计算匹配权重或者直接查出结果后在Java里二次排序。这个小细节对用户体验的提升很明显也方便在答辩时讲出我不只是做了个拼SQL的搜索。2.5 后台管理端设计与角色权限后台管理端是整个项目的数据入口我用的是较为普遍的前后端一体方案也就是独立的admin前端页面配合SpringBoot端的权限拦截器。考虑到毕设项目的完成效率我选择了前后端分离但后台管理系统保持了简洁克制的设计——左侧导航栏是仪表盘、词条管理、分类管理、资讯管理、留言管理、用户管理顶部是欢迎信息和管理员头像。权限模型上我没有把问题复杂化只设了普通用户和管理员两种角色。普通用户在门户端可以浏览、搜索、留言、收藏管理员在后台可以增删改查所有模块的数据。权限控制的实现方式是在Spring Security里配置两个接口路径集合/api/admin/**需要ADMIN角色其余接口只需要登录态或者完全公开。加了Spring Security之后登录逻辑也顺手做好了登录用JSON请求体提交用户名密码成功后返回一个Token前端把它存在localStorage每次请求在Header里带Authorization: Bearer 。这样不需要维护Session前后端分离环境下非常好用。关于Token令牌有一个特别容易踩的坑有效期设置太短用户在门户端逛了20分钟再去后台操作结果Token过期被弹回登录页体验极差。我设置的默认有效期是2小时答辩演示之前如果担心时间拖太久可以在配置中心临时调长到12小时演示完再改回来。这个细节在答辩当天非常重要我就是因为提前想到了演示全程没有出现过突然掉线的尴尬场面。后台的表单验证也是一个值得展开的点词条表单里的必填字段词条名称、类别、地区前端做了一次校验后端在Service层又做了一次校验。有人觉得重复校验啰嗦但我的经验是前端校验是为了用户体验提示快后端校验是为了数据安全防止绕过前端直接调接口。前后端双重校验既能保证演示流畅也能在老师问安全方面做了什么的时候有理有据地回答。2.6 评论互动模块与留言管理非遗展示系统如果不做用户互动就显得像个静态官网所以我加了一个轻量级的评论留言模块。用户在门户端浏览完一个词条后可以在详情页底部发表评论评论内容包含文字和评分1-5星。后端接口是POST /api/intangible/{id}/comments校验用户登录态之后把评论写入数据库的comment表。列表区展示最新评论按时间倒序每条评论显示用户昵称、头像初始化为默认头像支持上传修改、评论时间和内容。这个模块看起来简单但有两个必须处理的细节。第一个是XSS问题用户提交评论时如果直接存HTML或脚本片段一旦在前端用v-html渲染就可能触发弹窗甚至恶意脚本。我的处理方式是后端入库前做HTML转义把