• 【HTML】原生js实现的图书馆管理系统

    1、引言

    设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

    2、作品介绍

    原生js实现的图书馆管理系统采用html，css，js技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

    2.1、作品简介方面 

    原生js实现的图书馆管理系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

    2.2、作品二次开发工具

    此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

    2.3、作品技术介绍

    html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

    3、作品演示

    【coding加油站】原生js实现的图书管理系统

    3.1、登录页

     相关代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>1title>
    6.     
    7.     
    8.     <style>
    9.     
    10.         .div1{
    11.             width:400px;
    12.             height:220px;
    13.             margin:0 auto;
    14.             position:absolute;
    15.             left:40%;
    16.             top:35%;
    17.             background: none repeat scroll 0 0 skyblue;
    18.             border: 1px solid brown;
    19.             height: 250px;
    20.             padding-top: 30px;
    21.             text-align: center;
    22.         }
    23.         
    24.     style>
    25.     
    26. head>
    27. <body>
    28.     
    29.     <div class="bg">div>
    30.     <div class="div1" id="loginBox">
    31.          <form action="LoginServlet" method="post">
    32.          <h3>图书管理系统h3>
    33.          <p>
    34.          <input type="text" name="username"  id="username"  placeholder="账号" autocomplete="off">p>
    35.          <p>
    36.          <input type="password" name="password" id="password" placeholder="密码">
    37.          p>
    38.          <p style="color: red" class="tip">p>
    39.          <p><button type="button" id="login">登录button>p>
    40.          form>
    41.          
    42.          <span><a href="3.html" style="color: brown">注册a>span>
    43.          
    44.     div>
    45. <script type="text/javascript" src="js/jquery.min.js">script>
    46. <script type="text/javascript">
    47.     $(function(){
    48.         
    49.         
    50.         $('#login').click(function(){
    51.             username = $('.div1 #username').val();
    52.             password = $('.div1 #password').val();
    53.  
    54.             if(username!='admin'||password!='admin'){
    55.  
    56.  
    57.                 $('.div1 .tip').text('用户名或密码错误');
    58.                 if(username!=''||password!=''){
    59.                     $('.div1 .tip').text('用户名或密码不能为空');
    60.                 }
    61.             }else{
    62.                 console.log('下一步');
    63.                 alert('用户登陆成功')
    64.                 window.location.href="2.html";
    65.             }
    66.         });
    67.     });
    68.  
    69. script>
    70.     
    71. body>
    72. html>

    3.2、管理界面

    相关代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5.     <title>2title>
    6.     <style>
    7.     
    8.         #div1{
    9.             background-color: skyblue;
    10.             width: auto;
    11.             height:70px;
    12.             font-size: 30px;
    13.             text-align: center;
    14.             line-height: 70px;
    15.         }
    16.  
    17.         .modal {
    18.             position: fixed;
    19.             top: 0;
    20.             right: 0;
    21.             bottom: 0;
    22.             left: 0;
    23.             z-index: 1050;
    24.             display: none;
    25.             overflow: hidden;
    26.             outline: 0;
    27.         }
    28.         .modal.fade .modal-dialog {
    29.             transition: -webkit-transform 0.3s ease-out;
    30.             transition: transform 0.3s ease-out;
    31.             transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    32.             -webkit-transform: translate(0, -25%);
    33.             transform: translate(0, -25%);
    34.         }
    35.  
    36.         .modal.show .modal-dialog {
    37.             -webkit-transform: translate(0, 0);
    38.             transform: translate(0, 0);
    39.         }
    40.  
    41.         .modal-open .modal {
    42.             overflow-x: hidden;
    43.             overflow-y: auto;
    44.         }
    45.  
    46.         .modal-dialog {
    47.             position: relative;
    48.             width: auto;
    49.             margin: 10px;
    50.             pointer-events: none;
    51.         }
    52.  
    53.         .modal-content {
    54.             position: relative;
    55.             display: -ms-flexbox;
    56.             display: flex;
    57.             -ms-flex-direction: column;
    58.             flex-direction: column;
    59.             pointer-events: auto;
    60.             background-color: #fff
    61.             background-clip: padding-box;
    62.             border: 1px solid rgba(0, 0, 0, 0.2);
    63.             border-radius: 0.3rem;
    64.             outline: 0;
    65.         }
    66.  
    67.         .modal-backdrop {
    68.             position: fixed;
    69.             top: 0;
    70.             right: 0;
    71.             bottom: 0;
    72.             left: 0;
    73.             z-index: 1040;
    74.             background-color: skyblue;
    75.         }
    76.  
    77.         .modal-backdrop.fade {
    78.             opacity: 0;
    79.         }
    80.  
    81.         .modal-backdrop.show {
    82.             opacity: 0.5;
    83.         }
    84.  
    85.         .modal-header {
    86.             display: -ms-flexbox;
    87.             display: flex;
    88.             -ms-flex-align: start;
    89.             align-items: flex-start;
    90.             -ms-flex-pack: justify;
    91.             justify-content: space-between;
    92.             padding: 15px;
    93.             border-bottom: 1px solid #e9ecef;
    94.             border-top-left-radius: 0.3rem;
    95.             border-top-right-radius: 0.3rem;
    96.         }
    97.  
    98.         .modal-header .close {
    99.             padding: 15px;
    100.             margin: -15px -15px -15px auto;
    101.         }
    102.         
    103.         .modal-title {
    104.             margin-bottom: 0;
    105.             line-height: 1.5;
    106.         }
    107.         
    108.         .modal-body {
    109.             position: relative;
    110.             -ms-flex: 1 1 auto;
    111.             flex: 1 1 auto;
    112.             padding: 15px;
    113.         }
    114.  
    115.         .modal-footer {
    116.  
    117.             display: -ms-flexbox;
    118.             display: flex;
    119.             -ms-flex-align: center;
    120.             align-items: center;
    121.             -ms-flex-pack: end;
    122.             justify-content: flex-end;
    123.             padding: 15px;
    124.             border-top: 1px solid #e9ecef;
    125.         }
    126.  
    127.         .modal-footer > :not(:first-child) {
    128.             margin-left: .25rem;
    129.         }
    130.  
    131.         .modal-footer > :not(:last-child) {
    132.             margin-right: .25rem;
    133.         }
    134.         
    135.         body {
    136.             margin: 0;
    137.             font-size: 1.3rem;
    138.             font-weight: 400;
    139.             line-height: 1.5;
    140.             color: #212529;
    141.             text-align: center;
    142.             background-color: #fff;
    143.         }
    144.         
    145.         .table{
    146.             background-color: skyblue;
    147.             border: 1px solid brown;
    148.         }
    149.  
    150.     style>
    151.     
    152. head>
    153. <body onload="loadUserDatas()">
    154.     
    155.     <div id="div1">图书管理系统div>
    156.     <br><br>
    157.  
    158.     <div class="container">
    159.     <table class="table" id="table" align="center">
    160.     
    161.   <thead>
    162.    <tr>
    163.     <th>序号th>
    164.     <th>图书编号th>
    165.     <th>图书名th>
    166.     <th>图书作者th>
    167.     <th>出版社th>
    168.     <th>图书数量th>
    169.     <th>图书价钱th>
    170.    tr>
    171.   thead>
    172.   <tbody id="tbody">
    173.   tbody>
    174.  table>
    175.  
    176.  <br>
    177.  <caption>操作caption>
    178.    <br><br>
    179.     <caption>
    180.      <form class="form-inline" role="form">
    181.      <input type="text" class="form-group form-control" autocomplete="off"  id="s_code" placeholder="按工号查询" >
    182.                   
    183.      <input type="text" class="form-group form-control" autocomplete="off" id="s_userName" placeholder="按图书名查询" >
    184.     form>
    185.   caption>
    186.   <br>
    187.  
    188.  <form class="form-inline" role="form">
    189.  
    190.   <button type="button" class="btn btn-info" id="user_find" onclick="optionUserData(this);">查询button>     
    191.   <button type="button" class="btn btn-success" id="user_add" data-toggle="modal"
    192.   data-target="#myModal" onclick="optionUserData(this);">新增button>     
    193.    <button type="button" class="btn btn-danger" id="user_delete" onclick="optionUserData(this);">删除button>     
    194.    <button type="button" class="btn btn-default" id="user_edit" data-toggle="modal"
    195.   data-target="#myModal" onclick="optionUserData(this);">编辑button>
    196.     
    197.  form>
    198.  
    199.  <div class="modal hide" id="myModal" role="dialog" >
    200.   <div class="modal-dialog">
    201.    <div class="modal-content">
    202.    <div class="modal-header">
    203.      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
    204.       返回
    205.       button>
    206.       div>
    207.       <div class="modal-body" id="modal-body">
    208.       <label for="name">图书编号:label>
    209.       <input type="text" class="form-control" id="m_code" placeholder="请输入图书编号" autocomplete="off">
    210.       <label for="name">图书名:label>
    211.       <input type="text" class="form-control" id="m_userName" placeholder="请输入图书名" autocomplete="off">
    212.       <label for="name">图书作者:label>
    213.       <input type="text" class="form-control" id="m_sex" placeholder="请输入作者" autocomplete="off">
    214.       <label for="name">出版社:label>
    215.       <input type="text" class="form-control" id="m_passWord" placeholder="请输入出版社" autocomplete="off">
    216.       <label for="name">图书数量:label>
    217.       <input type="text" class="form-control" id="m_age" placeholder="请输入图书数量" autocomplete="off">
    218.       <label for="name">图书价钱:label>
    219.       <input type="text" class="form-control" id="m_birthday" placeholder="请输入图书价钱" autocomplete="off">
    220.       div>
    221.       <div class="modal-footer">
    222.       <button type="button" class="btn btn-default"
    223.       data-dismiss="modal">保存
    224.       button>
    225.       <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >提交更改button>
    226.       div>
    227.       div>
    228.     div>
    229.   div>
    230. div>
    231.  
    232. <script type="text/javascript" src="js/jquery.min.js">script>
    233. <script type="text/javascript" src="js/index.js">script>
    234. <script type="text/javascript" src="js/bootstrap.js">script>
    235.  
    236. body>
    237. html>

     3.3、编辑界面

    相关代码：

    1.  
      class="modal hide" id="myModal" role="dialog" >
    2.   
    3.    
    4.    
    5.      
    6.       返回
    7.       
    8.
  • data-dismiss="modal">保存

    • 总结

    以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取

  • 相关阅读:
    【MySQL】数据类型
    Waiting for table metadata lock
    R语言ggplot2可视化：使用patchwork包（直接使用加号+）将一个ggplot2可视化结果和数据表格横向组合起来形成最终结果图
    如何使用python连接mysql数据库编写爬虫代码。
    【Html/Css】Https证书申请、安装和使用（新手IIS安装参考）
    【Python】给定一个长度为n的数列，将这个数列按从小到大的顺序排列。1＜=n＜=200
    LeetCode 384. 打乱数组
    Learning with Mini-Batch
    一篇文章玩透awk
    python练习（5）
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126613189