垃圾分类科普及课程平台-CSDN博客

本文链接：https://blog.csdn.net/qq_42190530/article/details/142670100

一、前言

随着全球环境问题的日益严峻，垃圾分类成为了保护环境、实现可持续发展的重要举措。在我国，越来越多的城市开始推行垃圾分类制度，但公众对垃圾分类的认识和理解还存在不足。因此，建立一个垃圾分类科普及课程平台，提高公众的环保意识和垃圾分类能力，具有重要的现实意义。

本项目采用 Spring Boot、MySQL 和 Vue 技术栈，实现了垃圾分类科普及课程平台。Spring Boot 简化了后端开发，提供高效的服务端架构。MySQL 作为可靠的数据库，存储大量课程及用户数据。Vue 则构建了用户友好的前端界面，提升交互体验。前后端分离的架构使开发更高效，易于维护。通过这些技术的结合，平台具备稳定、快速响应和良好扩展性，为用户提供优质的垃圾分类科普课程服务，助力环保事业发展。

二、技术环境

前端：Vue、Elemet-plus

后端：SpringBoot、SpringMVC、Mybatis、Redis

插件：Maven Helper、Lombok、MybatisLog

工具：IDEA、Postman、Maven、Git、Navicat

环境：Windows10、MySQL

三、功能设计

3.1 管理员用例图如下图所示：

3.2 用户用例图如下图所示：

四、数据库设计

数据库的 E-R 图（实体 - 关系图）是一种强大的工具，用于直观地表示数据库中的实体及其之间的关系。在数据库设计中，E-R 图可以帮助我们清晰地理解数据的结构和流向。限于篇幅要求，仅列出关键部分实体属性图，如下所述。

五、部分效果展示

5.1 首页呈现热门垃圾分类课程推荐，设有课程分类导航。用户可快速查看个人学习进度。还有环保新闻动态板块，让用户及时了解垃圾分类相关资讯。

5.2 界面展示各类垃圾食品图片及名称。详细列出其危害成分，并有健康小贴士。可一键分享给他人，提醒大家远离垃圾食品，选择健康饮食。

5.3 收藏界面罗列用户收藏的垃圾分类课程。可直观查看课程标题与简介，方便快速找到所需。支持取消收藏操作，管理收藏内容更便捷。

5.4 界面有视频录制按钮，可选择摄像头和麦克风。可添加文字描述，设置视频标题。录制完成可预览并选择上传，轻松发起垃圾分类相关视频。

5.5 界面展示所有课程信息，包括课程名称、上传者、浏览量等。可进行编辑、删除操作。有筛选功能，方便管理员快速管理和查找特定课程。

5.6 界面呈现各类科普内容分类，可添加、编辑科普文章和图片。有审核状态显示，方便管理员把控质量。支持搜索功能，快速定位特定科普内容。

六、部分功能代码

6.1 分页查询评论

<select id="list" resultType="com.company.project.model.MomentComment">
        select mc.id as id,mc.created_by as createdBy,mc.created_at as createdAt,mc.moment_id as momentId,mc.parent_id as parentId,
               mc.comment as comment,mc.state as state,mc.image_urls as imageUrls,
                u.user_name as userName, u.avatar as avatar
        from t_moment_comment mc
        left join t_user u on mc.created_by = u.id
        where mc.is_delete = 0
        <if test="createdBy != null and createdBy != ''">
            and mc.created_by = #{createdBy}
        </if>
    </select>

七、答辩可能出现的问题

🌟问题一
答辩老师：Vue 组件化开发在这个项目中有哪些具体体现？
同学可回答：在平台的前端界面中，将页面拆分为多个独立的 Vue 组件，如导航栏组件、课程列表组件、课程详情组件等。每个组件具有自己的模板、样式和逻辑，提高了代码的可维护性和可复用性。例如，当需要在多个页面中显示课程列表时，可以直接复用课程列表组件。