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

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

1.创建远程仓库

2.克隆到本地

2.后端项目环境搭建

1.创建一个maven项目

2.删除不必要的文件夹

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.启动主程序测试

7.该阶段文件目录

3.添加家居后端

1.思路分析

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 填写数据库名

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> {
    //可以添加自定义方法
}

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);
    }
}

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);
        }
    }

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

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 引入对话框表单

    <!--    引入对话框表单，注意数据的名字需要跟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.新增按钮绑定事件

3.数据池

4.方法池

5.结果展示

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.出现跨域问题

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，进行添加操作

3.添加成功