SpringBoot+Vue项目（后端项目搭建 + 添加家居）

文章目录

    • 1.使用版本控制管理该项目
        • 1.创建远程仓库
        • 2.克隆到本地
    • 2.后端项目环境搭建
        • 1.创建一个maven项目
        • 2.删除不必要的文件夹
        • 3.pom.xml文件引入依赖
        • 4.application.yml 配置数据源（注意，数据库名还没写）
        • 5.com/sun/furn/Application.java 编写主程序
        • 6.启动主程序测试
        • 7.该阶段文件目录
    • 3.添加家居后端
        • 1.思路分析
        • 2.数据库表设计
        • 3.application.yml 填写数据库名
        • 4.com/sun/furn/util/Result.java 编写封装返回json对象的工具类
        • 5.com/sun/furn/bean/Furn.java 编写映射furn表的bean
        • 6.开发Mapper
          • 1.com/sun/furn/mapper/FurnMapper.java 编写Mapper接口
          • 2.com/sun/furn/ApplicationTest.java 测试Mapper接口
        • 7.开发Service
          • 1.com/sun/furn/service/FurnService.java 编写Service接口
          • 2.com/sun/furn/service/Impl/FurnServiceImpl.java 编写Service实现类
          • 3.com/sun/furn/ApplicationTest.java 测试，添加方法
        • 8.开发Controller
          • 1.com/sun/furn/controller/FurnController.java 编写Controller
          • 2.postman测试，不要忘记设置Content-Type为 `application/json`
        • 9.发送数据的注意事项
          • 1.发送json类型的数据
            • 1.请求方式
            • 2.Content-Type设置
          • 2.使用表单或者请求参数类型提交
            • 1.直接使用post表单形式提交
            • 2.报错
            • 3.去掉@RequestBody注解再次请求
            • 4.也可以使用请求参数
        • 10.@TableId注解使用
    • 4.添加家居前端
        • 1.安装Axios
          • 命令行到**前端**项目文件夹下输入命令 `npm i axios -S`
        • 2.点击添加按钮，出现添加家居的对话框
          • 1.src/views/HomeView.vue 引入对话框表单
          • 2.新增按钮绑定事件
          • 3.数据池
          • 4.方法池
          • 5.结果展示
        • 3.创建工具文件创建request对象 src/utils/request.js
        • 4.src/views/HomeView.vue 提交添加表单数据
          • 1.方法池
          • 2.出现跨域问题
        • 5.解决跨域问题
          • 1.修改 vue.config.js 添加跨域配置
          • 2.重启前端项目，修改请求url，进行添加操作
          • 3.添加成功

1.使用版本控制管理该项目

1.创建远程仓库

image-20240318154355592

2.克隆到本地

image-20240318154452246

2.后端项目环境搭建

1.创建一个maven项目

image-20240318154854958

2.删除不必要的文件夹

image-20240318154939265

3.pom.xml文件引入依赖
  <!--导入springboot父工程--><parent><artifactId>spring-boot-starter-parent</artifactId><groupId>org.springframework.boot</groupId><version>2.5.3</version></parent><dependencies><!--常规依赖--><!--web场景启动器--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--lombok--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!--引入测试场景启动器--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--配置处理器--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><!--数据库配置--><!--mysql依赖使用版本仲裁--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!-- 引入 druid 依赖 --><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.17</version></dependency><!--引入MyBatis-Plus场景启动器--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version></dependency></dependencies>
4.application.yml 配置数据源（注意，数据库名还没写）
server:port: 8080
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: rooturl: jdbc:mysql://localhost:3306/xxxx?useSSL=false&useUnicode=true&characterEncoding=UTF-8
5.com/sun/furn/Application.java 编写主程序
package com.sun.furn;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;/*** Description: 主程序** @Author sun* @Create 2024/3/18 15:59* @Version 1.0*/
@SpringBootApplication
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}
}
6.启动主程序测试

image-20240318160424845

7.该阶段文件目录

image-20240318162019440

3.添加家居后端

1.思路分析

image-20240318161034625

2.数据库表设计
-- 创建 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;
3.application.yml 填写数据库名

image-20240318161645555

4.com/sun/furn/util/Result.java 编写封装返回json对象的工具类
package com.sun.furn.util;import lombok.Data;
import lombok.NoArgsConstructor;/*** Description: 封装返回json数据的对象** @Author sun* @Create 2024/3/18 16:21* @Version 1.0*/@Data //getter，setter, tostring
@NoArgsConstructor //无参构造
public class Result<T> {private String code; //状态码private String msg; //携带信息private T data; //返回数据类型，在创建对象时使用泛型指定//有参构造，指定返回的数据以及泛型public Result(T data) {this.data = data;}//返回不带参数的成功信息public static Result success() {Result<Object> objectResult = new Result<>();objectResult.setCode("200");objectResult.setMsg("success");return objectResult;}//返回携带参数的成功信息public static <T> Result<T> success(T data) {Result<T> tResult = new Result<>(data);tResult.setCode("200");tResult.setMsg("success");return tResult;}//返回不带参数的失败信息public static Result error(String code, String msg) {Result<Object> objectResult = new Result<>();objectResult.setCode(code);objectResult.setMsg(msg);return objectResult;}//返回携带参数的失败信息public static <T> Result<T> error(String code, String msg, T data) {Result<T> tResult = new Result<>(data);tResult.setCode(code);tResult.setMsg(msg);return tResult;}}
5.com/sun/furn/bean/Furn.java 编写映射furn表的bean
package com.sun.furn.bean;import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;/*** Description: 映射furn表的bean** @Author sun* @Create 2024/3/18 17:18* @Version 1.0*/
@Data
@TableName("furn")
public class Furn {private Integer id;private String name;private String maker;private Double price;private Integer sales;private Integer stock;
}
6.开发Mapper
1.com/sun/furn/mapper/FurnMapper.java 编写Mapper接口
package com.sun.furn.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sun.furn.bean.Furn;
import org.apache.ibatis.annotations.Mapper;/*** Description:** @Author sun* @Create 2024/3/18 17:22* @Version 1.0*/
@Mapper //注入容器
public interface FurnMapper extends BaseMapper<Furn> {//可以添加自定义方法
}

image-20240318172729548

2.com/sun/furn/ApplicationTest.java 测试Mapper接口
package com.sun.furn;import com.sun.furn.bean.Furn;
import com.sun.furn.mapper.FurnMapper;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;import javax.annotation.Resource;/*** Description:** @Author sun* @Create 2024/3/18 17:28* @Version 1.0*/
@SpringBootTest
public class ApplicationTest {//输入Mapper的代理对象@Resourceprivate FurnMapper furnMapper;@Testpublic void FurnMapperTest() {Furn furn = furnMapper.selectById(1);System.out.println(furn);}
}

image-20240318173216004

7.开发Service
1.com/sun/furn/service/FurnService.java 编写Service接口
package com.sun.furn.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.sun.furn.bean.Furn;/*** Description:** @Author sun* @Create 2024/3/18 17:34* @Version 1.0*/
public interface FurnService extends IService<Furn> {//自定义方法
}
2.com/sun/furn/service/Impl/FurnServiceImpl.java 编写Service实现类
package com.sun.furn.service.Impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.sun.furn.bean.Furn;
import com.sun.furn.mapper.FurnMapper;
import com.sun.furn.service.FurnService;
import org.springframework.stereotype.Service;/*** Description:** @Author sun* @Create 2024/3/18 17:35* @Version 1.0*/
@Service //注入容器
public class FurnServiceImpl extends ServiceImpl<FurnMapper, Furn> implements FurnService {//自定义方法实现
}
3.com/sun/furn/ApplicationTest.java 测试，添加方法
    @Testpublic void FurnServiceTest() {List<Furn> list = furnService.list();for (Furn furn : list) {System.out.println(furn);}}

image-20240318174336591

8.开发Controller
1.com/sun/furn/controller/FurnController.java 编写Controller
package com.sun.furn.controller;import com.sun.furn.bean.Furn;
import com.sun.furn.service.FurnService;
import com.sun.furn.util.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** Description:** @Author sun* @Create 2024/3/18 17:48* @Version 1.0*/
@Slf4j
@RestController // 由于是前后端分离，所以返回的都是json数据
public class FurnController {// 注入service的bean对象，可以调用IService的方法@Resourceprivate FurnService furnService;@PostMapping("/save")/** 注意：这里的requestBody表示前端必须以json格式发送数据* 但是，如果使用表单提交的数据则不能添加这个注解 */public Result save(@RequestBody Furn furn) {log.info("furn = {} " + furn);furnService.save(furn);return Result.success();}
}
2.postman测试，不要忘记设置Content-Type为 application/json

image-20240318185114244

9.发送数据的注意事项
1.发送json类型的数据
1.请求方式

image-20240318190354878

2.Content-Type设置

image-20240318190418586

2.使用表单或者请求参数类型提交
1.直接使用post表单形式提交

image-20240318191149861

2.报错

image-20240318191207189

3.去掉@RequestBody注解再次请求

image-20240318191338020

image-20240318191404887

4.也可以使用请求参数

image-20240318191557668

10.@TableId注解使用

image-20240318192237894

4.添加家居前端

1.安装Axios
命令行到前端项目文件夹下输入命令 npm i axios -S

image-20240318193036995

2.点击添加按钮，出现添加家居的对话框
1.src/views/HomeView.vue 引入对话框表单
    <!--    引入对话框表单，注意数据的名字需要跟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>
2.新增按钮绑定事件

image-20240318195710405

3.数据池

image-20240318195549298

4.方法池

image-20240318195647983

5.结果展示

image-20240318195802833

3.创建工具文件创建request对象 src/utils/request.js
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
4.src/views/HomeView.vue 提交添加表单数据
1.方法池
    // 点击确定时触发，提交添加信息的表单save() {request.post("http://localhost:8080/save", this.form).then(res => {console.log("res", res)})}
2.出现跨域问题

image-20240319084123683

5.解决跨域问题
1.修改 vue.config.js 添加跨域配置
// 跨域配置
module.exports = {devServer: {port: 9999, //启动端口//设置代理，解决跨域问题proxy: {'/api': {target: 'http://localhost:8080', //这样设置/api就代表了http://localhost:8080changeOrigin: true, //是否设置同源，这样浏览器就允许跨域访问pathRewrite: { //路径重写'/api': '' //选择忽略拦截器里面的单词}}}}
}
2.重启前端项目，修改请求url，进行添加操作

image-20240319085530224

3.添加成功

image-20240319085207631

image-20240319085815820

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

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

相关文章

蓝桥杯算法心得——游戏（优先队列）

蓝桥杯算法心得——游戏（优先队列）

大家好&#xff0c;我是晴天学长&#xff0c;优先队列的题&#xff0c;式子化简非常重要&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .游戏 2) .算法思路 附近最小 1.接收数据 2.找出最小的&#…
阅读更多...
安防监控平台EasyCVR使用管理员权限登录后，平台菜单栏显示不全是什么原因？

安防监控平台EasyCVR使用管理员权限登录后，平台菜单栏显示不全是什么原因？

安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;平台能在复杂的网络环境中&#xff08;专网、局域网、广域网、VPN、公网等&#xff09;将前端海量的设备进行统一集中接入与视频汇聚管理&#xff0c;平台支持设备通过4G、5G、WIFI、有…
阅读更多...
I2C协议

I2C协议

一.硬件连接 I2C必须使用开漏&#xff08;或集电极开路&#xff09;的引脚&#xff0c;其引脚框图如下所示。 SCL0对应78K0的P6.0引脚&#xff0c;SDA0对应78K0的P6.1引脚。 在使用开漏引脚通信时&#xff0c;需注意如下事项&#xff1a; 1&#xff09;两条总线须外接…
阅读更多...
【Java - API - 多线程】(01) 通过Java 8完成多线程的创建，快速上手

【Java - API - 多线程】(01) 通过Java 8完成多线程的创建，快速上手

通过"Java 8"完成多线程的创建&#xff0c;快速上手&#xff1b; 实操 【前提】 使用"Windows 11"系统通过"IntelliJ IDEA"软件完成&#xff1b; 【目录】 “方式1”&#xff1a;通过继承"Thread"完成-正常操作&#xff1b;“方式2”…
阅读更多...
【QT入门】 Qt自定义信号后跨线程发送信号

【QT入门】 Qt自定义信号后跨线程发送信号

往期回顾&#xff1a; 【QT入门】 lambda表达式(函数)详解-CSDN博客 【QT入门】 Qt槽函数五种常用写法介绍-CSDN博客 【QT入门】 Qt实现自定义信号-CSDN博客 【QT入门】 Qt自定义信号后跨线程发送信号 由于Qt的子线程是无法直接修改ui&#xff0c;需要发送信号到ui线程进行修改…
阅读更多...
【Unity投屏总结】投屏方案总结

【Unity投屏总结】投屏方案总结

【背景】 想方便自己在VR中工作&#xff0c;打算做一个能够挂多个屏幕的远程控制VR桌面。研究下来发现细分场景有很多&#xff0c;有点鱼和熊掌不可兼得的意味&#xff0c;细分如下。 【投屏场景与解决方案】 希望多人能够同时观看我的屏幕&#xff0c;也就是一屏投多屏&…
阅读更多...
C语言知识复盘— 递归算法 | 函数 | 数组

C语言知识复盘— 递归算法 | 函数 | 数组

递归 ○ 算法思想&#xff1a; 递归算法分为两大阶段 : 递和归&#xff0c;即就是有去&#xff08;递去&#xff09;有回&#xff08;归来&#xff09;。 递去&#xff1a;将递归问题分解为若干个规模较小,与原问题形式相同的子问题,这些子问题可以用相同的解题思路来解决。归…
阅读更多...
spring cloud项目微服务间互相调用使用自定义标注进行鉴权方案

spring cloud项目微服务间互相调用使用自定义标注进行鉴权方案

来吧&#xff0c;贴代码。 一、背景 我们有一个项目使用了spring cloud&#xff0c;有的微服务需要调用别的微服务&#xff0c;但这些调用没有鉴权&#xff1b;当初项目时间非常紧&#xff0c;同时这部分微服务有的对外也没有鉴权&#xff0c;在代码中设置了无须鉴权&#xf…
阅读更多...
字节跳动面试被拷打：高效处理大量数据的JavaScript技巧

字节跳动面试被拷打：高效处理大量数据的JavaScript技巧

一、文章内容 时间分片宏任务微任务前置内容实现时间分片 二、时间切片 什么是时间切片&#xff1f;通过字面意思我们不难理解时间切片就是将时间分成多个片段进行一一渲染数据,时间切片是个抽象的问题,我们可能会想到JavaScript中window自带的setTimeout的延迟函数或者是 w…
阅读更多...
Docker进阶教程 - 2 Docker部署SpringBoot项目

Docker进阶教程 - 2 Docker部署SpringBoot项目

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 2 Docker部署SpringBoot项目 已经学习了 Dockerfile 了&#xff0c;下面介绍一下如何将 SpringBoot 项目通过 Dockerfile 来部署到 Docker 中。 1 修改项目配置 首先需要准备一个 SpringBo…
阅读更多...
初识二叉树

初识二叉树

文章目录 一.什么是树二.什么是二叉树三.二叉树的访问次序四.特殊的二叉树五.求结点个数六.平衡二叉树总结 一.什么是树 树是由一个集合以及在该集合上定义的一种关系构成的。 集合中的元素称为树的节点&#xff0c;所定义的关系称为父子关系。 父子关系在树的节点之间建立了一…
阅读更多...
安装OneNote for Win10 | Win10/Win11

安装OneNote for Win10 | Win10/Win11

前言 PC端的OneNote分为2个版本&#xff0c;分别是Microsoft Store版本和Office版本&#xff0c;Microsoft Store版本即为OneNote for Win10&#xff0c;此版的OneNote有最近笔记功能&#xff0c;但检索功能不如Office版本&#xff0c;个人认为2个版本各有优劣。 但OneNote f…
阅读更多...
新人应该从哪几个方面掌握大数据测试？

新人应该从哪几个方面掌握大数据测试？

什么是大数据 大数据是指无法在一定时间范围内用传统的计算机技术进行处理的海量数据集。 对于大数据的测试则需要不同的工具、技术、框架来进行处理。 大数据的体量大、多样化和高速处理所涉及的数据生成、存储、检索和分析使得大数据工程师需要掌握极其高的技术功底。 需要你…
阅读更多...
nodejs中使用@maxmind/geoip2-node 查询地理位置信息

nodejs中使用@maxmind/geoip2-node 查询地理位置信息

介绍 maxmind/geoip2-node 是一个Node.js模块&#xff0c;用于与MaxMind的GeoIP2数据库进行交互&#xff0c;从而获取IP地址的地理位置信息。MaxMind的GeoIP2数据库包含了全球范围内的IP地址和对应的地理位置信息&#xff0c;如国家、城市、经纬度等。使用maxmind/geoip2-node…
阅读更多...
Python连接MariaDB数据库

Python连接MariaDB数据库

2024软件测试面试刷题&#xff0c;这个小程序&#xff08;永久刷题&#xff09;&#xff0c;靠它快速找到工作了&#xff01;&#xff08;刷题APP的天花板&#xff09;【持续更新最新版】-CSDN博客 Python连接MariaDB数据库 一、安装mariadb库 pip install mariadb 二、连接…
阅读更多...
机器视觉学习（六）—— 图像的颜色识别

机器视觉学习（六）—— 图像的颜色识别

目录 一、色彩空间 1.1 RGB色彩空间 1.2 HSV色彩空间 1.3 灰度 1.4 CMYK色彩空间 1.5 Lab色彩空间 二、色彩空间转换 三、识别颜色 3.1 识别一种特定的颜色 3.2 识别多种颜色 一、色彩空间 计算机视觉中常用的色彩空间有RGB色彩空间、HSV色彩空间、CMYK色彩空间、La…
阅读更多...
34-Java传输对象模式 ( Transfer Object Pattern )

34-Java传输对象模式 ( Transfer Object Pattern )

Java传输对象模式 实现范例 传输对象模式&#xff08;Transfer Object Pattern&#xff09;用于从客户端向服务器一次性传递带有多个属性的数据传输对象也被称为数值对象&#xff0c;没有任何行为传输对象是一个具有 getter/setter 方法的简单的 POJO 类&#xff0c;它是可序列…
阅读更多...
解锁AI之门：协助探索Amazon Bedrock服务

解锁AI之门：协助探索Amazon Bedrock服务

AI愈加强大的功能和广泛的应用场景&#xff0c;正逐渐改变着我们的工作和生活方式。 Amazon Bedrock在AI的时代潮流中&#xff0c;也以其强大而灵活的功能特性&#xff0c;正在成为越来越多企业和个人的智能助手。 亚马逊云科技通过VERYCLOUD睿鸿股份的服务能力&#xff0c;使…
阅读更多...
揭秘！自定义三维模型如何在RflySim中实现仿真（一）

揭秘！自定义三维模型如何在RflySim中实现仿真（一）

一.技术背景 在无人系统研发过程中&#xff0c;需要进行大量的运动控制系统半物理实时仿真实验&#xff0c;传统仿真界面的运动轨迹显示多采用的是二维曲线形式&#xff0c;运动过程和状态是通过文本数据显示。随着数据量的增加&#xff0c;该方式缺乏直观性&#xff0c;不易观…
阅读更多...
python四川火锅文化网站的设计与实现flask-django-php-nodejs

python四川火锅文化网站的设计与实现flask-django-php-nodejs

四川火锅文化网站的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023