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.Driver
    username: root
    password: root
    url: 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的代理对象
    @Resource
    private FurnMapper furnMapper;

    @Test
    public 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 测试,添加方法
    @Test
    public 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的方法
    @Resource
    private 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:8080
                changeOrigin: true, //是否设置同源,这样浏览器就允许跨域访问
                pathRewrite: { //路径重写
                    '/api': '' //选择忽略拦截器里面的单词
                }

            }
        }
    }
}
2.重启前端项目,修改请求url,进行添加操作

image-20240319085530224

3.添加成功

image-20240319085207631

image-20240319085815820

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

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

相关文章

2024年起重机司机(限桥式起重机)证考试题库及起重机司机(限桥式起重机)试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年起重机司机(限桥式起重机)证考试题库及起重机司机(限桥式起重机)试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作…

【OpenSSH】Windows系统使用OpenSSH搭建SFTP服务器

【OpenSSH】Windows系统使用OpenSSH搭建SFTP服务器 文章目录 【OpenSSH】Windows系统使用OpenSSH搭建SFTP服务器一、环境说明二、安装配置步骤1.下载完成后&#xff0c;传至服务器或者本机并解压至C:/Program Files/目录下2.打开PowerShell终端3.进入到包含ssh可执行exe文件的文…

每日五道java面试题之springboot篇(一)

目录&#xff1a; 第一题. 什么是 Spring Boot&#xff1f;第二题. Spring Boot 有哪些优点&#xff1f;第三题. Spring Boot 的核心注解是哪个&#xff1f;它主要由哪几个注解组成的&#xff1f;第四题. 什么是 JavaConfig&#xff1f;第五题. Spring Boot 自动配置原理是什么…

全流程ArcGIS Pro技术应用

GIS是利用电子计算机及其外部设备&#xff0c;采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲&#xff0c;它是在一定的地域内&#xff0c;将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来&#xff0c;达到对地理和属性信息的综合管理。GIS的…

小本创业项目哪个比较赚钱?户用光伏加盟如何

随着不可再生能源的不断消耗和环保问题的日益重视&#xff0c;世界各国对新能源的需求都迫在眉睫。而光伏发电在新能源又有独特的优势。而光伏既改变了人们的生活方式也推动了社会的进步和市场经济的发展。那想做小本游戏创业的话可以选择户用光伏加盟吗&#xff1f; 首先要确认…

【微服务】Feign远程调用

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;微服务 ⛺️稳中求进&#xff0c;晒太阳 先来看我们以前利用RestTemplate发起远程调用的代码&#xff1a; 存在下面的问题&#xff1a;代码可读性差&#xff0c;编程体验不统一参数复杂URL…

332. 重新安排行程(力扣LeetCode)

文章目录 332. 重新安排行程题目描述思路如何理解死循环该记录映射关系 dfs&#xff08;回溯法&#xff09;代码 332. 重新安排行程 题目描述 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排…

6.2 感知器

感知器的概念由 罗森布拉特弗兰克 在1957年提出&#xff0c;它是一种监督训练的二元分类器。 一、单层感知器 考虑一个只包含一个神经元的神经网络。 这个神经元有两个输入x1&#xff0c;x2&#xff0c;权值为w1&#xff0c;w2。其激活函数为符号函数&#xff1a; 根据感知器…

Git浅谈配置文件和免密登录

一、文章内容 简述git三种配置ssh免密登录以及遇见的问题git可忽略文件git remote 相关操作 二、Git三种配置 项目配置文件(局部)&#xff1a;项目路径/.git/config 文件 git config --local user.name name git config --local user.email 123qq.cc全局配置文(所有用户): …

C++位运算符(<<,>>,|,^,)

简介 位运算符作用于整数类型的运算对象&#xff0c;并把运算对象看成是二进制位的集合。位运算符提供检查和设置二进制位的功能&#xff0c;一种名为bitset的标准库类型也可以表示任意大小的二进制集合&#xff0c;所以位运算符同样可以用于bitset类型。 如果运算对象是“小…

使用echart绘制拓扑图,树类型,自定义tooltip和label样式,可收缩

效果如图&#xff1a; 鼠标移上显示 vue3 - ts文件 “echarts”: “^5.4.3”, import { EChartsOption } from echarts import * as echarts from echarts/core import { TooltipComponent } from echarts/components import { TreeChart } from echarts/charts import { C…

【LeetCode】--- 动态规划 集训(一)

目录 一、1137. 第 N 个泰波那契数1.1 题目解析1.2 状态转移方程1.3 解题代码 二、面试题 08.01. 三步问题2.1 题目解析2.2 状态转移方程2.3 解题代码 三、746. 使用最小花费爬楼梯3.1 题目解析3.2 状态转移方程3.3 解题代码 一、1137. 第 N 个泰波那契数 题目地址&#xff1a…

Jackson 2.x 系列【1】概述

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 前言2. 什么是 JSON3. 常用 Java JSON 库4. Jackson4.1 简介4.2 套件4.3 模块4.…

002_avoid_for_loop_in_Matlab避免使用for循环

避免使用for循环 在程序设计思想中&#xff0c;循环是一个很有力的工具。在循环中&#xff0c;计算机很轻松地重复执行相同的操作。循环是汇编之上的编程中最重要的概念之一。Matlab的循环有两个语言构造&#xff0c;一个是for循环&#xff0c;另一个是while循环。在Matlab中&…

小红书离线数仓提效新思路,提升百倍回刷性能

数据处理效率一直是大数据时代的核心话题&#xff0c;它推动着各类数据执行引擎持续迭代产品。从早期的 MapReduce&#xff0c;到今天的 Spark&#xff0c;各行业正不断演进其离线数仓技术架构。 现有以 Spark 为核心的数仓架构在处理大规模数据回刷方面已取得进展&#xff0c;…

【Web】记录CISCN 2021 总决赛 ezj4va题目复现——AspectJWeaver

目录 前言 原理分析 step 0 step 1 EXP 前文&#xff1a;【Web】浅聊Java反序列化之AspectJWeaver——任意文件写入-CSDN博客 前言 这就是当年传说中的零解题嘛&#x1f62d;&#xff0c;快做&#x1f92e;了 有了之前的经验&#xff0c;思路顺挺快的&#xff0c;中间不…

TextMeshPro图文混排的两种实现方式,不打图集

TMP图文混排 方案一&#xff1a;TMP自带图文混排使用方法打包图集使用 方案二&#xff1a;不打图集&#xff0c;可以使用任何图片 接到一个需求&#xff0c;TextMeshPro 图文混排。 方案一&#xff1a;TMP自带图文混排 优点布局适应优秀&#xff0c;字体左中右布局位置都很不错…

python第三次项目作业

打印课堂上图案 判断一个数是否是质数&#xff08;素数&#xff09; 设计一个程序&#xff0c;完成(英雄)商品的购买&#xff08;界面就是第一天打印的界面&#xff09; 展示商品信息(折扣)->输入商品价格->输入购买数量->提示付款 输入付款金额->打印购买小票&a…

【Vue3】走进Pinia,学习Pinia,使用Pinia

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

骑砍战团MOD开发(49)-使用ScoEditor编辑sco文件制作游戏场景

一.ScoEditor下载霸王•吕布 / ScoEditor GitCodehttps://gitcode.net/qq_35829452/scoeditor二.ScoEditor导出文件种类 mission_objects.json:场景物/出生点/通道等物体 layer_ground_elevation.pfm:场景terrain/ground地形增量,采用PFM深度图存储 ai_mesh.obj:AI网格静态模型…