后端（实例）08

不修×蝙蝠2024-09-29 13:08

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

1.首先写一个前端样式（空壳）

html 复制代码 
<!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.开始第一步：查数据--即在数据库中调出所需表格放入前端界面中

javascript 复制代码 
 $.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部分）

java 复制代码 
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.删除模块

javascript 复制代码 
 $("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部分）

java 复制代码 
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.添加模块

javascript 复制代码 
  //添加
	   $(".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部分）

java 复制代码 
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.修改部分较为特殊（增加了一步查找并返回原数据的操作）

javascript 复制代码 
 //隐藏修改
	   $(".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代码（回显）

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代码（修改）

【注：空格的书写规范】

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文件：

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部分】

相关推荐
码农小旋风7 分钟前
详解K8S--声明式API
后端
Peter_chq8 分钟前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
Yaml431 分钟前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
小小小妮子~33 分钟前
Spring Boot详解：从入门到精通
java·spring boot·后端
hong16168835 分钟前
Spring Boot中实现多数据源连接和切换的方案
java·spring boot·后端
aloha_7891 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
记录成长java2 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
睡觉谁叫~~~2 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
程序媛小果2 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
小屁孩大帅-杨一凡3 小时前
java后端请求想接收多个对象入参的数据
java·开发语言
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play