当前位置：首页 > news >正文

黑马程序员Java Web--14.综合案例--修改功能实现

news 2026/3/31 21:07:34

一、BrandMapper包

首先，在BrandMapper包中定义用来修改的方法，和使用注解的sql语句。

BrandMapper包所在路径：
package com.itheima.mapper;

   /**** 修改* **/@Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")void upDate(Brand brand);

二、BrandService

BrandService中定义一个提供修改的方法接口，用来给BrandServiceImpl进行具体方法的实现。

BrandService包所在路径：
package com.itheima.service;

 void upDate(Brand brand);

三、BrandServiceImpl

在BrandServiceImpl重写BrandService接口中提供的upDate方法。

BrandServiceImpl包所在路径：
package com.itheima.service.impl;

@Overridepublic void upDate(Brand brand){//2.获取sqlsession对象SqlSession sqlSession = factory.openSession();//3.获取MapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//调用upDate方法mapper.upDate(brand);//sql事务提交sqlSession.commit();//关闭sqlsqlSession.close();}

四、BrandServlet

在BrandServlet中实现upDate Servlet的功能。

BrandServlet路径：
package com.itheima.web.servlet;

 public void upDate(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收品牌数据BufferedReader br = request.getReader();String params = br.readLine();//json字符串System.out.println("par:"+params);//转为Brand对象Brand brand = JSON.parseObject(params, Brand.class);System.out.println("brand:"+brand);//2. 调用service添加brandService.upDate(brand);//3. 设置编码方式response.setContentType("text/json;charset=utf-8");//4. 响应成功的标识response.getWriter().write("success");}

五、前端代码

首先，添加一个修改数据的表单。这段代码位置可以放在网页数据表单的上方。

 <!--update表单--><el-dialogtitle="修改品牌":visible.sync="updateDialogVisible"width="30%"><el-form ref="form" :model="brand" label-width="80px"><el-input v-model="brand.id" type="hidden"></el-input><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="brand.status"active-value="1"inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="edit">提交</el-button><el-button @click="updateDialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog>

这段代码中定义了一个判定是否显示表单的变量：updateDialogVisible
我们需要在script中的data中进行定义：

data(){return{updateDialogVisible: false,}}

在你自己项目中只复制updateDialogVisible: false, 就可以了。

在methods里面添加如下方法

 //修改updateBrand(index,row){this.brand.id=row.id;this.updateDialogVisible=true;this.brand = JSON.parse(JSON.stringify(row));},edit(){var _this=this;axios({method:"post",url:"http://localhost:8098/brand-case/brand/upDate",data:_this.brand}).then(response =>{if (response.data == "success") {//添加成功_this.updateDialogVisible = false//刷新_this.selectAll();_this.$message({message: '修改成功',type: 'success'});}})},

其中updateBrand函数是我们点击修改按钮时绑定的click方法

在网页显示数据的表单代码段中，找到修改button所在位置，给@click添加点击事件的函数updateBrand。
以及这里需要获取表单中某行的id值用来获得需要修改行现有的值，所以使用:slot-scope
(ps:这段代码直接复制替换原来修改删除的位置就好)

 <template slot-scope="scope"><el-row><el-button type="primary" @click="updateBrand(scope.$index,scope.row)">修改</el-button><el-button type="danger">删除</el-button></el-row></template>

六、brand.html 全部代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head>
<body>
<div id="app"><!--搜索表单--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态"><el-option label="启用" value="1"></el-option><el-option label="禁用" value="0"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--按钮--><el-row><el-button type="danger" plain @click="deleteByIds">批量删除</el-button><el-button type="primary" plain @click="dialogVisible = true">新增</el-button></el-row><!--添加数据对话框表单--><el-dialogtitle="编辑品牌":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="brand" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="brand.status"active-value="1"inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="addBrand">提交</el-button><el-button @click="dialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog><!--update表单--><el-dialogtitle="修改品牌":visible.sync="updateDialogVisible"width="30%"><el-form ref="form" :model="brand" label-width="80px"><el-input v-model="brand.id" type="hidden"></el-input><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="brand.status"active-value="1"inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="edit">提交</el-button><el-button @click="updateDialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog><!--表格--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columntype="index"width="50"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><el-table-columnprop="status"align="center"label="当前状态"></el-table-column><el-table-columnalign="center"label="操作"><template slot-scope="scope"><el-row><el-button type="primary" @click="updateBrand(scope.$index,scope.row)">修改</el-button><el-button type="danger">删除</el-button></el-row></template></el-table-column></el-table></template><!--分页工具条--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="5"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div><script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script>new Vue({el: "#app",mounted() {this.selectAll()},methods: {selectAll() {//页面加载完成后，获取数据var _this = this;axios({method: "get",url: "http://localhost:8098/brand-case/brand/selectAll",}).then(response => {this.tableData = response.data;console.log(_this.tableData)})},tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},//修改updateBrand(index,row){this.brand.id=row.id;this.updateDialogVisible=true;this.brand = JSON.parse(JSON.stringify(row));},edit(){var _this=this;axios({method:"post",url:"http://localhost:8098/brand-case/brand/upDate",data:_this.brand}).then(response =>{if (response.data == "success") {//添加成功_this.updateDialogVisible = false//刷新_this.selectAll();_this.$message({message: '修改成功',type: 'success'});}})},// axios({//     method:"post",//     url:"http://localhost:8098/brand-case/brand/upDate",// }).then(response => {//     if (response.data == "success") {//         //添加成功//         _this.updateDialogVisible = false//         //刷新//         _this.selectAll();////         _this.$message({//             message: '修改成功',//             type: 'success'//         });////     }// })//点击修改后唤起修改框startUpdate(row) {// 获取改行已经有的数据，以供填入修改框// var _this = thisthis.brand = JSON.parse(JSON.stringify(row));// 弹出修改框this.updateDialogVisible = true;},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;console.log(this.multipleSelection)},// 查询方法onSubmit() {console.log(this.brand);},// 添加数据addBrand() {var _this = this;axios({method: "post",url: "http://localhost:8098/brand-case/brand/add",data: _this.brand}).then(function (resp) {if (resp.data == "success") {//添加成功_this.dialogVisible = false//刷新_this.selectAll();_this.$message({message: '添加成功',type: 'success'});}})},//批量删除deleteByIds() {// 弹出确认提示框this.$confirm('此操作将删除该数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//用户点击确认按钮//1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可for (let i = 0; i < this.multipleSelection.length; i++) {let selectionElement = this.multipleSelection[i];this.selectedIds[i] = selectionElement.id;}//2. 发送AJAX请求var _this = this;// 发送ajax请求，添加数据axios({method: "post",url: "http://localhost:8098/brand-case/brand/deleteByIds",data: _this.selectedIds}).then(function (resp) {if (resp.data == "success") {//删除成功// 重新查询数据_this.selectAll();// 弹出消息提示_this.$message({message: '恭喜你，删除成功',type: 'success'});}})}).catch(() => {//用户点击取消按钮this.$message({type: 'info',message: '已取消删除'});});},    //分页handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},data() {return {// 当前页码currentPage: 4,// 添加数据对话框是否展示的标记dialogVisible: false,updateDialogVisible: false,// 品牌模型数据brand: {status: '',brandName: '',companyName: '',id: "",ordered: "",description: ""},// 被选中的id数组selectedIds:[],// 复选框选中数据集合multipleSelection: [],// 表格数据tableData: [{}]}},})</script></body>
</html>

七、解决修改、添加中文字符显示问号

在mybatis-config.xml中，在数据库配置路径后添加：
characterEncoding=utf-8

jdbc:mysql:///db1?useSSL=false&amp;characterEncoding=utf-8

参考文章:
https://blog.csdn.net/qq_42078934/article/details/125436314
https://blog.csdn.net/qq_51272114/article/details/127039314

能力有限，欢迎指正！

黑马程序员Java Web--14.综合案例--修改功能实现

一、BrandMapper包首先，在BrandMapper包中定义用来修改的方法，和使用注解的sql语句。 BrandMapper包所在路径： package com.itheima.mapper; /**** 修改* **/Update("update tb_brand set brand_name #{brandName},company_name #{c…...

编程日记 2023/10/18 21:15:57

开源协议介绍

文章目录一、简介二、常见开源协议介绍2.1 BSD （Berkeley Software Distribution license）2.2 MIT（Massachusetts Institute of Technology）2.3 Apache Licence 2.02.4 GPL（General Public License）2.5 LG…...

编程日记 2023/10/18 21:14:56

solidworks 2024新功能之-打造更加智能的工作硕迪科技

SOLIDWORKS 2024 的新增功能 SOLIDWORKS 的每个版本都致力于改进您的工作流程，使您常用的工具尽可能快速高效地运作。此外，SOLIDWORKS 2024 可以通过量身定制的解决方案扩展您的工具集，并使您能够通过 Cloud Services 轻松将您的设计数据连接…...

编程日记 2023/10/18 21:13:55

Datawhale学习笔记AI +新能源：电动汽车充电站充电量预测

赛题介绍建立站点充电量预测模型，根据充电站的相关信息和历史电量数据，准确预测未来某段时间内充电站的充电量需求。在赛题数据中，我们提供了电动汽车充电站的场站编号、位置信息、历史电量等基本信息。我们鼓励参赛选手在已有数据的基础上…...

编程日记 2023/10/18 21:12:55

记一次fineBI的增量删除更新BUG

官方文档链接是https://help.fanruan.com/finebi/doc-view-1663.html 按照官方文档，增量删除不能使用select * ，且需要指定分区建但实际指定分区键有时候也会报错，因为表设置的字段有时候会比数据源少，此时会报错，提…...

编程日记 2023/10/18 21:10:53

rsync+inotify实时同步+双向同步

准备主机 192.168.1.247 （源） /home/appdata 192.168.1.248 （目的） /home/appdata 实现效果： 1.用rsync手动将192.168.1.247 的/home/appdata同步到192.168.1.248的/home/appdata目录。 2.用inotify组件实现文件的…...

编程日记 2023/10/18 21:09:52

7.继承与多态对象村的优质生活

7.1 民法亲属篇：继承（inheritance） 了解继承在设计继承时，你会把共同的程序代码放在某个类中，然后告诉其他的类说此类是它们的父类。当某个类继承另一个类的时候，也就是子类继承自父类。以Java的方式说&…...

编程日记 2023/10/18 21:08:51

机器视觉、图像处理和计算机视觉：概念和区别

机器视觉、图像处理和计算机视觉：概念和区别机器视觉、图像处理和计算机视觉是相关但有区别的概念。机器视觉主要应用于工业领域，涉及图像感知、图像处理、控制理论和软硬件的结合，旨在实现高效的运动控制或实时操作。图像处理是指利用…...

编程日记 2023/10/18 21:07:50

从零开始的C语言学习第二十课：数据在内存中的存储

目录 1. 整数在内存中的存储 2. 大小端字节序和字节序判断 2.1 什么是大小端？ 2.2 为什么有大小端? 3. 浮点数在内存中的存储 3.1 浮点数存的过程 3.2 浮点数取的过程 1. 整数在内存中的存储在讲解操作符的时候，我们就讲过了下⾯的内容&#x…...

编程日记 2023/10/18 21:06:49

分布式内存计算Spark环境部署与分布式内存计算Flink环境部署

目录分布式内存计算Spark环境部署 1. 简介 2. 安装 2.1【node1执行】下载并解压 2.2【node1执行】修改配置文件名称 2.3【node1执行】修改配置文件，spark-env.sh 2.4 【node1执行】修改配置文件，slaves 2.5【node1执行】分发 2.6【node2、no…...

编程日记 2023/10/18 21:05:45

am权限系统对接笔记

文章目录角色如何对应机构如何对应 am需要提供的接口机构、角色、人员查关系消息的交互方式方式1 接口查询方式2 mq推送消息到业务系统 am是一套通用权限管理系统。为什么要接入am呢? 举例，甲方有10个供方，每个供方都有单独的权限系统，不…...

编程日记 2023/10/18 21:04:44

回首往昔，初学编程那会写过的两段愚蠢代码

一、关于判断两个整数是否能整除的GW BASIC创意代码记得上大学时第一个编程语言是BASIC，当时Visual Basic还没出世，QBASIC虽然已经在1991年随MS-DOS5.0推出了，但我们使用的还是 GW-BASIC， 使用的教材是谭浩强、田淑清编著的《BA…...

编程日记 2023/10/18 21:01:41

《Java面向对象程序设计》学习笔记——Java程序填空题

笔记汇总：《Java面向对象程序设计》学习笔记这些题其实都非常滴简单，相信大伙能够立刻就秒了吧😎 文章目录题目答案题目以下程序要求从键盘输入一个整数， 判别该整数为几位数， 并且输出结果， 请将下…...

编程日记 2023/10/18 21:00:41

Chrome跨域访问网络请求Cookies丢失的解决办法

为了保障网络安全，Chrome对跨域访问有一定的限制。一般分为三级： cookies带有“SameSite=Strict”时，只允许访问同一个域名下的网络请求；cookies带有“SameSite=Lax”时，允许访问同一个域名下的网络请求和同一个根域名下的网络请求；cookies带有“SameSite=None”时，允许…...

编程日记 2023/10/18 20:59:39

从创业者的角度告诉你AI问答机器人网页的重要性

在数字化时代，创业者面临着越来越多的挑战。而AI问答机器人网页正成为创业者们的必备工具。它可以提供即时客户支持、降低运营成本，并实现全天候服务。接下来，我将从创业者的角度阐述一下，AI问答机器人网页为什么那么重要&#xf…...

编程日记 2023/10/18 20:58:38

大数据Flink（九十七）：EXPLAIN、USE和SHOW 子句

文章目录 EXPLAIN、USE和SHOW 子句一、EXPLAIN 子句二、USE 子句...

编程日记 2023/10/18 20:57:37

浏览器中的网络钓鱼防护

网络钓鱼防护是一项功能，可保护用户免受旨在窃取其敏感信息的网络钓鱼攻击，网络钓鱼是网络犯罪分子常用的技术，这是一种社会工程攻击，诱使用户单击指向受感染网页的恶意链接，用户在该网页中感染了恶意软件或其敏感信息…...

编程日记 2023/10/18 20:56:36

每日温度00

题目链接每日温度题目描述注意点 answer[i] 是指对于第 i 天，下一个更高温度出现在几天后如果气温在这之后都不会升高，请在该位置用 0 来代替1 < temperatures.length < 100000 解答思路使用单调栈解决本题，思路为&#xff1a…...

编程日记 2023/10/18 20:55:35

【JVM】JVM的垃圾回收机制

JVM的垃圾回收机制对象死亡判断方法引用计数算法可达性分析算法垃圾回收算法标记清除法复制算法标记整理算法分代算法 Java运行时内存的各个区域,对于程序计数器,虚拟机栈,本地方法栈这三个部分区域而言,其生命周期与相关线程有关,随线程而生,随线程而灭,并且这三个区域的内存…...

编程日记 2023/10/18 20:53:34

28栈与队列-单调队列

目录 LeetCode之路——239. 滑动窗口最大值解法一：暴力破解解法二：单调队列 LeetCode之路——239. 滑动窗口最大值给你一个整数数组 nums，有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k …...

编程日记 2023/10/18 20:52:32

Echo：预测智能的一小步，通往通用智能的一大步

来源：机器之心大模型能否预测未来？UniPat AI 构建了一套完整的预测智能基础设施，Echo，包含动态评测引擎、面向未来事件的训练范式和预测专用模型 EchoZ-1.0。在其公开的 General AI Prediction Leaderboard 上，EchoZ-1…...

编程新知 2026/3/31 20:50:28

Qwen-Turbo-BF16数据库课程设计：智能问答系统开发

Qwen-Turbo-BF16数据库课程设计：智能问答系统开发想象一下，你正在上一门数据库课程。老师布置了一个课程设计：开发一个学生信息管理系统。你需要设计表结构，写SQL查询，还要做个简单的界面。你埋头苦干，终…...

编程新知 2026/3/31 20:50:28

faster-whisper-GUI架构设计与性能优化：构建高效语音识别工作流的技术实践

faster-whisper-GUI架构设计与性能优化：构建高效语音识别工作流的技术实践【免费下载链接】faster-whisper-GUI faster_whisper GUI with PySide6 项目地址: https://gitcode.com/gh_mirrors/fa/faster-whisper-GUI 在语音识别技术快速发展的今天&#xff0…...

编程新知 2026/3/31 20:09:39

Node Binance Trader回测功能实战指南：从历史数据到盈利策略

Node Binance Trader回测功能实战指南：从历史数据到盈利策略【免费下载链接】node-binance-trader 💰 Cryptocurrency Trading Strategy & Portfolio Management Development Framework for Binance. 🤖 项目地址: https://gitcode.co…...

编程新知 2026/3/31 19:33:12

如何用快马平台为网站开发公司快速生成企业官网原型，提升方案演示效率

作为一名经常需要快速响应客户需求的网站开发者，我最近发现了一个能大幅提升工作效率的好方法 - 使用InsCode(快马)平台来生成企业官网原型。这个方法特别适合像我们华网三百每年.cn这样需要快速为客户提供方案演示的网站开发公司。需求分析阶段当接到一个新客户…...

编程新知 2026/3/31 18:44:16

【Java Web学习 | 第十篇】JavaScript(4) 对象

【Java Web学习 | 第十篇】JavaScript(4) - 对象（Object）深度详解（2026最新版） 恭喜你完成数组与函数进阶！ 对象（Object） 是 JavaScript 中最重要、最核心的数据结构。在 Java Web 开发中&…...

编程新知 2026/3/31 18:36:10

Docker下Kong+Konga全栈部署避坑指南（附PostgreSQL 9.6配置）

Docker环境下Kong与Konga全栈部署实战指南引言在现代微服务架构中，API网关扮演着流量调度与安全管控的关键角色。Kong作为开源API网关的标杆产品，凭借其插件化架构和强大性能，已成为企业级API管理的首选方案。而Konga作为Kong的图形化管理…...

编程新知 2026/3/31 18:30:03

springboot+vue基于web的校园失物招领系统的设计系统

目录同行可拿货,招校园代理 ,本人源头供货商系统功能模块分析交互与流程设计技术实现要点项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作同行可拿货,招校园代理 ,本人源头供货商系统功能模块分析用户模块注册与登录&…...

编程新知 2026/3/31 17:19:07

EVA-02模型辅助软件测试：自动化生成测试用例与边界条件描述

EVA-02模型辅助软件测试：自动化生成测试用例与边界条件描述如果你是一名软件测试工程师，下面这个场景你一定不陌生：产品经理递过来一份几十页的需求文档，你需要在几天内，把它拆解成成百上千条逻辑清晰、覆盖全面的测…...

编程新知 2026/3/31 17:19:05

Sketch Measure: 设计标注自动化的创新实践

Sketch Measure: 设计标注自动化的创新实践【免费下载链接】sketch-measure Make it a fun to create spec for developers and teammates 项目地址: https://gitcode.com/gh_mirrors/sk/sketch-measure 在数字化产品开发流程中，设计稿到代码实现的转化始终…...

编程新知 2026/3/31 16:38:21