SpringBoot_Vue3 《Hello World》项目入门教程

1. 前言

前后端分离模式，可以让后端和前端开发人员致力于自己擅长的领域，且可以让前端和后端业务逻辑高度解耦合。本文从一个简单的案例入手，讲解使用 和如何实现前后端的分离。

前后端分离有 种模式：

逻辑分离：在一个项目中的前后分离。项目整体架构还是模式，适合于小型项目。

物理分离：独立的前后端项目分离。因是不同项目，则涉及远程调用问题，适合于中、大型项目。后端项目仅是提供者，可以服务于不同的前端项目，如网页版、微信小程序版的前端项目。

本文将使用 分别构建这种分离模式。

无论使用哪一种分离模式，其后端都是一样的。所以，本文先搭建后端服务项目。

2.

后端项目也称为服务器端，以提供为主，数据的应用以及显示由前端负责。本文后端项目的开发工具为，当然，你也可以选择其它开发工具，关系数据库系统为。

2.1 创建项目

打开 。新建名为 的 项目。

选择的版本，且选择如下的依赖包：

。

。

。

。

。

确认后，项目的初始结构如下图所示：

打开项目的文件，配置项目的基本信息。

2.2 设计

本项目是一个基础架构项目，仅提供一个用于测试的，功能是用来显示所有的书本信息。

本项目采用由下向上的设计流程，先创建数据库，并设计表。

Tips：数据库系统的安装过程这里就不单独讲解，数据库连接客服端使用。

数据库设计：

启动服务，打开。创建名为的数据库，以及在数据库中创建名为 的数据库表，其字段结构如下：

表命名为，并向表中插入 条测试数据。

数据库设计好后，开始项目结构的搭建：因项目使用 框架，故先构建层。

层。

新建 层前，先创建类。使用简化类的代码。

新建 类：提供查询所有书籍的方法的声明。

编写 语句：查询所有书籍。

文件书写在 文件中，此文件存储在项目的 中。为了让 自动找到文件，在文件中创建结构的目录结构。

Tips：也可能自定义其它位置。

至此，项目结构如下图所示：

层：业务层。

定义业层接口层，为业务层声明功能。

构建业务对象：实现接口，依赖对象。

此时，项目结构如下图所示：

控制器层，并向外映射接口。

测试接口。为了简化操作，直接在浏览器中测试，启动项目之前，别忘记在启动类前面加注解，其实新版本可以省略此注解。

运行程序后，打开浏览器，在地址栏中输入。如果能看到下面的结果，说明服务器搭建成功。

3.

如上所说，前后分离有 种使用方式。

３.1  逻辑分离

直接在服务器项目的层的页面中使用框架。

在后端项目的目录中新建文件。在文件中引入依赖库。

项目结构如下图：

编写如下代码，实现在页面中显示所有书籍信息。

测试结果： 运行项目，打开浏览器，直接输入。可看到如下图所示结果。

3.2  物理分离

物理分离是真正意义上的前后端分离模板，此分离模式除了服务器端项目，还有独立的基于框架的前端项目。项目中能使用单页面，能真正意义上实现组件化编程思想。

创建项目有很多种方式，也有很多优秀的前端开发工具，本文使用以及其项目创建向导构建项目。

3.2.1 新建 项目

打开，新建项目，且选择使用 构建项目。如下图所示：

新建的项目自动依赖了模块。可以打开项目中的查看相关信息。

为了能使用，需要在项目中安装这两个模块库。

右击项目，在弹出来的快捷菜单中选择。在下面可看到窗口。

安装模块，在命令模式下输入：

Tips： 的使用请查阅官方文档。

安装模块，在命令模式下输入：

可以在文件中查看模块的依赖信息。

为了使用的自动导入功能，还需要安装插件。在命令模式下输入如下指令进行安装。

打开文件，添加如下的配置信息：

为了实现的跨域访问。还需要后端项目中新建配置类，且添加如下内容。

如下图所示：

3.2.2 创建前端页面

在项目中，页面可以是重用的组件。本文直接在已经创建的文件中进行修改，同样实现读取所有书籍。内容如下：

启动前端、后端项目：

打开浏览器，在地址栏中输入：。

4. 总结

本文通过一个案例，简要介绍了使用和如何实现项目的前后端分离。