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

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的代理对象@Resourceprivate FurnMapper furnMapper;@Testpublic 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 测试，添加方法

    @Testpublic 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的方法@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

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

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

3.添加成功