后端增删改查的基本应用——一个简单的货物管理系统
最终效果，如图所示：
如果想要进行修改操作，可点击某栏修改选项，会在本表格下方弹出修改的具体操作界面（点击前隐藏），并且目前的信息可复现在修改框内。
本篇文章通过该项目将后端和前端结合起来，实现了对数据库的调用，和对数据库的查找，添加，删除，修改。
首先我们应该准备一个简单的前端界面，其中通过$.ajax({}）部分完成和后端的交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>库存商品管理系统</title>
<script src="js/jquery.js"></script>
<script>
$(function(){$.ajax({
url:"goodsServlet",
type:"get", //请求方式 get post
success:function(value){
$("tbody").empty()
console.log(value)
console.log(value.data)
var arr=value.data
for(var i=0;i<arr.length;i++){
$("tbody").append(
"<tr>"+
"<td>"+arr[i].g_name+"</td>"+
"<td>"+arr[i].g_num+"</td>"+
"<td>"+arr[i].g_price+"</td>"+
"<td><input type='button' value='修改' class='update' id='body' index='"+arr[i].g_name+"'><input type='button' value='删除' class='delete' id='body' index='"+arr[i].g_name+"'></td>"+
"</tr>")
}
},
error:function(){
alert("出错啦")
},
})
$("tbody").on("click",".delete",function(){
var g_name =$(this).attr("index")
$.ajax({
url: 'deleteServlet', // 替换为你的后端处理URL
type: 'post', // 请求类型post 做修改常用
data: {
g_name
},
success: function(value) {
// 请求成功时执行的代码
alert(value)
//页面刷新
location.reload()
},
error: function() {
// 请求失败时执行的代码
alert("出错啦")
},
})
})
$("#btn").on("click",function(){
$(".add_model").css("display","block")
})
$("#close").on("click",function(){
$(".add_model").css("display","none")
})
$("#u_close").on("click",function(){
$(".update_model").css("display","none")
})
//添加
$("#add").on("click",function(){
//获取框里的值
var name=$(".name").val()
var number=$(".num").val()
var price=$(".price").val()
$.ajax({
url: 'addServlet', // 替换为你的后端处理URL
type: 'post', // 请求类型post 做修改常用
data: {
name,
number,
price
},
success: function(value) {
// 请求成功时执行的代码
alert(value)
//页面刷新
location.reload()
},
error: function() {
// 请求失败时执行的代码
alert("出错啦")
},
})
})
$("tbody").on("click",".update",function(){
$(".add_model").css("display","none")
$(".update_model").css("display","block")
var u_name=$(this).attr("index")
$.ajax({
url: 'searchidServlet', // 替换为你的后端处理URL
type: 'get', // 请求类型post 做修改常用
data: {
u_name
},
success: function(value) {
// 请求成功时执行的代码
var obj=value.data[0]
console.log(obj)
$(".u_name").val(obj.g_name);
$(".u_num").val(obj.g_num);
$(".u_price").val(obj.g_price);
$("#update").attr("index",obj.g_name)
//页面刷新
},
error: function() {
// 请求失败时执行的代码
alert("出错啦")
},
})
})
$("#update").on("click",function(){
var u_name=$(".u_name").val()
var u_number=$(".u_num").val()
var u_price=$(".u_price").val()
var id=$(this).attr("index")
alert(id)
$.ajax({
url: 'updateServlet', // 替换为你的后端处理URL
type: 'post', // 请求类型post 做修改常用
data: {
u_name,
u_number,
u_price,
id
},
success: function(value) {
// 请求成功时执行的代码
alert(value)
//页面刷新
location.reload()
},
error: function() {
// 请求失败时执行的代码
alert("出错啦")
},
})
})
})
</script>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 10%;
min-width: 350px;
margin: 150px auto;
}
table{
border-collapse: collapse;
margin: 5px auto;
width: 80%;
}
thead{
background: rgb(57, 151, 180);
border: 2px rgb(14, 77, 160) solid;
}
table tbody tr:nth-child(odd){
background: rgb(192, 230, 244);
border: 2px rgb(14, 77, 160) solid;
}
table tbody tr:nth-child(even){
background: rgb(197, 209, 225);
border: 2px rgb(14, 77, 160) solid;
}
table tbody #body{
margin:3px;
}
table tbody #body:nth-child(1){
background: rgb(230, 233, 167);
}
table tbody #body:nth-child(2){
background: rgb(227, 182, 223);
}
.add_model{
border: 2px rgb(14, 77, 160) solid;
padding：15px;
font-weight: 500;
margin: 50px ;
display:none
}
.update_model{
border: 2px rgb(14, 87, 160) solid;
padding：15px;
font-weight: 500;
margin: 50px ;
display:none
}
</style>
</head>
<body>
<div class="container">
<span>商品名称：
<input type="text" id="userInput">
<input type="button" value="查找" class="title" id="search">
<input type="button" value="添加" class="title" id="btn">
</span>
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<h4 class="add_model">
<span class="bottom">添加商品</span>
<br>
<span>商品名称：<input type="text" class="name"></span>
<br>
<span>商品数量：<input type="text" class="num"></span>
<br>
<span>商品价格：<input type="text" class="price"></span>
<input type="button" value="添加商品" class="title" id="add">
<input type="button" value="取消" class="title" id="close">
</h4>
<h4 class="update_model">
<span class="bottom">修改</span>
<br>
<span>商品名称：<input type="text" class="u_name"></span>
<br>
<span>商品数量：<input type="text" class="u_num"></span>
<br>
<span>商品价格：<input type="text" class="u_price"></span>
<input type="button" value="修改" class="title" id="update">
<input type="button" value="取消" class="title" id="u_close">
</h4>
</div>
</body>
</html>1.goodsServlet.java
构建servlet文件，在doGet方法做如下操作。该文件用来调用数据库中初始表格。其中 MysqlUtil.getJsonBySql方法为自建包MysqlUtil中的方法将所调出来的数据转化为Json格式
package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import datab.MysqlUtil;
@WebServlet("/goodsServlet")
public class goodsServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public goodsServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
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 sql="SELECT * from goods";
String[] colums= {"g_name","g_num","g_price"};
String res=MysqlUtil.getJsonBySql(sql, colums);
//后端给前端返回数据
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2.deleteServlet.java
该文件用来实现删除功能。同样的 MysqlUtil.del方法为自建包MysqlUtil中的方法，用于执行删除语句（当然也可以自己写），这个方法会返回一个int型 即修改的行数，这个数可以判断删除操作是否成功执行。
package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import datab.MysqlUtil;
/**
* Servlet implementation class deleteServlet
*/
@WebServlet("/deleteServlet")
public class deleteServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public deleteServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("post");
String g_name=request.getParameter("g_name");
String sql="DELETE FROM goods WHERE g_name='"+g_name+"'";
int num=MysqlUtil.del(sql);
String res="删除失败";
if(num>0) {
res="删除成功";
}
response.getWriter().write(res);
}
}
3.searchidServlet.java & updateServlet.java
要实现在修改时弹框的复现功能，就需要接受data域所传参数，并进行展示，在此插入searchidServlet.java，如下所示，本文件配合前端jQuery方法用于获取在 update操作中所需要复现的内容
package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import datab.MysqlUtil;
/**
* Servlet implementation class searchidServlet
*/
@WebServlet("/searchidServlet")
public class searchidServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public searchidServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
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 u_name=request.getParameter("u_name");
String sql="SELECT * FROM goods WHERE g_name=\""+u_name+"\"";
String[] colums= {"g_name","g_num","g_price"};
String res=MysqlUtil.getJsonBySql(sql, colums);
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
package com.qcby.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import datab.MysqlUtil;
/**
* Servlet implementation class updateServlet
*/
@WebServlet("/updateServlet")
public class updateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public updateServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决中文乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//接收参数
String name=request.getParameter("u_name");
String number=request.getParameter("u_number");
String price=request.getParameter("u_price");
String id=request.getParameter("id");
//修改
String sql="UPDATE goods SET g_name=\""+name+"\",g_num="+number+",g_price="+price+" WHERE g_name=\""+id+"\"";
int num=MysqlUtil.update(sql);
String res="修改失败";
if(num>0) {
res="修改成功";
}
response.getWriter().write(res);
}
}