jdbc操作数据库 and 一个商品管理页面

文章目录

  • 1. 介绍
    • 1.1 应用知识介绍
    • 1.2 项目介绍
  • 2. 文件目录
    • 2.1 目录
    • 2.2 介绍以下（从上到下）
  • 3. 相关代码
    • 3.1 DBConnection.java
    • 3.2 MysqlUtil.java
    • 3.3 AddServlet.java
    • 3.4 CommodityServlet.java
    • 3.5 DelectServlet.java
    • 3.6 SelectByIdServlet.java
    • 3.7 SelectServlet.java
    • 3.8 UpdataServlet.java
    • 3.9 style.css
    • 3.10 index.js
    • 3.11 jquery-3.7.1.min.js（略）
    • 3.12 index.html
  • 4. 效果展示
  • 5. 链接
  • 6. 思考

很丑，主要学习方法

1. 介绍

1.1 应用知识介绍

基础知识：mySQL，jbdc，JQuery，ajax

mySQL中对于表的增删改查
jQuery对于前端元素的获取
ajax传递数据和获取数据

1.2 项目介绍

是一个商品管理系统，需要自己先创建好一个表如图：
表
其中类型就不多说了。
前端交互界面设计：交互
对商品数据进行增删改查

2. 文件目录

2.1 目录

目录

2.2 介绍以下（从上到下）

DBConnection.java：用于连接数据库
MysqlUtil.java：操作数据库
AddServlet.java：增加商品
CommodityServlet.java：初始化时候进行查询
DelectServlet.java：删除数据库中的相关数据
SelectByIdServlet.java：通过id获取数据
SelectServlet.java：通过名字获取数据，用于查询
UpdataServlet.java：更新数据

style.css：样式
index.js：写js
jquery-3.7.1.min.js：引入jquery
index.html：写界面

3. 相关代码

3.1 DBConnection.java

package com.qcby.db;import java.sql.Connection;
import java.sql.DriverManager;public class DBConnection {public static void main(String[] args) {}String driver = "com.mysql.jdbc.Driver";String url = "jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=false";String user = "root";String password = "root";public Connection conn;public DBConnection() {try {Class.forName(driver);conn = (Connection) DriverManager.getConnection(url, user, password);//// if(!conn.isClosed())// System.out.println("Succeeded connecting to the Database!");} catch (Exception e) {e.printStackTrace();}}public void close() {try {this.conn.close();} catch (Exception e) {e.printStackTrace();}}}

3.2 MysqlUtil.java

package com.qcby.db;import java.rmi.StubNotFoundException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MysqlUtil {public static void main(String[] args) {//		String sqlcount = "select count(*) from admin";
//		String sql = "select * from admin";
//		String[] colums = {"id","account","password"};
//		String json = getJsonBySql(sqlcount, sql, colums);
//		System.out.println(json);/*String sql = "insert into t_student(name,age,sex) values(\"张三\",21,\"男\")";System.out.println(add(sql));*//*String sqldel = "delete from gq_user where id=11";System.out.println(del(sqldel));*//** String sqlupdate ="update user set age = 60 where name=\"you\"";* System.out.println(update(sqlupdate));*//*String sql = "select count(*) from gq_user";System.out.println(getCount(sql));*//*String[] col = {"id","name","age"};String sql = "select * from t_student";String sqlCount = "select count(*) from t_student";String strJson = getJsonBySql(sqlCount,sql,col);System.out.println(strJson);*//*String sqlcount = "select count(*) from gq_user";String sql="select * from gq_user";String[] col = {"username","age","id","sex","salary"};System.out.println(getJsonBySql(sqlcount, sql, col));*//** String sql = "select * from user"; String[] column =* {"id","name","age","entrydate"}; ArrayList<String[]> strings =* MysqlUtil.showUtil(sql, column); for (String[] string : strings) {* System.out.println(Arrays.toString(string)); }*/}/*添加*/public static int add(String sql) {// System.out.println("sql语句是：" + sql);int i=0;//数据库连接DBConnection db = new DBConnection();try {        PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(sql);i=preStmt.executeUpdate();preStmt.close();db.close();//关闭连接 System.out.println("数据插入成功，sql语句是：" + sql);} catch (Exception e) {e.printStackTrace();}System.out.println(i);return i;//返回影响的行数，1为执行成功;}/*修改数据*/public static int update(String sql) {int i =0;DBConnection db = new DBConnection();try {PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(sql);i = preStmt.executeUpdate();preStmt.close();db.close();System.out.println("数据更新成功，sql语句是：" + sql);} catch (SQLException e) {e.printStackTrace();}return i;}/*删除*/public static int del(String delstr) {int i=0;DBConnection db = new DBConnection();try {    PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(delstr);i=preStmt.executeUpdate();//executeUpdate()返回受影响的行数preStmt.close();db.close();System.out.println("数据删除成功，sql语句是：" + delstr);} catch (SQLException e){e.printStackTrace();}return i;}/*查询数量*/public static int getCount(String sql) {int sum = 0;DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while (rs.next()) {sum += rs.getInt(1);}rs.close();db.close();} catch (Exception e) {// TODO: handle exception}return sum;}/***功能描述 查询json数据带数据总量* @author 郭帅* @date 2021-03-22 10:30* @param sqlcount 查询数量的sql* @param sql 查询具体数据的sql* @param colums 查询的字段* @return java.lang.String*/public static String getJsonBySqlDataGrid( String sqlcount,String sql,String[] colums){int count = getCount(sqlcount);System.err.println("标红信息展示sql:" + sql);ArrayList<String[]>  result = new ArrayList<String[]>();DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while(rs.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = rs.getString( colums[i] );}result.add(dataRow);}rs.close();db.close();//} catch (SQLException e) {e.printStackTrace();}return listToJsonDataGrid(result,colums,count);}/***功能描述 查询json数据* @author 郭帅* @date 2021-03-22 10:30* @param sql 查询具体数据的sql* @param colums 查询的字段* @return java.lang.String*/public static String getJsonBySql( String sql,String[] colums){System.err.println("标红信息展示sql:" + sql);ArrayList<String[]>  result = new ArrayList<String[]>();DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while(rs.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = rs.getString( colums[i] );}result.add(dataRow);}rs.close();db.close();//} catch (SQLException e) {e.printStackTrace();}return listToJson(result,colums);}/***功能描述 查询数据* @author 郭帅* @date 2021-03-22 10:38* @param sql 查询具体数据的sql* @param colums  查询的字段* @return java.util.ArrayList<java.lang.String[]>*/public static ArrayList<String[]> showUtil( String sql, String[] colums){ArrayList<String[]>  result = new  ArrayList<String[]>();DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while(rs.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = rs.getString( colums[i] );}result.add(dataRow);}rs.close();db.close();//} catch (SQLException e) {e.printStackTrace();}return result;}/*** 转化为json数据字符串* @param* @return*/public static String listToJsonDataGrid( ArrayList<String[]> list,String[] colums,int count) {String jsonStr = "{\"code\":0,\"msg\":\"成功了\",\"count\":"+count+",\"data\":[";for(int i = 0; i < list.size(); i++) {String arr = "{";for( int j = 0; j < list.get(0).length; j++) {if( list.get(i)[j] == null || "NULL".equals(list.get(i)[j])) {arr += "\"" + colums[j] + "\":\"\"";}else {arr += "\"" + colums[j] + "\""+":" ;arr +=  "\"" + list.get(i)[j].replace("\"","\\\"") + "\"";}if( j < list.get(0).length - 1 ) {arr += ",";}}arr += "}";if( i < list.size() - 1 ) {arr += ",";}jsonStr += arr;}jsonStr += "]}";return jsonStr;}/*** 转化为json数据字符串* @param* @return*/public static String listToJson( ArrayList<String[]> list,String[] colums) {String jsonStr = "{\"code\":0,\"msg\":\"成功了\",\"data\":[";for(int i = 0; i < list.size(); i++) {String arr = "{";for( int j = 0; j < list.get(0).length; j++) {if( list.get(i)[j] == null || "NULL".equals(list.get(i)[j])) {arr += "\"" + colums[j] + "\":\"\"";}else {arr += "\"" + colums[j] + "\""+":" ;arr +=  "\"" + list.get(i)[j].replace("\"","\\\"") + "\"";}if( j < list.get(0).length - 1 ) {arr += ",";}}arr += "}";if( i < list.size() - 1 ) {arr += ",";}jsonStr += arr;}jsonStr += "]}";return jsonStr;}}

3.3 AddServlet.java

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 com.qcby.db.MysqlUtil;/*** Servlet implementation class AddServlet*/
@WebServlet("/add")
public class AddServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public AddServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String number = request.getParameter("num");String price = request.getParameter("price");String sql = "insert into commodity(name, num, price) VALUES ('"+ name + "', " + number + ", "+ price + ");";int num = MysqlUtil.add(sql);response.getWriter().write(num + "");}
}

3.4 CommodityServlet.java

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 com.qcby.db.MysqlUtil;/*** Servlet implementation class CommodityServlet*/
@WebServlet("/commodity")
public class CommodityServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public CommodityServlet() {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 stubresponse.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//设置返回数据的格式response.setContentType("text/json;charset:utf-8");String sql = "select * from commodity";String[] column ={"id","name","num","price"};String res = MysqlUtil.getJsonBySql(sql, column);System.out.println(res);// 响应数据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 stubdoGet(request, response);}}

3.5 DelectServlet.java

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 com.qcby.db.MysqlUtil;/*** Servlet implementation class DelectServlet*/
@WebServlet("/del")
public class DelectServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public DelectServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub// 接受参数String id = request.getParameter("id");String sql = "delete from commodity where id = " + id;int num = MysqlUtil.del(sql);response.getWriter().write(num);}}

3.6 SelectByIdServlet.java

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 com.qcby.db.MysqlUtil;/*** Servlet implementation class SelectByIdServlet*/
@WebServlet("/selectById")
public class SelectByIdServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SelectByIdServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubString id = request.getParameter("id");String sql = "select * from commodity where id ='" + id +"';";response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//设置返回数据的格式response.setContentType("text/json;charset:utf-8");String[] column ={"id","name","num","price"};String res = MysqlUtil.getJsonBySql(sql, column);System.out.println(res);// 响应数据response.getWriter().write(res);}}

3.7 SelectServlet.java

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 com.qcby.db.MysqlUtil;/*** Servlet implementation class SelectServlet*/
@WebServlet("/select")
public class SelectServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SelectServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubString name = request.getParameter("name");String sql = "select * from commodity where name ='" + name +"';";response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//设置返回数据的格式response.setContentType("text/json;charset:utf-8");String[] column ={"id","name","num","price"};String res = MysqlUtil.getJsonBySql(sql, column);System.out.println(res);// 响应数据response.getWriter().write(res);}}

3.8 UpdataServlet.java

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 com.qcby.db.MysqlUtil;/*** Servlet implementation class UpdataServlet*/
@WebServlet("/updata")
public class UpdataServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public UpdataServlet() {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 stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");String id = request.getParameter("id");String name = request.getParameter("name");String number = request.getParameter("num");String price = request.getParameter("price");String sql = "update commodity set  name = '" + name + "', num = "+ number +", price="+ price +" where id = " + id +";";int num = MysqlUtil.update(sql);response.getWriter().write(num + "");}}

3.9 style.css

*{margin: 0;padding: 0;
}
@font-face {font-family: YUZ;src: url(./YXZ.ttf);
}
body{position: relative;padding-top: 100px;
}
#todo {width: 500px;min-width: 500px;padding: 5px;background:linear-gradient(red,blue);background:-moz-linear-gradient(left,#ace,#f96);background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));background:-webkit-linear-gradient(left,#ace,#f96);background:-o-linear-gradient(left,#ace,#f96);margin: auto;border-radius: 10px;border: solid 1px wheat;
}
#todo .cmmodityName{width: 50%;height:25px;line-height:30px;border-radius: 10px 10px 10px 10px;border: solid 1px rgb(255, 255, 255);margin-bottom: 10px;padding-left: 10px;font-size: 20px;
}#todo .add, #todo .select{width: 15%;height:30px;line-height:30px;border-radius: 10px 10px 10px 10px;background-color: rgb(39, 160, 225);border: solid 1px rgb(255, 255, 255);margin-bottom: 10px;
}
#todo #add{width: 40%;border-radius: 0px 10px 10px 0px;background-color: rgb(39, 160, 225);border: 0;cursor: pointer;color: rgb(255, 255, 255);
}
#todoList{width: 100%;border-radius: 10px;overflow: hidden;color: white;
}
#todoList thead {background-color: rgb(39, 160, 225);
}
#todoList thead td:first-child {width: 20%;border-radius: 10px 0px 0px 0px;
}
#todoList thead td:last-child {border-radius: 0px 10px 0px 0px;
}
#todoList tr{width: 100%;height: 40px;text-align: center;color: rgb(51, 51, 51);
}
#todoList td{border: solid 1px white ; 
}
#todoList tr td input{width: 45px;height: 25px;line-height: 25px;font-family: Arial, Helvetica, sans-serif;background-color: #ace;border: solid 1px white;color: rgb(67, 67, 67);
}
#todoList tr td input:first-child{border-radius: 5px 0 0 5px;
}
#todoList tr td input:last-child{border-radius: 0 5px 5px 0;border-left: 0;
}
#add_div, #add_div2{position: absolute;top: 0;left: 0;background-color: rgba(255, 255, 255, 0.95);width: 100%;height: 100vh;
}
#add_div .add_div{margin: auto;padding: 5px;border: solid 2px #ac0f0f;border-radius: 3px;position: absolute;width: 20%;height: 20%;top: 40%;left: 40%;
}
#add_div .add_div input{height: 20px;width: 150px;padding-left: 5px;
}
#add_div2 .add_div{margin: auto;padding: 5px;border: solid 2px #ac0f0f;border-radius: 3px;position: absolute;width: 20%;height: 20%;top: 40%;left: 40%;
}
#add_div2 .add_div tr th{width: 100px;height: 30px;
}
#add_div2 .add_div span{height: 20px;width: 100px;padding-left: 5px;
}
#add_div2 .add_div input{height: 20px;width: 200px;
}

3.10 index.js

// 初始化
$.ajax({url:"commodity",type: "get",success:function(value){console.log(value);var arr = value.data;for(let i = 0 ; i < arr.length; i ++){$("#one").append("<tr>" + "<td>" + arr[i].name +"</td>"+"<td>" + arr[i].num +"</td>"+"<td>" + arr[i].price +"</td>"+"<td>" + "<input type=\"button\" value=\"修改\" class=\"reUpdata\" index = \"" + arr[i].id + "\">" + "<input type=\"button\" class = \"del\" value=\"删除\" index = \""+ arr[i].id +"\">" + "</td>")}},error:function(){alert("失败了！！");}
})
// 删除
$("tbody").on("click",".del", function(){var id = $(this).attr("index");$.ajax({url:"del",type:"post",data:{id},success:function(value){location.reload();},error: function(){alert("失败了！！");}})
})
var flag = 1;
// 点击添加
$(".add").on("click",function(){$("#add_div").css("display","block");$(".name").val("");$(".num").val("");$(".price").val("");$(".upData").val("添加商品");flag = 1;
})
// 点击取消
$(".back").on("click", function(){$("#add_div").css("display","none");
})
// 取消查找
$(".back2").on("click", function(){$("#add_div2").css("display","none");
})
// 点击查找
$(".select").on("click",function(){var name = $(".cmmodityName").val();if(name==""){alert("输入正确的格式！！！");return;}$.ajax({url:"select",type:"post",data:{name},success:function(value){if(value.data.length == 0){alert("不存在该物品");return;}var arr = value.data[0];$(".Cname").text(arr.name);$(".Cnum").text(arr.num);$(".Cprice").text(arr.price);$("#add_div2").css("display","block");},error:function(){alert("不存在该物品");}});})
// 点击第二个添加，更新数据
$(".upData").on("click", function(){// 是1，就是添加if(flag ==1){var name = $(".name").val();var num = $(".num").val();var price = $(".price").val();$.ajax({url:"add",type:"post",data:{name,num,price},success:function(value){console.log(value);if(value=="0"){alert("请输入正确格式！！！");}else{location.reload();alert("添加成功！！！");}},error:function(){alert("失败了")}})}else{var id = $(".Cid").val();var name = $(".name").val();var num = $(".num").val();var price = $(".price").val();$.ajax({url:"updata",type:"post",data:{id, name, num, price},success:function(value){console.log(value);if(value=="0"){alert("请输入正确格式！！！");}else{location.reload();alert("修改成功！！！")}},error:function(){alert("失败了");}})}
})
// 点击修改
$("tbody").on("click",".reUpdata", function(){$("#add_div").css("display","block");id = $(this).attr("index");$.ajax({url:"selectById",type:"post",data:{id},success:function(value){flag = 0;var arr = value.data[0];$(".Cid").val(arr.id);$(".name").val(arr.name);$(".num").val(arr.num);$(".price").val(arr.price);$(".upData").val("修改");},error: function(){alert("失败了！！");}})
})

3.11 jquery-3.7.1.min.js（略）

3.12 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表</title><link rel="stylesheet" href="css/style.css"><script src="js/jquery-3.7.1.min.js"></script><script src="js/index.js" defer></script>
</head>
<body><!-- <div>demo</div><a href="test">你好</a> --><div id="todo">商品名称：<input type="text" class="cmmodityName"><input type="button"  class="select" value="查找"><input type="button"  class="add" value="添加"><table id="todoList" cellpadding="0" cellspacing="0" ><thead><td>商品名字</td><td>数量</td><td>价格</td><td>操作</td></thead><tbody id ="one"></tbody></table></div><div id="add_div" style="display:none"><table class="add_div"><tr><th>商品名称：</th><th><input type="text" class="name"></th></tr><tr><th>商品数量：</th><th><input type="text" class="num"></th></tr><tr><th>商品价格：</th><th><input type="text" class="price"></th></tr><tr><th> <input type="button" value="添加" class="upData"></th><th><input type="button" value="取消" class="back"></th></tr></table></div><div id="add_div2" style="display:none"><span class="Cid" style="display:none">1</span><table class="add_div"><tr><th>商品名称：</th><th><span class="Cname">XXX</span></th></tr><tr><th>商品数量：</th><th><span class="Cnum">XXX</span></th></tr><tr><th>商品价格：</th><th><span class="Cprice">XXX</span></th></tr><tr><th colspan="2"><input type="button" value="取消" class="back2"></th></tr></table></div></body>
</html>

4. 效果展示

查找不存在的物品：
查找1
查找成功：
查找2
点击添加：
在这里插入图片描述

添加成功：
在这里插入图片描述
在这里插入图片描述

添加失败：
在这里插入图片描述

点击删除就直接没了

点击修改：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. 链接

javaWeb项目创建

史上最全MySQL基本操作（这一篇就够用了！！！）

6. 思考

目前还是不完美的，当添加商品时，商品已经存在表里，仍然能添加上，就交给你去修改了。（因为我比较懒。。。。）

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac是一款功能强大的系统监控工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户全面了解电脑的运行状态&#xff0c;提高电脑的性能和稳定性。 iStat Menus for Mac v6.73 (1239)中文版下载 该软件可以实时监测CPU使用率、内存占用、网络速度、硬盘活动…
阅读更多...
Python网络爬虫之数美滑块的加密及轨迹分析

Python网络爬虫之数美滑块的加密及轨迹分析

目录 一、引言 二、数美滑块验证概述 三、数美滑块加密机制分析 1、参数混淆与加密 2、JS代码动态执行 四、轨迹分析 1、轨迹数据获取 2、轨迹特征提取 五、动态JS参数分析 1、网络请求分析 2、JS代码调试与追踪 六、Python实现案例分析 1. 环境搭建与依赖安装 2…
阅读更多...
模块三——二分：34.在排序数组中查找元素的第一个和最后一个位置

模块三——二分：34.在排序数组中查找元素的第一个和最后一个位置

文章目录 前言题目描述算法原理细节问题 代码实现 前言 相信通过本模块的第一篇博客&#xff0c;大家已经能够对二分有一个清晰的认知了&#xff0c;最好画画图来加深理解&#xff0c;以下是一些新的注意事项&#xff1a; 请⼤家⼀定不要觉得背下模板就能解决所有⼆分问题。⼆…
阅读更多...
TaskWeaver使用记录

TaskWeaver使用记录

TaskWeaver使用记录 1. 基本介绍2. 总体结构与流程3. 概念细节3.1 Project3.2 Session3.3 Memory3.4 Conversation3.5 Round3.6 Post3.7 Attachment3.8 Plugin3.9 Executor 4. 代码特点5. 使用过程5.1 api调用5.2 本地模型使用5.3 添加插件 6. 存在的问题与使用体验6.1 判别模型…
阅读更多...
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明

【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 显示类控件 | Label的使用及说明 文章编号&#xff1a;Q…
阅读更多...
qt实现不定数量的按钮向前向后移动展示

qt实现不定数量的按钮向前向后移动展示

按钮模拟移动 引言示例代码第一种思路开发环境代码结构实现代码第二种思路开发环境实现代码第三种思路开发环境实现代码总结引言 此文主要记录用qt实现按钮的移动，具体效果如下： 模拟按钮移动效果 示例代码 本文记录了三种实现方式。 第一种 思路 用动态数组vector存放创…
阅读更多...
美国洛杉矶服务器的特点

美国洛杉矶服务器的特点

美国洛杉矶的服务器提供多种优质的托管服务&#xff0c;具有较好的网络连接速度和稳定性。以下是一些洛杉矶服务器的特点和服务&#xff0c;rak小编为您整理发布。 1. **地理位置优势**&#xff1a;位于美国西海岸的洛杉矶机房离中国相对较近&#xff0c;这有助于减少延迟&…
阅读更多...
深度剖析Gateway在微服务治理中的关键角色

深度剖析Gateway在微服务治理中的关键角色

目录 一、多层网关 二、Gateway 路由规则 2.1 路由 2.2 谓词 2.3 过滤器 三、路由声明规则 3.1 谓词 寻址谓词 请求参数谓词 时间谓词 自定义谓词 一、多层网关 首先我们先了解下一个请求是如何到达服务端并得到相应的。过程如图所示&#xff1a; 首先网址解析的第一步是 DN…
阅读更多...
QT客户端的开发框架

QT客户端的开发框架

针对QT客户端开发&#xff0c;目前存在多种框架&#xff0c;各有优缺点&#xff0c;具体选择哪种框架取决于您的具体需求和项目特点。以下是一些流行的QT客户端开发框架。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. Qt框架 Qt…
阅读更多...
Golang | Leetcode Golang题解之第41题缺失的第一个正数

Golang | Leetcode Golang题解之第41题缺失的第一个正数

题目&#xff1a; 题解&#xff1a; func firstMissingPositive(nums []int) int {n : len(nums)for i : 0; i < n; i {for nums[i] > 0 && nums[i] < n && nums[nums[i]-1] ! nums[i] {nums[nums[i]-1], nums[i] nums[i], nums[nums[i]-1]}}for i …
阅读更多...
element中file-upload组件的提示‘按delete键可删除’，怎么去掉?

element中file-upload组件的提示‘按delete键可删除’，怎么去掉?

问题描述 element中file-upload组件会出现这种提示‘按delete键可删除’ 解决方案&#xff1a; 这是因为使用file-upload组件时自带的提示会盖住上传的文件名&#xff0c;修改一下自带的样式即可 ::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {d…
阅读更多...
C语言编译成bin文件关键过程

C语言编译成bin文件关键过程

一、关键步骤 将单片机的源代码转换成二进制文件&#xff08;bin文件&#xff09;的过程涉及几个关键步骤&#xff0c;这些步骤是编译过程中的标准组成部分&#xff0c;主要包括以下步骤&#xff1a;预处理、编译、汇编、链接、二进制转换。 1、预处理 这是编译过程的第一步…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023