一个商品后台管理系统-应用了MVC三层设计模式以及AJAX技术,使用Bootstrap模板;
是我用于练习Ajax的增删改查写的一个小系统,很简易,但是有助于理解mvc设计模式,并且简单条理清晰使得它是一个好的练习项目;
效果展示:
代码部分:
index.html
<html> <head> <title>管理系统</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript"> //通过AJAX方式检索所有 function RetrieveBooks() { $.post("list.action", {}, function (data) { $("#BooksTable tr:gt(0)").remove(); for (var i = 0; i < data.length; i++) { //插入表行 var trHtml = "<tr id = " + data[i].id + "><td>" + data[i].name + "</td><td>" + data[i].author + "</td><td>" + data[i].price + "</td><td><a href=\"#\" class=\"updateLink\">修改</a> <a href=\"#\" class=\"deleteLink\">删除</a></td></tr>"; $("#BooksTable").append(trHtml); } //绑定修改链接 $(".updateLink").click(function () { $.post("edit.action", {id: $(this).closest("tr").attr("id")}, function (data) { $("#UpdateId").val(data.id); $("#UpdateName").val(data.name); $("#UpdateAuthor").val(data.author); $("#UpdatePrice").val(data.price); $("#UpdateDiv").dialog("open"); }, "json"); }); //绑定删除链接 $(".deleteLink").click(function () { if (confirm("确认删除?")) { $.post("delete.action", {id: $(this).closest("tr").attr("id")}, function (data) { if (data == "1") { RetrieveBooks(); } else { alert("删除失败!"); } }, "json"); return true; } else { return false; } }); }, "json"); } $(function () { //设定Ajax提交编码格式为utf-8 $.ajaxSetup({ contentType: "application/x-www-form-urlencoded; charset=utf-8" }); //对“添加商品信息”窗口进行初始化 $("#AddDiv").dialog({ title: "添加商品信息", autoOpen: false, height: 300, width: 500, modal: true, show: "blind", hide: "fade", close: function () { $("#AddName").val(""); $("#AddAuthor").val(""); $("#AddPrice").val(""); } }); //对“修改商品信息”窗口进行初始化 $("#UpdateDiv").dialog({ title: "修改商品信息", autoOpen: false, height: 300, width: 500, modal: true, show: "blind", hide: "fade", close: function () { $("#UpdateId").val(""); $("#UpdateName").val(""); $("#UpdateAuthor").val(""); $("#UpdatePrice").val(""); } }); //对添加商品窗口的添加键绑定事件驱动程序 $("#AddSubmit").click(function () { //提交服务器 $.post("add.action", { name: $("#AddName").val(), author: $("#AddAuthor").val(), price: $("#AddPrice").val() }, function (data) { if (data == "1") { $("#AddDiv").dialog("close"); RetrieveBooks(); alert("提交成功!"); } else { $("#AddTip").html("添加失败!请重新输入数据。"); $("#AddTip").show().delay(5000).hide(0); } }, "json"); }); //对添加商品信息窗口的添加键绑定事件驱动程序 $("#UpdateSubmit").click(function () { //提交服务器 $.post("update.action", { id: $("#UpdateId").val(), name: $("#UpdateName").val(), author: $("#UpdateAuthor").val(), price: $("#UpdatePrice").val() }, function (data) { if (data == "1") { $("#UpdateDiv").dialog("close"); RetrieveBooks(); alert("修改成功!"); } else { $("#UpdateTip").html("更新失败!请重新输入数据。"); $("#UpdateTip").show().delay(5000).hide(0); } }, "json"); }); //对“新增信息”链接绑定事件驱动程序 $("#AddButton").click(function () { $("#AddDiv").dialog("open"); }); //第一次加载检索所有商品信息 RetrieveBooks(); }); </script> </head> <body> <div class="container"> <h1>商品后台管理系统</h1> <a href="#" id="AddButton">增加商品信息</a> <table class="table table-striped table-bordered" id="BooksTable"> <tr> <th>品名</th> <th>品牌</th> <th>价格</th> <th>管理</th> </tr> </table> </div> <div class="container" id="AddDiv"> <form id="AddForm"> <table class="table table-striped table-bordered" id="AddTable"> <tr> <th width="30%">品名:</th> <td class="ltd" width="70%"><input class="form-control" id="AddName" name="name" type="text"> </td> </tr> <tr> <th>品牌:</th> <td class="ltd"><input class="form-control" id="AddAuthor" name="author" type="text"></td> </tr> <tr> <th>价格:</th> <td class="ltd"><input class="form-control" id="AddPrice" name="price" type="text">元</td> </tr> <tr> <th colspan="2"><input class="btn btn-primary" id="AddSubmit" type="button" value="添加"> <input class="btn btn-primary" type="reset" value="重置"></th> </tr> </table> </form> <span id="AddTip" style="color:red;"></span> </div> <div class="container" id="UpdateDiv"> <form id="UpdateForm"> <table class="table table-striped table-bordered" id="UpdateTable"> <tr> <th width="30%">品名:</th> <td class="ltd" width="70%"><input class="form-control" id="UpdateId" name="id" type="hidden"><input class="form-control" id="UpdateName" name="name" type="text"></td> </tr> <tr> <th>品牌:</th> <td class="ltd"><input class="form-control" id="UpdateAuthor" name="author" type="text"></td> </tr> <tr> <th>价格:</th> <td class="ltd"><input class="form-control" id="UpdatePrice" name="price" type="text">元</td> </tr> <tr> <th colspan="2"><input class="btn btn-primary" id="UpdateSubmit" type="button" value="修改"> <input class="btn btn-primary" type="reset" value="重置"></th> </tr> </table> </form> <span id="UpdateTip" style="color:red;"></span> </div> <br/> <hr/> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;"> ©版权所有:石家庄铁道大学信息科学与技术学院 </div> </body> </html>
Util.java
package util; import java.sql.*; public class Util { private String driverStr = "com.mysql.cj.jdbc.Driver"; private String connStr = "jdbc:mysql://127.0.0.1:3306/book?useSSL=false&useUnicode=true&characterEncoding=utf-8"; private String dbusername = "root"; private String dbpassword = "123"; private Connection conn = null; private Statement stmt = null; public Util() { try { Class.forName(driverStr); conn = DriverManager.getConnection(connStr, dbusername, dbpassword); stmt = conn.createStatement(); } catch (Exception ex) { System.out.println("数据库连接失败!"); } } public Connection getConn() throws SQLException { if (conn == null || conn.isClosed()) { // 创建一个新的 Connection 对象 conn = DriverManager.getConnection(connStr, dbusername, dbpassword); } return conn; } public int executeUpdate(String s) { int result = 0; try { result = stmt.executeUpdate(s); } catch (Exception ex) { System.out.println("更新出现异常!"); } return result; } public ResultSet executeQuery(String s) { ResultSet rs = null; try { rs = stmt.executeQuery(s); } catch (Exception ex) { System.out.println("查询出现异常!"); } return rs; } public void close() { try { stmt.close(); conn.close(); } catch (Exception e) { } } }
package util; import java.sql.*; public class Util { private String driverStr = "com.mysql.cj.jdbc.Driver"; private String connStr = "jdbc:mysql://127.0.0.1:3306/book?useSSL=false&useUnicode=true&characterEncoding=utf-8"; private String dbusername = "root"; private String dbpassword = "123"; private Connection conn = null; private Statement stmt = null; public Util() { try { Class.forName(driverStr); conn = DriverManager.getConnection(connStr, dbusername, dbpassword); stmt = conn.createStatement(); } catch (Exception ex) { System.out.println("数据库连接失败!"); } } public Connection getConn() throws SQLException { if (conn == null || conn.isClosed()) { // 创建一个新的 Connection 对象 conn = DriverManager.getConnection(connStr, dbusername, dbpassword); } return conn; } public int executeUpdate(String s) { int result = 0; try { result = stmt.executeUpdate(s); } catch (Exception ex) { System.out.println("更新出现异常!"); } return result; } public ResultSet executeQuery(String s) { ResultSet rs = null; try { rs = stmt.executeQuery(s); } catch (Exception ex) { System.out.println("查询出现异常!"); } return rs; } public void close() { try { stmt.close(); conn.close(); } catch (Exception e) { } } }
Dao.java
package dao; import bean.Goods; import util.Util; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; public class Dao { public Dao(){ } public ArrayList<Goods> getList() { ArrayList<Goods> list = new ArrayList<Goods>(); String sql = "select * from goods"; Util jdbc = new Util(); ResultSet rs = jdbc.executeQuery(sql); try { while (rs.next()) { Goods bi = new Goods(); bi.setId(rs.getString("id")); bi.setName(rs.getString("name")); bi.setAuthor(rs.getString("author")); bi.setPrice(rs.getString("price")); list.add(bi); } rs.close(); } catch (SQLException e) { e.printStackTrace(); } jdbc.close(); return list; } public Goods getById(String id) { String sql = "select * from goods where id=" + id; Util jdbc = new Util(); ResultSet rs = jdbc.executeQuery(sql); Goods bi = new Goods(); try { if (rs.next()) { bi.setId(rs.getString("id")); bi.setName(rs.getString("name")); bi.setAuthor(rs.getString("author")); bi.setPrice(rs.getString("price")); } rs.close(); } catch (SQLException e) { e.printStackTrace(); } jdbc.close(); return bi; } public int updateInfo(Goods bi) { int result = 0; PreparedStatement preparedStatement=null; Util jdbc = new Util(); try { String sql = "UPDATE goods SET name=?, author=?, price=? WHERE id=?"; preparedStatement=jdbc.getConn().prepareStatement(sql); preparedStatement.setString(1, bi.getName()); preparedStatement.setString(2, bi.getAuthor()); preparedStatement.setString(3, bi.getPrice()); preparedStatement.setString(4, bi.getId()); result = preparedStatement.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } finally{ } if (result >0){ result = 1; } jdbc.close(); return result; } public int deleteInfo(String id) { int result = 0; PreparedStatement preparedStatement=null; Util jdbc = new Util(); try { String sql = "DELETE FROM goods WHERE id=" + id; preparedStatement=jdbc.getConn().prepareStatement(sql); result = preparedStatement.executeUpdate(); }catch (SQLException e) { e.printStackTrace(); } finally{ } if (result >0){ result = 1; } jdbc.close(); return result; } public int addInfo(Goods bi) { int result = 0; PreparedStatement preparedStatement=null; Util jdbc = new Util(); try { String sql = "INSERT INTO goods (name,author,price) values (?,?,?)"; preparedStatement=jdbc.getConn().prepareStatement(sql); preparedStatement.setString(1, bi.getName()); preparedStatement.setString(2, bi.getAuthor()); preparedStatement.setString(3, bi.getPrice()); result = preparedStatement.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } finally{ } if (result >0){ result = 1; } jdbc.close(); return result; } }
SysController.java
package servlet; import bean.Goods; import dao.Dao; import org.json.JSONArray; import org.json.JSONObject; 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 java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; @WebServlet("*.action") public class SysController extends HttpServlet { private static final long serialVersionUID = 1L; public SysController() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); // 获取客户端的访问URL地址信息 String actionUrl = request.getServletPath(); //创建Dao对象进行CRUD操作 Dao dao = new Dao(); switch (actionUrl) { case "/list.action": // 查询所有 // 调用dao对象的getList方法 ArrayList<Goods> list = dao.getList(); // 使用JSONArray对象将结果构建为json对象并输出到客户端 JSONArray jsonArray = new JSONArray(); for (Goods goods : list) { Map<String, Object> map = new HashMap<>(); map.put("id", goods.getId()); map.put("name", goods.getName()); map.put("author", goods.getAuthor()); map.put("price", goods.getPrice()); JSONObject BookObj = new JSONObject(map); jsonArray.put(BookObj); } // 向客户端返回json结果 response.getWriter().print(jsonArray.toString()); break; case "/add.action": { // 增加操作 Goods bi = new Goods(); bi.setName(request.getParameter("name")); bi.setAuthor(request.getParameter("author")); bi.setPrice(request.getParameter("price")); // 调用dao对象的addInfo方法完成 int r = dao.addInfo(bi); // 向客户端返回结果 response.getWriter().print(r); break; } case "/edit.action": { // 编辑操作 String id = request.getParameter("id"); // 调用dao对象的getById方法完成 Goods bi = dao.getById(id); // 将该对象构建为json数据 Map<String, Object> map = new HashMap<String, Object>(); map.put("id", bi.getId()); map.put("name", bi.getName()); map.put("author", bi.getAuthor()); map.put("price", bi.getPrice()); JSONObject BookObj = new JSONObject(map); // 向客户端返回结果 response.getWriter().print(BookObj.toString()); break; } case "/update.action": { // 更新操作 Goods bi = new Goods(); int r = 0; bi.setId(request.getParameter("id")); bi.setName(request.getParameter("name")); bi.setAuthor(request.getParameter("author")); bi.setPrice(request.getParameter("price")); r = dao.updateInfo(bi);// 调用dao对象的updateInfo方法完成更新 response.getWriter().print(r); // 向客户端返回结果 break; } case "/delete.action": { // 删除操作 String id = request.getParameter("id"); int r = dao.deleteInfo(id); // 调用dao对象的deleteInfo方法完成删除 response.getWriter().print(r); // 向客户端返回结果 break; } } } }
Goods.java
package bean; public class Goods { private String id; private String name; private String author; private String price; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAuthor() { return author; } public void setAuthor(String author) { this.author = author; } public String getPrice() { return price; } public void setPrice(String price) { this.price = price; } public String getId() { return id; } public void setId(String id) { this.id = id; } }
标签:String,Bootstrap,bi,简单商品,id,AJAX,result,import,public From: https://www.cnblogs.com/rsy-bxf150/p/17436728.html