SpringBoot+Vue项目(后端项目搭建 + 添加家居)

news2024/9/22 13:34:37

文章目录

    • 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

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

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

相关文章

java练习题目1:让用户从键盘键入长方体的长,宽,高,计算并输出它的表面积与体积

每日小语 我相信即便是一道简单的题目&#xff0c;背后也有深刻的自然规律&#xff0c;通向那最高的“道”。 即便一个晚上&#xff0c;一道题也没做出来&#xff0c;只是不断地体悟那些解法与思想。彷佛这是一趟心灵的朝圣之旅。 …

Ubuntu24.04即将发布,支持Linux内核6.8。该版本会有哪些亮点?

更多内容在 Canonical 计划 2024 年 4 月发布 Ubuntu 24.04 LTS 发行版&#xff0c;将获得长达 12 年的支持。Ubuntu 24.04 LTS&#xff0c;代号“Noble Numbat”&#xff0c;是Ubuntu发行版的最新长期支持&#xff08;LTS&#xff09;版本。12年的支持意味着你会得到 五年的维…

tinyrenderer-Bresenham绘制直线算法

如何画线段 第一种尝试 求x&#xff0c;y起始点的差值&#xff0c;按平均间隔插入固定点数 起始点平均插入100个点&#xff1a; void line(int x0, int y0, int x1, int y1, TGAImage& image, TGAColor color) {for (float t 0.; t < 1.; t .01) {int x x0 (x1 -…

2024计算机二级Python 11和12

单向列表不能再回头&#xff0c;只有从头指针开始才可以&#xff0c;双向列表会出现重复访问&#xff0c;二叉树节点从根开始可以达到目的 面向对象的主要特征&#xff1a;抽象、封装、继承、多态 Python通过解释方式执行&#xff0c;执行速度没有采用编译方式的语言执行的快 f…

Docker【docker使用】

文章目录 前言一、概念二、常用方法1.镜像2.容器 三、镜像与镜像的关系&#xff0c;以及镜像构建和管理 前言 上一篇文章讲了docker的安装&#xff0c;本片文章我们来聊聊docker的一些常用操作。以及镜像、容器之间的关系 如果你想更加系统的学习docker&#xff0c;请看【dock…

蓝桥杯(3.21 刷真题)

P8682 [蓝桥杯 2019 省 B] 等差数列 import java.util.Arrays; import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int[] res new int[n1];for(int i1;i<n;i)res[i] sc.ne…

elasticsearch的数据搜索

DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来定义查询。常见的查询类型包括: 查询所有:查询出所有数据,一般测试用。例如:match_all 全文检索(full text)查询:利用分词器对用户…

虚拟直播赋能文旅,蓝海创意云亮相文旅虚拟现实应用推广交流活动

3月21日&#xff0c;由文化和旅游部产业发展司主办&#xff0c;中国信息通信研究院、北京市石景山区文化和旅游局、中国动漫集团有限公司承办的文化和旅游虚拟现实应用推广交流活动在首钢一高炉SoReal科幻乐园33 Meta Club举办。蓝海创意云应邀参与此次活动&#xff0c;携vLive…

ON1 NoNoise AI 2024 for mac v18.2 中文版 ai摄影

ON1 NoNoise AI 2024 for mac一款去除图像噪点的应用&#xff0c;特别对于摄影师来说&#xff0c;它是比较专业的摄影降噪软件。 软件下载&#xff1a;ON1 NoNoise AI 2024 for mac v18.2 中文版下载 智能降噪&#xff1a;利用先进的机器学习技术&#xff0c;ON1 NoNoise AI 20…

第5讲-MIPS(3)汇编语言

三、MIPs汇编语言(自学) 1.概述

taro之Picker,PickerView基础用法

1.Picker 直接上代码 import Taro,{Component} from "tarojs/taro"; import {View,Picker} from tarojs/components import { AtIcon } from taro-ui import { putKey } from /src/utils/storage-utilsclass AgriculturePolicy extends Component{constructor (prop…

部署Zabbix Agents添加使能监测服务器_Linux平台_Yum源/Archive多模式

Linux平台 一、从yum源脚本安装部署Zabbix-Agent,添加Linux Servers/PC 概述 Zabbix 主要有以下几个组件组成: Zabbix Server:Zabbix 服务端,Zabbix的核心组件,它负责接收监控数据并触发告警,还负责将监控数据持久化到数据库中。 Zabbix Agent:Zabbix客户端,部署在被监…

【综述】二维半导体和晶体管在集成电路未来应用

一篇关于二维半导体和晶体管在集成电路未来应用的综述文章。 文章由Lei Yin、Ruiqing Cheng、Jiahui Ding、Jian Jiang、Yutang Hou、Xiaoqiang Feng、Yao Wen和Jun He*共同撰写&#xff0c;发表在《ACS Nano》2024年第18卷上。 Figure 1: CMOS晶体管的演变 描述了CMOS晶体管…

8 克隆虚拟机

后期集群我们需要使用多台服务器&#xff0c;此处我们先克隆三台&#xff0c;master,slave01,slave02. 1.先关闭模版虚拟机。再选择 模版虚拟机hadoop100右击--》管理 --》克隆 2.下图中特别注意&#xff1a;建议使用集群的名字作为虚拟机名称。目前克隆主机master. 以上步骤完…

全域电商数据实现高效稳定大批量采集♀

全域电商&#xff0c;是近几年的新趋势&#xff0c;几乎所有商家都在布局全域&#xff0c;追求全域增长。但商家发现&#xff0c;随着投入成本的上涨&#xff0c;利润却没有增加。 其中最为突出的是——商家为保证全域数据的及时更新&#xff0c;通过堆人头的方式完成每日取数任…

怎么自己打印物流货运单,物流打印定制软件

怎么自己打印物流货运单&#xff0c;物流打印定制软件 一、前言 以下软件操作教程以 佳易王物流单打印登记查询系统V17.0为例说明 件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、物流货运单打印有两种模式 一个是直接打印&#xff0c;可以在空白纸上…

Matlab与高光谱遥感:环境监测的新时代

光谱和图像是人们观察世界的两种方式&#xff0c;高光谱遥感通过“图谱合一”的技术创新将两者结合起来&#xff0c;大大提高了人们对客观世界的认知能力&#xff0c;本来在宽波段遥感中不可探测的物质&#xff0c;在高光谱遥感中能被探测。以高光谱遥感为核心&#xff0c;构建…

docker 配置国内阿里镜像源

在/etc/docker/目录下新建daemon.json文件 在文件中写入 {"registry-mirrors": ["https://jmphwhtw.mirror.aliyuncs.com"] } 以管理员身份运行命令 systemctl daemon-reload systemctl restart docker

JetPack之DataBinding基础使用

目录 一、简介二、使用2.1 使用环境2.2 xml文件绑定数据2.3 数据绑定的对象2.3.1 object2.3.2 ObseravbleField2.3.3 ObseravbleCollection 2.4 绑定数据 三、应用场景 一、简介 DataBinding是谷歌15年推出的library,DataBinding支持双向绑定&#xff0c;能大大减少绑定app逻辑…

【Algorithms 4】算法(第4版)学习笔记 20 - 5.1 字符串排序

文章目录 前言参考目录学习笔记1&#xff1a;Java 字符串1.1&#xff1a;字符串数字类型2&#xff1a;键索引计数法 key-indexed counting2.1&#xff1a;排序算法回顾2.2&#xff1a;关于 key 的假设2.3&#xff1a;demo 演示2.4&#xff1a;分析3&#xff1a;低位优先基数排序…