图书管理系统

项目简介

图书管理系统旨在提供一个简洁、高效的解决方案，用于管理学校中图书的信息。该系统将支持图书数据的增删改查操作，并以科学化、系统化和规范化的方式维护信息。

实现方式

基于后端 Flask 实现的图书管理系统接口，完成前端页面的数据展示。

知识点

HTML
CSS
JavaScript
jQuery

项目要求

实现思路

uml diagram

分析接口

首页列表接口: /list
- 请求方式： GET
- 返回数据： JSON

添加接口: /add
- 请求方式： POST
- 请求体参数：name, price, summary
- 返回数据： JSON

修改接口: /change/bid
- 请求方式： POST
- 请求体参数：name, price, summary
- 返回数据： JSON

回显数据接口: /changeData/bid
- 请求方式： GET
- 返回数据： JSON

删除接口: /delete/bid
- 请求方式： GET
- 返回数据： JSON

页面开发

首页列表页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            /* border: 1px solid #000; */
            height: 800px;
            width: 1200px;
            margin: 0 auto;
        }
        .title h1{
            width: 1200px;
            height: 100px;
            color: red;
            text-align: center;
            line-height: 100px;
            /* border: 1px solid #000; */
        }
        .op{
            width: 1200px;
            height: 50px;
            line-height: 50px;
            /* border: 1px solid #000; */
        }
        .add{
            width: 100px;
            /* border: 1px solid #000; */
            text-align: center;
        }
        .content{
            width: 1200px;
            height: 500px;
            /* border: 1px solid #000; */
            margin-top: 10px;
        }
        .data{
            width: 1200px;
            border: 1px solid #000;
            text-align: center;
        }
        tr, th, td{
            border: 1px solid #000;
        }
        a{
            text-decoration: none;
        }
    </style>

    <script src="./static/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 发起一个请求去获取表格中的数据
            $.get("/list", function(data){
                var html_str = "";
                html_str += "<tr>"
                html_str += "    <th>编号</th>"
                html_str += "    <th>书名</th>"
                html_str += "    <th>价格</th>"
                html_str += "    <th>简介</th>"
                html_str += "    <th>操作</th>"
                html_str += "</tr>"

                for(var i=0;i<data.length;i++){
                    var obj = data[i];
                    html_str += "<tr>"
                    html_str += "    <td>" + obj.bid + "</td>"
                    html_str += "    <td>" + obj.name + "</td>"
                    html_str += "    <td>" + obj.price + "</td>"
                    html_str += "    <td>" + obj.summary + "</td>"
                    html_str += "    <td><a href='/change/" + obj.bid + "'>修改</a> | <a href='/delete/" + obj.bid + "'>删除</a></td>"
                    html_str += "</tr>"
                }
                $(".data").html(html_str)
            })
        });
    </script>
</head>
<body>

    <div class="main">
        <!-- 标题 -->
        <div class="title">
            <h1>图书管理系统</h1>
        </div>
        <!-- 功能条 -->
        <div class="op">
            <div class="add">
                <a href="/add">添加图书</a>
            </div>
        </div>
        <!-- 主体内容 -->
        <div class="content">
            <table class="data">

            </table>
        </div>
    </div>
</body>
</html>

添加页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 1200px;
            height: 800px;
            margin: 30px auto;
            border: 1px solid #000;
        }
        .title{
            text-align: center;
            color: red;
            border: 1px solid #000;
        }
        .content{
            width: 1200px;
            text-align: center;
        }
        .content div{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="title">
            <h1>添加图书</h1>
        </div>
        <div class="content">
           <form action="/add" method="post">
                <div>书名: <input type="text" name="name" id=""></div>
                <div>价格: <input type="text" name="price" id=""></div>
                <div>简介: <input type="text" name="summary" id=""></div>
                <div></div><input type="reset" value="重置">   <input type="submit" value="添加"></div>
           </form>
        </div>
    </div>
</body>
</html>

修改页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
            width: 1200px;
            height: 800px;
            margin: 30px auto;
            border: 1px solid #000;
        }
        .title{
            text-align: center;
            color: red;
            border: 1px solid #000;
        }
        .content{
            width: 1200px;
            text-align: center;
        }
        .content div{
            margin-top: 20px;
        }
    </style>

    <script src="./static/jquery-1.12.4.min.js"></script>


    <script>
        $(function(){
            var bid = document.location.href;
            var index = bid.lastIndexOf("/") + 1
            bid = bid.substring(index)

            // 设置form表单提交的地址
            $("form").prop({action:"/change/" + bid})

            // 请求回显数据
            $.get("/changeData/" + bid, function(data){
                $("[name='name']").val(data.name);
                $("[name='price']").val(data.price);
                $("[name='summary']").val(data.summary);
            })

        });
    </script>
</head>
<body>
    <div class="main">
        <div class="title">
            <h1>修改图书</h1>
        </div>
        <div class="content">
           <form action="" method="post">
                <div>书名: <input type="text" name="name" id=""></div>
                <div>价格: <input type="text" name="price" id=""></div>
                <div>简介: <input type="text" name="summary" id=""></div>
                <div></div><input type="reset" value="重置">   <input type="submit" value="修改"></div>
           </form>
        </div>
    </div>
</body>
</html>