1 Introduction
Designing end-of-course assignments, nowhere to start course design, too many total web page requirements? Don't have a suitable template? Database, java, python, vue, html jobs are complex and the workload is too large? Bi She has no clue and a series of questions. All the problems you want to solve will be solved in the WeChat public account "coding gas station"
2. Introduction of works
The library management system implemented by native js is implemented with html, css, and js technologies, which conforms to the knowledge system learned and is suitable for common homework and course design. If you need to obtain more works, please pay attention to the WeChat public account: coding gas station, If you need more information, you can leave a message in the WeChat background. Everyone is welcome to ask questions and exchange learning.
2.1. Introduction to works
The library management system implemented by native js is implemented in a conventional way, which meets most of the requirements. There are relevant documents to explain the code configuration. If you need to learn knowledge points from the code, then this work will be your best choice
2.2. Secondary development tools for works
The code of this work is relatively simple, and it is basically completed using the knowledge points learned in the classroom. You only need to modify the relevant introduction text and some pictures, and you can change it into your own unique code. After downloading the web work, you can use any editing software (for example: DW , HBuilder, NotePAD, Vscode, Sublime, Webstorm (all editors can be used), java, python and other related operations can also complete related secondary development with the tools they often use.
2.3. Technical introduction of the work
Technical aspects of html webpage works: use CSS to make webpage background images, mouse over and selected navigation color change effects, underline and other related technologies to beautify the relevant interface, and some use javascript for verification. Use html5, css3 and other related technologies to complete the technical layout. In this work, common layouts, common floating layouts, and flex layouts will be used. At the same time, html5 and css3 are used in terms of operation, and basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are used, and some js related knowledge is also used. For example, dom and bom are used to obtain relevant APIs of the browser, and css is used to beautify the style to make the interface more in line with web design
3. Demonstration of works
[coding gas station] library management system implemented by native js
3.1. Login page
Relevant code:
<!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. Management interface
Relevant code:
<!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="按工号查询" >
<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>
<button type="button" class="btn btn-success" id="user_add" data-toggle="modal"
data-target="#myModal" onclick="optionUserData(this);">新增</button>
<button type="button" class="btn btn-danger" id="user_delete" onclick="optionUserData(this);">删除</button>
<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. Edit interface
Relevant code:
<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>Summarize
The above is the whole content of this project. If you need to communicate or get the code, please pay attention to the WeChat public account: coding gas station to obtain