技术博客
惊喜好礼享不停
技术博客
基于Spring Boot和Vue3技术的网站开发之旅

基于Spring Boot和Vue3技术的网站开发之旅

作者: 万维易源
2024-11-07
Spring BootVue3腾讯云Mybatis宝塔面板

摘要

本项目是一个基于Spring Boot和Vue技术栈的网站，旨在模仿一个现有的项目。该网站采用了Vue3、Vite5、Axios、Element Plus、Wangeditor5、Highlightjs等前沿前端技术，以及Spring Boot2、Mybatis、MySQL8等强大的后端技术。项目部署在腾讯云服务器上，并通过宝塔面板进行高效管理和维护。

关键词

Spring Boot, Vue3, 腾讯云, Mybatis, 宝塔面板

一、项目背景与准备

1.1 Vue3与Spring Boot的概述及其优势

Vue3 和 Spring Boot 是当前前后端开发领域中备受推崇的技术栈，它们各自拥有独特的优势，共同为开发者提供了高效、灵活且强大的开发体验。

Vue3 是 Vue.js 的最新版本，它在性能、可维护性和开发体验方面进行了全面的优化。Vue3 引入了 Composition API，使得组件逻辑更加清晰和模块化，极大地提高了代码的可读性和复用性。此外，Vue3 还引入了响应式系统的新机制，使得数据更新更加高效，减少了不必要的渲染开销。这些改进不仅提升了开发效率，还显著改善了用户体验。

Spring Boot 则是 Java 开发者中的明星框架，它通过约定优于配置的原则，简化了 Spring 应用的初始设置和开发过程。Spring Boot 提供了一整套自动配置功能，使得开发者可以快速启动和运行应用，而无需过多关注底层细节。同时，Spring Boot 集成了众多企业级功能，如安全、数据访问、缓存等，使得开发者能够专注于业务逻辑的实现。Spring Boot 与 Mybatis 的结合，更是为数据持久层提供了强大的支持，使得数据库操作变得简单而高效。

1.2 项目环境配置与初始化

在开始构建基于 Vue3 和 Spring Boot 的项目之前，首先需要确保开发环境的正确配置。以下是一些关键步骤，帮助开发者顺利启动项目：

  1. 安装 Node.js 和 npm：
    确保系统中已安装 Node.js 和 npm。可以通过以下命令检查是否已安装：
    node -v
npm -v

    如果未安装，可以从 Node.js 官网 下载并安装最新版本。
  2. 安装 Vue CLI：
    使用 npm 安装 Vue CLI，这是创建和管理 Vue 项目的官方工具。
    npm install -g @vue/cli
  3. 创建 Vue3 项目：
    使用 Vue CLI 创建一个新的 Vue3 项目。
    vue create my-vue-app
cd my-vue-app

    在创建过程中，选择 Vue3 作为项目模板，并根据需要选择其他依赖项，如 Vite5、Axios、Element Plus 等。
  4. 安装 Vite5：
    Vite 是一个由 Vue.js 作者尤雨溪开发的新型构建工具，它通过原生 ES 模块提供更快的开发服务器启动速度和热更新。
    npm install vite --save-dev
  5. 安装 Axios 和 Element Plus：
    Axios 是一个基于 Promise 的 HTTP 客户端，用于与后端进行数据交互。Element Plus 是一套基于 Vue3 的 UI 组件库，提供了丰富的组件和样式。
    npm install axios element-plus
  6. 安装 Wangeditor5 和 Highlightjs：
    Wangeditor 是一个富文本编辑器，Highlightjs 用于代码高亮显示。
    npm install wangeditor highlight.js
  7. 配置 Spring Boot 项目：
    使用 Spring Initializr 创建一个新的 Spring Boot 项目，选择所需的依赖项，如 Web、Mybatis、MySQL 等。
    https://start.spring.io/
  8. 配置数据库连接：
    在 application.properties 文件中配置 MySQL 数据库连接信息。
    spring.datasource.url=jdbc:mysql://localhost:3306/your_database?useSSL=false&serverTimezone=UTC
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  9. 启动项目：
    分别启动前端和后端项目，确保两者能够正常通信。
    # 启动前端项目
npm run serve

# 启动后端项目
mvn spring-boot:run

通过以上步骤，开发者可以顺利完成基于 Vue3 和 Spring Boot 的项目环境配置与初始化，为后续的开发工作打下坚实的基础。

二、技术栈解析

2.1 前端框架与技术选型

在构建基于 Spring Boot 和 Vue 技术栈的网站时，前端框架和技术的选择至关重要。Vue3 作为 Vue.js 的最新版本，不仅在性能上有了显著提升，还在开发体验和代码可维护性方面做出了重大改进。以下是项目中使用的前端技术和其优势的详细分析：

Vue3

Vue3 引入了 Composition API，这一新特性使得组件逻辑更加清晰和模块化。Composition API 允许开发者将相关的逻辑组织在一起，从而提高代码的可读性和复用性。此外，Vue3 的响应式系统也得到了优化，通过 Proxy 对象实现了更高效的依赖追踪和数据更新，减少了不必要的渲染开销。这些改进不仅提升了开发效率，还显著改善了用户体验。

Vite5

Vite 是由 Vue.js 作者尤雨溪开发的新型构建工具，它通过原生 ES 模块提供更快的开发服务器启动速度和热更新。Vite 的冷启动时间极短，能够在几秒钟内启动开发服务器，大大缩短了开发者的等待时间。此外，Vite 还支持按需编译，只有在文件发生变化时才会重新编译，进一步提高了开发效率。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境。在本项目中，Axios 用于与后端进行数据交互，提供了简洁的 API 和强大的功能。通过 Axios，开发者可以轻松地发送 GET、POST、PUT 等请求，并处理响应数据。Axios 还支持拦截器，可以在请求发送前或响应接收后执行自定义逻辑，增强了请求的灵活性和安全性。

Element Plus

Element Plus 是一套基于 Vue3 的 UI 组件库，提供了丰富的组件和样式。Element Plus 的组件设计精美，易于使用，能够快速搭建出美观且功能齐全的用户界面。项目中使用了 Element Plus 的按钮、表单、表格等组件，大大简化了前端开发的工作量，提高了开发效率。

Wangeditor5 和 Highlightjs

Wangeditor 是一个功能强大的富文本编辑器，支持多种富文本格式和插件扩展。在本项目中，Wangeditor 用于实现文章编辑功能，提供了丰富的编辑工具和自定义选项。Highlightjs 则用于代码高亮显示，通过简单的配置即可实现代码的语法高亮，提升了代码的可读性和美观度。

2.2 后端框架与技术选型

在后端开发中，Spring Boot 和 Mybatis 的组合为项目提供了强大的支持。Spring Boot 通过约定优于配置的原则，简化了应用的初始设置和开发过程，而 Mybatis 则为数据持久层提供了高效的支持。以下是项目中使用的后端技术和其优势的详细分析：

Spring Boot2

Spring Boot 是 Java 开发者中的明星框架，它通过一系列自动配置功能，使得开发者可以快速启动和运行应用，而无需过多关注底层细节。Spring Boot 集成了众多企业级功能，如安全、数据访问、缓存等，使得开发者能够专注于业务逻辑的实现。在本项目中，Spring Boot 用于构建 RESTful API，提供了稳定且高效的后端服务。

Mybatis

Mybatis 是一个优秀的持久层框架，它通过 XML 或注解的方式配置 SQL 语句，使得数据库操作变得简单而高效。Mybatis 支持动态 SQL，可以根据不同的条件生成不同的 SQL 语句，提高了代码的灵活性和可维护性。在本项目中，Mybatis 与 Spring Boot 结合使用，提供了强大的数据访问能力，简化了数据库操作的复杂性。

MySQL8

MySQL 是世界上最流行的开源关系型数据库管理系统之一，以其高性能、可靠性和易用性著称。MySQL8 引入了许多新特性，如窗口函数、不可见索引等，进一步提升了数据库的性能和功能。在本项目中，MySQL8 用于存储和管理数据，提供了稳定且高效的数据存储解决方案。

项目部署与管理

项目部署在腾讯云服务器上，并通过宝塔面板进行高效管理和维护。腾讯云提供了稳定的云服务，支持多种操作系统和开发环境，满足了项目的需求。宝塔面板则是一个强大的服务器管理工具，通过图形化界面，开发者可以轻松地进行服务器配置、应用部署和监控管理。宝塔面板的使用大大简化了项目的部署和运维工作，提高了开发效率和系统的稳定性。

通过以上前端和后端技术的选型，项目不仅具备了高性能和高可用性的特点，还为开发者提供了良好的开发体验和维护便利性。这些技术的结合，使得项目能够快速迭代和持续优化，满足不断变化的业务需求。

三、核心功能开发

3.1 数据库设计与管理

在构建基于 Spring Boot 和 Vue 技术栈的网站时，数据库的设计与管理是至关重要的环节。本项目选择了 MySQL8 作为数据库管理系统，其高性能、可靠性和易用性为项目提供了坚实的基础。MySQL8 引入了许多新特性，如窗口函数、不可见索引等，进一步提升了数据库的性能和功能。

3.1.1 数据库表结构设计

数据库表结构的设计直接影响到数据的存储和查询效率。在本项目中，我们设计了多个表来满足不同业务需求。例如，用户表（users）用于存储用户信息，文章表（articles）用于存储文章内容，评论表（comments）用于存储用户对文章的评论。每个表的设计都遵循了规范化原则，确保数据的一致性和完整性。

  • 用户表（users）：
    • id：主键，自增
    • username：用户名，唯一
    • password：密码，加密存储
    • email：邮箱，唯一
    • created_at：创建时间
    • updated_at：更新时间
  • 文章表（articles）：
    • id：主键，自增
    • title：文章标题
    • content：文章内容，使用 Wangeditor5 富文本编辑器生成
    • author_id：作者ID，外键关联用户表
    • created_at：创建时间
    • updated_at：更新时间
  • 评论表（comments）：
    • id：主键，自增
    • article_id：文章ID，外键关联文章表
    • user_id：用户ID，外键关联用户表
    • content：评论内容
    • created_at：创建时间
    • updated_at：更新时间

3.1.2 数据库索引优化

为了提高查询效率，我们在关键字段上添加了索引。例如，在用户表的 username 和 email 字段上添加了唯一索引，确保每个用户的用户名和邮箱都是唯一的。在文章表的 author_id 字段上添加了普通索引，以便快速查找某个作者的所有文章。通过合理的索引设计，我们显著提高了数据库的查询性能。

3.1.3 数据库安全管理

数据的安全性是项目成功的关键。我们采取了多种措施来保护数据库的安全。首先，所有敏感信息（如密码）都经过加密存储，确保即使数据泄露也不会被轻易破解。其次，我们使用了 MySQL8 的权限管理功能，为不同的用户分配不同的权限，确保只有授权用户才能访问和修改数据。最后，我们定期备份数据库，以防数据丢失或损坏。

3.2 项目业务逻辑实现

在项目业务逻辑的实现中，Spring Boot 和 Mybatis 的组合发挥了重要作用。Spring Boot 通过约定优于配置的原则，简化了应用的初始设置和开发过程，而 Mybatis 则为数据持久层提供了高效的支持。以下是项目中几个关键业务逻辑的实现细节。

3.2.1 用户注册与登录

用户注册和登录是网站的基本功能。在用户注册时，我们验证了用户名和邮箱的唯一性，并对密码进行了加密存储。在用户登录时，我们通过用户名和密码进行身份验证，并生成 JWT 令牌，用于后续的请求认证。

  • 用户注册：
    • 验证用户名和邮箱的唯一性
    • 加密存储密码
    • 插入用户信息到用户表
  • 用户登录：
    • 验证用户名和密码
    • 生成 JWT 令牌
    • 返回令牌给前端

3.2.2 文章发布与管理

文章的发布和管理是网站的核心功能之一。在文章发布时，我们使用 Wangeditor5 富文本编辑器生成文章内容，并将其存储到文章表中。在文章管理时，我们提供了文章的编辑、删除和查询功能，确保用户可以方便地管理自己的文章。

  • 文章发布：
    • 获取富文本编辑器生成的文章内容
    • 插入文章信息到文章表
  • 文章管理：
    • 编辑文章：更新文章表中的内容
    • 删除文章：从文章表中删除指定文章
    • 查询文章：根据条件查询文章列表

3.2.3 评论功能

评论功能增强了用户之间的互动。在评论时，用户可以对文章发表评论，评论内容存储到评论表中。我们还提供了评论的删除功能，确保用户可以管理自己的评论。

  • 发表评论：
    • 获取用户输入的评论内容
    • 插入评论信息到评论表
  • 删除评论：
    • 从评论表中删除指定评论

通过以上业务逻辑的实现，项目不仅具备了高性能和高可用性的特点，还为用户提供了一个友好且功能丰富的平台。这些技术的结合，使得项目能够快速迭代和持续优化，满足不断变化的业务需求。

四、特色功能实现

4.1 Wangeditor5与Highlightjs的集成

在构建基于 Spring Boot 和 Vue 技术栈的网站时，Wangeditor5 和 Highlightjs 的集成不仅为用户提供了强大的富文本编辑功能，还显著提升了代码的可读性和美观度。Wangeditor5 是一个功能丰富的富文本编辑器，支持多种富文本格式和插件扩展，而 Highlightjs 则是一个轻量级的代码高亮库，能够轻松实现代码的语法高亮。

Wangeditor5 的集成

Wangeditor5 的集成过程相对简单，但需要一些配置以确保其在项目中正常工作。首先，我们需要在项目中安装 Wangeditor5：

npm install wangeditor

安装完成后，可以在 Vue 组件中引入 Wangeditor5 并进行初始化：

<template>
  <div id="editor"></div>
</template>

<script>
import E from 'wangeditor';

export default {
  mounted() {
    const editor = new E('#editor');
    editor.create();
  }
}
</script>

通过上述代码，我们可以在页面中创建一个富文本编辑器实例。Wangeditor5 提供了丰富的配置选项，如自定义工具栏、插入图片、视频等，可以根据项目需求进行灵活配置。例如，我们可以添加自定义工具栏按钮：

editor.config.menus = [
  'head',
  'bold',
  'italic',
  'underline',
  'strikeThrough',
  'link',
  'list',
  'justify',
  'quote',
  'emoticon',
  'image',
  'video'
];

Highlightjs 的集成

Highlightjs 的集成也非常简单，首先需要安装 Highlightjs：

npm install highlight.js

安装完成后，可以在 Vue 组件中引入 Highlightjs 并进行配置：

<template>
  <pre><code class="language-javascript">{{ code }}</code></pre>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'; // 引入样式

export default {
  data() {
    return {
      code: `function helloWorld() {
        console.log('Hello, world!');
      }`
    };
  },
  mounted() {
    hljs.highlightAll();
  }
}
</script>

通过上述代码，我们可以在页面中实现代码的语法高亮。Highlightjs 支持多种编程语言的高亮显示，只需在 <code> 标签中添加相应的 class 属性即可。例如，class="language-javascript" 表示高亮 JavaScript 代码。

4.2 Element Plus在项目中的应用

Element Plus 是一套基于 Vue3 的 UI 组件库，提供了丰富的组件和样式，能够快速搭建出美观且功能齐全的用户界面。在本项目中，Element Plus 的应用不仅简化了前端开发的工作量，还提高了开发效率。

基础组件的使用

Element Plus 提供了多种基础组件，如按钮、表单、表格等，这些组件设计精美，易于使用。例如，我们可以使用 el-button 组件创建一个按钮：

<template>
  <el-button type="primary" @click="handleClick">点击我</el-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
}
</script>

通过上述代码，我们可以在页面中创建一个带有点击事件的按钮。Element Plus 的组件支持多种属性和事件，可以根据项目需求进行灵活配置。

表单组件的使用

表单组件是 Element Plus 中非常实用的一类组件，可以用于收集和验证用户输入的数据。例如，我们可以使用 el-form 和 el-input 组件创建一个简单的表单：

<template>
  <el-form :model="form" label-width="100px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    submitForm() {
      console.log(this.form);
    }
  }
}
</script>

通过上述代码，我们可以在页面中创建一个包含用户名和密码输入框的表单，并在提交时输出表单数据。Element Plus 的表单组件支持多种验证规则，可以确保用户输入的数据符合要求。

表格组件的使用

表格组件是 Element Plus 中另一个非常实用的组件，可以用于展示和管理大量数据。例如，我们可以使用 el-table 组件创建一个简单的表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '张三', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '李四', address: '上海市普陀区金沙江路 1519 弄' }
      ]
    };
  }
}
</script>

通过上述代码，我们可以在页面中创建一个包含日期、姓名和地址列的表格，并展示相应的数据。Element Plus 的表格组件支持多种配置选项，如分页、排序、筛选等，可以根据项目需求进行灵活配置。

通过以上对 Wangeditor5、Highlightjs 和 Element Plus 的集成与应用，项目不仅具备了强大的富文本编辑和代码高亮功能，还提供了一个美观且功能齐全的用户界面。这些技术的结合，使得项目能够快速迭代和持续优化，满足不断变化的业务需求。

五、项目部署与管理

5.1 项目部署至腾讯云服务器的步骤

在完成了前端和后端的开发工作后，将项目部署至腾讯云服务器是确保其能够稳定运行的关键步骤。腾讯云提供了丰富的云服务和强大的基础设施，能够满足不同规模项目的需求。以下是详细的部署步骤，帮助开发者顺利将项目上线：

  1. 购买腾讯云服务器：
    • 登录腾讯云官网，选择合适的服务器配置。根据项目的实际需求，可以选择不同规格的服务器，如 CPU、内存、磁盘空间等。
    • 购买服务器后，记录下服务器的 IP 地址、用户名和密码，这些信息将在后续的部署过程中使用。
  2. 连接服务器：
    • 使用 SSH 工具（如 PuTTY）连接到腾讯云服务器。在终端中输入以下命令： 
      ssh root@your_server_ip
    • 输入密码后，即可成功连接到服务器。
  3. 安装必要的软件：
    • 更新系统包： 
      sudo apt-get update
sudo apt-get upgrade
    • 安装 Java 运行环境（JRE）和 Node.js： 
      sudo apt-get install default-jre
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
  4. 上传项目代码：
    • 将前端和后端项目的代码上传到服务器。可以使用 FTP 工具（如 FileZilla）或命令行工具（如 scp）进行上传。
    • 例如，使用 scp 命令上传项目代码： 
      scp -r /path/to/your/project root@your_server_ip:/root/
  5. 配置 Nginx 反向代理：
    • 安装 Nginx： 
      sudo apt-get install nginx
    • 配置 Nginx 反向代理，将前端请求转发到后端服务。编辑 Nginx 配置文件： 
      sudo nano /etc/nginx/sites-available/default
    • 添加以下配置： 
      server {
    listen 80;
    server_name your_domain_or_ip;

    location / {
        proxy_pass http://localhost:8080;  # 前端服务端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api {
        proxy_pass http://localhost:8081;  # 后端服务端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
    • 保存并退出编辑器，重启 Nginx 服务： 
      sudo systemctl restart nginx
  6. 启动前端和后端服务：
    • 前端项目： 
      cd /root/your-vue-app
npm install
npm run build
npm run serve
    • 后端项目： 
      cd /root/your-spring-boot-app
mvn clean package
java -jar target/your-spring-boot-app.jar

通过以上步骤，项目即可成功部署至腾讯云服务器，确保其能够稳定运行并对外提供服务。

5.2 使用宝塔面板进行项目管理的优势

宝塔面板是一款功能强大且易于使用的服务器管理工具，通过图形化界面，开发者可以轻松地进行服务器配置、应用部署和监控管理。以下是使用宝塔面板进行项目管理的几个主要优势：

  1. 简化服务器配置：
    • 宝塔面板提供了直观的图形化界面，使得服务器配置变得更加简单。开发者可以轻松地安装和管理各种软件，如 Nginx、MySQL、PHP 等，无需复杂的命令行操作。
    • 通过宝塔面板，可以一键安装和配置 LAMP、LNMP 等常用环境，大大节省了时间和精力。
  2. 便捷的应用部署：
    • 宝塔面板支持多种应用的快速部署，如 WordPress、Discuz!、Typecho 等。开发者可以轻松地将这些应用安装到服务器上，无需手动配置。
    • 对于自定义项目，宝塔面板提供了文件管理功能，可以方便地上传和管理项目文件，确保项目的顺利部署。
  3. 高效的监控管理：
    • 宝塔面板内置了强大的监控功能，可以实时查看服务器的资源使用情况，如 CPU、内存、磁盘空间等。通过监控数据，开发者可以及时发现和解决潜在的问题，确保服务器的稳定运行。
    • 宝塔面板还提供了日志管理功能，可以查看和分析服务器的日志文件，帮助开发者快速定位和解决问题。
  4. 安全性和稳定性：
    • 宝塔面板提供了多种安全防护措施，如防火墙、防 DDoS 攻击、文件权限管理等，确保服务器的安全性。
    • 通过宝塔面板，可以定期备份服务器数据，防止数据丢失或损坏。备份功能支持本地备份和远程备份，确保数据的安全性和可靠性。
  5. 用户友好的界面：
    • 宝塔面板的界面设计简洁明了，操作流程清晰，即使是初学者也能快速上手。通过图形化界面，开发者可以轻松地进行各种操作，无需复杂的命令行操作。
    • 宝塔面板还提供了丰富的文档和教程，帮助开发者更好地理解和使用各项功能。

通过使用宝塔面板，开发者可以更加高效地管理和维护服务器，确保项目的顺利运行。宝塔面板的强大功能和用户友好的界面，使得服务器管理变得更加简单和便捷，为项目的成功提供了有力保障。

六、总结

本项目基于 Spring Boot 和 Vue 技术栈，成功构建了一个功能丰富且性能优异的网站。通过采用 Vue3、Vite5、Axios、Element Plus、Wangeditor5、Highlightjs 等前沿前端技术，以及 Spring Boot2、Mybatis、MySQL8 等强大的后端技术，项目不仅具备了高效的开发体验，还为用户提供了流畅的使用感受。项目部署在腾讯云服务器上，并通过宝塔面板进行高效管理和维护，确保了系统的稳定性和安全性。通过合理的设计和优化，项目在数据库管理、业务逻辑实现、特色功能开发等方面均表现出色，能够快速迭代和持续优化，满足不断变化的业务需求。

上一篇：Spring Boot与LiteFlow的完美集成：业务规则编排的艺术 下一篇：Mamba架构在医学图像分析中的应用综述