简单商品后台管理系统-应用MVC和AJAX，使用Bootstrap
Posted Aurora-RenShuoyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单商品后台管理系统-应用MVC和AJAX，使用Bootstrap相关的知识，希望对你有一定的参考价值。
一个商品后台管理系统-应用了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;
剑道网格是在 mvc 的后台使用 Ajax 在页面上生成的
【中文标题】剑道网格是在 mvc 的后台使用 Ajax 在页面上生成的【英文标题】：The Kendo Grid is generated on page using Ajax in the background in mvc 【发布时间】：2016-05-20 23:14:30 【问题描述】：我将 Kendo Grid 用于 ASP.Net MVC 应用程序的报告。它工作正常。
我不知道该怎么做，感谢任何帮助/想法。
谢谢
【问题讨论】：
【参考方案1】：我不确定您是否会使用 Kendo 的 PDF 导出功能找到解决此问题的方法。我确实将其视为工作要求的一部分，但功能太有限了。我们最终使用了单独的东西来生成 PDF。
我会看看the PDF APIs listed here，看看它们是否符合您的要求。
【讨论】：
以上是关于简单商品后台管理系统-应用MVC和AJAX，使用Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章
ajax异步请求获取后台数据，java mvc 后台应该如何封装各种实体类数据？