后端（实例）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部分】

相关推荐
向前看-39 分钟前
验证码机制
前端·后端
xlsw_41 分钟前
java全栈day20--Web后端实战(Mybatis基础2)
java·开发语言·mybatis
神仙别闹2 小时前
基于java的改良版超级玛丽小游戏
java
黄油饼卷咖喱鸡就味增汤拌孜然羊肉炒饭2 小时前
SpringBoot如何实现缓存预热？
java·spring boot·spring·缓存·程序员
暮湫2 小时前
泛型（2）
java
超爱吃士力架2 小时前
邀请逻辑
java·linux·后端
南宫生2 小时前
力扣-图论-17【算法学习day.67】
java·学习·算法·leetcode·图论
转码的小石2 小时前
12/21java基础
java
李小白663 小时前
Spring MVC(上)
java·spring·mvc
GoodStudyAndDayDayUp3 小时前
IDEA能够从mapper跳转到xml的插件
xml·java·intellij-idea
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程