【HTML】네이티브 js로 구현한 라이브러리 관리 시스템

프로그래밍 언어 2023-06-04 23:12:00 독서 시간: null

1. 소개

과정 종료 과제를 설계하고, 과정 설계를 시작할 곳이 없고, 전체 웹 페이지 요구 사항이 너무 많습니까? 적합한 템플릿이 없습니까? Database, java, python, vue, html 작업이 복잡하고 워크로드가 너무 큽니까? Bi 그녀는 단서가없고 일련의 질문이 있습니다. 해결하고 싶은 모든 문제는 WeChat 공개 계정 "코딩 주유소"에서 해결됩니다.

2. 작품 소개

네이티브 js 구현 도서관 관리 시스템은 html, css 및 js 기술을 사용하여 구현됩니다.학습 지식 시스템에 부합하며 일반적인 숙제 및 코스 설계에 적합합니다.더 많은 작품을 얻으려면 WeChat을 주목하십시오 . 공용 계정: 코딩 주유소, 더 많은 정보가 필요하면 WeChat 배경에 메시지를 남길 수 있습니다. 누구나 질문하고 학습 내용을 교환할 수 있습니다.

2.1 작품 소개 

네이티브 js로 구현된 라이브러리 관리 시스템은 대부분의 요구 사항을 충족하는 기존 방식으로 구현됩니다. 코드 구성을 설명하는 관련 문서가 있습니다.코드에서 지식 포인트를 배워야 하는 경우 이 작업이 최선의 선택이 될 것입니다.

2.2 저작물의 2차 개발 도구

본 작업의 코드는 비교적 단순하며, 기본적으로 강의실에서 배운 지식 포인트를 활용하여 완성되며, 관련 소개 글과 일부 그림만 수정하면 자신만의 고유한 코드로 변경할 수 있습니다. 웹 작업, 모든 편집 소프트웨어를 사용할 수 있습니다(예: DW, HBuilder, NotePAD, Vscode, Sublime, Webstorm(모든 편집기 사용 가능), java, python 및 기타 관련 작업은 자주 사용하는 도구를 사용하여 관련 보조 개발을 완료할 수 있습니다. 사용.

2.3 작품의 기술적 소개

HTML 웹 페이지 작업의 기술적 측면: CSS를 사용하여 웹 페이지 배경 이미지, 마우스 오버 및 선택한 탐색 색상 변경 효과, 밑줄 및 기타 관련 기술을 사용하여 관련 인터페이스를 아름답게 만들고 일부는 확인을 위해 javascript를 사용합니다. html5, css3 및 기타 관련 기술을 사용하여 기술 레이아웃을 완성합니다.이 작업에서는 공통 레이아웃, 공통 플로팅 레이아웃 및 플렉스 레이아웃이 사용됩니다. 동시에 html5와 css3를 운용에 사용하고 div+css 구조, 폼, 하이퍼링크, 플로팅, 절대 위치 지정, 상대 위치 지정, 글꼴 스타일, 참조 동영상 등의 기본 지식을 사용하고 일부 js 관련 지식도 사용된다. 예를 들어, dom과 bom은 브라우저의 관련 API를 얻기 위해 사용되며 css는 스타일을 미화하여 인터페이스를 웹 디자인과 더 일치하도록 만듭니다.

3. 작품 시연

[코딩 주유소] 네이티브 js로 구현한 도서관 관리 시스템

3.1 로그인 페이지

 관련 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    
    
    <style>
    
        .div1{
            width:400px;
            height:220px;
            margin:0 auto;
            position:absolute;
            left:40%;
            top:35%;
            background: none repeat scroll 0 0 skyblue;
            border: 1px solid brown;
            height: 250px;
            padding-top: 30px;
            text-align: center;
        }
        
    </style>
    
</head>
<body>
    
    <div class="bg"></div>
    <div class="div1" id="loginBox">
         <form action="LoginServlet" method="post">
         <h3>图书管理系统</h3>
         <p>
         <input type="text" name="username"  id="username"  placeholder="账号" autocomplete="off"></p>
         <p>
         <input type="password" name="password" id="password" placeholder="密码">
         </p>
         <p style="color: red" class="tip"></p>
         <p><button type="button" id="login">登录</button></p>
         </form>
         
         <span><a href="3.html" style="color: brown">注册</a></span>
         
    </div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        
        
        $('#login').click(function(){
            username = $('.div1 #username').val();
            password = $('.div1 #password').val();

            if(username!='admin'||password!='admin'){


                $('.div1 .tip').text('用户名或密码错误');
                if(username!=''||password!=''){
                    $('.div1 .tip').text('用户名或密码不能为空');
                }
            }else{
                console.log('下一步');
                alert('用户登陆成功')
                window.location.href="2.html";
            }
        });
    });

</script>
    
</body>
</html>

3.2 관리 인터페이스

관련 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>2</title>
    <style>
    
        #div1{
            background-color: skyblue;
            width: auto;
            height:70px;
            font-size: 30px;
            text-align: center;
            line-height: 70px;
        }

        .modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1050;
            display: none;
            overflow: hidden;
            outline: 0;
        }
        .modal.fade .modal-dialog {
            transition: -webkit-transform 0.3s ease-out;
            transition: transform 0.3s ease-out;
            transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
            -webkit-transform: translate(0, -25%);
            transform: translate(0, -25%);
        }

        .modal.show .modal-dialog {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .modal-open .modal {
            overflow-x: hidden;
            overflow-y: auto;
        }

        .modal-dialog {
            position: relative;
            width: auto;
            margin: 10px;
            pointer-events: none;
        }

        .modal-content {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            pointer-events: auto;
            background-color: #fff
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 0.3rem;
            outline: 0;
        }

        .modal-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1040;
            background-color: skyblue;
        }

        .modal-backdrop.fade {
            opacity: 0;
        }

        .modal-backdrop.show {
            opacity: 0.5;
        }

        .modal-header {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: start;
            align-items: flex-start;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            border-top-left-radius: 0.3rem;
            border-top-right-radius: 0.3rem;
        }

        .modal-header .close {
            padding: 15px;
            margin: -15px -15px -15px auto;
        }
        
        .modal-title {
            margin-bottom: 0;
            line-height: 1.5;
        }
        
        .modal-body {
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 15px;
        }

        .modal-footer {

            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: flex-end;
            padding: 15px;
            border-top: 1px solid #e9ecef;
        }

        .modal-footer > :not(:first-child) {
            margin-left: .25rem;
        }

        .modal-footer > :not(:last-child) {
            margin-right: .25rem;
        }
        
        body {
            margin: 0;
            font-size: 1.3rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            text-align: center;
            background-color: #fff;
        }
        
        .table{
            background-color: skyblue;
            border: 1px solid brown;
        }

    </style>
    
</head>
<body onload="loadUserDatas()">
    
    <div id="div1">图书管理系统</div>
    <br><br>

    <div class="container">
    <table class="table" id="table" align="center">
    
  <thead>
   <tr>
    <th>序号</th>
    <th>图书编号</th>
    <th>图书名</th>
    <th>图书作者</th>
    <th>出版社</th>
    <th>图书数量</th>
    <th>图书价钱</th>
   </tr>
  </thead>
  <tbody id="tbody">
  </tbody>
 </table>
 
 <br>
 <caption>操作</caption>
   <br><br>
    <caption>
     <form class="form-inline" role="form">
     <input type="text" class="form-group form-control" autocomplete="off"  id="s_code" placeholder="按工号查询" >
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="text" class="form-group form-control" autocomplete="off" id="s_userName" placeholder="按图书名查询" >
    </form>
  </caption>
  <br>
 
 <form class="form-inline" role="form">

  <button type="button" class="btn btn-info" id="user_find" onclick="optionUserData(this);">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button type="button" class="btn btn-success" id="user_add" data-toggle="modal"
  data-target="#myModal" onclick="optionUserData(this);">新增</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <button type="button" class="btn btn-danger" id="user_delete" onclick="optionUserData(this);">删除</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <button type="button" class="btn btn-default" id="user_edit" data-toggle="modal"
  data-target="#myModal" onclick="optionUserData(this);">编辑</button>
    
 </form>
 
 <div class="modal hide" id="myModal" role="dialog" >
  <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      返回
      </button>
      </div>
      <div class="modal-body" id="modal-body">
      <label for="name">图书编号:</label>
      <input type="text" class="form-control" id="m_code" placeholder="请输入图书编号" autocomplete="off">
      <label for="name">图书名:</label>
      <input type="text" class="form-control" id="m_userName" placeholder="请输入图书名" autocomplete="off">
      <label for="name">图书作者:</label>
      <input type="text" class="form-control" id="m_sex" placeholder="请输入作者" autocomplete="off">
      <label for="name">出版社:</label>
      <input type="text" class="form-control" id="m_passWord" placeholder="请输入出版社" autocomplete="off">
      <label for="name">图书数量:</label>
      <input type="text" class="form-control" id="m_age" placeholder="请输入图书数量" autocomplete="off">
      <label for="name">图书价钱:</label>
      <input type="text" class="form-control" id="m_birthday" placeholder="请输入图书价钱" autocomplete="off">
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default"
      data-dismiss="modal">保存
      </button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >提交更改</button>
      </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

</body>
</html>

 3.3 편집 인터페이스

관련 코드:

 <div class="modal hide" id="myModal" role="dialog" >
  <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      返回
      </button>
      </div>
      <div class="modal-body" id="modal-body">
      <label for="name">图书编号:</label>
      <input type="text" class="form-control" id="m_code" placeholder="请输入图书编号" autocomplete="off">
      <label for="name">图书名:</label>
      <input type="text" class="form-control" id="m_userName" placeholder="请输入图书名" autocomplete="off">
      <label for="name">图书作者:</label>
      <input type="text" class="form-control" id="m_sex" placeholder="请输入作者" autocomplete="off">
      <label for="name">出版社:</label>
      <input type="text" class="form-control" id="m_passWord" placeholder="请输入出版社" autocomplete="off">
      <label for="name">图书数量:</label>
      <input type="text" class="form-control" id="m_age" placeholder="请输入图书数量" autocomplete="off">
      <label for="name">图书价钱:</label>
      <input type="text" class="form-control" id="m_birthday" placeholder="请输入图书价钱" autocomplete="off">
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default"
      data-dismiss="modal">保存
      </button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" >提交更改</button>
      </div>
      </div>
    </div>
  </div>

요약하다

위 내용은 이 프로젝트의 전체 내용입니다.통신하거나 코드를 받아야 하는 경우 WeChat 공개 계정: 코딩 주유소에 주의하여 획득하십시오.

추천

출처blog.csdn.net/pandas23/article/details/126613189
추천
행
12 Zabbix4.4.0 sendEmail 이메일 알림 시스템 최적화 돌아 가기 :. 자기 zabbix 하이라이트 Zabbix4.4.0 시스템이 가르치는 당신이 sendEmail 이메일 알림을 실현
@SpringBootTest unit testing the use of different versions of JUnit
IDEA または SVN は古いプロジェクトの SVN アドレスを変更します
고정 경로를 구성 Centos7
Продвинутые алгоритмы для больших данных: гиперлоглог, подсчет количества различных элементов в больших данных
수학적 채널 적용 (10)-유압 펌프의 이론적 흐름 및 체적 효율
ABP MVC의에서 일부 기능
재귀-피보나치 시퀀스 (코드, 분석, 어셈블리)
Java 클래스 및 객체(7,000 단어로 자세한 설명!!! 클래스와 객체를 철저하게 이해할 수 있도록 안내합니다)
어떻게 코드 편집기 도구를 사용하여 vscode-
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com