简单商品后台管理系统-应用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;">
    &copy;版权所有：石家庄铁道大学信息科学与技术学院&nbsp;&nbsp;
</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;
    }
}
复制代码

 

作者：冰稀饭Aurora

出处：https://www.cnblogs.com/rsy-bxf150/p/17436728.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   冰稀饭Aurora  阅读(77)  评论(0)  编辑  收藏  举报
相关博文：
·  Servlet实现完整功能增删改查-完整代码
·  MVC三层设计模式
·  JavaWeb
·  jsp实现MVC架构
·  JDBC+swing+MySQL商品管理
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示
AI IDE Trae