图书管理（图书的增删及分页）

最新推荐文章于 2021-08-24 12:01:34 发布

予倾

最新推荐文章于 2021-08-24 12:01:34 发布

阅读量254

点赞数 1

分类专栏： ajax 数据库前端显示，分页的实现

本文链接：https://blog.youkuaiyun.com/QZ9420/article/details/110287357

版权

ajax 同时被 2 个专栏收录

6 篇文章

订阅专栏

数据库前端显示，分页的实现

6 篇文章

订阅专栏

index.ejs文档：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <!--引入bootstrap.css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h1 style="text-align: center; margin-bottom: 40px;">图书管理系统</h1>
        <div action="" class="form-inline">
            <div class="form-group">
                <label for="bookName">图书名字：</label>
                <input type="text" class="form-control" id="bookName">
            </div>
            <div class="form-group">
                <label for="bookName">图书作者：</label>
                <input type="text" class="form-control" id="bookAuthor">
            </div>
            <div class="form-group">
                <label for="bookName">图书出版社：</label>
                <input type="text" class="form-control" id="bookPublish">
            </div>
            <button class="btn btn-success" id="addBook">添加图书</button>
        </div>
        <table class="table table-hover table-bordered table-striped" style="margin-top: 40px;">
            <thead>
                <tr>
                    <th style="text-align: center;">ID</th>
                    <th style="text-align: center;">图书名字</th>
                    <th style="text-align: center;">图书作者</th>
                    <th style="text-align: center;">图书出版社</th>
                    <th style="text-align: center;">操作</th>
                </tr>
            </thead>
            <tbody id="tb">
            </tbody>
        </table>
        <div class="footer">
            <p>总共有<span id=total></span>本图书，
                一页显示<span id=pagesize></span>
                当前是<span id=page></span>/<span id=size></span>页
                <a href="#" id=prev>上一页</a>
                <a href="#" id=next>下一页</a>
            </p>
        </div>
    </div>
    <!--引入JQ-->
    <script src="/jquery-1.11.3.js"></script>
    <script>
        let page = 1;//第一页
        function getBookList(page) {
            $.get("/list", { page }, res => {
                // res表示服务器显示的数据
                // console.log(res)
                let str = ``;
                res.data.books.forEach((item, index) => {
                    str += `
                         <tr>
                            <td style="text-align: center;">${index + 1}</td>
                            <td style="text-align: center;">${item.bookName}</td>
                            <td style="text-align: center;">${item.bookAuthor}</td>
                            <td style="text-align: center;">${item.bookPublish}</td>
                            <td style="text-align: center;"><a href="javascript:;" class="del" data-id=${item._id}>删除</a></td>
                        </tr>
                    `
                })
                $("#tb").html(str)
                $("#total").html(res.data.total)
                $("#pageSize").html(res.data.pageSize)
                $("#page").html(res.data.page)
                $("#size").html(res.data.size)

                //获取删除按钮给删除按钮来个点击事件
                $(".del").click(function () {
                    let isok = confirm("你确定要删除此图书吗？");
                    if (isok) {
                        // 点击了确定 发起一个ajax请求，删除图书
                        let id = $(this).attr("data-id"); // 获取要删除图书的ID
                        $.get("/del", { id }, res => {
                            // res 表示服务器给出响应
                            if (res.code == 1) {
                                return alert("删除图书失败")
                            }
                            alert("删除图书成功")
                            getBookList(1)
                        })
                    }
                });

            })
        }
        getBookList(page);
        //添加图书
        $("#addBook").click(function () {
            //获取输入框中的数据
            let bookName = $("#bookName").val().trim();
            let bookAuthor = $("#bookAuthor").val().trim();
            let bookPublish = $("#bookPublish").val().trim();
            if (bookName.length <= 0 || bookAuthor.length <= 0 || bookPublish.length <= 0) {
                return alert("请填写完整的图书信息~");
            }
            $.post("http://localhost:3000/add", { bookName, bookAuthor, bookPublish }), res => {
                //(服务器地址+post服务器数据),响应结果
                if (res.code == 1) {
                    return alert("添加图书成功~")
                } else {
                    return alert("添加图书失败~")
                }
            }
            $("#bookName").val("")
            $("#bookAuthor").val("")
            $("#bookPublish").val("")
            getBookList($("#size").html());
        })
        // 下一页
        $("#next").click(function (e) {
            e.preventDefault(); // 阻止默认事件
            if (page < $("#size").html()) {
                getBookList(++page)
            }
        });
        // 上一页
        $("#prev").click(function (e) {
            e.preventDefault(); // 阻止默认事件
            if (page > 1) {
                getBookList(--page)
            }
        });
    </script>
</body>

</html>

js文档：

let express = require("express");
let path = require("path");
let ejs = require("ejs")
let bodyParser = require("body-parser")
//数据库相关的
let MongoClient = require('mongodb').MongoClient;
let url = "mongodb://localhost:27017/";
let app = express();

//配置模板引擎
app.set("views", "./views");
app.set("view engine", "ejs");
// 配置body-parser
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json())
//托管静态资源
app.use(express.static(path.resolve(__dirname, "./public")))
//渲染首页面
app.get("/", (req, res) => {
    res.render("index1.ejs");
})
//获取图书列表
app.get("/list", (req, res) => {
    let page = req.query.page || 1;
    (page <= 0) && (page = 1)

    let pagesize = 3;
    let offset = (page - 1) * pagesize;
    //分页
    MongoClient.connect(url, { useNewUrlParser: true }, function (err, db) {
        if (err) throw err;
        var dbo = db.db("books");
        dbo.collection("booklist").find().skip(offset).limit(pagesize).toArray(function (err, result) {
            if (err) {
                res.json({code:1,
                    data:"获取图书资源失败~"
                })
            }
            dbo.collection("booklist").count().then(result2=>{
                //result2是总条数
                let total = result2;
                let size = Math.ceil(total / pagesize);
                res.json({code:0,data:{
                    books:result,//图书数据
                    total,//图书数目
                    pagesize,//每页显示多少条
                    page,//当前是第几页
                    size,//一共多少页
                }})
            })
            console.log(result);
            db.close();
        });
    });
})
app.post("/add", (req, res) => {
    //接收客户端传递的数据
    //数据入库
    MongoClient.connect(url, { useNewUrlParser: true }, function (err, db) {
        if (err) throw err;
        var dbo = db.db("books");
        dbo.collection("booklist").insertOne(req.body, function (err, response) {
            if (err) {
                //插入图书失败
                res.json({ code: 1, msg: "添加图书失败~" })
            }
            //插入图书成功
            res.json({ code: 0, msg: "添加图书成功~" })
            db.close();
        });
    });
})
app.get("/del",(req,res)=>{
    // console.log(req.query.id);
    let id = req.query.id; // 你得到的ID是一个字符串
    // 根据ID把数据库中的图书删除了
    MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
        if (err) throw err;
        var dbo = db.db("books");
        var whereStr = {_id:ObjectId(id)};  // 删除条件
        dbo.collection("booklist").deleteOne(whereStr, function(err, obj) {
            if (err){
                // 删除失败
                res.json({
                    code:1,
                    msg:"删除失败，查看你的网络情况"
                })
            }else{
                res.json({
                    code:0,
                    msg:"删除成功"
                })
            }
            db.close();
        });
    });
})

app.listen(3000, (req, res) => {
    console.log("3000 is ok !");
})

在这里插入图片描述

注意

 需要用到mongodb数据库，可视化工具为Robo 3T 1.4.2
手动激活mongodb方法：打开软件安装目录下的/bin,输入命令窗口cmd，输入"mongod --  dbpath=d:/mongo/data",即可激活使用，再用可视化应用连接。