后端（实例）08
设计一个前端在数据库调取数据的表格，并完成基础点击增删改查的功能：
1.首先写一个前端样式（空壳）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery.js"></script>
<script>//待填写
</script><style>*{margin: 0%;padding: 0%;}.body{background: #ddd;width:400px;height:300px;margin: 200px auto;border-radius: 20px;}.top{display: flex;margin:20px 0;padding: 10px;justify-content: space-between;background: lightblue;border-radius: 30px;}.top h3{font-weight: 500;margin: 0 10px;}table{text-align: center;margin: 20px 30px;height:180px;width:80%;}li{list-style: none;}.to{background:#8e3b3b1a;width:300px;height:150px;line-height: 30px;margin:-120px auto;display: none; }.ch{background:#8e3b3b1a;width:300px;height:150px;line-height: 30px;margin:-120px auto;display: none; }</style>
</head>
<body><div class="body"><div class="top"><h3>商品名称:</h3><input type="text" placeholder="请输入商品名称" class="input"><input type="button" value="查找" class="search"><input type="button" value="添加" class="add"></div><table border="1"><thead><tr><th>商品名称</th><th>数量</th><th>价格</th><th>操作</th></tr></thead><tbody><tr><td>name</td><td>count</td><td>price</td><td><input type="button" value="修改"><input type="button" value="删除"></td></tr></tbody></table></div><div class="to"> <!-- 添加模块--实现点击出现，完成添加或取消操作后消失 --><ul><li>商品名称: <input type="text" class="name"></li><li>商品数量: <input type="text" class="count"></li><li>商品价格: <input type="text" class="price"></li><li><input type="button" value="添加商品" class="end"></li><li><input type="button" value="取消" class="no"></li></ul></div><div class="ch"> <!-- 修改模块--实现点击出现，完成修改或取消操作后消失 --><ul><li>商品名称: <input type="text" class="name_c"></li><li>商品数量: <input type="text" class="count_c"></li><li>商品价格: <input type="text" class="price_c"></li><li><input type="button" value="修改商品" class="end_c"></li><li><input type="button" value="取消" class="no_c"></li></ul></div>
</body>
</html>2.开始第一步：查数据--即在数据库中调出所需表格放入前端界面中
$.ajax({url:"buy_list",type:"get",data:{}, success:function(value){$("tbody").empty()//清空var arr=value.datafor (var i=0;i<arr.length;i++){//添加到前端界面$("tbody").append("<tr>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].count+"</td>"+"<td>"+arr[i].price+"</td>"+"<td><input type='button' value='删除' class='delete' index='"+arr[i].name+"'><input type='button' class='change' value='修改' index='"+arr[i].name+"'></td>"+"</tr>")}},error:function(){alert("请求失败！");},})对应Java（此处只给出关键部分，也就是doget部分）
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//解决中文乱码问题request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8"); response.setContentType("text/json;charset=utf-8");System.out.println("接受到啦!");String sql="select * from buy_list";String[] colums= {"name","count","price"};String res =MysqlUtil.getJsonBySql(sql, colums);System.out.println(res);//后端给前端返回数据response.getWriter().write(res);}3.删除模块
$("tbody").on("click",".delete",function(){//注意：绑定的delete按钮是后生成的，所以绑定事件形式采取这种格式进行书写//alert($(this).attr("index"))var name=$(this).attr("index")//删除$.ajax({url:"delete",type:"post",data:{name}, success:function(value){alert(value)//刷新操作location.reload()},error:function(){alert("请求失败！");},})})删除模块所对应的Java文件内部：（此处只给出关键部分，也就是dopost部分）
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8"); System.out.println("接受到了post");String name=request.getParameter("name");System.out.println("name");//删除String sql="delete from buy_list where name='"+name+"'";//注意：这里的name位置，需要被两个引起来int num = MysqlUtil.del(sql);//返回信息String res ="删除失败";if(num>0) {res="删除成功";}//后端给前端返回数据response.getWriter().write(res);}
4.添加模块
//添加$(".end").on("click",function(){var add_name=$(".name").val()var add_count=$(".count").val()var add_price=$(".price").val()console.log(add_name)console.log(add_count)console.log(add_price)$.ajax({url:"add",type:"post",data:{add_name,add_count,add_price}, success:function(value){alert(value)//刷新操作location.reload()},error:function(){alert("请求失败！");},})})对应Java部分（同样只给出关键的dopost部分）
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8"); System.out.println("add");String name=request.getParameter("add_name");String count=request.getParameter("add_count");String price=request.getParameter("add_price");//添加String sql="insert into buy_list(name,count,price) values(\""+name+"\","+count+","+price+")";int num=MysqlUtil.add(sql);//返回信息String res ="添加失败";if(num>0) {res="添加成功";}//后端给前端返回数据response.getWriter().write(res); }5.修改部分较为特殊（增加了一步查找并返回原数据的操作）
//隐藏修改$(".no_c").on("click",function(){$(".ch").css("display","none")})//回显（点击修改后的操作）$("tbody").on("click",".change",function(){$(".to").css("display","none")$(".ch").css("display","block")var name=$(this).attr("index")$.ajax({url:"change",//在change中写入后端代码type:"get",data:{name}, success:function(value){var obj=value.data[0]//获取返回值（有且只有一条，所以是data[0]）console.log(obj)//让获取的返回值添加到输入框的位置，即回显$(".name_c").val(obj.name)$(".count_c").val(obj.count)$(".price_c").val(obj.price)$(".end_c").attr("index",obj.name)},error:function(){alert("请求失败！");},})})//修改$(".end_c").on("click",function(){ //获取回显显示在输入框内返回值var addname=$(".name_c").val()var addcount=$(".count_c").val()var addprice=$(".price_c").val()var name=$(this).attr("index")//验证 //console.log(addname)$.ajax({url:"change_end",type:"post",data:{addname,addcount,addprice,name}, success:function(value){alert(value)//刷新操作location.reload()},error:function(){alert("请求失败！");},})//修改完成后，隐藏修改模块$(".ch").css("display","none")})对应Java代码（回显）
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");// 设置后端给前端返回的数据为json格式（因为返回对象类型的值了）response.setContentType("text/json;charset=utf-8");String name=request.getParameter("name");// 查找String sql="select * from buy_list where name = \""+name+"\"";String[] colums= {"name","count","price"};String res=MysqlUtil.getJsonBySql(sql, colums);System.out.println(res);// 后端给前端返回数据response.getWriter().write(res);}对应Java代码（修改）
【注：空格的书写规范】
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//解决乱码问题request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");String name=request.getParameter("name");String addname =request.getParameter("addname");String addcount=request.getParameter("addcount");String addprice=request.getParameter("addprice");System.out.println("name");//【注意：替换成外部数据+ +后一定要注意保留原有的空格问题】String sql="update buy_list set name=\""+addname+"\",count="+addcount+",price="+addprice+" where name=\""+name+"\"";//注意：这里的name位置，需要被两个引起来int num = MysqlUtil.update(sql);//返回信息String res ="修改失败";if(num>0) {res="修改成功";}//后端给前端返回数据response.getWriter().write(res);}
完整版HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery.js"></script>
<script>$(function(){$.ajax({url:"buy_list",type:"get",data:{}, success:function(value){$("tbody").empty()//清空var arr=value.datafor (var i=0;i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].count+"</td>"+"<td>"+arr[i].price+"</td>"+"<td><input type='button' value='删除' class='delete' index='"+arr[i].name+"'><input type='button' class='change' value='修改' index='"+arr[i].name+"'></td>"+"</tr>")}},error:function(){alert("请求失败！");},})$("tbody").on("click",".delete",function(){//alert($(this).attr("index"))var name=$(this).attr("index")//删除$.ajax({url:"delete",type:"post",data:{name}, success:function(value){alert(value)//刷新操作location.reload()},error:function(){alert("请求失败！");},})})//显示添加模块$(".add").on("click",function(){$(".to").css("display","block")$(".ch").css("display","none")})//隐藏添加模块$(".end").on("click",function(){$(".to").css("display","none")})$(".no").on("click",function(){$(".to").css("display","none")})//添加$(".end").on("click",function(){var add_name=$(".name").val()var add_count=$(".count").val()var add_price=$(".price").val()console.log(add_name)console.log(add_count)console.log(add_price)$.ajax({url:"add",type:"post",data:{add_name,add_count,add_price}, success:function(value){alert(value)//刷新操作location.reload()},error:function(){alert("请求失败！");},})})//隐藏修改$(".no_c").on("click",function(){$(".ch").css("display","none")})//回显（点击修改后的操作）$("tbody").on("click",".change",function(){$(".to").css("display","none")$(".ch").css("display","block")var name=$(this).attr("index")$.ajax({url:"change",//在change中写入后端代码type:"get",data:{name}, success:function(value){var obj=value.data[0]//获取返回值（有且只有一条，所以是data[0]）console.log(obj)//让获取的返回值添加到输入框的位置，即回显$(".name_c").val(obj.name)$(".count_c").val(obj.count)$(".price_c").val(obj.price)$(".end_c").attr("index",obj.name)},error:function(){alert("请求失败！");},})})//修改$(".end_c").on("click",function(){ //获取回显显示在输入框内返回值var addname=$(".name_c").val()var addcount=$(".count_c").val()var addprice=$(".price_c").val()var name=$(this).attr("index")//验证 //console.log(addname)$.ajax({url:"change_end",type:"post",data:{addname,addcount,addprice,name}, success:function(value){alert(value)//刷新操作location.reload()},error:function(){alert("请求失败！");},})//修改完成后，隐藏修改模块$(".ch").css("display","none")})})
</script><style>*{margin: 0%;padding: 0%;}.body{background: #ddd;width:400px;height:300px;margin: 200px auto;border-radius: 20px;}.top{display: flex;margin:20px 0;padding: 10px;justify-content: space-between;background: lightblue;border-radius: 30px;}.top h3{font-weight: 500;margin: 0 10px;}table{text-align: center;margin: 20px 30px;height:180px;width:80%;}li{list-style: none;}.to{background:#8e3b3b1a;width:300px;height:150px;line-height: 30px;margin:-120px auto;display: none; }.ch{background:#8e3b3b1a;width:300px;height:150px;line-height: 30px;margin:-120px auto;display: none; }</style>
</head>
<body><div class="body"><div class="top"><h3>商品名称:</h3><input type="text" placeholder="请输入商品名称" class="input"><input type="button" value="查找" class="search"><input type="button" value="添加" class="add"></div><table border="1"><thead><tr><th>商品名称</th><th>数量</th><th>价格</th><th>操作</th></tr></thead><tbody><tr><td>name</td><td>count</td><td>price</td><td><input type="button" value="修改"><input type="button" value="删除"></td></tr></tbody></table></div><div class="to"> <!-- 添加模块--实现点击出现，完成添加或取消操作后消失 --><ul><li>商品名称: <input type="text" class="name"></li><li>商品数量: <input type="text" class="count"></li><li>商品价格: <input type="text" class="price"></li><li><input type="button" value="添加商品" class="end"></li><li><input type="button" value="取消" class="no"></li></ul></div><div class="ch"> <!-- 修改模块--实现点击出现，完成修改或取消操作后消失 --><ul><li>商品名称: <input type="text" class="name_c"></li><li>商品数量: <input type="text" class="count_c"></li><li>商品价格: <input type="text" class="price_c"></li><li><input type="button" value="修改商品" class="end_c"></li><li><input type="button" value="取消" class="no_c"></li></ul></div>
</body>
</html>结果：
【注：此处只给出了一个简单的css样式，详细可见style部分】
相关文章：
后端（实例）08
设计一个前端在数据库调取数据的表格，并完成基础点击增删改查的功能： 1.首先写一个前端样式（空壳） <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Insert title here&l…...
【stm32】TIM定时器输出比较-PWM驱动LED呼吸灯/舵机/直流电机
TIM定时器输出比较 一、输出比较简介1、OC（Output Compare）输出比较2、PWM简介3、输出比较通道(高级)4、输出比较通道(通用)5、输出比较模式6、PWM基本结构配置步骤：程序代码：PWM驱动LED呼吸灯 7、参数计算8、舵机简介程序代码&am…...
如何使用ssm实现线上旅游体验系统+vue
TOC ssm691线上旅游体验系统vue 绪论 课题背景 身处网络时代，随着网络系统体系发展的不断成熟和完善，人们的生活也随之发生了很大的变化。目前，人们在追求较高物质生活的同时，也在想着如何使自身的精神内涵得到提升࿰…...
探索JMeterTools：一个Python驱动的JMeter脚本生成器
JMeterTools 简介 JMeterTools 是一个由 Python 编写的开源项目，旨在帮助测试人员快速生成 JMeter 测试脚本。通过简单的 Python API，用户可以方便地定义测试计划、线程组、HTTP 请求等，可以结合接口自动化测试项目，将接口自动化…...
【React】组件通信
1. 组件通信 组件间的数据传递 1.1 父传子 步骤： 父组件传递数据——在子组件标签上绑定属性子组件接收数据——子组件通过props参数接收数据 function Son(props) {return <div>{props.value}</div> }function App() {const value 父组件传给子…...
C++核心编程和桌面应用开发 第七天（运算符重载 智能指针）
目录 1.数组类 2.运算符重载 2.1加号运算符 2.1.1成员函数实现 2.1.2全局函数实现 2.1.3加号重载 2.2左移运算符 2.3递增运算符 2.4指针运算符 2.5赋值运算符 1.数组类 //默认构造函数 MyArray::MyArray() {m_Size 0;m_Capacity 100;pAddress new int[m_Capacity]…...
echarts地图的简单使用
echarts地图的简单使用 文章说明核心源码效果展示源码下载 文章说明 主要介绍echarts地图组件的简单使用，记录为文章，供后续查阅使用 目前只是简单的示例，然后还存在着一些小bug，主要是首个Legend的点击会导致颜色全部不展示的问题…...
Qt 项目优化实践方向
目录 1. 使用智能指针2. 避免在全局或静态作用域中使用裸指针3. 利用Qt的对象树进行资源管理4. 延迟加载和按需加载资源5. 合理使用Qt的资源文件（qrc）6. 监控和调试内存使用7. 优化数据结构8. 减少不必要的资源复制9. 使用缓存机制10. 遵循RAII原则 以下…...
常见的15个：自然语言处理（NLP）实战项目
自然语言处理（NLP）实战项目涵盖了从基础到高级的多个领域，以下是一些常见的NLP实战项目，每个项目都附带了简要的描述和可能用到的技术栈： 1. 文本分类（Text Classification） 描述: 将文本数据…...
CKKS同态加密通用函数近似方法和openFHE实现
摘要 同态加密可以直接在密文上进行运算，尤其是CKKS，可以直接在实数的密文上进行运算。服务器可以利用强大的计算能力，在不泄露用户隐私的情况下，为用户提供便捷的外包运算服务。然而，CKKS只能进行算术运算࿰…...
Webpack 5的新特性：Asset Modules与Dynamic Import
文章目录 Asset ModulesAsset Modules 类型配置示例分析 Dynamic Import动态导入语法配置示例分析 实际案例分析Asset Modules 实际案例Dynamic Import 实际案例 性能优化Asset Modules 性能优化Dynamic Import 性能优化 详细代码分析Asset Modules 代码分析Dynamic Import 代码…...
解释python requests包的timeout
解释python requests包的timeout 哈哈哈。。。。垃圾python又来了 1 问题 你能看懂下面两个timeout的含义就不用看下面的内容了。 requests.get(http://example.com, timeout(2, 5)) requests.get(http://127.0.0.1:5000/api,timeout1)官网解释！！&am…...
蒙语学习快速方法，速记蒙语单词怎么学习更高效！
要高效学习蒙古语和速记单词，首先要掌握基础知识，如字母表和发音规则。接着，专注于学习日常用语和基础词汇，并运用记忆技巧如联想、发音和构词法来帮助记忆。利用专门的学习软件，如“蒙语学习通”，可以提供…...
Vue3组件通信13种方法
在 Vue3 中,组件之间的通信是构建应用程序的关键 1. 父组件向子组件传递数据 (Props)「父组件:」「子组件:」 2. 子组件向父组件传递数据 (Emit)「父组件:」「子组件:」 3. 兄弟组件通信 (Mitt)「发送事件的组件:」「接收事件的组件:」 4. 透传 Attributes ($attrs)「父组件:」…...
Servlet入门：服务端小程序的初试（自己学习整理的资料）
目录 一.前言 二.建立基础结构编辑 三.具体步骤 找到Tomcat文件并打开Tomcat。 在webapps中创建一个自己的文件夹。 在classes中新建一个Java文件。 在lib中导入需要的jar文件包。 配置环境变量 在Java文件的目录下打开cmd并输入 javac -d . HelloServlet.java进行…...
代码随想录算法训练营第三七天| 动态规划：完全背包理论基础 518.零钱兑换II 377. 组合总和 Ⅳ 322. 零钱兑换
今日任务 动态规划：完全背包理论基础 518.零钱兑换II 377. 组合总和 Ⅳ 322. 零钱兑换 518.零钱兑换II 题目链接： . - 力扣（LeetCode） class Solution {public int change(int amount, int[] coins) {int[] dp new int[amount …...
[报错解决] 运行MATCHA时需要在线下载Arial.TTF字体，但是无法连接huggingface
一、报错详情 requests.exceptions.ConnectTimeout:(MaxRetryError("HTTPSConnectionPool(hosthuggingface.co, port443): Max retries exceeded with url: /ybelkada/fonts/resolve/main/Arial.TTF (Caused by ConnectTimeoutError(<urllib3.connection.HTTPSConnec…...
B-树(不是B减树)原理剖析(1)
目录 B树的主要特性： B树的操作： B树的优点： 为什么要发明出B-树？ B树的概念和原理剖析 原理图讲解(部分讲解在图中) 初始化结点： 处理数据数量计算(了解) 底层代码实现(加深理解) 前些日子我们学了AVl树&…...
【shell脚本8】Shell脚本学习--其他
目录 编辑 Shell输入输出重定向 重定向深入讲解 Here Document Shell输入输出重定向 Unix 命令默认从标准输入设备(stdin)获取输入，将结果输出到标准输出设备(stdout)显示。一般情况下，标准输入设备就是键盘，标准输出设备就是终端&…...
《深度学习》ResNet残差网络、BN批处理层 结构、原理详解
目录 一、关于ResNet 1、什么是ResNet 2、传统卷积神经网络存在的问题 1）梯度消失和梯度爆炸问题 2）训练困难 3）特征表示能力受限 4）模型复杂度和计算负担 3、如何解决 1）解决梯度问题 BN层重要步骤： 2…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生，小白用户，想学习知识的 有点基础，想要通过项…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...
水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关
在水泥厂的生产流程中，工业自动化网关起着至关重要的作用，尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关，为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多，其中不少设备采用Devicenet协议。Devicen…...
如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
多元隐函数 偏导公式
我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式，给定一个隐函数关系： F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标： 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...