前端以该格式<tr><td><input type="checkbox" class="c1"></td><td>01(pid)</td><td>毛巾(pname)</td><td>生活用品(cname)</td><td><form action="deleteProductByPid.action">展示数据库信息,数据库有两个表,类别表category表里有cid和cname,商品表product表里有pid、pname和外键cid。该需求的前端和后端代码

时间: 2023-08-14 20:29:03 浏览: 57
好的,以下是一个简单的前端和后端代码示例: 前端代码(使用jQuery库): ```html <!DOCTYPE html> <html> <head> <title>商品列表</title> </head> <body> <table> <thead> <tr> <th></th> <th>编号</th> <th>商品名称</th> <th>商品类别</th> <th>操作</th> </tr> </thead> <tbody id="product-list"> <!-- 商品信息的展示 --> </tbody> </table> <button id="delete-selected">删除选中</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 在页面加载完成后,向后端请求商品列表,并展示到页面上 $.get("/getProductList", function(data) { var productList = ""; for (var i = 0; i < data.length; i++) { var product = data[i]; productList += "<tr>"; productList += "<td><input type='checkbox' class='c1' value='" + product.pid + "'></td>"; productList += "<td>" + product.pid + "</td>"; productList += "<td>" + product.pname + "</td>"; productList += "<td>" + product.cname + "</td>"; productList += "<td><button class='delete-product' data-pid='" + product.pid + "'>删除</button></td>"; productList += "</tr>"; } $("#product-list").html(productList); }); // 监听删除按钮的点击事件,发送删除请求到后端 $("#delete-selected").on("click", function() { var selectedProducts = []; $(".c1:checked").each(function() { selectedProducts.push($(this).val()); }); if (selectedProducts.length == 0) { alert("请选择要删除的商品"); return; } if (!confirm("确定要删除选中的商品吗?")) { return; } $.post("/deleteProducts", { pids: selectedProducts }, function(data) { if (data.success) { alert("删除成功"); window.location.reload(); } else { alert("删除失败:" + data.message); } }); }); // 监听单个删除按钮的点击事件,发送删除请求到后端 $("#product-list").on("click", ".delete-product", function() { var pid = $(this).data("pid"); if (!confirm("确定要删除编号为" + pid + "的商品吗?")) { return; } $.post("/deleteProduct", { pid: pid }, function(data) { if (data.success) { alert("删除成功"); $(this).closest("tr").remove(); } else { alert("删除失败:" + data.message); } }.bind(this)); }); }); </script> </body> </html> ``` 在这个示例中,我们使用jQuery库来简化前端代码的编写。页面加载完成后,我们向后端发送一个GET请求,获取商品列表数据,并将数据展示到页面上。同时,我们为每个商品添加了一个复选框和一个删除按钮,当用户勾选复选框并点击删除按钮时,会向后端发送一个POST请求,请求地址为`/deleteProduct`或`/deleteProducts`,具体请求地址根据是否选择了多个商品进行删除而不同。需要注意的是,这个示例中并没有展示如何从数据库中获取商品信息的后端代码,因此在实际应用中,您还需要编写后端代码来处理请求并返回商品信息。此外,这个示例中的样式也非常简陋,您可以根据实际需求添加更多的样式和交互效果。 后端代码(使用Java语言和Spring框架): ```java @Controller public class ProductController { @Autowired private ProductService productService; @GetMapping("/getProductList") @ResponseBody public List<Product> getProductList() { return productService.getAllProducts(); } @PostMapping("/deleteProduct") @ResponseBody public Map<String, Object> deleteProduct(@RequestParam("pid") String pid) { Map<String, Object> result = new HashMap<>(); try { productService.deleteProductByPid(pid); result.put("success", true); } catch (Exception e) { result.put("success", false); result.put("message", e.getMessage()); } return result; } @PostMapping("/deleteProducts") @ResponseBody public Map<String, Object> deleteProducts(@RequestParam("pids") String[] pids) { Map<String, Object> result = new HashMap<>(); try { productService.deleteProductsByPid(pids); result.put("success", true); } catch (Exception e) { result.put("success", false); result.put("message", e.getMessage()); } return result; } } @Service public class ProductService { @Autowired private ProductDao productDao; public List<Product> getAllProducts() { return productDao.getAllProducts(); } public void deleteProductByPid(String pid) { productDao.deleteProductByPid(pid); } public void deleteProductsByPid(String[] pids) { productDao.deleteProductsByPid(pids); } } @Repository public class ProductDao { @Autowired private JdbcTemplate jdbcTemplate; public List<Product> getAllProducts() { return jdbcTemplate.query("SELECT p.*, c.cname FROM product p JOIN category c ON p.cid = c.cid", new ProductRowMapper()); } public void deleteProductByPid(String pid) { jdbcTemplate.update("DELETE FROM product WHERE pid = ?", pid); } public void deleteProductsByPid(String[] pids) { String[] placeholders = new String[pids.length]; Arrays.fill(placeholders, "?"); String sql = "DELETE FROM product WHERE pid IN (" + String.join(",", placeholders) + ")"; jdbcTemplate.update(sql, (Object[]) pids); } private class ProductRowMapper implements RowMapper<Product> { @Override public Product mapRow(ResultSet rs, int rowNum) throws SQLException { Product product = new Product(); product.setPid(rs.getString("pid")); product.setPname(rs.getString("pname")); product.setCname(rs.getString("cname")); return product; } } } public class Product { private String pid; private String pname; private String cname; // 省略getter/setter方法 } ``` 在这个示例中,我们使用Java语言和Spring框架来编写后端代码。我们将前端发送的请求映射到对应的Controller方法中,并在Controller方法中调用Service方法来处理业务逻辑。Service方法中调用Dao方法来访问数据库。需要注意的是,这个示例中并没有展示如何配置Spring框架的相关配置文件,因此在实际应用中,您还需要编写相关配置文件来配置Spring框架。同时,这个示例中的Dao层使用了JdbcTemplate来简化访问数据库的代码,您也可以使用其他ORM框架来完成数据访问。

相关推荐

<input type="checkbox" id="select-all"> 录入时间 退货单号 录入人 备注 状态 日志 {%for item in data%} <input type="checkbox" value="{{item[1]}}" name="id"> {{item[0]}} {{item[1]}} {{item[2]}} {{item[3]}} {% if item[4] is none %}{% else %}{{item[4]}}{% endif %} 日志 {%endfor%} <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script> cell1不起作用

最新推荐

recommend-type

钢桁架结构振动特性渐变分析工具

钢桁架结构振动特性渐变分析工具
recommend-type

数据库实战-收集一些常见的 MySQL 死锁案例.zip

数据库实战-收集一些常见的 MySQL 死锁案例.zip 数据库实战-收集一些常见的 MySQL 死锁案例.zip 在工作过程中偶尔会遇到死锁问题,虽然这种问题遇到的概率不大,但每次遇到的时候要想彻底弄懂其原理并找到解决方案却并不容易。这个项目收集了一些常见的 MySQL 死锁案例,大多数案例都来源于网络,并对其进行分类汇总,试图通过死锁日志分析出每种死锁的原因,还原出死锁现场。 实际上,我们在定位死锁问题时,不仅应该对死锁日志进行分析,还应该结合具体的业务代码,或者根据 binlog,理出每个事务执行的 SQL 语句。
recommend-type

Android的移动应用与php服务器交互实例源码.rar

Android的移动应用与php服务器交互实例源码.rar
recommend-type

【滤波跟踪】基于matlab平方根容积卡尔曼滤波机器人手臂运动跟踪【含Matlab源码 4540期】.mp4

Matlab研究室上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
recommend-type

计算BMI等一些关于热量和蛋白质摄入的小工具.zip

蛋白质是生物体中普遍存在的一类重要生物大分子,由天然氨基酸通过肽键连接而成。它具有复杂的分子结构和特定的生物功能,是表达生物遗传性状的一类主要物质。 蛋白质的结构可分为四级:一级结构是组成蛋白质多肽链的线性氨基酸序列;二级结构是依靠不同氨基酸之间的C=O和N-H基团间的氢键形成的稳定结构,主要为α螺旋和β折叠;三级结构是通过多个二级结构元素在三维空间的排列所形成的一个蛋白质分子的三维结构;四级结构用于描述由不同多肽链(亚基)间相互作用形成具有功能的蛋白质复合物分子。 蛋白质在生物体内具有多种功能,包括提供能量、维持电解质平衡、信息交流、构成人的身体以及免疫等。例如,蛋白质分解可以为人体提供能量,每克蛋白质能产生4千卡的热能;血液里的蛋白质能帮助维持体内的酸碱平衡和血液的渗透压;蛋白质是组成人体器官组织的重要物质,可以修复受损的器官功能,以及维持细胞的生长和更新;蛋白质也是构成多种生理活性的物质,如免疫球蛋白,具有维持机体正常免疫功能的作用。 蛋白质的合成是指生物按照从脱氧核糖核酸(DNA)转录得到的信使核糖核酸(mRNA)上的遗传信息合成蛋白质的过程。这个过程包括氨基酸的活化、多肽链合成的起始、肽链的延长、肽链的终止和释放以及蛋白质合成后的加工修饰等步骤。 蛋白质降解是指食物中的蛋白质经过蛋白质降解酶的作用降解为多肽和氨基酸然后被人体吸收的过程。这个过程在细胞的生理活动中发挥着极其重要的作用,例如将蛋白质降解后成为小分子的氨基酸,并被循环利用;处理错误折叠的蛋白质以及多余组分,使之降解,以防机体产生错误应答。 总的来说,蛋白质是生物体内不可或缺的一类重要物质,对于维持生物体的正常生理功能具有至关重要的作用。
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

可见光定位LED及其供电硬件具体型号,广角镜头和探测器,实验设计具体流程步骤,

1. 可见光定位LED型号:一般可使用5mm或3mm的普通白色LED,也可以选择专门用于定位的LED,例如OSRAM公司的SFH 4715AS或Vishay公司的VLMU3500-385-120。 2. 供电硬件型号:可以使用常见的直流电源供电,也可以选择专门的LED驱动器,例如Meanwell公司的ELG-75-C或ELG-150-C系列。 3. 广角镜头和探测器型号:一般可采用广角透镜和CMOS摄像头或光电二极管探测器,例如Omron公司的B5W-LA或Murata公司的IRS-B210ST01。 4. 实验设计流程步骤: 1)确定实验目的和研究对象,例如车辆或机器人的定位和导航。
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。