Element中的el-input-number+SpringBoot+mysql

1、编写模板

<el-form ref="form" label-width="100px"><el-form-item label="商品id:"><el-input v-model="id" disabled></el-input></el-form-item><el-form-item label="商品名称:"><el-input v-model="name" placeholder="请输入内容"></el-input></el-form-item><el-form-item label="商品价格:"><el-input-number v-model="price" :step="10" :min="10" :max="100"></el-input-number>   </el-form-item><el-form-item><el-button size="small" type="success" @click="editGoods">保存</el-button>  </el-form-item>
</el-form>

2、前端发请求

  editGoods() {if (this.id == '' && this.id == null) {this.$message({message: 'id不能为空',type: 'error'})return;} else if (this.name == '' && this.name == null) {this.$message({message: '名称不能为空',type: 'error'})return;}this.$axios({method: 'post',url: 'http://localhost:8080/api/upload/editGoods',data: {id: this.id,name: this.name,price: this.price}}).then((res) => {this.$message({message: '修改成功',type: 'success'})})}

3、后端返回数据

1.编写实体类
package com.example.goods_admin.entity;public class Goods extends Page {private String id;private String name;private int price;private String imageUrl;private String status;public Goods() {super();}public Goods(int pageNum, int pageSize, String keyWord) {super(pageNum, pageSize, keyWord);}public Goods(int pageNum, int pageSize, String keyWord, String id, String name, int price, String imageUrl, String status) {super(pageNum, pageSize, keyWord);this.id = id;this.name = name;this.price = price;this.imageUrl = imageUrl;this.status = status;}public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}public String getImageUrl() {return imageUrl;}public void setImageUrl(String imageUrl) {this.imageUrl = imageUrl;}public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}
}
2.Controller类 
@RestController
@RequestMapping("/upload")
public class UploadFileController {@AutowiredUploadFileService uploadFileService;//json传参@GetMapping("/editGoods")public Result editGoods(@RequestBody Goods goods) {return uploadFileService.editGoods(goods);}
}
 3、interface接口(Service层接口)
public interface UploadFileService {Result editGoods(Goods goods);
}
  4.Service(接口实现)

@Service
public class UploadFileServiceImpl implements UploadFileService {@AutowiredUploadFileMapper uploadFileMapper;@Overridepublic Result editGoods(Goods goods) {int count=uploadFileMapper.updateGoods(goods);if (count==1){return Result.succeed("删除成功");}else{return Result.failed("删除失败");}}}
 5、interface接口(Mapper层接口)
public interface UploadFileMapper {int saveGoods(Goods goods);}
6、xml(动态sql)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.goods_admin.mapper.UploadFileMapper"><resultMap id="BaseResultMap" type="com.example.goods_admin.entity.Goods"><id column="id" jdbcType="VARCHAR" property="id" /><result column="name" jdbcType="VARCHAR" property="name" /><result column="price" jdbcType="INTEGER" property="price" /><result column="imageUrl" jdbcType="VARCHAR" property="imageUrl" /><result column="status" jdbcType="VARCHAR" property="status" /></resultMap><insert id="saveGoods">INSERT INTO goods (<if test="id != null and id != ''">id</if><if test="name != null and name != ''">,name</if><if test="price != null and price != ''">,price</if><if test="imageUrl != null and imageUrl != ''">,imageUrl</if><if test="status != null and status != ''">,status</if>) VALUES (<if test="id != null and id != ''">#{id}</if><if test="name != null and name != ''">,#{name}</if><if test="price != null and price != ''">,#{price}</if><if test="imageUrl != null and imageUrl != ''">,#{imageUrl}</if><if test="status != null and status != ''">,#{status}</if>)</insert>
</mapper>
7、效果

4、el-input-number相关参数和方法

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Web前端开发基础】前端基础布局之百分比布局、flex布局

前端基础布局 目录 前端基础布局布局简介盒模型1. 标准盒模型2. 怪异盒模型3. 解决方案4. 代码示例 常见的布局单位百分比布局flex布局一、Flex布局是什么&#xff1f;二、基本概念三、容器属性flex-direction属性&#xff1a;决定主轴的方向&#xff08;即项目的排列方向&…

【数据结构】链表(单链表与双链表实现+原理+源码)

博主介绍&#xff1a;✌全网粉丝喜爱、前后端领域优质创作者、本质互联网精神、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战✌有需要可以联系作者我哦&#xff01; &#x1f345;附上相关C语言版源码讲解&#x1f345; &#x1f44…

开始学习Vue2(组件的生命周期和数据共享)

一、组件的生命周期 1. 生命周期 & 生命周期函数 生命周期&#xff08;Life Cycle&#xff09;是指一个组件从创建 -> 运行 -> 销毁的整个阶段&#xff0c;强调的是一个时间段。 生命周期函数&#xff1a;是由 vue 框架提供的内置函数&#xff0c;会伴随着 组件…

2024/1/24HTML学习:路径

路径 3.2.1路径的介绍 加载图片&#xff0c;需要找到对应的图片。 通过一定的路径 路径分两种 绝对路径&#xff08;了解&#xff09;相对路径&#xff08;常用&#xff09; 绝对路径&#xff1a;绝对位置&#xff0c;从盘符开始的路径 1.盘符开头D:\....................…

java开发——《并发编程》

目录 一.jmm 二.并发了什么 1.只有一个核&#xff08;单核&#xff09;并发还有没有意义 2.单核&#xff0c;还有什么可见性问题 3.并发和并行 三.volitaile 1.变量的可见性问题 2.原因是什么 3.本次修改的变量直接刷到主内存 4.声明其他内存对于这个地址的缓存无效 …

Addressables(2) ResourceLocation和AssetReference

IResourceLocation var op Addressables.LoadResourceLocationsAsync(key); var result op.WaitForCompletion(); 把加载的Key塞进去&#xff0c;不难看出&#xff0c;IResourceLocation可以用来获得资源的详细信息 很适合用于更新分析&#xff0c;或者一些检查工具 AssetR…

RabbitMQ中交换机的应用及原理,案例的实现

目录 一、介绍 1. 概述 2. 作用及优势 3. 工作原理 二、交换机Exchange 1. Direct 2. Topic 3. Fanout 三、代码案例 消费者代码 1. 直连direct 生产者代码 测试 2. 主题topic 生产者代码 测试 3. 扇形fanout 生产者代码 测试 每篇一获 一、介绍 1. …

MySQL定期整理磁盘碎片

MySQL定期整理磁盘碎片&#xff1a;提升数据库性能的终极指南 MySQL作为一个强大的关系型数据库管理系统&#xff0c;在长时间运行后可能会产生磁盘碎片&#xff0c;影响数据库性能。本博客将深入讨论如何定期整理MySQL磁盘碎片&#xff0c;以确保数据库的高效运行。我们将介绍…

【心得】java从CC1链入门CC链个人笔记

来劲了&#xff0c;感觉离真正的CTF又近了一步。 本文仅从一个萌新的角度去谈&#xff0c;如有纰漏&#xff0c;纯属蒟蒻。 目录 CC链概念 CC链学习前置知识 CC1链 Version1 Version2 Version3 CC链概念 CC链 Commons Collections apache组织发布的开源库 里面主要对…

计算机网络-物理层基本概念(接口特性 相关概念)

文章目录 总览物理层接口特性星火模型给出的相关概念解释&#xff08;仅供参考&#xff09; 总览 求极限传输速率&#xff1a;奈氏准则&#xff0c;香农定理&#xff08;背景环境不一样&#xff09; 编码&#xff1a;数据变成数字信号 调制&#xff1a;数字信号变成模拟信号 信…

AMIS的组件学习使用

部分代码片段 {"id": "filterForm","className": " xysd-zbkb-pubquery","labelWidth": 130,"body": [{"type": "grid","className": "xysd-grid-query-input","c…

(二)MySQL安装与部署(redhat9)

前言 MySQL仅仅是一个产品&#xff0c;Oracle旗下的小型数据库。广泛应用在中小型项目中&#xff0c;特征体积小速度快整体成本低。尤其是开源&#xff0c;所以很多中小型项目为了降低成本纷纷选用MySql作为数控存储介质 MySql的特征 底层语言使用C、C编写的。并且使用多种编…

常用芯片学习——MBI5020芯片

MBI5020 16位恒流LED驱动器 使用说明 MBI5020内建一个16位位移寄存器(Shift Register)及一个16位输出缓存器&#xff0c;可将串行式输入数据转换为并列式输出格式。在输出端&#xff0c;设计16个稳定的电流源&#xff0c;可以因应LED负载电压 (VF) 的变化&#xff0c;提供均匀…

GoZero的一个注意点,goctl生成代码不会处理时间字段

起因 进行一个功能的编写时发现goctl生成的代码在insert时候不把时间给赋值进去 于是懵逼开始寻找原因 探究 再查看发现 goctl在对xxxExpectAutoSet和RowsWithPlaceHolder赋值时候就去掉了所有跟时间相关的信息字段 于是去查看官方文档&#xff0c;依稀记得官方提供了示例…

20240122在WIN10+GTX1080下使用字幕小工具V1.2的使用总结(whisper)

20240122在WIN10GTX1080下使用字幕小工具V1.2的使用总结 2024/1/22 19:52 结论&#xff1a;这个软件如果是习作&#xff0c;可以打101分&#xff0c;功能都实现了。 如果作为商业软件/共享软件&#xff0c;在易用性等方面&#xff0c;可能就只能有70分了。 【百分制】 可选的改…

【MySQL】打开科技创新的第一生产力

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-EtRkflNU19AGWAkT {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

【Java程序员面试专栏 专业技能篇】计算机网络核心面试指引

关于计算机网络部分的核心知识进行一网打尽,包括计算机的网络模型,各个层的一些重点概念,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 分层基本概念 计算机网络模型的分层及具体作用 计算机网络有哪些分层模型 可以按照应用层到物…

【nowcoder】链表的回文结构

牛客题目链接 链表的回文结构 /* struct ListNode {int val;struct ListNode *next;ListNode(int x) : val(x), next(NULL) {} };*/ #include <cstdlib> // 建议大伙自己对照我的代码画下图&#xff0c;假设A链表是&#xff1a;1 2 3 2 1 class PalindromeList { publi…

C++ -- 入门(引用)

1.引用 1.1引用的概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的变量共用同一块内存空间。 比如&#xff1a;李逵&#xff0c;在家称为"铁牛"&#xff0c;江湖上人称&q…