Sistema de gestión de libros basado en html+css+js

Dirección de descarga de recursos : https://download.csdn.net/download/sheziqiong/86771863
Dirección de descarga de recursos : https://download.csdn.net/download/sheziqiong/86771863
Directorio
1. Plan de diseño del proyecto 4
II. Análisis del proceso de implementación 4
tres. Resultados del diseño del proyecto 4
Cuatro. Proyecto de innovación 45
. Mejoras y Perspectivas 4
VI. Miembros del Proyecto 4
Anexo 1 5
Uno. Plan de diseño del proyecto
Este proyecto es un sistema de gestión de bibliotecas escrito en lenguajes html, css y js, que utiliza jquery para procesar páginas, ajax para leer información de forma asíncrona y json data para almacenar información relacionada.
1. Diseño de la interfaz del proyecto
(1) Interfaz de registro: incluye principalmente 3 cuadros de entrada, a saber, nombre de usuario, contraseña y correo electrónico. A continuación se muestra un botón de registro y una pequeña animación de onda de bola hecha por css. Presente toda la página en un diseño de tarjeta de felicitación.
(2) Interfaz de inicio de sesión: incluye principalmente 2 cuadros de entrada, a saber, nombre de usuario y contraseña. Un botón de inicio de sesión a continuación. Presente toda la página en un diseño de tarjeta de felicitación.
(3) Interfaz principal: incluye principalmente un formulario de información del libro, un cuadro de entrada para agregar libros, un cuadro de búsqueda, el título del sistema de gestión y un pie de página. La imagen de fondo es una imagen real de una biblioteca.
2. Diseño de interacción del proyecto
Las interacciones involucradas en esta aplicación incluyen:
(1) Haga clic en el botón de registro, si algún cuadro de entrada está vacío, aparecerá una advertencia. Haga clic en Aceptar para volver a registrarse. Después de que el registro sea exitoso, aparecerá un aviso de registro exitoso y automáticamente saltará a la página de inicio de sesión después del aviso.
(2) Haga clic en el botón de inicio de sesión, si algún cuadro de entrada está vacío, aparecerá una advertencia. Si el nombre de usuario o la contraseña de inicio de sesión no coinciden con los almacenados en los datos json, aparecerá una advertencia. Haga clic en Aceptar para iniciar sesión de nuevo. Haga clic en el botón de inicio de sesión y, si el nombre de usuario y la contraseña coinciden con los almacenados, el inicio de sesión aparecerá correctamente. a la página principal.
(3) Ingrese la información del libro que debe agregarse. Si el contenido en el cuadro de entrada está vacío, aparecerá una advertencia. Aparece una advertencia si el número de libros es negativo. Haga clic en el botón Agregar libro y la información del libro se agregará al formulario.
(4) Ingrese la información del libro/autor/editor a buscar, haga clic en el botón de búsqueda y aparecerá la información detallada del libro.
(5) Haga clic en el botón Eliminar en la lista de libros para eliminar una sola pieza de información.
3. Diseño de la función del proyecto
(1) Registro
El usuario ingresa el nombre de usuario, la contraseña y la dirección de correo electrónico para registrarse.Si el cuadro de entrada está vacío, se informará una advertencia.
(2) Iniciar sesión
El usuario ingresa el nombre de usuario, la contraseña y verifica con los datos json almacenados. Si la verificación es exitosa, ingresará a la interfaz principal, y si la verificación no es exitosa, aparecerá una advertencia.
(3) Exploración de libros
Después de ingresar a la interfaz principal, puede ver la información del libro en el formulario y el efecto cambiará cuando mueva el mouse sobre la información del libro.
(4) Agregar libros
Establezca cinco cuadros de entrada, a saber: título, nombre del autor, cantidad, editorial, precio unitario.
Después de que el usuario ingrese la información, haga clic en el botón Agregar para agregarla al formulario.
Si algún cuadro de entrada está vacío, aparecerá una advertencia.
También aparece una advertencia si el número de libros es negativo.
(5) Eliminar un libro
Haga clic en el botón Eliminar detrás de cada libro en la mesa de libros para eliminar la información de un solo libro, y también se puede eliminar la información del libro recién agregado.
(6) Buscar libros
El usuario ingresa la información del título/autor/editor del libro en el cuadro de búsqueda, hace clic en el botón de búsqueda y aparece la información detallada del libro. Si no se encuentra el libro, aparece un aviso. También se puede buscar información recién agregada.

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

<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="jquery.js"></script>
    <style>
        table {
    
    
            width: 500px;
            height: 100px;
            background-color: white;
            opacity:0.9;
            text-align: center;
        }

        .but{
    
    
            background-color: transparent;
            border: none;
            color: blue;
        }
        .but:hover{
    
    
            text-decoration: underline;
            color: red;
        }
        #tab {
      
      
            margin-top: 2%
        }

        #find {
      
      
            margin-top: 5%;
            padding-right: 0;
        }

        #name,
        #au,
        pub {
    
    
            width: 16%;
        }

        #num,
        #money {
      
      
            width: 10%;
           
        }

        .add {
    
    
            margin-left: 10px;
        }

        #header {
      
      
            margin-top: 20%;
        }
        .icon{
    
    
            width: 5%;
           margin-right: 10px;
        }
        .conticon{
    
    
            margin-top: -8%;
            margin-left: 1%;
        }
    </style>
</head>

<body>
   <div id="box">
    <div class="container">
      <h1 style="position: absolute;top: 10%;left: 45%;">图书管理系统</h1>
        <div id="header">
           
            <div class="col-md-12">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">书名：</label>

                        <input type="text" id="name" / class="form-control">
                        <label for="exampleInputName2">作者:</label>
                        <input type="text" id="au" / class="form-control">
                        <label for="exampleInputName2">数量：</label>
                        <input type="number" id="num" / class="form-control">
                        <label for="exampleInputName2">出版社:</label>
                        <input type="text" id="pub" / class="form-control">
                        <label for="exampleInputName2">单价：</label>
                        <input type="number" id="money" / class="form-control">
                        <input type="button" id="addBook" class="add btn btn-primary" value="添加图书" />
                    </div>
                </form>
            </div>
        </div>
        <div id="find" class="col-md-4 col-md-offset-8">
            <div class="col-md-10" style="margin-left: -7px;">
                <input type="text" class="txtx form-control" id="tex" placeholder="请输入想要查找的书名/作者名/出版社">
            </div>
            <input type="button" value="搜索" class="butt btn btn-primary" >

        </div>
        <div class="col-md-12">
            <div class="table-responsive">
                <table border="1" cellspacing="0" cellpadding="0" id="tab" class="tabb table table-hover ">

                    <tr id="clone">
                        <td>书名</td>
                        <td>作者</td>
                        <td>数量</td>
                        <td>出版社</td>
                        <td>单价</td>
                        <td> </td>
                    </tr>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="footer">
            
            
            
             <div class="container">
                        <div class="row text-center">
                            <div class="col-md-10 col-md-offset-1" style="padding-bottom: 10%;padding-top: 10%;">
                                <h4 style="color:#6e6969;">Wechat&nbsp;:&nbsp;hictoo / QQ&nbsp;:&nbsp;2947873981 / 2947873981@qq.com / Tel : 18742527701 </h4>
                                <h4 style="color:#6e6969;">点击下方图标与我联系</h4>
                            </div>
                        </div>
                    </div>
                    <div class="conticon col-md-12 text-center">
                        <a href="tencent://message/?uin=2947873981&Site=qq&Menu=yes"><img src="./sucai/qq.png" alt="" class="icon"></a>
                        <a href="mailto:[email protected]"><img src="./sucai/email.png" alt="" class="icon"></a>
                    </div>
                    
                    
                    
        </div>
        
    </div>

</div>
    <script>
        $.ajax({
    
    
            url: "books.json",
            dataType: "json",

            success: function(data) {
    
    

                //data -- 请求成功的相应数据 responseText

                console.log(data);

                $.each(data.result.list, function(index, item) {
    
    
                    console.log(item.bookname);
                    var bookname = item.bookname;
                    var author = item.author;
                    var count = item.count;
                    var publish = item.publish;
                    var price = item.price;

                    var txt = "<tr><td>" + bookname + "</td><td>" + author + "</td><td>" + count + "</td><td>" + publish + "</td><td>" + price + '' + "</td><td>" + '<button id="deleteB" class="but">删除</button>' + "</td></tr>";
                    $(".tabb").append(txt);
                })


                var obj = data.result.list;
                console.log(obj);





                $(document).ready(function() {
    
    



                    //搜索图书信息
                    $("#find").on("click", ".butt", ser);

                    function ser() {
    
    
                        console.log("find");
                        var text = $("#tex").val();
                        console.log(text);
                        var text2 = $("#tex2").val();
                        var text3 = $("#tex3").val();
                        var len = data.result.list.length;
                        console.log(len);
                        //  console.log(data.result.list[1].bookname);
                        var a = 0;
                        for (var i = 0; i < len; i++) {
    
    
                            if (text == data.result.list[i].bookname) {
    
    
                                alert("书名:  " + data.result.list[i].bookname + "\n作者:  " + data.result.list[i].author + "\n数量:  " + data.result.list[i].count + "\n出版社:  " + data.result.list[i].publish + "\n价格:  " + data.result.list[i].price);
                                $("#tex").val("");
                                a++;


                            }
                            if (text == data.result.list[i].author) {
    
    
                                alert("书名:  " + data.result.list[i].bookname + "\n作者:  " + data.result.list[i].author + "\n数量:  " + data.result.list[i].count + "\n出版社:  " + data.result.list[i].publish + "\n价格:  " + data.result.list[i].price);
                                $("#tex").val("");
                                a++;
                            }
                            if (text == data.result.list[i].publish) {
    
    
                                alert("书名:  " + data.result.list[i].bookname + "\n作者:  " + data.result.list[i].author + "\n数量:  " + data.result.list[i].count + "\n出版社:  " + data.result.list[i].publish + "\n价格:  " + data.result.list[i].price);
                                $("#tex").val("");
                                a++;
                            }
                        }
                        if (a == 0) {
    
    
                            alert("没有找到相关信息");
                            $("#tex").val("");
                        }

                    }



                    //删除图书信息

                    $("#tab").on("click", ".but", de);

                    function de() {
    
    
                        console.log("eeeee");
                        $(this).parent().parent().remove();
                    }


                    //添加图书信息
                    $("#header").on("click", ".add", ad);


                    function ad() {
    
    

                        var bookname = $("#name").val();
                        var author = $("#au").val();
                        var count = $("#num").val();
                        var publish = $("#pub").val();
                        var price = $("#money").val();
                       
                        if(bookname==""||author==""||count==""||publish==""||price==""){
    
    
                            alert("请完善图书信息，任何信息不得为空");
                            console.log("afaf");
                        }
                        
                        else{
    
    
                            if(parseInt(count)<0){
    
    
                            alert("图书数量不能为负");
                                
                        }
                            else{
    
    
                        var txt2 = "<tr><td>" + bookname + "</td><td>" + author + "</td><td>" + count + "</td><td>" + publish + "</td><td>" + price + '' + "</td><td>" + '<button id="deleteB" class="but">删除</button>' + "</td></tr>";
                        $(".tabb").append(txt2);
                        data.result.list.push({
    
    
                            bookname,
                            author,
                            count,
                            publish,
                            price
                        });
                        console.log(data.result.list);
                            $("#name").val("");
                            $("#au").val("");
                            $("#num").val("");
                            $("#pub").val("");
                            $("#money").val("");
                    }
                        }
                    }

                });

            },


            error: function(jqxhr, textStatus, err) {
    
    
                console.log(jqxhr, textStatus, err)
            }

        })
        
         var hei = $(window).height();
        // console.log(wid);
        console.log(hei);
        $("#box").css({
    
    
            "background-image":"url(gi.jpg)",
            "background-size":"100%",
            //"width": wid,
            "height": hei
        });
    </script>



</body>

</html>

Dirección de descarga de recursos : https://download.csdn.net/download/sheziqiong/86771863
Dirección de descarga de recursos : https://download.csdn.net/download/sheziqiong/86771863