后端（实例）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…...
ComfyUI效果实测：多插件加持下的高清AI绘画生成对比
ComfyUI效果实测：多插件加持下的高清AI绘画生成对比 1. 引言：为什么选择ComfyUI 在AI绘画领域，ComfyUI以其独特的工作流设计方式脱颖而出。与传统的AI绘画工具不同，ComfyUI采用节点式工作流设计，让用户可以像搭积木一…...
Wan2.2-I2V-A14B图像转视频实战：基于卷积神经网络的风格迁移与动态生成
Wan2.2-I2V-A14B图像转视频实战：基于卷积神经网络的风格迁移与动态生成 1. 引言：当静态艺术遇见动态魔法 想象一下，你手中有一幅精美的水墨画或一张概念设计草图，如果能让它"活过来"，变成一段流动的视频&a…...
华三中小型企业二层组网配置案例一（单ISP+单链路）
1. 组网拓扑某企业内部共划分 4 个业务部门，为实现部门间网络隔离与安全访问控制，分别规划独立网段：192.168.10.0/24、192.168.20.0/24、192.168.30.0/24、192.168.40.0/24。核心交换机作为三层网关，配置各网段 VLANIF 接口地址&a…...
NVIDIA Profile Inspector实战手册：从参数调试到显卡性能全面优化
NVIDIA Profile Inspector实战手册：从参数调试到显卡性能全面优化 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 在PC硬件优化领域，专业工具与普通用户之间往往存在技术鸿沟。N…...
Python自动化脚本：从零构建《三国杀》钓鱼辅助
1. 环境准备：搭建自动化钓鱼的基石 想要实现《三国杀》钓鱼自动化，首先需要搭建一个稳定的开发环境。我推荐使用雷电模拟器9作为游戏运行平台，它不仅对Android游戏兼容性好，而且提供了丰富的调试功能。记得在安装时选择非vivo手机…...
CLIP-GmP-ViT-L-14图文匹配工具实测：电商搜图、智能相册应用场景解析
CLIP-GmP-ViT-L-14图文匹配工具实测：电商搜图、智能相册应用场景解析 你有没有想过，当你在电商平台用一张随手拍的照片搜索商品时，背后的技术是怎么工作的？或者，当你对着手机相册输入“去年夏天在海边拍的日落”&…...
Wan2.2-T2V-A5B实战：GitHub版本管理下的团队协作开发流程
Wan2.2-T2V-A5B实战：GitHub版本管理下的团队协作开发流程 你是不是也遇到过这样的场景？团队几个人一起开发一个基于Wan2.2-T2V-A5B的应用项目，代码改来改去，最后谁改了哪部分、为什么改、线上版本和本地版本哪个更新，…...
B站成分检测器：3分钟快速识别评论区同好身份
B站成分检测器：3分钟快速识别评论区同好身份 【免费下载链接】bilibili-comment-checker B站评论区自动标注成分油猴脚本，主要为原神玩家识别 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-comment-checker 还在为B站评论区难以分辨用户…...
IDEA 好用的ai插件 Windsurf
文章目录 前言一、Windsurf 插件功能二、IDEA安装三、登录Windsurf四、Windsurf简单使用介绍 前言 在 IntelliJ IDEA 中，Windsurf 是一款专注于 AI 代码辅助的插件，能够提升开发效率。以下是关于该插件的关键信息和使用方法： 提示࿱…...
Seqlist 顺序表 的实现c语言
本小结重点： 你将学到 函数基础 传值传地址的区别结构体指针 简单循环控制 理解物理结构与存储结构的区别多文件分布 简单来说就是对动态数组进行函数封装，简化了很多功能所以很多就是对数组的利用，但更多是对结构体数组，所…...