后端(实例)08

news2024/9/30 11:25:19

设计一个前端在数据库调取数据的表格,并完成基础点击增删改查的功能:

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.data
				for (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.data
				for (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部分】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2166678.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VUE条件树查询

看如下图所示的功能&#xff0c;是不是可高级了&#xff1f;什么&#xff0c;你没看懂&#xff1f;拜托双击放大看&#xff01; 是的&#xff0c;我最近消失了一段时间就是在研究这个玩意的实现&#xff0c;通过不懈努力与钻研并参考其他人员实现并加以改造&#xff0c;很好&am…

人工智能时代的网络空间战略稳定及其挑战

文章目录 前言一、人工智能时代的网络空间战略稳定及其挑战(一)国内政治与官僚主义二、大国竞争与溯源政治三、国际法规与治理限制总结前言 人工智能的武器化应用在短期内将同时强化网络空间中进攻方和防御方的能力,但从长期看将有利于防御方。这种态势将令传统威慑逻辑重新…

[数据库实验三]安全性

目录 一、实验目的与要求&#xff1a; 二、实验内容&#xff1a; 三、实验小结 一、实验目的与要求&#xff1a; 1、设计用户子模式 2、根据实际需要创建用户角色及用户&#xff0c;并授权 3、针对不同级别的用户定义不同的视图&#xff0c;以保证系统的安全性 二、实验内…

Springboot jPA+thymeleaf实现增删改查

项目结构 pom文件 配置相关依赖&#xff1a; 2.thymeleaf有点类似于jstlel th:href"{url}表示这是一个链接 th:each"user : ${users}"相当于foreach&#xff0c;对user进行循环遍历 th:if进行if条件判断 {变量} 与 ${变量}的区别: 4.配置好application.ym…

【SemeDrive】【X9H】如何修改 SAFETY_FAULT 输出 PWM 频率

前言&#xff1a; SAFETY_FAULT 也是 SEM_FAULT&#xff0c;在原理图上会有不同的标注&#xff0c;但意义一样。 默认的 SAFETY_FAULT 正常时输出 PWM 频率为 100 MHz&#xff0c;过高的频率有时会导致无法通过 EMI 测试&#xff0c;需要降低频率。以下描述如何将正常时的 S…

ssh 命令详解

一、命令简介 ​ssh ​命令用于安全登录远程主机&#xff0c;以便在远程机上执行命令或传输数据。 ‍ 例如登录远程主机 169.10.222.23 ​上的 soulio ​用户&#xff1a; ssh soulio169.10.222.23更多示例参考第三章。 ‍ 了解背景知识&#xff1a;ssh 加密 1. 加密类型…

C++之Person类中调用Date类

main.cpp #include <iostream> #include "Person.h" using namespace std;int main() {Person myPerson;// Person myPerson("S.M.Wang", 070145, "莲花路200号");cout << "请输入姓名:" ;string name;cin >> name…

【文档智能 RAG】浅看开源的同质化的文档解析框架-Docling

前言 RAG的兴起&#xff0c;越来越多的人开始关注文档结构化解析的效果&#xff0c;这个赛道变得非常的同质化。 关于文档智能解析过程中的每个技术环节的技术点&#xff0c;前期文章详细介绍了很多内容&#xff1a; 下面我们简单的看看Docling这个PDF文档解析框架里面都有什…

尚品汇-自动化部署-Jenkins的安装与环境配置(五十六)

目录&#xff1a; 自动化持续集成 &#xff08;1&#xff09;环境准备 &#xff08;2&#xff09;初始化 Jenkins 插件和管理员用户 &#xff08;3&#xff09;工作流程 &#xff08;4&#xff09;配置 Jenkins 构建工具 自动化持续集成 互联网软件的开发和发布&#xf…

AI:颠覆式创新 vs. 持续性创新

随着有关生成式人工智能 (GenAI) 的新闻不断出现在社交媒体上&#xff0c;包括 ChatGPT 4o 如何帮助你与朋友玩石头、剪刀、布&#xff0c;关于 GenAI 的“颠覆性”影响的惊人声明并不难找到。 事实证明&#xff0c;将 GenAI 本身称为“颠覆性”并没有多大意义。 它能成为颠覆…

libvirt中的qemu与kvm

在 libvirt 虚拟机管理中&#xff0c;domain_type 的设置决定了虚拟机使用的虚拟化技术。在 domain_type 中&#xff0c;qemu 和 kvm 是两种不同的虚拟化模式&#xff0c;它们的区别主要在于是否使用硬件虚拟化加速。 qemu 模式 定义&#xff1a;qemu 是一种完全软件模拟的虚…

Recorder录音插件使用日记

目录 一、安装插件 二、导入文件 1.app-xxx-support.js支持文件 2.RecordApp 三 功能的使用 3.1 请求录音权限 3.2 开始录音 3.3 停止录音 3.4 其他接口 四 、使用 4.1 开始录音实例 4.2 请求录音权限 4.3 停止录音——文件的下载与上传 一、安装插件 npm install…

c++ day06

类的栈 实现 #include <iostream>using namespace std;class Stack { private:static const size_t MAX 100; // 定义固定容量int data[MAX]; // 存储栈元素的数组size_t len; // 当前栈的大小public:// 构造函数Stack() : len…

排序(交换排序:冒泡,快排)

冒泡排序&#xff1a;定义两个指针&#xff0c;指向第一个和第二个位置&#xff0c;前一个比后一个大就交换&#xff0c;然后同时向后挪接着比较&#xff0c;把最大的放到最后一个位置。最坏的情况&#xff1a;O(N^2)&#xff0c;最好的情况&#xff1a;O(N)。冒泡和插入的时间…

【深度学习】03-神经网络 5 (完结篇) 一文讲解 pytroch手机价格神经网络分类与准确率优化案例

手机价格分类数据集已经上传&#xff0c;用户可以自行下载进行训练。 构建数据集 数据共有 2000 条, 其中 1600 条数据作为训练集, 400 条数据用作测试集。 我们使用 sklearn 的数据集划分工作来完成 。并使用 PyTorch 的 TensorDataset 来将数据集构建为 Dataset 对象&#x…

一款好用的远程连接工具:MobaXterm

在日常工作中&#xff0c;作为开发者或运维人员&#xff0c;你是否经常需要远程连接服务器进行调试和管理&#xff1f;传统的SSH工具常常不够灵活&#xff0c;操作繁琐&#xff0c;无法满足日益复杂的工作需求。而MobaXterm的出现&#xff0c;带来了远程连接工具的全新体验。它…

付费计量系统的标准化框架(上)

Generic processes 通用过程Specific system processes 专用系统过程Generic functions 通用功能Specific system functions 专用系统功能Data Elements 数据单元Specific system data elements 专用数据单元Customer_Information_System 用户信息系统CIS_to_POS_Interface Typ…

MySql中索引失效的情况及原因

1.索引失效的情况 这是正常查询情况&#xff0c;满足最左前缀&#xff0c;先查有先度高的索引。 1. 注意这里最后一种情况&#xff0c;这里和上面只查询 name 小米科技 的命中情况一样。说明索引部分丢失&#xff01; 2. 这里第二条sql中的&#xff0c;status > 1 就是范围…

鸿蒙小技巧

1.子调用父的方法 子组件 父组件 2.使用emitter实现孙子传爷 孙子组件 import emitter from ohos.events.emitter;let event: emitter.InnerEvent {eventId: 1,priority: emitter.EventPriority.HIGH};let eventData: emitter.EventData {data: {"state": true,…

QProgressDialog运行初始不显示的问题

我用的是qt手册上的示例代码&#xff0c;结果运行时却出现如下问题&#xff1a; 如图程序运行时&#xff0c;开始一段时间是不显示进度条、百分比之类的。 运行一段时间之后&#xff0c;到50%才显示。当时数字是2&#xff0c;总数是4。 我用了网上的方案&#xff0c;增加了一条…