SpringBoot_Vue3 《Hello World》项目入门教程

news2025/11/2 11:52:34

1. 前言

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

前后端分离有2 种模式：

  • 逻辑分离：在一个项目中的前后分离。项目整体架构还是MVC模式，适合于小型项目。
  • 物理分离：独立的前后端项目分离。因是不同项目，会涉及远程调用等问题，适合于中、大型项目。后端项目仅是API提供者，可以服务于不同平台的前端项目，如网页版、微信小程序版的前端项目。

本文将使用 Spring Boot、Vue3、Elemnet Plus分别构建这2种分离模式。

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

2. Spring Boot API

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

2.1 创建项目

打开 IDEA。新建名为 MyBook 的 Spring Boot项目。

1.png

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

  • Spring Boot DevTools。
  • LomBok。
  • Spring Web。
  • MyBatis Framework。
  • MySql Driver。

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

2.png

打开项目的application.properties文件，配置项目的jdbc基本信息。

#配置数据库连接信息
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/bookstore?useUnicode=true&characterEncoding=UTF-8&serverTimezone=PRC
spring.datasource.username=root
spring.datasource.password=abc123

7.png

2.2 设计 API

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

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

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

数据库设计：

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

    字段名类型备注
    book_id(编号)int主键、自动增长
    book_title(书名)varchar
    book_author(作者)varchar
    book_price(价格)double

3.png

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

4.png

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

  • mapper层。

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

package com.gk.mybook.bean;
import lombok.*;
@Data
@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
public class Book {
    private Integer bookId;
    private String bookTitle;
    private String bookAuthor;
    private Double bookPrice;
}

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

package com.gk.mybook.mapper;
import com.gk.mybook.bean.Book;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface BookMapper {
    List<Book> getAllBooks();
}

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

 SELECT book_id,book_title,book_author,book_price from book

sql文件书写在 BookMapper.xml文件中，此文件存储在项目的 resources中。为了让 BookMapper自动找到xml文件，在resources文件中创建com.gk.mybook.mapper结构的目录结构。

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

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

5.png

  • BookService层：业务层。

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

package com.gk.mybook.service;
import com.gk.mybook.bean.Book;
import java.util.List;
/*
*书籍业务对象
*/
public interface IBookService {
    List<Book> getBooks();
}

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

package com.gk.mybook.service.impl;
import com.gk.mybook.bean.Book;
import com.gk.mybook.mapper.BookMapper;
import com.gk.mybook.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class BookService implements IBookService {
    @Autowired
    private BookMapper bookMapper;
    @Override
    public List<Book> getBooks() {
        return this.bookMapper.getAllBooks();
    }
}

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

6.png

  • 控制器层，并向外映射接口。
package com.gk.mybook.action;
import com.gk.mybook.bean.Book;
import com.gk.mybook.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/book")
public class BookAction {
    @Autowired
    private IBookService bookService;
    @RequestMapping("/books")
    List<Book> getBooks(){
       return this.bookService.getBooks();
    }
}
  • 测试接口。为了简化操作，直接在浏览器中测试，启动项目之前，别忘记在启动类前面加@MappScan注解，其实新版本spring boot可以省略此注解。
package com.gk.mybook;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan(value = {"com.gk.mybook.mapper"})
public class MybookApplication {
    public static void main(String[] args) {
        SpringApplication.run(MybookApplication.class, args);
    }
}

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

8.png

3. Vue Project

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

３.1 逻辑分离

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

在后端项目的resources->static目录中新建index.html文件。在文件中引入Vue、Element plus、axios依赖库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>书籍</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
   <div id="app">
   </div>
</body>
</html>

项目结构如下图：

9.png

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>书籍</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <el-table :data="books">
        <el-table-column v-for="book in cols" :key="book.en"
                         :prop="book.en"
                         :label="book.cn"
                         show-overflow-tooltip align="center" width="160px">
            <template #default="scope">
                {{ scope.row[book.en] }}
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
    const {createApp} = Vue
    var app = createApp({
        data() {
            return {
                title: "我的书籍",
                cols: [{"en": "bookId", "cn": "编号"}, {"en": "bookTitle", "cn": "书名"}],
                books: []
            }
        },
        mounted() {
            axios
                .get('http://localhost:8080/book/books')
                .then(response => (
                    this.books = response.data
                ))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }).use(ElementPlus).mount('#app')
</script>
</body>
</html>

测试结果： 运行spring boot项目，打开浏览器，直接输入http://localhost:8080/index.html。可看到如下图所示结果。

10.png

3.2 物理分离

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

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

3.2.1 新建 VUE项目

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

11.png

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

12.png

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

右击项目，在弹出来的快捷菜单中选择使用命名行窗口打开所在目录。在HBuild下面可看到终端窗口。

13.png

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

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

npm install axios

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

npm install element-plus --save

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

14.png

为了使用element plus的自动导入功能，还需要安装unplugin-vue-components 和 unplugin-auto-import插件。在命令模式下输入如下指令进行安装。

npm install -D unplugin-vue-components unplugin-auto-import

打开vite.config.js文件，添加如下的配置信息：

15.png

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

@Configuration
public class CorsConfig {
    @Bean
    CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOriginPatterns(Collections.singletonList("*"));
        configuration.setAllowedMethods(Collections.singletonList("*"));
        configuration.setAllowedHeaders(Collections.singletonList("*"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return new CorsFilter(source);
    }
}

如下图所示：

16.png

3.2.2 创建前端页面

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

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import axios from 'axios'
	defineProps({
		msg: String
	})
	const data = reactive({
		books: null
	})
	/*
	 * 使用 axios 请求服务器数据
	 */
	const getData = function() {
		axios({
			url: 'http://localhost:8080/book/books',
			method: 'get',
			headers: {
				"Access-Control-Allow-Origin": "*",
			}
		}).then((res) => {
			data.books = res.data
			console.log(data.books)
		});
	}
</script>
<template>
	<h1>{{ msg }}</h1>
	<el-table :data="data.books" style="width: 100%">
		<el-table-column prop="bookId" label="编号" width="180" />
		<el-table-column prop="bookTitle" label="书名" width="180" />
		<el-table-column prop="bookAuthor" label="作者" />
	</el-table>
	<el-button type="primary" @click="getData">查阅书籍</el-button>
</template>
<style scoped>
	a {
		color: #42b983;
	}
</style>

17.png

启动前端、后端项目：

npm run dev

打开浏览器，在地址栏中输入：http://localhost:3000。

18.png

点击查阅书籍：

19.png

4. 总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/622455.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华为OD机试真题 JavaScript 实现【在字符串中找出连续最长的数字串】【2023 B卷 100分】，附详细解题思路

华为OD机试真题 JavaScript 实现【在字符串中找出连续最长的数字串】【2023 B卷 100分】，附详细解题思路

一、题目描述 输入一个字符串&#xff0c;返回其最长的数字子串&#xff0c;以及其长度。 若有多个最长的数字子串&#xff0c;则将它们全部输出&#xff08;按原字符串的相对位置&#xff09;。 本题含有多组样例输入。 数据范围&#xff1a; 字符串长度 1≤n≤200 &…
阅读更多...
【LeetCode】240. 搜索二维矩阵 II

【LeetCode】240. 搜索二维矩阵 II

240. 搜索二维矩阵 II&#xff08;中等&#xff09; 这道题和 74. 搜索二维矩阵 基本一致&#xff0c;可以放在一起做。 方法一&#xff1a;变形的二叉搜索树 思路 这种做法和 74. 搜索二维矩阵完全一致。 我们可以将二维矩阵抽象成「以右上角为根的 BST」&#xff1a; 那…
阅读更多...
基于python五子棋的设计与实现(论文+源码)_kaic

基于python五子棋的设计与实现(论文+源码)_kaic

目 录 摘 要 绪 论 一、游戏的需求分析 &#xff08;一&#xff09;游戏设计目标 &#xff08;二&#xff09;游戏的功能需求 1.可视化模块 2.玩家操作模块 3.胜负判定模块 &#xff08;三&#xff09;游戏的性能需求 &#xff08;四&#xff09;游戏其它需求 二、五子棋游戏…
阅读更多...
JDK1.8环境安装及配置

JDK1.8环境安装及配置

JDK1.8环境安装及配置 一、下载JDK1.8二、安装三、环境变量配置四、验证 一、下载JDK1.8 本教程使用的是8u202版本&#xff0c;若需要其他版本可点击下方链接跳转下载。 Oracle下载&#xff0c;点击跳转选择版本 如下图所示&#xff0c;选择自己需要的版本下载 点击8u202版本…
阅读更多...
斯坦福《Transformers集结》；大语言模型“书生・浦语“发布

斯坦福《Transformers集结》；大语言模型“书生・浦语“发布

&#x1f989; AI新闻 &#x1f680; 上海人工智能实验室发布1040亿参数大语言模型"书生・浦语"&#xff0c;在多项考试中超越ChatGPT 摘要&#xff1a;上海人工智能实验室近日发布了一个千亿级参数大语言模型——“书生・浦语”。该模型在多领域测试中表现优秀&am…
阅读更多...
linuxOPS基础_linux计划任务

linuxOPS基础_linux计划任务

什么是计划任务 作用&#xff1a;操作系统不可能24 小时都有人在操作&#xff0c;有些时候想在指定的时间点去执行任务&#xff08;例如&#xff1a;每天凌晨 2 点去重新启动httpd>阿帕奇&#xff09;&#xff0c;此时不可能真有人每天夜里 2 点去执行命令&#xff0c;这就…
阅读更多...
大手笔！微软一口气在 GitHub 开源了 5 个技术教程。。

大手笔！微软一口气在 GitHub 开源了 5 个技术教程。。

公众号关注 “GitHubDaily” 设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01; 此前&#xff0c;我曾介绍过微软在 GitHub 开源的一系列面向初学者的技术教程。 现如今&#xff0c;两年时间过去了&#xff0c;这些教程都更新了不少内容&#xff0c;另外还新增了人工智能…
阅读更多...
百度离线资源治理

百度离线资源治理

作者 | 百度MEG离线优化团队 导读 近些年移动互联网的高速发展驱动了数据爆发式的增长&#xff0c;各大公司之间都在通过竞争获得更大的增长空间&#xff0c;大数据计算的效果直接影响到公司的发展&#xff0c;而这背后其实依赖庞大的算力及数据作为支撑&#xff0c;因此在满足…
阅读更多...
如何熟练的运用数学模型在水环境影响评价、防洪评价与排污口论证项目中的方法

如何熟练的运用数学模型在水环境影响评价、防洪评价与排污口论证项目中的方法

数学模型在水环境评价、防洪评价和排污口论证等领域中的重要作用&#xff0c;随着人类活动的不断增加和环境问题的日益突出&#xff0c;对水资源和水环境的保护与管理变得至关重要。为了更好地理解和应对这些挑战&#xff0c;数学模型成为一种强大的工具&#xff0c;能够提供量…
阅读更多...
使用HHDESK完成网站穿透

使用HHDESK完成网站穿透

在工作和学习中&#xff0c;有很多内网网站&#xff0c;不能通过公网进行访问&#xff0c;需要特定的IP&#xff1b;而IP费用极高&#xff0c;比如按IP收费&#xff0c;费用根据流量带宽来&#xff0c;——这着实是一笔很大的开支。 而通过HHDESK&#xff0c;使用hhtp协议代理…
阅读更多...
软考A计划-系统架构师-官方考试指定教程-(5/15)

软考A计划-系统架构师-官方考试指定教程-(5/15)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…
阅读更多...
Win10安装Java 配置环境变量

Win10安装Java 配置环境变量

文章目录 概要下载jdk安装jdk配置环境变量测试环境变量是否配置成功总结 概要 学习java开发首先需要安装jdk,并设置环境变量。 接下来就来介绍一下如何在 windows 10 系统中配置java环境变量 下载jdk https://download.oracle.com/java/17/latest/jdk-17_windows-x64_bin.exe…
阅读更多...
【手撕Spring源码】一些值得注意的Spring底层细节

【手撕Spring源码】一些值得注意的Spring底层细节

文章目录 FactoryBeanIndexed 原理Spring代理的特点Value 装配底层Autowired 装配底层事件监听器模拟事件发布器 FactoryBean FactoryBean是一个Factory对象,用于生成其他bean示例。当一个bean实现FactoryBean接口后,Spring容器调用其getObject方法返回该工厂所生成的bean,而不…
阅读更多...
elasticsearch 8.2.3 安装及springboot简单使用

elasticsearch 8.2.3 安装及springboot简单使用

一、下载安装 官网下载地址https://www.elastic.co/cn/downloads/elasticsearch 解压 elasticsearch-8.2.3-windows-x86_64 修改配置 elasticsearch-8.2.3\config\elasticsearch.yml # Elasticsearch Configuration # # NOTE: Elasticsearch comes with reasonable…
阅读更多...
自学大语言模型之GPT

自学大语言模型之GPT

GPT火爆的发展史 2017年6月OpenAI联合DeepMind首次正式提出的&#xff1a;Deep Reinforcement Learning from Human Preferences&#xff0c;即基于人类偏好的深度强化学习&#xff0c;简称RLHF 2017年7月的OpenAI团队提出的对TRPO算法的改进&#xff1a;PPO算法 GPT-1&#…
阅读更多...
【笔记】算法简单题

【笔记】算法简单题

题解&#xff1a; import java.util.HashMap; import java.util.Map;public class Test {//暴力解决法public static int[] twoSum(int[] nums, int target) {for(int i0;i<nums.length;i){for(int ji1;j<nums.length;j){if(nums[i]nums[j]target){int[] indexs{0,0};i…
阅读更多...
澳大利亚道路安全的AiRAP自动化审核（英）（附下载）

澳大利亚道路安全的AiRAP自动化审核（英）（附下载）

项目概况 该项目由新南威尔士州交通局&#xff08;TfNSW&#xff09;领导&#xff0c;悉尼科技大学&#xff0c;国际道路评估计划&#xff08;iRAP&#xff09;和澳大利亚地理空间数据专家Anditi的研究和协助。 该项目开展的工作是全球首创&#xff0c;其活动和成果是澳大利亚和…
阅读更多...
15、库函数开发小结

15、库函数开发小结

目录 0x01、初始化 0x02、数据输入输出 0x03、状态位、标志位 0x0001、事件 0x0002、标志位的检查与清除 0x04、外设函数分类 本节我们来总结一下ST库开发的步骤和共同点&#xff0c;在总结之前&#xff0c;我们来看一下基本所有外设都有的以下几类寄存器&#xff1a; 1…
阅读更多...
chatgpt赋能python：Python就业指南：市场现状、薪资情况及就业前景

chatgpt赋能python：Python就业指南：市场现状、薪资情况及就业前景

Python就业指南&#xff1a;市场现状、薪资情况及就业前景 Python作为一门既新颖又多用的编程语言&#xff0c;已经引起了越来越多的关注。据统计&#xff0c;在2019年&#xff0c;全球Python使用者数已经达到了960万人。而在中国&#xff0c;Python的应用也越来越普及&#x…
阅读更多...
PolyFormer：将图像分割称为顺序多边形生成

PolyFormer：将图像分割称为顺序多边形生成

文章目录 PolyFormer: Referring Image Segmentation as Sequential Polygon Generation\摘要本文方法Multi-modal Transformer EncoderRegression-based Transformer Decoder 实验结果 PolyFormer: Referring Image Segmentation as Sequential Polygon Generation\ 摘要 在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023