Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】

😀前言
本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】的分享，希望你能够喜欢

🏠个人主页：晨犀主页
🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉
💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦😊

文章目录

  • Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】
    • 实现功能03-创建Spring Boot 后端项目
      • 需求分析/图解
      • 思路分析
      • 代码实现
    • 实现功能04-添加家居信息
      • 需求分析/图解
      • 思路分析
      • 完成功能
        • 代码实现
          • 提醒, 这里容易出现的问题
          • 说明
        • 启动项目前后端程序

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【三】

实现功能03-创建Spring Boot 后端项目

需求分析/图解

● 项目前后端分离情况如图, 分成两个子项目(前端和后端)

image-20230821142414354

思路分析

  1. 在springboot_vue 项目, 进行前端代码开发
  2. 在springboot_furn 项目, 进行后端代码开发

代码实现

  1. 创建springboot_furn 项目
    image-20230821142521266

  2. 修改pom.xml , 引入mybatis-plus 等相关依赖

<!-- 引入mybatis-plus -->
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.3</version>
</dependency>
  1. 创建application.yml 配置port & 配置DB 连接信息
server:
  port: 9090
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456 #自己的密码
    url: jdbc:mysql://localhost:3306/springboot_vue?useSSL=true&useUnicode=true&characterEncoding=UTF-8
  1. 创建springboot-furn\src\main\java\com\nlc\furn\SpringbootApplication.java , 完成测试(说明: 如果有自动生成的主启动程序，删除即可, 使用我们自己的.)
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class,args);
    }
}

image-20230821143539894

实现功能04-添加家居信息

需求分析/图解

image-20230821143707995

image-20230821143723683

思路分析

  1. 完成后台代码从mapper -> service -> controller , 并对每层代码进行测试, 到controller这一层，使用Postman 发送http 请求完成测试

  2. 完成前台代码, 使用axios 发送json 数据给后台, 实现添加家居信息

完成功能

代码实现

创建数据库和表

-- 创建springboot_vue
DROP DATABASE IF EXISTS springboot_vue;
CREATE DATABASE springboot_vue;
USE springboot_vue;
-- 创建家居表
CREATE TABLE furn(
`id` INT(11) PRIMARY KEY AUTO_INCREMENT, ## id
`name` VARCHAR(64) NOT NULL, ## 家居名
`maker` VARCHAR(64) NOT NULL, ## 厂商
`price` DECIMAL(11,2) NOT NULL, ## 价格
`sales` INT(11) NOT NULL, ## 销量
`stock` INT(11) NOT NULL ## 库存
);
-- 初始化家居数据
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock`)
VALUES(NULL , '北欧风格小桌子' , '熊猫家居' , 180 , 666 , 7);
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock`)
VALUES(NULL , '简约风格小椅子' , '熊猫家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '典雅风格小台灯' , '蚂蚁家居' , 180 , 666 , 7 );
INSERT INTO furn(`id` , `name` , `maker` , `price` , `sales` , `stock` )
VALUES(NULL , '温馨风格盆景架' , '蚂蚁家居' , 180 , 666 , 7 );
SELECT * FROM furn;
  1. 创建com/nlc/furn/util/Result.java 该工具类用于返回结果(json 格式)，这个工具类，在网上也可找到，直接拿来使用, SSM 项目也用过类似的工具类
public class Result<T> {
    private String code; //状态码
    private String msg; //对状态说明
    private T data; // 返回时，携带的数据, 为了扩展性好，使用泛型
 
    public String getCode() {
        return code;
    }
 
    public void setCode(String code) {
        this.code = code;
    }
 
    public String getMsg() {
        return msg;
    }
 
    public void setMsg(String msg) {
        this.msg = msg;
    }
 
    public T getData() {
        return data;
    }
 
    public void setData(T data) {
        this.data = data;
    }
 
 
    //无参构造器
    public Result() {
 
    }
 
    //带参构造器-指定返回的data
    public Result(T data) {
        this.data = data;
    }
 
    //编写方法-返回需要的Result对象-表示成功的Result
    public static Result success() {
        Result result = new Result<>();
        result.setCode("200");
        result.setMsg("success");
        return result;
    }
 
    //编写方法-返回需要的Result对象-表示成功的Result,同时可以携带数据
    //如果需要在static方法使用泛型，需要在 static <T>
    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>(data);
        result.setCode("200");
        result.setMsg("success");
        return result;
    }
 
    //编写方法-返回需要的Result对象-表示失败的Result
    public static Result error(String code, String msg) {
        Result result = new Result<>();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
 
    //编写方法-返回需要的Result对象-表示失败的Result,同时可以携带数据
 
    public static <T> Result<T> error(String code, String msg, T data) {
        Result<T> result = new Result<>(data);
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
}
  1. 创建com/nlc/furn/bean/Furn.java
@Data
@TableName("furn")
public class Furn {
 
    //这里我们使用@TableId： 表主键标识
    //当我们在 private Integer id 上标识了@TableId
    //说明id 对应的就是表的id字段，而且是主键
    //type = IdType.AUTO 主键类型是自增长
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String maker;
    private Double price;
    private Integer sales;
    private Integer stock;
}
  1. 创建com/nlc/furn/mapper/FurnMapper.java
//如果是mybatis-plus 我们Mapper接口可以通过extends 接口BaseMapper, 扩展功能
//@Mapper因为主函数已经配置了扫描这个包的类和子包的类
public interface FurnMapper extends BaseMapper<Furn> {
    //如果你有其它的方法，可以再该接口声明
    //并在对应的Mapper.xml进行配置实现
}
  1. 创建com/nlc/furn/service/FurnService.java
public interface FurnService extends IService<Furn> {
    //如果有其它的需求，可以在该接口声明方法，然后再对应的实现类进行实现
}
  1. 创建com/nlc/furn/service/impl/FurnServiceImpl.java
@Service
public class FurnServiceImpl
        extends ServiceImpl<FurnMapper, Furn>
        implements FurnService {
}
  1. 创建com/nlc/furn/controller/FurnController.java
@RestController
public class FurnController {
    @Autowired
    FurnService furnService;
    @PostMapping("/save")
    public Result<?> save(@RequestBody Furn furn) {
        furnService.save(furn);
        return Result.success();
    }
}
  1. Postman 完成测试, 查看furn 表是否添加了数据

image-20230821144439443

image-20230821144456814

  1. 修改SpringbootApplication.java , 加入扫描包
@MapperScan("com.nlc.furn.mapper")
@SpringBootApplication
public class SpringbootApplication {
    public static void main(String[] args) {
    	SpringApplication.run(SpringbootApplication.class, args);
    }
}
  1. 安装axios， 用于发送Ajax 请求给后台，如果已经安装过的就可以不需要安装
npm i axios -S
  1. 点击添加按钮， 可以出现添加家居的对话框, 修改springboot_vue\src\views\HomeView.vue , el-dialog 从Dialog 对话框获取, 表单代码从Form 表单获取，组合一下并调整一下即可

image-20230821145101559

<!-- 添加家居的弹窗
说明:
1. el-dialog ：v-model="dialogVisible" 表示对话框, 和dialogVisible 变量双向
绑定,控制是否显示对话框
2. el-form :model="form" 表示表单,数据和form 数据变量双向绑定
3. el-input v-model="form.name" 表示表单的input 空间，名字为name 需要和
后台Javabean 属性一致
-->
<el-dialog title="提示" v-model="dialogVisible" width="30%">
    <el-form :model="form" label-width="120px">
        <el-form-item label="家居名">
            <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="厂商">
            <el-input v-model="form.maker" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="价格">
            <el-input v-model="form.price" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="销量">
            <el-input v-model="form.sales" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="库存">
            <el-input v-model="form.stock" style="width: 80%"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
        </span>
    </template>
</el-dialog>
</div>
</template>
//增加数据, 一定要, 否则你会发现,在后面弹出的表单不能输入数据
data() {
    return {
        form: {},
//增加方法
methods: {
    add() {
        this.dialogVisible = true
        this.form = {}
    }
}
//增加点击新增的按钮事件
<div style="margin: 10px 0">
    <el-button type="primary" @click="add">新增</el-button>
    <el-button>其它</el-button>
</div>
  1. 完成测试: 看看点击新增按钮，能否正常的弹窗添加家居的对话框(含有表单)

image-20230821145224107

  1. 创建工具文件springboot_vue\src\utils\request.js ,用于创建axios request 对象
// 引入axios 包
// 重要提示：如果在启动前端项目，提示找不到axios , 把光标放在import axios from 'axios' 的'axios', 会有一个修复提示, 导入axios, 点击导入即可正常使用
import axios from 'axios'
// 通过axios 创建对象
const request = axios.create({
    timeout: 5000
})
// request 拦截器
// 1. 可以对请求做一些处理
// 2. 比如统一加token，Content-Type 等
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    return config
}, error => {
    return Promise.reject(error)
});
//导出
export default request
  1. 修改HomeView.vue , 在methods 编写save 方法, 并测试会出现跨域问题
<script>
// 引入request 组件
import request from "@/utils/request";
//methods 增加方法.
    save() {
        // =======说明====...
        request.post("http://localhost:10001/save", this.form).then(res => {
            console.log(res)
            this.dialogVisible = false
        })
    }
</script>

image-20230822140718933

  1. 修改springboot_vue\vue.config.js 解决跨域问题,因为修改了配置文件, npm serve 需要重启, 否则不能识别.
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true
})
module.exports = {
    devServer: {
        port: 10000, // 启动端口
        //如果我们请的地址 /api/save => 代理到 http://localhost:8080/ssm/save
        proxy: {                    //设置代理，必须填
            '/api': {               //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:8080/ssm',  //代理的目标地址, 就是/api 代替 http://localhost:10001/
                changeOrigin: true,                 //是否设置同源，输入是的, 浏览器就允许跨域
                pathRewrite: {                      //路径重写
                    '/api': ''                      //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

  1. 修改HomeView.vue, 使用跨域请求, 并完成测试, 查看数据库，是否有新数据添加成功

  2. 将form 表单提交给/api/save 的接口

  3. /api/save 等价http∶//locaLhost∶10001/save

  4. 如果成功，就进入then 方法

  5. res 就是返回的信息

  6. 查看mysql 看看数据是否保存

request.post("/api/save", this.form).then(res => {
        console.log(res)
        this.dialogVisible = false
    })
}
提醒, 这里容易出现的问题

​ 1) 一定要确定request.post(“/api/save”) 被代理后的url , 是项目后台服务对应提供的API接口url, 否则报404

​ 2) 当跨域执行时请求，浏览器还是提示http://localhost:10000/api/xxx , 所以不要认为是api 没有替换你的配置.

说明

  1. 我们的前端如果是以json格式来发送添加信息furn，那么我们需要使用@RequestBody, 才能将数据封装到对应的bean,同时保证http的请求头的content-type是对应的。

  2. 如果前端是以表单形式提交了，则不需要使用@RequestBody, 才会进行对象参数封装, 同时保证http的请求头的 content-type是对应的。

启动项目前后端程序

使用跨域请求, 并完成测试, 查看数据库，是否有新数据添加成功

image-20230822141611484

image-20230822141636594

文章到这里就结束了，如果有什么疑问的地方请指出，诸大佬们一起来评论区一起讨论😁
希望能和诸大佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Jenkins】持续集成部署学习

【Jenkins】持续集成部署学习

【Jenkins】持续集成部署学习 【一】安装部署【1】Jenkins所处位置【2】Docker安装Gitlab&#xff08;1&#xff09;首先准备一台空的虚拟机服务器&#xff08;2&#xff09;安装服务器所需的依赖&#xff08;3&#xff09;Docker的安装&#xff08;4&#xff09;阿里云镜像加速…
阅读更多...
VUE笔记（十）Echarts

VUE笔记（十）Echarts

一、Echarts简介 1、什么是echarts ECharts是一款基个基于 JavaScript 的开源可视化图表库 官网地址&#xff1a;Apache ECharts 国内镜像&#xff1a;ISQQW.COM x ECharts 文档&#xff08;国内同步镜像&#xff09; - 配置项 示例&#xff1a;echarts图表集 2、第一个E…
阅读更多...
大语言模型之五 谷歌Gemini

大语言模型之五 谷歌Gemini

近十年来谷歌引领着人工智能方向的发展&#xff0c;从TensorFlow到TPU再到Transformer&#xff0c;都是谷歌在引领着&#xff0c;然而&#xff0c;在大语言模型上&#xff0c;却被ChatGPT&#xff08;OpenAI&#xff09;抢了风头&#xff0c;并且知道GPT-4&#xff08;OpenAI&a…
阅读更多...
红蓝攻防：浅谈削弱WindowsDefender的各种方式

红蓝攻防：浅谈削弱WindowsDefender的各种方式

前言 随着数字技术的日益进步&#xff0c;我们的生活、工作和娱乐越来越依赖于计算机和网络系统。然而&#xff0c;与此同时&#xff0c;恶意软件也日趋猖獗&#xff0c;寻求窃取信息、破坏系统或仅仅为了展现其能力。微软Windows&#xff0c;作为世界上最流行的操作系统&…
阅读更多...
2023年03月 C/C++（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

2023年03月 C/C++（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题：和数 给定一个正整数序列，判断其中有多少个数，等于数列中其他两个数的和。 比如，对于数列1 2 3 4, 这个问题的答案就是2, 因为3 = 2 + 1, 4 = 1 + 3。 时间限制：10000 内存限制：65536 输入 共两行，第一行是数列中数的个数n ( 1 <= n <= 100)，第二行是由n个…
阅读更多...
商品搜索网：连接您与各类商品的桥梁

商品搜索网：连接您与各类商品的桥梁

导语&#xff1a;在如今信息爆炸的时代&#xff0c;购物已经不再是传统的实体店购买&#xff0c;而是通过互联网实现的线上购物方式。而要实现高效的线上购物&#xff0c;商品搜索引擎则成为我们的得力助手。作为国内垂直的商品搜索之一&#xff0c;为中国用户提供全面的数码电…
阅读更多...
咸鱼之王俱乐部网站开发

咸鱼之王俱乐部网站开发

我的俱乐部 最新兑换码 *注意区分大小写&#xff0c;中间不能有空格&#xff01; APP666 HAPPY666 QQ888 QQXY888 vip666 VIP666 XY888 app666 bdvip666 douyin666 douyin777 douyin888 happy666 huhushengwei888 taptap666 周活动 宝箱周 宝箱说明 1.木质宝箱开启1个…
阅读更多...
缺页异常与copy-on-write fork

缺页异常与copy-on-write fork

缺页异常需要什么 当发生缺页异常时&#xff0c;内核需要以下信息才能响应这个异常&#xff1a; 出错的虚拟地址&#xff08;引发缺页异常的源&#xff09; 当一个用户程序触发了缺页异常&#xff0c;会切换到内核空间&#xff0c;将出错的地址放到STVAL寄存器中&#xff0c;…
阅读更多...
AndroidAGP8.1.0和JDK 17迁移之旅

AndroidAGP8.1.0和JDK 17迁移之旅

AndroidAGP8.1.0和JDK 17迁移之旅 前言&#xff1a; 由于我最近写demo的直接把之前的项目从AGP4.2.2升级到8.1.0引发了一些列问题&#xff0c;这里记录一下&#xff0c;前面讲解过迁移DSL方式遇到的问题&#xff0c;这次升级8.1.0也比之前顺利多了&#xff0c;想看DSL迁移的可…
阅读更多...
LeetCode——有效的括号

LeetCode——有效的括号

这里&#xff0c;我提供一种用栈来解决的方法&#xff1a; 思路&#xff1a;栈的结构是先进后出&#xff0c;这样我们就可以模拟栈结构了&#xff0c;如果是‘&#xff08;’、‘{’、‘[’任何一种&#xff0c;直接push进栈就可以了&#xff0c;如果是‘}’、‘&#xff09;’…
阅读更多...
常见前端面试之VUE面试题汇总七

常见前端面试之VUE面试题汇总七

20. 对 vue 设计原则的理解 1.渐进式 JavaScript 框架&#xff1a;与其它大型框架不同的是&#xff0c;Vue 被设计 为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上 手&#xff0c;还便于与第三方库或既有项目整合。另一方面&#xff0c;当与现代化的…
阅读更多...
2023有哪些更好用的网页制作工具

2023有哪些更好用的网页制作工具

过去&#xff0c;专业人员使用HTMLL、CSS、Javascript等代码手动编写和构建网站。现在有越来越多的智能网页制作工具来帮助任何人实现零代码基础&#xff0c;随意建立和设计网站。在本文中&#xff0c;我们将向您介绍2023年流行的网页制作工具。我相信一旦选择了正确的网页制作…
阅读更多...
OpenGL —— 2.5、绘制第一个三角形（附源码，glfw+glad）（更新：纹理贴图）

OpenGL —— 2.5、绘制第一个三角形（附源码，glfw+glad）（更新：纹理贴图）

源码效果 C源码 纹理图片 需下载stb_image.h这个解码图片的库&#xff0c;该库只有一个头文件。 具体代码&#xff1a; vertexShader.glsl #version 330 corelayout(location 0) in vec3 aPos; layout(location 1) in vec3 aColor; layout(location 2) in vec2 aUV;out ve…
阅读更多...
如何搭建智能家居系统并通过内网穿透实现远程控制家中设备

如何搭建智能家居系统并通过内网穿透实现远程控制家中设备

文章目录 前言1. 安装Home Assistant2. 配置Home Assistant3. 安装cpolar内网穿透3.1 windows系统3.2 Linux系统3.3 macOS系统 4. 映射Home Assistant端口5. 公网访问Home Assistant6. 固定公网地址6.1 保留一个固定二级子域名6.2 配置固定二级子域名 前言 Home Assistant&…
阅读更多...
（三）Linux中卸载docker（非常详细）

（三）Linux中卸载docker（非常详细）

docker 卸载 使用yum安装docker 如需卸载docker可以按下面步骤操作&#xff1a; 1、停止docker服务 systemctl stop docker 2、查看yum安装的docker文件包 yum list installed |grep docker 3、查看docker相关的rpm源文件 rpm -qa |grep docker 4、删除所有安装的docke…
阅读更多...
【JVM 内存结构丨栈】

【JVM 内存结构丨栈】

栈 -- 虚拟机栈 简介定义压栈出栈局部变量表操作数栈方法调用特点作用 本地方法栈&#xff08;C栈&#xff09;定义栈帧变化作用对比 主页传送门&#xff1a;&#x1f4c0; 传送 简介 栈是用于执行线程的内存区域&#xff0c;它包括局部变量和操作数栈。 Java 虚拟机栈会为每…
阅读更多...
MySql学习4：多表查询

MySql学习4：多表查询

教程来源 黑马程序员 MySQL数据库入门到精通&#xff0c;从mysql安装到mysql高级、mysql优化全囊括 多表关系 各个表结构之间存在各种关联关系&#xff0c;基本上分为三种&#xff1a;一对多&#xff08;多对一&#xff09;、多对多、一对一 一对多&#xff08;多对一&…
阅读更多...
学习设计模式之观察者模式，但是宝可梦

学习设计模式之观察者模式，但是宝可梦

前言 作者在准备秋招中&#xff0c;学习设计模式&#xff0c;做点小笔记&#xff0c;用宝可梦为场景举例&#xff0c;有错误欢迎指出。 观察者模式 观察者模式定义了一种一对多的依赖关系&#xff0c;一个对象的状态改变&#xff0c;其他所有依赖者都会接收相应的通知。 所…
阅读更多...
常见前端面试之VUE面试题汇总八

常见前端面试之VUE面试题汇总八

22. Vue 子组件和父组件执行顺序 加载渲染过程&#xff1a; 1.父组件 beforeCreate 2.父组件 created 3.父组件 beforeMount 4.子组件 beforeCreate 5.子组件 created 6.子组件 beforeMount 7.子组件 mounted 8.父组件 mounted 更新过程&#xff1a; 1. 父组件 befor…
阅读更多...
安全防护产品对接流程讲解

安全防护产品对接流程讲解

服务器被攻击了&#xff0c;怎么对接高防产品呢&#xff0c;需要提供什么&#xff1f; 1、配置转发规则&#xff1a;提供域名、IP、端口&#xff0c;由专业技术人员为您配置转发协议/转发端口/源站IP等转发规则&#xff0c;平台会分配该线路独享高防IP。 2、修改DNS解析&…
阅读更多...
最新文章

Copyright @ 2022~2023