Sistema de gerenciamento de livros baseado em html+css+js

Endereço de download do recurso : https://download.csdn.net/download/sheziqiong/86771863
Endereço de download do recurso : https://download.csdn.net/download/sheziqiong/86771863
Diretório
1. Plano de concepção do projeto 4
II. Análise do processo de implementação 4
três. Resultados da concepção do projeto 4
Quatro. Projeto de inovação 45
. Melhorias e Perspectivas 4
VI. Membros do Projeto 4
Apêndice 1 5
Um. Plano de design do projeto
Este projeto é um sistema de gerenciamento de biblioteca escrito nas linguagens html, css e js, usando jquery para processar páginas, ajax para ler informações de forma assíncrona e dados json para armazenar informações relacionadas.
1. Design da interface do projeto
(1) Interface de registro: inclui principalmente 3 caixas de entrada, ou seja, nome de usuário, senha e e-mail. Abaixo está um botão de registro e uma pequena animação de onda de bola feita por css. Apresente a página inteira em um layout de cartão de felicitações.
(2) Interface de login: Inclui principalmente 2 caixas de entrada, ou seja, nome de usuário e senha. Um botão de login abaixo. Apresente a página inteira em um layout de cartão de felicitações.
(3) Interface principal: Inclui principalmente um formulário de informações do livro, uma caixa de entrada para adicionar livros, uma caixa de pesquisa, o título do sistema de gerenciamento e um rodapé. A imagem de fundo é uma imagem real de uma biblioteca.
2. Design de interação do projeto
As interações envolvidas neste aplicativo incluem:
(1) Clique no botão de registro, se alguma caixa de entrada estiver vazia, um aviso será exibido. Clique em OK para se registrar novamente. Após o registro ser bem-sucedido, um prompt de registro bem-sucedido aparecerá e ele irá automaticamente para a página de login após o prompt.
(2) Clique no botão de login, se alguma caixa de entrada estiver vazia, um aviso aparecerá. Se o nome de usuário ou senha de login for inconsistente com o armazenado nos dados json, um aviso será exibido. Clique em OK para fazer login novamente. Clique no botão de login e, se o nome de usuário e a senha forem consistentes com os armazenados, o login aparecerá com sucesso. Este artigo é reproduzido em http://www.biyezuopin.vip/onews.asp?id=15031 e depois pula para a página principal.
(3) Digite as informações do livro que precisam ser adicionadas. Se o conteúdo na caixa de entrada estiver vazio, um aviso aparecerá. Um aviso aparece se o número de livros for negativo. Clique no botão Adicionar livro e as informações do livro serão adicionadas ao formulário.
(4) Digite as informações do livro/autor/editora a ser pesquisado, clique no botão de pesquisa e as informações detalhadas do livro aparecerão.
(5) Clique no botão excluir na lista de livros para excluir uma única informação.
3. Design da função do projeto
(1) Registro
O usuário insere o nome de usuário, senha e endereço de e-mail para se registrar.Se a caixa de entrada estiver vazia, um aviso será relatado.
(2) Login
O usuário insere o nome de usuário, senha e verifica com os dados json armazenados.Se a verificação for bem-sucedida, ele entrará na interface principal e, se a verificação não for bem-sucedida, um aviso será exibido.
(3) Navegando nos livros
Depois de entrar na interface principal, você pode visualizar as informações do livro no formulário e o efeito mudará quando você mover o mouse sobre as informações do livro.
(4) Adicionar livros
Defina cinco caixas de entrada, a saber: título, nome do autor, quantidade, editora, preço unitário.
Depois que o usuário inserir as informações, clique no botão Adicionar para adicioná-las ao formulário.
Se alguma caixa de entrada estiver vazia, um aviso será exibido.
Um aviso também é exibido se o número de livros for negativo.
(5) Excluir um livro
Clique no botão excluir atrás de cada livro na mesa do livro para excluir uma única informação do livro, e as informações do livro recém-adicionadas também podem ser excluídas.
(6) Pesquisar livros
O usuário insere as informações do título/autor/editor do livro na caixa de pesquisa, clica no botão de pesquisa e as informações detalhadas do livro são exibidas. Se o livro não for encontrado, um prompt é exibido. Informações recém-adicionadas também podem ser pesquisadas.

<!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>

Endereço de download do recurso : https://download.csdn.net/download/sheziqiong/86771863
Endereço de download do recurso : https://download.csdn.net/download/sheziqiong/86771863