基于springboot框架和vue框架的论坛项目

前言

    本项目主要是设计和实现一个基于 Spring Boot 的论坛网站。
该系统是基于 Spring Boot 实现，数据存储使用的 mysql 数据库，前端 UI 界面使用的是国内较流行构建用户界面的渐进式框架的 Vue.js，及 Javascript 和element-ui 组件库。开发工具是 idea ，本课题所用上的框架技术都已经非常成熟，完全具备实现论坛网站的各方面条件。

对springboot框架的认识

    Spring Boot 是一款由 Spring 团队提供的全新框架，它旨在简化 Spring 应用的初始搭建以及开发过程。通过使用特定的方式来进行配置，开发者可以更加快速地开发 Spring 应用，并且该框架提供了许多内置的功能来帮助开发者更好地管理应用的各个方面。

1. 约定大于配置：
   • Spring Boot 遵循“约定大于配置”的原则，通过大量的默认配置来减少开发者需要编写的配置代码。
   • 开发者只需要在 application.properties 或 application.yml 文件中修改少量配置项，即可满足大部分应用的需求。
2. 自动配置：
   • Spring Boot 提供了自动配置功能，可以自动管理应用的依赖关系，并根据添加的依赖自动配置应用。
   • 例如，当项目中添加了 Spring MVC 的依赖时，Spring Boot 会自动配置嵌入式的 Tomcat 服务器和 Spring MVC 的相关组件。
3. 内嵌服务器：
   • Spring Boot 支持内嵌式的服务器，如 Tomcat、Jetty 或 Undertow，使得开发者可以直接运行应用，而无需部署到外部容器中。
   • 这大大简化了应用的部署过程，提高了开发效率。
4. 简化 Maven 配置：
   • Spring Boot 提供了许多“starter”依赖，这些依赖包含了应用所需的各种库和配置，使得 Maven 的 pom.xml 文件更加简洁。
   • 例如，添加 spring-boot-starter-web 依赖即可快速构建一个 Web 应用。
5. 健康检查、外部配置和安全性等特性：
   • Spring Boot 提供了丰富的功能，如健康检查、外部配置（如 Spring Cloud Config）、安全性（如 Spring Security）等，这些功能都可以通过简单的配置或注解来使用。
6. Actuator 模块：
   • Spring Boot Actuator 模块提供了生产级别的特性，如健康检查、审计、度量收集等。
   • 这些功能可以帮助开发者更好地监控和管理应用。
7. 与云原生和微服务架构的集成：
   • Spring Boot 非常适合用于构建云原生和微服务架构的应用。
   • 它与 Spring Cloud、Docker、Kubernetes 等技术紧密集成，使得开发者可以更加轻松地构建、部署和管理微服务应用。

对vue框架的认识

Vue.js（通常简称为Vue）是一个构建用户界面的渐进式JavaScript框架。它旨在通过简洁的API实现响应式数据绑定和组合的视图组件。以下是对Vue框架的几点主要认识：

1. 响应式数据绑定：    Vue.js 的核心特性之一是它的响应式系统。当数据对象发生改变时，视图会自动更新。这种数据驱动的方式使得开发者只需关注数据的改变，而无需手动操作DOM。
2. 组件化：  Vue 允许开发者将复杂的界面拆分为多个小的、可复用的组件。每个组件都包含了自己的HTML模板、JavaScript逻辑和CSS样式，这使得代码更加模块化、可维护。
3. 指令：      Vue 提供了一套指令（Directives），这些指令以 v- 开头，用于在模板中绑定数据、添加事件监听器等。例如，v-if 用于条件渲染，v-for 用于列表渲染。
4. 过渡与动画：   Vue 在插入、更新或移除DOM时提供了过渡与动画的支持。这使得开发者可以轻松地创建吸引人的用户界面。
5. 表单处理： Vue 提供了 v-model 指令，用于在表单输入元素和Vue实例的数据之间创建双向数据绑定。这使得表单处理变得简单而直观。
6. 轻量级与灵活性：Vue.js 是一个轻量级的框架，其核心库只关注视图层，因此易于学习和使用。同时，Vue 的灵活性也允许它与其他库或现有项目很好地集成。
7. 工具与生态系统：Vue.js 拥有一个庞大的社区和丰富的工具生态系统，包括Vue CLI（用于快速搭建Vue项目）、Vue Devtools（用于调试Vue应用）等。这些工具可以大大提高开发效率。
8. 性能优化：Vue.js 在性能优化方面做了很多工作，如虚拟DOM、异步组件加载等。这使得Vue应用能够在大规模数据和复杂场景下保持流畅的运行。

项目功能概述

框架展示

学习编写历程

开端

在idea里导入一个springboot框架，选择用maven管理项目，在生成的pom文件里有自动生成的依赖，再导入我们需要的其他依赖，如mybatis起步依赖、mysql驱动等，在生成的application.yml文件里填写各个配置信息（如datasource、mybatis、服务器）服务器端口默认为8080。SpringbootSchemaApplication为引导类，项目在这里运行。

客户端

  使用了html、css以及javascript等来实现了交流论坛、首页、登入页面、注册页面、个人中心等页面布局的构建。（以交流论坛页面为例）

前端框架使用了vue框架

下图是元素选择器、类选择器以及id选择器协助完成的有关于页面构建的部分代码。

这部分过于繁琐，参照了一些代码，图、颜色以及利用css设置文本信息过于复杂且重复，在想有没有更简单的办法。

部分功能展示：

1. 评论

  通过html、css等语言构建了评论的文字提示、文本框、确认以及重置按钮、回复的文本框、消息提示（包括消息内容以及发帖人头像）

在文本框以及文字提示使用了Layui框架的自定义属性，用于配合Layui的表单验证模块。指定了验证规则为"required"，即必须填写内容。当textarea为空时，显示的提示文本“请输入内容”。

提交按钮和重置按钮使用了Layui框架的layui-btn样式类，其中参考了lay-filter-“*”，Layui框架的过滤器属性，用于指定一个过滤器名称，以便在JavaScript中通过该名称监听这个按钮的点击事件。重置按钮type=“reset”使用了HTML的原生属性，用于重置表单到其初始值。

用户名容器 (username-container)包含了一个头像 (img元素) 和一个用户名 (span元素)头像使用src来定义来源，用户名使用vue框架来调用item的元素。

2.点赞

使用vue框架中的@click事件监听器来通过thumbsupnumClick方法统计点赞次数，但是还有些缺陷，好像没有办法防止重复点赞。

3.点击数

使用vue框架中的detail.Clicknum插值来实现点击数实时更新变化。

服务器

使用Spring MVC进行Web开发

模型（Model）：模型通常包括数据模型（用于表示数据结构）、业务逻辑（service层）（用于处理数据操作和业务规则）以及数据访问层（dao层）（用于与数据库或其他数据源进行交互）。在Spring MVC中，模型包含JavaBean对象，用于封装数据和业务逻辑。

视图（View）：视图通过模型获取数据，并将其以HTML页面展示给用户。

控制器（Controller）：负责接收用户http请求，调用相应的模型处理请求，并选择合适的视图来展示处理结果。

数据库检索

创建数据库：使用mysql， 编写sql文件，创建表，并加相应字段。

导入navicat，将创建的表可视化

在springboot中整合mybatis框架，依赖和配置文件在搭建springboot框架时就加好了。

将数据库分模块进行实体化，分为问题反馈、轮播图、评论、帖子、论坛类别、系统咨询、收藏、管理员、用户，和表里。

以问题反馈为例，用sql语句进行建表，添加相应字段，并在表中插入实例作为测试。

编写mapper接口和相应的xml文件来调用数据库，

Mapper接口继承了mybatis给的通用的接口，又加了几个方法

以交流论坛模块的接口其中的方法为例

List<JiaoliuluntanVO> selectListVO(@Param("ew") Wrapper<JiaoliuluntanEntity> wrapper);

1.接收一个 Wrapper<JiaoliuluntanEntity> 类型的参数（用于查询条件）。

2.返回一个 JiaoliuluntanVO 类型的列表。VO（View Object）用于展示层，包含展示需要的数据。

相应编写的xml文件中命名空间与其接口对应，然后进行结果映射，用于把相应的数据库中的列映射到实例中去，再使用各个查询语句对数据库进行查询。

总之，这个xml文件提供了从 数据库中各表中检索数据并将其映射到 Java 实体、视图的方法。

以点赞数和踩数为例，把相应的数据映射到了相应视图上

课设感想

    出现方向上的错误以及得出了经验：

由于我们想用springboot框架，但是不懂具体是怎么操作的，所以仅仅是了解到其是分层架构后，我们就分成表现层、业务层、持久层三部分进行深入学习了，但在学习过程中，发现各模块之间联系十分密切，只是孤立的学习一个模块会有很多问题出现，不同模块之间的交互搞得十分模糊，以至于浪费了很多时间，最终我们每个人都把自己所学的讨论了才发现有很多重复的地方，学习时一定要重视合作，各模块的交互。

在学习的过程中，意识到了代码的规范性，比如类、文件夹、包的命名，按规范写的代码让人容易去理解更清晰，也让你的队友伙伴更方便。

同时，在看到各个复杂的专业名词时，不要害怕，动动手指，在浏览器、csdn、b站、知乎等等多方式，慢慢来，总能学会的！

计算机语言都是人创造的，虽然我现在不知道，但总会知道的。