后端（实例）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…...
学Simulink——微电网中双向DC-AC逆变器的孤岛检测与运行控制仿真
目录 手把手教你学Simulink——微电网中双向DC-AC逆变器的孤岛检测与运行控制仿真 一、背景与挑战 1.1 什么是孤岛？为什么它是“安全隐患”？ 1.2 核心痛点与设计目标 二、系统架构与核心控制推导 2.1 整体架构：感知、决策与执行的分层设计 2.2 核心数学推导：孤岛检测…...
告别繁琐：Windows平台I2C总线高效调试实战
1. Windows平台I2C调试痛点解析 第一次在Windows下调试I2C设备时，我对着示波器抓到的杂乱波形发呆了整整两小时。与Linux系统自带i2c-tools的便利性相比，Windows环境确实像个"二等公民"——直到我发现CH341A这个神器。这个售价不到20元的USB转…...
窗口尺寸自由掌控：SRWE如何让任意程序窗口随心所欲
窗口尺寸自由掌控：SRWE如何让任意程序窗口随心所欲 【免费下载链接】SRWE Simple Runtime Window Editor 项目地址: https://gitcode.com/gh_mirrors/sr/SRWE 你是否曾为某个应用程序的固定窗口尺寸感到束手无策？想在高分辨率下截图却受限于游戏设…...
MKS Robin Nano Marlin 2.0固件架构解析与性能调优指南
MKS Robin Nano Marlin 2.0固件架构解析与性能调优指南 【免费下载链接】Mks-Robin-Nano-Marlin2.0-Firmware The firmware of Mks Robin Nano, based on Marlin-2.0.x, adding the color GUI. 项目地址: https://gitcode.com/gh_mirrors/mk/Mks-Robin-Nano-Marlin2.0-Firmwa…...
5分钟掌握BilibiliDown音频提取：从B站视频轻松获取无损音乐
5分钟掌握BilibiliDown音频提取：从B站视频轻松获取无损音乐 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirr…...
ElevenLabs动画配音语音项目踩坑实录，深度复盘4类合规风险与3种本地化绕过方案
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs动画配音语音项目踩坑实录，深度复盘4类合规风险与3种本地化绕过方案 在为国产原创2D动画《星尘回廊》接入ElevenLabs API实现多语种AI配音时，团队遭遇了超出预期的合规…...
Roborock 与 Ecovacs 机器人吸尘器多维度对比，谁更适合你？
选购机器人吸尘器：Roborock 与 Ecovacs 多维度对比，谁更适合你？当考虑购买机器人吸尘器时，面对众多品牌和型号，可能会让人无从下手。十年前，购买机器人吸尘器的选择范围还局限于少数几个竞争品牌࿰…...
如何快速构建工业通信系统：SECS4Net的完整实战指南
如何快速构建工业通信系统：SECS4Net的完整实战指南 【免费下载链接】secs4net SECS-II/HSMS-SS/GEM implementation on .NET 项目地址: https://gitcode.com/gh_mirrors/se/secs4net SECS4Net是一个基于.NET平台的开源库，完整实现了SEMI标准的SEC…...
制造业数字鸿沟的终结者：零依赖STL到STEP转换引擎的技术突破与应用实践
制造业数字鸿沟的终结者：零依赖STL到STEP转换引擎的技术突破与应用实践 【免费下载链接】stltostp Convert stl files to STEP brep files 项目地址: https://gitcode.com/gh_mirrors/st/stltostp 在数字化制造与工业4.0的浪潮中，制造业企业面临着…...
终极Windows Defender移除指南：13项核心服务的完整卸载方案
终极Windows Defender移除指南：13项核心服务的完整卸载方案 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirror…...