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

news2024/11/15 23:24:22

😀前言
本篇博文是关于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连支持一下，创造不易您们的支持是我的动力🤞

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

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

相关文章

【力扣每日一题】2023.8.26 汇总区间

【力扣每日一题】2023.8.26 汇总区间

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个有序数组&#xff0c;让我们把数组内的元素汇总区间&#xff0c;也就是说有一串数字是连续的&#xff0c;比如是 1 2 3 4…
阅读更多...
数据结构：线性表之-顺序表

数据结构：线性表之-顺序表

目录 1.线性表概念 1.1 什么是顺序列表 1.2 线性表 2.顺序表实现 将有以下功能&#xff1a; 详细过程 顺序表的动态存储 顺序表初始化 尾插 扩容 头插 更改后的尾插 尾删 头删 打印 释放内存 优化顺序表 (任意位置插入删除) 优化后的头插尾插 优化后的头删尾…
阅读更多...
npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等

npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等

npm常用命令 前端常用的包管理工具 以及 npm淘宝镜像配置等 1. 前言1.1 NodeJs的下载安装1.2 windows上1.3 常用包管理工具 2. npm2.1 npm 的安装2.2 npm初始化包2.3 npm 安装、卸载包2.3.1 非全局安装2.3.1.1 单个包的安装2.3.1.1.1 默认版本安装2.3.1.1.2 指定版本安装 2.3.…
阅读更多...
Matlab图像处理运算方法-点运算

Matlab图像处理运算方法-点运算

点运算 点运算又称为对比度增强、对比度拉伸或灰度变换&#xff0c;是一种通过图像中的每一个像素值&#xff08;即像素点上的灰度值&#xff09;进行运算的图像处理方式。它将输入图像映射为输出图像&#xff0c;输出图像每个像素点的灰度值仅由对应的输入像素点的灰度值决定…
阅读更多...
（四）CUDA应用程序编程接口详解

（四）CUDA应用程序编程接口详解

C语言扩展 CUDA的编程接口是C语言的扩展集&#xff0c;其中主要的是Runtime库&#xff0c;该库分为三个组件&#xff1a;主机组件、设备组件以及公共组件 主机组件&#xff1a;在主机上运行并提供函数来控制和访问一个或多个计算设备 设备组件&#xff1a;设备运行并且提供特…
阅读更多...
树莓派4B上安装Gitlab

树莓派4B上安装Gitlab

参考连接&#xff1a; 树莓派上使用 GitLab 搭建专业 Git 服务 | 树莓派实验室 gitlab reconfigure 卡住 ruby_block[wait for redis service socket] action run_芹菜学长的博客-CSDN博客 以及用到了讯飞星火 系统版本信息 1.进入 giblab安装页面gitlab/gitlab-ce - Instal…
阅读更多...
Python——提高数据处理效率的迫切需要

Python——提高数据处理效率的迫切需要

提高数据处理效率的迫切需要 本章包括 处理指数级增长的数据所面临的挑战 传统计算架构与最新计算架构的比较 Python在现代数据分析中的作用和不足 提供高效Python计算解决方案的技术 我们一直在以极快的速度从各种来源收集海量数据。无论目前是否有使用价值&#xff0c;…
阅读更多...
YOLOv5算法改进（7）— 添加SimAM注意力机制

YOLOv5算法改进（7）— 添加SimAM注意力机制

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。SimAM&#xff08;Similarity-based Attention Mechanism&#xff09;是一种基于相似度的注意力机制&#xff0c;它的原理是通过计算查询向量与每个键向量之间的相似度&#xff0c;从而确定每个键向量对于查询向量的重要性…
阅读更多...
搭建开发环境-Mac

搭建开发环境-Mac

概述 上一篇搭建开发环境-WSLUbuntu 记录了WSL 和Ubuntu 下开发环境的搭建。这一篇就说下Mac开发环境的搭建。 就像很多人误以为Mini 是专为女孩子设计的高颜值车&#xff0c;其实是一辆极其hardcore 的拉力车一样。 很多人都被Mac 那高颜值蒙蔽了&#xff0c;其实这是一台生产…
阅读更多...
为DOSBOX增加外部串口功能

为DOSBOX增加外部串口功能

如果DOSBOX内部串口与宿主机串口通互通&#xff0c;那DOSBOX中各种语言开发的程序均与外界有了串行通信功能&#xff0c;MODBUS with DOSBOX也就实现了。下面的操作&#xff0c;为DOSBOX打开通往外部的串行通信接口。 1. 在宿主机上创建虚拟串口对。方法是安装 Free 的 com0co…
阅读更多...
【NLP的python库(01/4) 】： NLTK

【NLP的python库(01/4) 】： NLTK

一、说明 NLTK是一个复杂的库。自 2009 年以来不断发展&#xff0c;它支持所有经典的 NLP 任务&#xff0c;从标记化、词干提取、词性标记&#xff0c;包括语义索引和依赖关系解析。它还具有一组丰富的附加功能&#xff0c;例如内置语料库&#xff0c;NLP任务的不同模型以及与S…
阅读更多...
【LeetCode75】第三十七题 二叉树中的最长交错路径

【LeetCode75】第三十七题 二叉树中的最长交错路径

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一棵二叉树&#xff0c;问我们在这棵树里能找到的最长交错路径。最长交错路径就是在二叉树里一左一右一左一右这样走&#xff0c;最…
阅读更多...
Golang Gorm 高级查询之where + find

Golang Gorm 高级查询之where + find

插入测试数据 package mainimport ("fmt""gorm.io/driver/mysql""gorm.io/gorm" )type Student struct {ID int64Name string gorm:"size:6"Age intEmail *string }func (*Student) TableName() string {return "student&q…
阅读更多...
自动化测试概况和认知

自动化测试概况和认知

前言 书中说测试架构师掌握自动化测试的目的不是设计自动化架构或是具体来部署自动化&#xff0c;而是用好自动化。其实这一点我觉得对涉及自动化测试的人员都是通用的&#xff0c;只是偏重点不同。 往往自动化测试前期投入成本可能会大一点&#xff0c;比如框架设计、技术选…
阅读更多...
神经网络的工作原理

神经网络的工作原理

目录 神经网络的介绍 神经网络的组成 神经网络的工作原理 Numpy 实现神经元 Numpy 实现前向传播 Numpy 实现一个可学习的神经网络 神经网络的介绍 神经网络受人类大脑启发的算法。简单来说&#xff0c;当你睁开眼睛时&#xff0c;你看到的物体叫做数据&#xff0c;再由你…
阅读更多...
【论文笔记】Planning and Decision-Making for Autonomous Vehicles

【论文笔记】Planning and Decision-Making for Autonomous Vehicles

文章目录 Summary1. INTRODUCTION2. MOTION PLANNING AND CONTROL2.1. Vehicle Dynamics and Control2.2. Parallel Autonomy2.3. Motion Planning for Autonomous Vehicles 3. INTEGRATED PERCEPTION AND PLANNING3.1. From Classical Perception to Current Challenges in Ne…
阅读更多...
一篇读懂辐射检测仪应用解决方案技术（附方案选型及原理分析）

一篇读懂辐射检测仪应用解决方案技术（附方案选型及原理分析）

关于常见的辐射检测仪应用方案&#xff1a; 辐射检测仪是用于测量环境中辐射水平的设备&#xff0c;常用于核电站、医疗机构、实验室和核辐射工作场所等地方。以下是一种可能的辐射检测仪应用方案&#xff1a; 实时监测&#xff1a;辐射检测仪可以实时监测环境中的辐射水平&am…
阅读更多...
NIST测试包的可能问题

NIST测试包的可能问题

其实，大多数出现的问题，可能或多或少都可能跟数据集的大小相关。 如： Random Excursions Variant，在测试结果中，可能显示为横线，打开原始报告，可以看到： WARNING: TEST NOT APPLICABLE. THERE ARE AN INSUFFICIENT NUMBER INSUFFICIENT NUMBER OF C…
阅读更多...
【C++ 学习 ⑰】- 继承（下）

【C++ 学习 ⑰】- 继承（下）

目录 一、派生类的默认成员函数 二、继承与友元 三、继承与静态成员 四、复杂的菱形继承及菱形虚拟继承 五、继承和组合 一、派生类的默认成员函数 派生类的构造函数必须调用基类的构造函数初始化基类的那一部分成员。如果基类没有默认构造函数&#xff0c;那么必须在派生…
阅读更多...
spring框架：简介+依赖注入

spring框架：简介+依赖注入

目录 一、spring简介 二、创建项目 三、spring创建对象 四、SpringBean管理 1.注入实现-XML 2.注入实现-注解 一、spring简介 spring诞生与2003年&#xff0c;是一个轻量级的、IOC( Inversion Of Control 控制反转)和AOP(Aspect Oriented Programming 面向切面编程)的jav…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023