创建过程：

一、创建前端应用

提前安装好 NodeJS 和 Vue 3.0

打开command命令行，输入vue ui

如果始终command命令行没反应的话，就安装一下cli，命令是： npm install -g @vue/cli

如果始终command命令行没反应的话，就安装一下cli，命令是： npm install -g @vue/cli

创建完成

二、测试创建的前端应用是否正常（可忽略）

三、使用IDEA进行调试

新建Spring Boot 项目

删除application.properties文件，新建application.yml文件，内容如下：

spring:datasource:url: jdbc:mysql://localhost:3306/library_demo?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=trueusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driverjpa:show-sql: trueproperties:hibernate:format_sql: true
server:port: 8181

图书的查询测试：数据库表信息如下

/*Navicat MySQL Data TransferSource Server         : 本地Source Server Type    : MySQLSource Server Version : 80021Source Host           : localhost:3306Source Schema         : library_demoTarget Server Type    : MySQLTarget Server Version : 80021File Encoding         : 65001Date: 13/10/2022 13:46:46
*/SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for book
-- ----------------------------
DROP TABLE IF EXISTS `book`;
CREATE TABLE `book`  (`id` int NOT NULL AUTO_INCREMENT COMMENT '图书表主键',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '书名',`autor` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '作者',`publish` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '出版社',`pages` int NULL DEFAULT NULL COMMENT '总页码',`price` decimal(10, 2) NULL DEFAULT NULL COMMENT '价格',`publish_date` datetime NULL DEFAULT NULL COMMENT '发行日期',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;-- ----------------------------
-- Records of book
-- ----------------------------
INSERT INTO `book` VALUES (1, '解忧杂货店', '东野圭吾', '电子工业出版社', 102, 27.30, '2012-03-01 21:43:02');
INSERT INTO `book` VALUES (2, '追风筝的人', '卡勒德·胡塞尼', '上海人民出版社', 230, 33.50, '2003-05-12 21:44:54');
INSERT INTO `book` VALUES (3, '人间失格', '太宰治', '作家出版社', 150, 17.30, '1948-10-12 21:46:18');
INSERT INTO `book` VALUES (4, '白夜行', '东野圭吾', '南海出版公司', 300, 27.30, '1997-10-12 21:47:57');SET FOREIGN_KEY_CHECKS = 1;

新建controller包，entity包和repository包，这里省略service包

Entity实体类：这样数据库book表就有了映射的JavaBean了

BookRepository接口继承Jpa接口，泛型第一个参数写实体类，第二个写实体类的主键类型

测试Jpa接口是否集成

运行测试方法，查询所有字段

使用RestFul风格编写后端controller层接口

四、前后端接口集成

在前端views包下面，新建BookView.vue文件

在<template>下添加一个table 标签

<table border="1px"><tr><td>图书编号</td><td>图书名称</td><td>图书作者</td><td>出版社</td><td>总页码</td><td>图书价格</td><td>发行日期</td></tr>
</table>

制造假数据填充table

获取假数据并显示在table中

在router/index.js里面添加路由

运行访问获取假数据

获取数据库中的真数据

1.安装axios，执行 npm install axios --save

2.在src下新建src\plugins\axios.js，内容如下

3.导入axios到全局

4.两种方法获取resp.data并传给books

5.配置跨域

在Spring Boot项目下创建config包，包的内容如下：

最后，重启后端项目，访问前端的/book路由,成功！

SpringBoot + Vue 前后端分离的小案例相关推荐

适合新手拿来练习的springboot+vue前后端分离小Demo
前言: 作者:神的孩子在歌唱大家好,我叫智练习springboot+vue前后端分离的Demo 一. 设计数据库二 . springboot项目创建 2.1 基本配置 2.2 创建dao层三. ...
SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录前言用户信息更新前端发送后端接口修改用户头像前端前端图片显示图片上传完整代码后端代码图片存储图片上传工具类图片工具类的配置工具类实现效果 Markdown 图片 ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
网上书城 springboot vue前后端分离
网上书城 springboot vue前后端分离文章目录网上书城 springboot vue前后端分离前言一.运行截图二.pom文件 1.引入库总结前言基于springboot vu ...
大二期末作孽（SpringBoot+Vue前后端分离博客社区（重构White Hole））
文章目录前言目录效果演示前言由于时间关系,完成度确实不高,而且不签只是完成了客户端,当然目前这样也是已经可以正常使用了,当然有点勉强.不过后续还是会不断的去更新维护的,不过大体的架构是这样的 ...
SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装前后端分离开发中的异常处理统一结果封 ...
SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包第二步:然后去写配置文件: 第 ...
基于springboot vue前后端分离的图书借阅管理系统源码
请观看视频: 基于springboot vue前后端分离的图书借阅管理系统源码 <project xmlns="http://maven.apache.org/POM/4.0.0&qu ...
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(六)
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案 ...

SpringBoot + Vue 前后端分离的小案例

创建过程：

一、创建前端应用

创建完成

二、测试创建的前端应用是否正常（可忽略）

三、使用IDEA进行调试

新建Spring Boot 项目

图书的查询测试：数据库表信息如下

新建controller包，entity包和repository包，这里省略service包

Entity实体类：这样数据库book表就有了映射的JavaBean了

BookRepository接口继承Jpa接口，泛型第一个参数写实体类，第二个写实体类的主键类型

测试Jpa接口是否集成

运行测试方法，查询所有字段

使用RestFul风格编写后端controller层接口

四、前后端接口集成

在前端views包下面，新建BookView.vue文件

在<template>下添加一个table 标签

制造假数据填充table

获取假数据并显示在table中

在router/index.js里面添加路由

运行访问获取假数据

获取数据库中的真数据

3.导入axios到全局

4.两种方法获取resp.data并传给books

5.配置跨域

在Spring Boot项目下创建config包，包的内容如下：

最后，重启后端项目，访问前端的/book路由,成功！

SpringBoot + Vue 前后端分离的小案例相关推荐

最新文章

热门文章

SpringBoot + Vue 前后端分离的小案例

创建过程：

一、创建前端应用

创建完成

二、测试创建的前端应用是否正常（可忽略）

三、使用IDEA进行调试

新建Spring Boot 项目

图书的查询测试：数据库表信息如下

新建controller包，entity包和repository包，这里省略service包

Entity实体类：这样数据库book表就有了映射的JavaBean了

BookRepository接口继承Jpa接口，泛型第一个参数写实体类，第二个写实体类的主键类型

测试Jpa接口是否集成

运行测试方法，查询所有字段

使用RestFul风格编写后端controller层接口

四、前后端接口集成

在前端views包下面，新建BookView.vue文件

在<template>下添加一个table 标签

制造假数据填充table

获取假数据并显示在table中

在router/index.js里面添加路由

运行访问获取假数据

获取数据库中的真数据

3.导入axios到全局

4.两种方法获取resp.data并传给books

5.配置跨域

在Spring Boot项目下创建config包，包的内容如下：

最后 ，重启后端项目，访问前端的/book路由,成功！

SpringBoot + Vue 前后端分离的小案例相关推荐

最新文章

热门文章

最后，重启后端项目，访问前端的/book路由,成功！