SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--具体功能实现【三】

news2024/12/24 8:19:47

文章目录

  • SSM--功能实现
    • 实现功能04-添加家居信息
      • 需求分析/图解
      • 思路分析
      • 代码实现
      • 注意事项和细节
    • 实现功能05-显示家居信息
      • 需求分析/图解
        • 思路分析
      • 代码实现

SSM–功能实现

实现功能04-添加家居信息

需求分析/图解

image-20230731225049365

image-20230731225103919

思路分析

  1. 完成后台代码从dao -> serivce -> controller , 并对每层代码进行测试, 到controller 这一层，使用Postman 发送http post 请求完成测试

  2. 完成前端代码, 使用axios 发送ajax(json 数据)给后台, 实现添加家居信息

代码实现

  1. 创建src\main\java\com\nlc\furns\service\FurnService.java 和src\main\java\com\nlc\furns\service\FurnServiceImpl.java, 增加添加方法
public interface FurnService {
	public void save(Furn furn);
}

@Service
public class FurnServiceImpl implements FurnService {

    //注入/装配FurnMapper接口对象(代理对象)
    @Resource
    private FurnMapper furnMapper;

    @Override
    public void save(Furn furn) {
        //解读
        //1. 使用insertSelective
        //2. 因为我们的furn表的id是自增的,就使用insertSelective
        furnMapper.insertSelective(furn);
    }

修改Furn.java , 当创建Furn 对象imgPath 为null 时, imgPath 给默认值

private String imgPath = "assets/images/product-image/1.jpg";
public Furn(Integer id, String name, String maker, BigDecimal price,Integer sales, Integer stock, String imgPath) {
    this.id = id;
    this.name = name;
    this.maker = maker;
    this.price = price;
    this.sales = sales;
    this.stock = stock;
    if(!(imgPath == null || imgPath.equals("")) ){
    this.imgPath = imgPath;
}
  1. 创建ssm_vue\ssm\ssm\src\test\java\com\nlc\furns\service\FurnServiceTest.java ，测试方法
public class FurnServiceTest {
    //属性
    private ApplicationContext ioc;
    //从spring容器中,获取的是FurnService接口对象/代理对象
    private FurnService furnService;

    @Before
    public void init() {
        ioc = new ClassPathXmlApplicationContext("applicationContext.xml");
        //说明
        //1. 通过FurnService.class 类型获取 FurnService接口对象/代理对象
        furnService = ioc.getBean(FurnService.class);
        //com.sun.proxy.$Proxy21
        System.out.println("furnService-" + furnService.getClass());
    }

    @Test
    public void save() {

        Furn furn =
                new Furn(null, "小风扇", "顺平家居", new BigDecimal(180), 10,
                        70, "assets/images/product-image/1.jpg");

        furnService.save(furn);

        System.out.println("添加成功~");
    }
  1. 创建ssm_vue\ssm\ssm\src\main\java\com\nlc\furns\bean\Msg.java用来返回json 的数据的通用类
// Msg: 后端程序返回给前端的json数据的Msg对象=》本质就是数据规则
public class Msg {

    //状态码 200-成功 400-失败
    private int code;
    //信息-说明
    private String msg;
    //返回给客户端/浏览器的数据-Map集合
    private Map<String, Object> extend =
            new HashMap<>();

    //编写几个常用的方法-封装好msg
    //返回success对应的msg
    public static Msg success() {
        Msg msg = new Msg();
        msg.setCode(200);
        msg.setMsg("success");
        return msg;
    }

    //返回fail对应的msg
    public static Msg fail() {
        Msg msg = new Msg();
        msg.setCode(400);
        msg.setMsg("fail");
        return msg;
    }

    //给返回的msg设置数据-不难应该可以看懂
    public Msg add(String key, Object value) {
        extend.put(key, value);
        return this;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Map<String, Object> getExtend() {
        return extend;
    }

    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }
}

4.创建FurnController.java , 处理添加请求

@Controller
public class FurnController {

    //注入配置FurnService
    @Resource
    private FurnService furnService;

    /**
     * 解读
     * 1、响应客户端的添加请求
     * 2、@RequestBody: 使用 SpringMVC 的 @RequestBody 将客户端提交的 json 数据，封装成 JavaBean 对象
     * 3、@ResponseBody: 服务器返回的数据格式是按照 json 来返回的(底层是按照http协议进行协商)
     */
    @PostMapping("/save")
    @ResponseBody
    public Msg save(@Validated @RequestBody Furn furn, Errors errors) {

        Map<String, Object> map = new HashMap<>();

        List<FieldError> fieldErrors = errors.getFieldErrors();
        for (FieldError fieldError : fieldErrors) {
            map.put(fieldError.getField(), fieldError.getDefaultMessage());
        }

        if (map.isEmpty()) {//说明后端校验通过,因为没有发现校验错误
            furnService.save(furn);
            //返回成功msg
            return Msg.success();
        } else {
            //校验失败，把校验错误信息封装到Msg对象，并返回
            return Msg.fail().add("errorMsg", map);
        }

    }
  1. 使用Postman 来完成Controller 层的测试, 通过Postman 添加Furn 数据

使用Postman 测试时，因为我们前台是发送的json 数据，被服务器接收到后，转成javabean 数据，因此pom.xml 需要引入jackson,处理json 数据, 否则后台会报错.

//报错
Content type 'application/json;charset=UTF-8' not supported

  <!-- 引入jackson,处理json数据 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.4</version>
        </dependency>

image-20230731231325902

image-20230731231357814

  1. 点击添加按钮， 可以出现添加家居的对话框, 修改C:\Users\Administrator\Desktop\desktop\d\SSM-Vue 整合项目-temp\ssm_vue\src\views\HomeView.vue , 说明el-dialog 从Dialog 对话框获取, 表单代码从Form 表单获取，组合一下并调整一下即可

image-20230731231444371

image-20230731231505440

  <!-- 添加家居的弹窗
      说明:
      1. el-dialog ：v-model="dialogVisible" 表示对话框, 和dialogVisible 变量双向绑定,控制是否显示对话框
      2. el-form :model="form" 表示表单 ,数据和 form数据变量双向绑定
      3. el-input v-model="form.name" 表示表单的input控件，名字为name 需要和后台Javabean[Furn] 属性一致
      4. 在前端中, 对象的属性是可以动态生成的 , 这个知识点，我们在讲前端技术栈讲过
    -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
          <el-input v-model="form.name" style="width: 50%"></el-input>
          {{serverValidErrors.name}}
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 50%"></el-input>
          {{serverValidErrors.maker}}
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" style="width: 50%"></el-input>
          {{serverValidErrors.price}}
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="form.sales" style="width: 50%"></el-input>
          {{serverValidErrors.sales}}
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" style="width: 50%"></el-input>
          {{serverValidErrors.stock}}
        </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>

//增加数据, 一定要, 否则你会发现,在后面弹出的表单不能输入数据
    data() {
        return {
            form: {},
            //增加方法
            methods: {
                add() {
                    this.dialogVisible = true
                    this.form = {}
    			}
			}
		}
	}
//增加点击新增的按钮事件
<div style="margin: 10px 0">
    <el-button type="primary" @click="add">新增</el-button>
    <el-button>其它</el-button>
</div>
  1. 完成测试: 看看点击新增按钮，能否正常的弹窗添加家居的对话框(含有表单)

image-20230731233645086

  1. 项目前端安装axios， 用于发送Ajax 请求给后台， 一定要注意

image-20230731233709741

  1. 创建工具文件ssm_vue\src\utils\request.js , 用于创建axios request 对象
//引入axios
import axios from "axios";
//通过axios创建对象-request对象,用于发送请求到后端
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)
})


//response拦截器
//可以在调用接口响应后，统一的处理返回结果
request.interceptors.response.use(
    response => {
        let res = response.data
        //如果返回的是文件,就返回
        if (response.config.responseType === 'blob') {
            return res
        }
        //如果是string, 就转成json对象
        if (typeof res === 'string') {
            //如果res 不为null, 就进行转换成json对象
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log("err", error)
        return Promise.reject(error);
    }
)

//导出request对象, 在其它文件就可以使用
export default request
  1. 修改HomeView.vue , 在methods 编写save 方法, 并测试会出现跨域问题
 //1. 将form 表单提交给/api/save 的接口
//2. /api/save 等价http∶//locaLhost∶10001/save
//3. 如果成功，就进入then 方法
//4.res 就是返回的信息
//5.查看mysql 看看数据是否保存
save() {
    // =======说明====...
    request.post("/api/save", this.form).then(res => {
        console.log(res)
        this.dialogVisible = false
    })
}

11.这里容易出现的问题

  1. 一定要确定request.post(“/api/save”) 被代理后的url , 是项目后台服务对应提供的API接口url, 否则报404。
  2. 当跨域执行时请求，浏览器还是提示http://localhost:5927/api/xxx , 所以不要认为是api没有替换你的配置.

注意事项和细节

  1. Postman 测试时, 要指定content-type ,否则会报错415

image-20230731234540561

  1. 如果需要将提交的json 数据, 封装到对应的Javabean, 需要配置@RequestBody , 否则会报错500
  2. 如果需要返回json 数据, 需要在方法上, 配置@ResponseBody , 否则会报错404

实现功能05-显示家居信息

需求分析/图解

image-20230804211343458

思路分析

  1. 完成后台代码从dao -> serivce -> controller , 并对每层代码进行测试
  2. 完成前台代码, 使用axios 发送http 请求，返回所有家居数据, 将数据绑定显示

代码实现

  1. 修改FurnService.java 和FurnServiceImpl.java, 增加findAll 方法
//FurnService
public List<Furn> findAll();

//FurnServiceImpl
//返回所有家居数据，传入null 即可
@Override
public List<Furn> findAll() {
	return furnMapper.selectByExample(null);
}
  1. 修改FurnServiceTest.java ，测试findAll.
@Test
public void findAll() {
 	 List<Furn> furnList = furnService.findAll();
     for (Furn furn : furnList) {
   		System.out.println(furn);
     }
}
  1. 修改FurnController.java , 处理显示请求, 并使用Postman 完成测试
@ResponseBody
@RequestMapping("/furns")
public Msg listFurns() {
    List<Furn> furnList = furnService.findAll();
    return Msg.success().add("furnsList", furnList);
}
  1. 修改HomeView.vue , 编写list 方法
//修改一下el-table
<el-table : data="tableData" stripe style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        sortable
    >
    </el-table-column>
    <el-table-column
        prop="name"
        label="家居名"
    >
    </el-table-column>
    <el-table-column
        prop="maker"
        label="厂家">
    </el-table-column>
    <el-table-column
        prop="price"
        label="价格">
    </el-table-column>
    <el-table-column
        prop="sales"
        label="销量">
    </el-table-column>
    <el-table-column
        prop="stock"
        label="库存">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
    </template>
</el-table-column>
</el - table >
    //修改一下tableData: []
    data() {
    return {
        form: {},
        dialogVisible: false,
        search: '',
        tableData: []
    }
}
//在created() 调用list() 完成页面数据获取
created() {
    this.list()
}
//编写list() method
list() { //请求显示家居列表-带检索
    request.get("/api/furns").then(res => {
        //绑定tableData, 显示在表格
        this.tableData = res.data.extend.furnsList
    })
}
//在save() 调用后，调用list() 刷新页面
save() {
    // =======说明====...
    request.post("/api/save", this.form).then(res => {
        console.log(res)
        this.dialogVisible = false
        this.list()
    })
}
  1. 完成测试，看看是否可以显示家居列表信息.

image-20230801151406203

  1. 修改src\utils\request.js 增加response 拦截器， 统一处理响应后结果
//引入axios
import axios from "axios";
//通过axios创建对象-request对象,用于发送请求到后端
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)
})
 
 
//response拦截器
//可以在调用接口响应后，统一的处理返回结果
request.interceptors.response.use(
    response => {
        let res = response.data
        //如果返回的是文件,就返回
        if (response.config.responseType === 'blob') {
            return res
        }
        //如果是string, 就转成json对象
        if (typeof res === 'string') {
            //如果res 不为null, 就进行转换成json对象
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log("err", error)
        return Promise.reject(error);
    }
)
 
//导出request对象, 在其它文件就可以使用
export default request

  1. 修改Home.vue , 简化返回处理

    image-20230801151544687

    1. 完成测试.

image-20230801151633068

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

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

相关文章

C++学习笔记总结练习：迭代器

C++学习笔记总结练习：迭代器

迭代器 1 基础 头文件 #include<iterator>迭代器范围 begin和end被容器使用了&#xff0c;可以用front和back作为游标。 左闭右开区间 [begin,end)使用迭代器进行遍历 遍历方法有三种&#xff1a;下标遍历、范围for遍历、迭代器遍历 container c; first c.begin(); l…
阅读更多...
【项目 计网2】4.4网络模型 4.5协议 4.6网络通信的过程

【项目 计网2】4.4网络模型 4.5协议 4.6网络通信的过程

文章目录 4.4网络模型OSI七层参考模型TCP/IP四层模型&#xff08;常用&#xff09;简介四层介绍 4.5协议简介常见协议UDP协议TCP协议IP协议以太网帧协议&#xff08;MAC地址封装&#xff09;ARP协议&#xff08;IP->MAC&#xff09; 4.6网络通信的过程封装分用 4.4网络模型 …
阅读更多...
【Spring】使用注解存储Bean对象

【Spring】使用注解存储Bean对象

目录 一、配置扫描路径&#xff08;使用注解的方式存对象的前提&#xff09; 二、使用类注解存储Bean对象 1、使用五大类注解存储Bean对象 2、为什么要这么多的类注解&#xff1f; 2.1、五大类注解之间的关系 3、获取Bean对象时的默认命名规则 三、使用方法注解来存储…
阅读更多...
【Paper】2020_网络化多智能体系统的事件触发一致性研究_徐勇

【Paper】2020_网络化多智能体系统的事件触发一致性研究_徐勇

徐勇. 网络化多智能体系统的事件触发一致性研究[D].浙江大学,2020.DOI:10.27461/d.cnki.gzjdx.2020.001385. 文章目录 5 已知 DoS 攻击策略下多智能体系统的事件触发安全一致性分析5.1 引言5.2 数学模型与问题描述5.3 控制器和事件触发条件的设计5.5 数值仿真程序 Main.m程序 M…
阅读更多...
.locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

.locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

引言&#xff1a; 当今社会&#xff0c;互联网的迅速发展为我们的工作和生活带来了便利&#xff0c;但同时也伴随着越来越多的网络威胁。勒索病毒如.locked勒索病毒便是其中的代表之一。.locked勒索病毒利用高级加密算法&#xff0c;将用户重要的数据文件锁定&#xff0c;要求…
阅读更多...
IP路由基础+OSPF 基础

IP路由基础+OSPF 基础

IP路由 RIB与FIB RIB&#xff1a;Routing Information Base&#xff0c;路由信息库 &#xff0c;路由器的控制平面 FIB&#xff1a;Forwarding Information Base&#xff0c;转发信息库&#xff0c;路由器的数据平面 路由信息库主要是记录直连路由以及协议宣告的路由信息&am…
阅读更多...
Windows安装子系统Linux

Windows安装子系统Linux

Windows安装子系统(Linux ubuntu&#xff09; 安装条件步骤1.安装WSL命令2.设置Linux用户名和密码3.写个简单的.c程序看看4.如何互传文件 安装条件 Windows 10版本2004及更高的版本才能安装。 步骤 1.安装WSL命令 我们可以使用WSL来安装子系统 Linux ubuntu(默认是这个)。 …
阅读更多...
思科2021笔试题

思科2021笔试题

笔试时间&#xff1a;2020.09.07&#xff0c;19&#xff1a;00——21&#xff1a;00 岗位&#xff1a;嵌入式软件工程师 题型&#xff1a;数据结构4道&#xff0c;网络3道&#xff0c;操作系统3道&#xff0c;C4道&#xff0c;Java4道&#xff0c;python4道&#xff0c;数据库…
阅读更多...
ORCA优化器浅析——CQueryContext对优化器的要求

ORCA优化器浅析——CQueryContext对优化器的要求

从ORCA优化器浅析——重要主流程概述中可以知道进入真正优化器引擎执行流程之前需要对优化器提出要求&#xff0c;比如后面会提到的required columns、required sort orders等。而CQueryContext即是承载这些内容的类。首先CQueryContext类是通过PqcGenerate函数构造的&#xff…
阅读更多...
深入学习JVM —— GC垃圾回收机制

深入学习JVM —— GC垃圾回收机制

前言 前面荔枝已经梳理了有关JVM的体系结构和类加载机制&#xff0c;也详细地介绍了JVM在类加载时的双亲委派模型&#xff0c;而在这篇文章中荔枝将会比较详细地梳理有关JVM学习的另一大重点——GC垃圾回收机制的相关知识&#xff0c;重点了解的比如对象可达性的判断、四种回收…
阅读更多...
推荐一款老化测试软件 Monitor.Analog

推荐一款老化测试软件 Monitor.Analog

1. 数据采集模块&#xff1a; 该模块负责与下位机设备通信&#xff0c;实时采集模拟量数据。支持多种通信协议&#xff0c;如Modbus、OPC等&#xff0c;以适应不同类型的设备。数据采集模块还需要具备异常数据处理功能&#xff0c;例如数据丢失、错误数据等。 2. 数据存储模块…
阅读更多...
Linux命令200例：用Look一个进行文本搜索工具

Linux命令200例：用Look一个进行文本搜索工具

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…
阅读更多...
Python简单应用V

Python简单应用V

题目 通过编写函数实现下述各题。 输入一字符串&#xff0c;各个子串之间按空白字符隔开&#xff0c;分别显式其中最长、最短子串&#xff0c;以及最大、最小字符。 输入单个字符&#xff0c;判断并显示该字符是否为大写英文字母、小写英文字母、非英文文字字符、空格、数字或…
阅读更多...
【Paper Reading】DETR：End-to-End Object Detection with Transformers

【Paper Reading】DETR：End-to-End Object Detection with Transformers

背景 Transformer已经在NLP领域大展拳脚&#xff0c;逐步替代了LSTM/GRU等相关的Recurrent Neural Networks&#xff0c;相比于传统的RNN&#xff0c;Transformer主要具有以下几点优势 可解决长时序依赖问题&#xff0c;因为Transformer在计算attention的时候是在全局维度进行…
阅读更多...
CentOS7---部署Tomcat和安装Jpress

CentOS7---部署Tomcat和安装Jpress

总览需求 1. 简述静态网页和动态网页的区别。 2. 简述 Webl.0 和 Web2.0 的区别。 3. 安装tomcat8&#xff0c;配置服务启动脚本&#xff0c;部署jpress应用。1、简述静态网页和动态网页的区别 静态网页&#xff1a; 请求响应信息&#xff0c;发给客户端进行处理&#xff0c…
阅读更多...
回顾 OWASP 机器学习十大风险

回顾 OWASP 机器学习十大风险

日复一日&#xff0c;越来越多的机器学习 (ML) 模型正在开发中。机器学习模型用于查找训练数据中的模式&#xff0c;可以产生令人印象深刻的检测和分类能力。机器学习已经为人工智能的许多领域提供了动力&#xff0c;包括情感分析、图像分类、面部检测、威胁情报等。 数十亿美…
阅读更多...
复现sci顶刊中的画中画（局部细节放大）

复现sci顶刊中的画中画（局部细节放大）

简介 小编在撰写学术论文时&#xff0c;为了突出所提模型的优越性&#xff0c;你可以通过放大图形中的局部位置来进行比较。尽管从全局来看&#xff0c;各个方法的拟合效果都还不错&#xff0c;但通过放大图中的特定区域&#xff0c;可以更清楚地展示所提模型相对于其他模型的…
阅读更多...
echarts实现立体柱状图

echarts实现立体柱状图

实现效果图如下&#xff1a; 上面除了立体图之外还增加了背景图。注意&#xff0c;可以发现这个图的右下角是是和x轴平齐的&#xff0c;如果右下角也要折角&#xff0c;可以根据代码修改下描点的点位就可以了。 完整代码如下&#xff1a; <template><div id"ba…
阅读更多...
从特斯拉FSD v11.4.6，看FSD入华

从特斯拉FSD v11.4.6，看FSD入华

从特斯拉FSD v11.4.6&#xff0c;看FSD入华 1. 芝加哥城区a. 亮点b. 问题 2. 小镇中心a. 亮点b. 问题 3. FSD入华a. 技术路线b. 场景 4. 参考视频 FSD最近更新了v11.4.6&#xff0c;本文根据2个FSD城区测试视频&#xff0c;一起看一下有哪些亮点和问题。 FSD入华的消息也甚嚣尘…
阅读更多...
HTML5中Canvas学习笔记：Canvas

HTML5中Canvas学习笔记：Canvas

目录 一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么&#xff1f; 二、如何设置一幅canvas图中某个颜色透明&#xff1f; 三、H5 canvas中strokeRect参数如果是小数&#xff0c;如何处理&#xff1f; 四、H5 Canvas中如何画圆角矩形框&#xff1f; 一、HTML中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023