后端（实例）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…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...