图书管理系统html前端

千次阅读

2020-08-30 19:44:36

登陆首页界面：index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图示管理系统</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="图书管理" />
    <meta name="description" content="图书管理系统" />
    
    <script src="./scripts/boot.js" type="text/javascript"></script>

    <script src="./scripts/core.js" type="text/javascript"></script>

    <style type="text/css">
    html, body{
        margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
    }

    .logo
    {
        font-family:"微软雅黑",	"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size:28px;
        font-weight:bold;        
        cursor:default;
        position:absolute;top:25px;left:14px;        
        line-height:28px;
        color:#444;
    }    
    .topNav
    {
        position:absolute;right:8px;top:12px;        
        font-size:12px;
        line-height:25px;
    }
    .topNav a
    {
        text-decoration:none;        
        font-weight:normal;
        font-size:12px;
        line-height:25px;
        margin-left:3px;
        margin-right:3px;
        color:#333;        
    }
    .topNav a:hover
    {
        text-decoration:underline;        
    }   
     .mini-layout-region-south img
    {
        vertical-align:top;
    }
    </style>
</head>
<body>
<div class="mini-layout" style="width:100%;height:100%;">
    <div title="north" region="north" class="app-header" bodyStyle="overflow:hidden;" height="80" showHeader="false" showSplit="false">
        <div class="logo" onclick="window.location.href='index.html'" style="cursor:pointer">图书管理系统</div>

        <!-- <div class="topNav">    
            <a href="../index.html">首页</a> |
            <a href="../demo/index.html">在线示例</a> |
            <a href="../docs/api/index.html">Api手册</a> |            
            <a href="../index.html#tutorial">开发教程</a> |
            <a href="../index.html#quickstart">快速入门</a>
        </div> -->

        <div style="position:absolute;right:12px;bottom:8px;font-size:12px;line-height:25px;font-weight:normal;">
            皮肤：
            <select id="selectSkin" onchange="onSkinChange(this.value)" style="width:100px;margin-right:10px;" >
                <optgroup label="传统风格">
                    <option value="default">default</option>
                    <option value="blue">blue</option>
                    <option value="pure">pure</option>
                    <option value="gray">gray</option>                
                    <option value="olive2003">olive2003</option>
                    <option value="blue2003" >blue2003</option>
                    <option value="blue2010" >blue2010</option>
                    <option value="bootstrap">bootstrap</option>   
                    <option value="jqueryui-cupertino">jqueryui-cupertino</option>
                    <option value="jqueryui-smoothness">jqueryui-smoothness</option>                                     
                </optgroup>
                <optgroup label="扁平风格">
                    <option value="cupertino" selected>cupertino</option>
                    <option value="metro-white" >metro-white</option>
                    <option value="metro-green">metro-green</option>
                    <option value="metro-orange">metro-orange</option>
                    <option value="metro-gray">metro-gray</option>
                    <option value="metro-blue">metro-blue</option>                    
                </optgroup>
            </select>
            尺寸：
            <select id="selectMode" onchange="onModeChange(this.value)" style="width:100px;" >
                <option value="default">Default</option>
                <option value="medium" selected >Medium</option>
                <option value="large">Large</option>                
            </select>
        </div>
    </div>
    <div showHeader="false" region="south" style="border:0;text-align:center;" height="25" showSplit="false">
        Copyright © 上海普加软件有限公司版权所有 
    </div>
    <div region="west" title="在线演示" showHeader="true" bodyStyle="padding-left:1px;" showSplitIcon="true" width="230" minWidth="100" maxWidth="350">
        <ul id="demoTree" class="mini-tree" showTreeIcon="true" style="width:100%;height:100%;"
             enableHotTrack="true" onbeforeexpand="onBeforeExpand" >
           

            <li>
			    <span expanded="false">用户信息</span>
			    <ul>    
                    <li><a href="datagrid.html" target="main">用户管理 </a></li>
                    <li><a href="datagrid.html" target="main">部门管理 </a></li>
                    <li><a href="datagrid.html" target="main">部门管理1 </a></li>
			    </ul>
		    </li> 
		    
		    <li>
			    <span expanded="false">图书信息</span>
			    <ul>    
                    <li><a href="book.html" target="main">图书管理</a></li>
                    <li><a href="book.html" target="main">借还管理 </a></li>
                   
			    </ul>
		    </li> 
        </ul>        
    </div>
    <div title="center" region="center" style="border:0;">
        <div id="mainTabs" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" 
            onactivechanged="onTabsActiveChanged" 
        >
            <div title="Demo">
                <iframe onload="onIFrameLoad()" src="welcome.html" id="mainframe" frameborder="0" name="main" style="width:100%;height:100%;" border="0"></iframe>
            </div>
            <div title="Code">
                <iframe id="codeframe" frameborder="0" name="code" style="width:100%;height:100%;" border="0"></iframe>
            </div>
        </div>        
    </div>

    
</div>
</body>
</html>
<script type="text/javascript">
    mini.parse();
    function onBeforeExpand(e) {
        var tree = e.sender;
        var nowNode = e.node;
        var level = tree.getLevel(nowNode);

        var root = tree.getRootNode();        
        tree.cascadeChild(root, function (node) {
            if (tree.isExpandedNode(node)) {
                var level2 = tree.getLevel(node);
                if (node != nowNode && !tree.isAncestor(node, nowNode) && level == level2) {
                    tree.collapseNode(node, true);
                }
            }
        });

    }
       
</script>

登陆的起始界面（登陆窗口）：login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>用户登录</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
    body
    {
        width:100%;height:100%;margin:0;overflow:hidden;
    }
    </style>
    <script src="./scripts/boot.js" type="text/javascript"></script>
    
</head>
<body >   
<div id="loginWindow" class="mini-window" title="用户登录" style="width:350px;height:185px;" 
   showModal="true" showCloseButton="false"
    >

    <div id="loginForm" style="padding:15px;padding-top:10px;">
        <table >
            <tr>
                <td style="width:60px;"><label for="username$text">帐号：</label></td>
                <td>
                    <input id="username" name="username"  class="mini-textbox" required="true" style="width:150px;"/>
                </td>    
            </tr>
            <tr>
                <td style="width:60px;"><label for="pwd$text">密码：</label></td>
                <td>
                    <input id="pwd" name="pwd" onvalidation="onPwdValidation" class="mini-password" requiredErrorText="密码不能为空" required="true" style="width:150px;" onenter="onLoginClick"/>
                    &nbsp;&nbsp;<a href="#" >忘记密码?</a>
                </td>
            </tr>            
            <tr>
                <td></td>
                <td style="padding-top:5px;">
                    <a onclick="onLoginClick" class="mini-button" style="width:60px;">登录</a>
                    <a onclick="onResetClick" class="mini-button" style="width:60px;">重置</a>
                </td>
            </tr>
        </table>
    </div>

</div>


    

    
    <script type="text/javascript">
        mini.parse();

        var loginWindow = mini.get("loginWindow");
        loginWindow.show();

        function onLoginClick(e) {
            var form = new mini.Form("#loginWindow");
            form.validate();
            if (form.isValid() == false) return;

            var o = form.getData();
            $.ajax({
                url: "userLogin",
                type: 'post',
                async: false,//非异步 
                data: [o][0],
                cache: false,
                success: function (text) {
                    if(text!="success"){
                    	alert("账号或密码错误！");
                    }else{
                    	loginWindow.hide();
                        mini.loading("登录成功，马上转到系统...", "登录成功");
                        setTimeout(function () {
                            window.location = "./index.html";
                        }, 1500);//每隔1.5秒执行一次当前函数。当前功能：1.5秒以后跳转到首页 
                    }
                }
            });
            
            
        }
        function onResetClick(e) {
            var form = new mini.Form("#loginWindow");
            form.clear();
        }
        /
        function isEmail(s) {
            if (s.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
                return true;
            else
                return false;
        }
        function onUserNameValidation(e) {
            if (e.isValid) {
                if (isEmail(e.value) == false) {
                    e.errorText = "必须输入邮件地址";
                    e.isValid = false;
                }
            }
        }
        function onPwdValidation(e) {
            if (e.isValid) {
                if (e.value.length < 5) {
                    e.errorText = "密码不能少于5个字符";
                    e.isValid = false;
                }
            }
        }
    </script>

</body>
</html>

功能主页界面：datagrid.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DataGrid 数据表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="./css/demo.css" rel="stylesheet" type="text/css" />

    <script src="./scripts/boot.js" type="text/javascript"></script>
</head>
<body>
    <h1>用户管理</h1>      

    <div style="width:100%;">
        <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" onclick="add()">增加</a>
                        <a class="mini-button" iconCls="icon-add" onclick="edit()">编辑</a>
                        <a class="mini-button" iconCls="icon-remove" onclick="remove()">删除</a>       
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
                        <a class="mini-button" onclick="search()">查询</a>
                    </td>
                </tr>
            </table>           
        </div>
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:100%;" allowResize="true"
        url="findUserInfoList"  idField="userid" multiSelect="true" 
    >
        <div property="columns">
            <!--<div type="indexcolumn"></div>        -->
            <div type="checkcolumn" ></div>        
            <div field="userno" width="120" headerAlign="center" allowSort="true">帐号</div>    
            <div field="username" width="120" headerAlign="center" allowSort="true">姓名</div>    
            <div field="sex" width="100" renderer="onGenderRenderer">性别</div>
            <div field="address" width="100" allowSort="true">地址</div>
            <div field="phone" width="100" >电话</div>
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd hh:mm:ss" allowSort="true">创建日期</div>    
        </div>
    </div>

    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("createtime", "desc");

        
        function add() {
            
            mini.open({
                url: bootPATH + "../userInfoWindow.html",
                title: "新增用户", width: 600, height: 260,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {

                    grid.reload();
                }
            });
        }
        function edit() {
         
            var row = grid.getSelected();//选中一条对象
            if (row) {
                mini.open({
                    url: bootPATH + "../userInfoWindow.html",//以boot.js为默认地址
                    title: "编辑员工", width: 600, height: 260,
                    onload: function () {
                        var iframe = this.getIFrameEl();
                        var data = { action: "edit", id: row.userid};
                        iframe.contentWindow.SetData(data);
                        
                    },
                    ondestroy: function (action) {
                        grid.reload();
                        
                    }
                });
                
            } else {
                alert("请选中一条记录");
            }
            
        }
        //删除
        function remove() {
            
            var rows = grid.getSelecteds();//可以选中多条记录
            if (rows.length > 0) {
                if (confirm("确定删除选中记录？")) {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];
                        ids.push(r.userid);
                    }
                    var id = ids.join(',');//id1,id2,id3
                    grid.loading("操作中，请稍后......");
                    $.ajax({
                        url: "deleteUserInfo?userids=" +id,
                        success: function (text) {
                            grid.reload();
                        },
                        error: function () {
                        }
                    });
                }
            } else {
                alert("请选中一条记录");
            }
        }
        function search() {
            var key = mini.get("key").getValue();
            grid.load({ key: key });
        }
        function onKeyEnter(e) {
            search();
        }
        /
        function onBirthdayRenderer(e) {
            var value = e.value;
            if (value) return mini.formatDate(value, 'yyyy-MM-dd');
            return "";
        }
        function onMarriedRenderer(e) {
            if (e.value == 1) return "是";
            else return "否";
        }
        var Genders = [{ id: 1, text: '男' }, { id: 0, text: '女'}];        
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }
    </script>
</body>
</html>

页面展示：

在这里插入图片描述

更多相关内容

图书管理系统前端代码设计.zip
2021-07-15 22:35:19

一个前端的图书管理系统页面，纯HTML，黄色调，可以直接嵌套在项目使用，兼容，如果是vue等项目，直接改改也是可以用的

收起
图书管理系统(纯HTML).rar
2020-02-23 02:07:01

一个前端的图书管理系统页面，纯HTML，黄色调，可以直接嵌套在项目使用，兼容，如果是vue等项目，直接改改也是可以用的

收起
图书管理系统管理员和用户前端
2018-04-02 17:29:53

该文档是网上图书管理系统的前端代码，包括用户和管理员两部分，主要是HTML，CSS和js写的

收起
图书管理系统(纯HTML)
2022-05-06 09:29:25

图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)图书管理系统(纯HTML)...

收起
html图书管理系统
2018-12-30 16:03:07

完整的前端代码 图书管理系统~~

收起
基于javaweb的图书管理系统（前端+后端）源码.zip
2022-06-02 12:12:19

一个基于javaweb的图书管理系统，前端由HTML/CSS/JavaScript编写，后端由java编写。功能说明：支持用户基本借书还书支持书籍名模糊搜索支持用户先添加再整体借书支持用户修改个人信息支持借书时间及借书...

收起

前端图书管理系统

千次阅读 2022-01-06 20:30:45

创建商城管理系统文件在pycharm里面创建 Django项目作为

本案例完成图书管理系统的增删改查功能等等等等……

（一）创建Django项目-- books

设置Django项目的位置与名称

（二)静态资源的创建

1、静态资源目录创建

在这里插入图片描述

2、创建样式文件

在static文件里面创建css目录，继续在css里面创建main.css样式文件
为css文件里面编辑main.css样式
本此使用样式未以下代码，可供参考，也可自己设置其他样式自行使用

* {
    margin: 0px;
    padding: 0px;
    border: none;
}

html, body {
    height: 100%;
}

.w1200 {
    width: 1200px;
}

.layui-header, .layui-footer {
    text-align: center;
    margin: auto;
}

.layui-header {
    padding: 40px 0px;
    line-height: 1.5em;
    position: fixed;
    background-image: linear-gradient(to bottom, olive, deepskyblue, cornflowerblue, mediumorchid);
}

.layui-footer {
    padding: 30px 0px;
    position: relative;
    background-image: linear-gradient(to bottom, mediumorchid, cornflowerblue, deepskyblue, olive);
}

.layui-footer a {
    margin: 0px 20px;
}

.layui-footer a:hover {
    color: red;
}

.layui-footer p {
    margin: 15px 0px;
}

.bold {
    font-weight: bold;
}

.middle {
    display: flex;
    flex-direction: row;
    margin: 5px 0px;
    min-height: 500px;
}

.left-menu {
    flex: 1;
    background: azure;
    padding: 20px;
}

.right-content {
    flex: 5;
    margin-left: 5px;
    background: azure;
    padding: 20px;
}

.test-info h4 {
    font-size: 20px;
    font-weight: bolder;
}

.test-info p {
    font-size: 15px;
    line-height: 2em;
    text-indent: 2em;
}

form {
    margin: auto;
}

form table {
    width: 400px;
    margin: auto;
    border: 1px solid black;
    padding: 50px 20px !important;
}

form table th {
    width: 100px;
    text-align: right;
}

form table td {
    width: 250px;
    padding: 0px 10px;
}

tr {
    line-height: 4em;
}

table tr:last-child {
    text-align: center;
}

table caption {
    font-weight: bolder;
    padding: 10px 0px;
    font-size: 1.5em;
}

.stuinfo {
    width: 90% !important;
    margin: auto;
    text-align: center;
}

.stuinfo table {
    margin: auto !important;
    width: 90% !important;
}

.stuinfo table td {
    width: 25%;
}

.stuinfo table tr {
    border-bottom: 1px solid black;
}

.stuinfo thead {
    background: black;
}

.stuinfo thead th {
    color: white;
    border-right: 1px solid white;
}

.stuinfo table tr:nth-child(even) {
    background: #2D93CA;
}

.stuinfo table tr:hover td {
    background: #00FFFF;
}

3、添加 layui 框架

下载连接： https://pan.baidu.com/s/1MuQwhjX-SZ4FHZCTpoa3Fg
提取码：tg81

4、添加脚本 JS 文件

在static文件目录里面创建一个js目录，再创建名为main.js文件

layui.config({
    base:'../static/js'
}).use(['jquery'],function (){
    var $ = layui.$;
    setInterval(function (){
        var date = new Date();
        var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
        var timeContent = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + weeks[date.getDay()] + " " + prefix(date.getHours()) + ":" + prefix(date.getMinutes()) + ":" + prefix(date.getSeconds());
        $('#time').text(timeContent);
    },1000);

    var prefix = function (num) {
        if (num < 10) {
            return "0" + num;
        }else {
            return num + ""
        }
    }
});

（三）完成基本配置

1、配置数据库链接信息

在配置文件settings.py里配置数据库信息（密码要换成自己数据库的密码）

在这里插入图片描述

2、静态文件目录的配置

在settings.py里配置静态文件目录

3、进行数据的迁移

(1)创建数据库-- books

在这里插入图片描述

（2）设置连接数据库模块

项目books下，init.py 文件里面配置

import pymysql

pymysql.install_as_MySQLdb()

(3) 执行数据的迁移

在控制台依次执行两条数据迁移命令，然后生成数据表
python manage.py makemigrations
python manage.py migrate

在这里插入图片描述

查看生成的数据表

(4)添加创建超级管理员

在控制台输入 python manage.py createsuperuser
此次创建账户名和密码： admin和admin123

4、路由配置

（1）路由需求

主页面：路由地址为空，对应视图indexView，名称为index
添加图书：路由地址addbook/，对应视图addBookView，名称为addbook
显示图书：路由地址showbook/，对应视图showBookView，名称为showsbooks
删除图书：路由地址deletebook/，对应视图deleteBookView，名称为deledebooks

（2）主路由的配置

在这里插入图片描述

from django.contrib import admin
from django.urls import path

from index.views import indexView, addBookView, showBookView,deleteBookView,

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',indexView,name='index'),
    path('addbook/',addBookView,name='addbook'),
    path('showbook/',showBookView,name='showbook'),
    path('deletebook/',deleteBookView,name='deletebook'),
]

(四)index应用的创建

1、创建index

控制台执行 python manage.py startapp index

2、注册index应用

在配置文件settings.py 里面注册index应用

3、创建图书模型-- Book

在index的models.py里面创建Book模型类

from django.db import models

class Book(models.Model):
    id = models.AutoField(primary_key=True)
    mingzi = models.CharField(max_length=20)
    zuozhe = models.CharField(max_length=20)
    shijian = models.CharField(max_length=20)
    leixing  = models.CharField(max_length=20)

    def __str__(self):
        return str(self.mingzi)

4、创建视图函数

在index里面的view.py里面创建四个视图函数，暂时不写值
这就是主路由文件里导入的三个视图函数

def indexView(request):
    pass

def addBookView(request):
    pass

def showBookView(request):
    pass

def deleteBookView(request):
    pass

5、做数据迁移，生成图书表

在控制台执行以下两条命令
python manage.py makemigrations
python manage.py migrate index 0001_initial

在这里插入图片描述

查看生成的图书表

(五)修改视图函数

1、定义初始化函数 - init()

2、修改首页视图函数 - indexView

3、修改添加学生视图 - addBookView

4、修改显示学生视图 - showBookView

5、删除线上图书视图 - deledtBookView

from django.shortcuts import render

from index.models import Book

def init():
   return {
       '名字':'梦回1998',
       '作者':'张二娃',
       '时间':'1999年1月7日',
       '类型':'文言文'
   }

def indexView(request):
   baseInfos = init()
   title = '图书管理首页'
   return render(request,'index.html',locals())

def addBookView(request):
   baseInfos = init()
   title = '添加学生页面'
   result = ''
   # 处理POST请求
   if request.method == 'POST':
       mingzi = request.POST.get('mingzi')
       zuozhe = request.POST.get('zuozhe')
       shijian = request.POST.get('shijian')
       leixing = request.POST.get('leixing')

       stu_dict = dict(mingzi=mingzi, zuozhe=zuozhe, shijian=shijian, leixing=leixing)

       student = Book.objects.create(**stu_dict)

       student.save()

       result = '添加图书信息成功'
   return render(request, 'addbook.html', locals())

def showBookView(request):
   baseInfos = init()
   title = '显示所有图书页面'
   students = Book.objects.all()
   return render(request,'showbook.html',locals())

def deleteBookView(request):
   baseInfos = init()
   title = '删除书本页面'
   if request.method == 'POST':
       id = request.POST.get('id')

       student = Book.objects.get(id=id).delete()
  #在删除后，显示剩下数据
   students = Book.objects.all()
   return render(request, 'deletebook.html', locals())

(六)创建模板

1、模板框架

在templates里创建frame.html

2、创建首页模板

在templates里面创建index.html文件

{% extends 'frame.html' %}
{% block content %}
<div class="test-info">
<h4> [测试要求] </h4>
<p>1.完成左侧2个菜单的路由配置,对应的模板页面分别是adds tudent . htm1和showstudent . html</p>
<p>2.完成模板页面adds tudent.htm1和showstudent . htm1的编写</p>
<p>3.完成student模型的编写并使用命令在数据库中生成表</p>
<p>4.完成indexView视图函数的编写</p>
<p>5.完成addStudentView视图函数的编写</p>
<p>6.完成showStudentView视图函数的编写</p>
<p>7.完成数据库的建库和相关数据库连接的配置</p>
<p>8.具体要求参见《Web应用程序设计》期末检测试卷A</p>
</div>
{% endblock content %}|

启动项目测试首页是否显示

3、创建添加图书信息模板

在templates里创建addbook.html

{% extends 'frame.html' %}

{% block content %}
    <div>
        <h3>
            <center>
                <p style="color: red;">{{ result }}</p>
            </center>
        </h3>
        <hr/>
        <div class="myform">
            <form action="{% url 'addstudent' %}" method="post">
                {% csrf_token %}
                <table>
                    <caption>
                        <h3>添加学生信息</h3>
                    </caption>
                    <tr>
                        <th>学生姓名:</th>
                        <td>
                            <input type="text" name="name" id="studentName" placeholder="请输入学生姓名"
                                   class="layui-input" verify="required"/>
                        </td>
                    </tr>
                    <tr>
                        <th>学生学号:</th>
                        <td>
                            <input type="text" name="number" id="studentNo" placeholder="请输入学生学号" class="layui-input"
                                   pay-verify="required"/>
                        </td>
                    </tr>
                    <tr>
                        <th>学生班级:</th>
                        <td>
                            <input type="text" name="clazz" id="studentClazz" placeholder="请输入学生班级"
                                   class="layui-input" verify="required"/>
                        </td>
                    </tr>
                    <tr>
                        <th>学生性别:</th>
                        <td>
                            <input type="radio" name="gender" checked="checked" value="男"/>男生
                            <input type="radio" name="gender" value="女"/>女生
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="submit-row">
                            <input type="submit" class="layui-btn">
                            <input type="reset" class="layui-btn">
                        </td>
                    </tr>
                </table>

            </form>
        </div>
    </div>
{% endblock content %}

访问添加图书

4、创建显示图书信息模板

在templates里创建showstudent.html

{% extends 'frame.html' %}

{% block content %}

    <div class="stuinfo">
        <table>
            <caption>图书信息</caption>
            <thead>
            <tr>
                <th>书11</th>
                <th>书22</th>
                <th>书33</th>
                <th>书44</th>
            </tr>
            </thead>

            <tbody>
            {% for stu in book %}
                <tr>
                <td>{{ stu.mingzi }}</td>
                <td>{{ stu.zuozhe }}</td>
                <td>{{ stu.shijian }}</td>
                <td>{{ stu.leixing }}</td>
                </tr>

            {% endfor %}
            </tbody>


        </table>
    </div>


{% endblock content %}

访问显示图书信息

5、创建删除图书信息模板

在templates里创建deletestudent.html

{% extends 'frame.html' %}

{% block content %}

    <div class="stuinfo">
        <table>

            <caption>学生信息</caption>
            <thead>
            <tr>
                <th>书11</th>
                <th>书22</th>
                <th>书33</th>
                <th>书44</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            {% for stu in students %}
                <tr>
                <td>{{ stu.mingzi }}</td>
                <td>{{ stu.zuozhe }}</td>
                <td>{{ stu.shijian }}</td>
                <td>{{ stu.leixing }}</td>
                <td>
                    <form action="../deletestudent/" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="id" value="{{ stu.id }}">
                        <input type="submit" value="✘">
                    </form>
                </td>
                </tr>

            {% endfor %}
            </tbody>

        </form>
        </table>
    </div>


{% endblock content %}

- 访问删除图书信息页面
- 实现删除后依然显示当前页面

总结

本学期过的很快，转眼都到期末了。这次实训也要结束了。通过这次实训课程，把我所学到的知识应该说是所有都考验了一遍，我这次做的项目是本次期末考试内容的改版，最开始我也想过做其他的项目，看了商城管理系统，里面的跳转，结算金钱，后台货物数量等等，让我头疼。就选择了学生管理系统，自己更改为图书管理系统马马虎虎的跟着做了一遍，从开始的创建Djnago目录，一步一步的跟着配置资源，让我有了一次难忘的开发经历。通过我这次做项目的情况，就大家都会有的一种感觉，现在所学到的知识与自己想要做到的效果有很大的差距，自己的专业知识存储容量还有大大的空间。总体来说，对这次实训还挺满意的，尽管做得慢，也很累，但是让我认识到熟能生巧这个词语，一次慢，两次慢可以，但是在以后我不会次次慢，也会有成长的时候。也很感谢老师的认真教导，有困难询问老师，都会尽心尽职的教我怎么做，让我去查询什么资料，说在我的博客的哪一篇，什么内容，真的很贴心。
这次实训中，没有学习到的东西，实在是太多了，自己还需要学习更多的知识，毕竟以后去向岗位的话，啥啥都不会就太low了。哈哈
以后的日子我相信我会继续努力，激励自己，一点一点的学。加油！

收起

展开全文

django

咖啡之音图书管理系统HTML页面.zip
2020-08-06 21:03:28

前端页面

收起
图书管理系统(SpringBoot,thymeleaf).zip
2021-03-23 09:47:42

一个基于SpringBoot+Thymeleaf渲染的图书管理系统 功能: 用户: a.预约图书 b.查看预约记录 c.还书管理员: a.添加图书 b.处理预约(借书) c.查看借阅记录另: 1.当用户过了还书日期仍旧未还书时会发邮件通知 2.当有书...

收起

纯前端vue+bootstrap实现图书管理系统的添加、删除功能

千次阅读 2022-04-07 18:13:22

1、纯前端vue+bootstrap实现图书管理系统的添加、删除功能最终效果界面 2、添加效果 3、删除效果 4、前端代码：图书管理系统.html <!DOCTYPE html> <html xmlns:v-on=...

1、纯前端vue+bootstrap实现图书管理系统的添加、删除功能最终效果界面

2、添加效果

3、删除效果

4、前端代码：图书管理系统.html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>图书管理系统</h2>
        </div>
        <div class="panel-body form-inline">
            <label for="">id:<input type="text" class="form-control" v-model="id"> </label>
            <label for="">图书名称:<input type="text" class="form-control" v-model="name"> </label>
            <input type="button" value="添加" class="btn btn-primary" @click="add">
        </div>
    </div>
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>图书名称</th>
            <th>添加时间</th>
            <th>添加操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in arr" :key="item.id">
            <td v-text="item.id"></td>
            <td v-text="item.name"></td>
            <td v-text="item.time"></td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var vm=new Vue({
        el:'.app',
        data:{
            arr:[
                {'id':1,'name':'三国演义','time':new Date()},
                {'id':2,'name':'红楼梦','time':new Date()},
                {'id':3,'name':'西游记','time':new Date()},
                {'id':4,'name':'水浒传','time':new Date()}
            ],
            id:'',
            name:''
        },
        methods:{
            add(){
                this.arr.push({'id':this.id,'name':this.name,'time':new Date()});
                this.id=this.name='';
            },
            del(id){
                var index = this.arr.findIndex(item=>{
                    if(item.id==id){
                        return true;
                    }
                })
                this.arr.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

收起

展开全文

vue.js vue bootstrap

图书系统HTML模版3
2017-09-05 10:32:58

图书系统HTML模版，包括登陆，主界面，新增页面，注册页面。需要图书系统的，下载地址： http://download.csdn.net/user/ajlgl/uploads

收起
基于Python Django实现的图书管理系统含全部源代码和设计报告.rar
2021-07-09 23:24:48

# 图书管理系统说明V2.0 ### 项目介绍及再版说明（2016-01-24）其实一开始做这个小项目在2014年的9到11月，当时是作为加入Pureweber开发组的大作业完成的。虽然用了两个月的时间，但是做出的东西还是有很多的...

收起
java开发课程设计SSM搭建的图书管理系统项目源代码.zip
2022-06-08 09:31:35

java开发课程设计SSM搭建的图书管理系统源代码。这个项目是基于springmvc mybatis 框架前端使用jsp+layui前端模板搭建而成实现了用户注册/登录和增删改查还有书籍的增删改查.是个应付课设的万能模板!java开发课程...

收起
基于SSM图书管理系统
2022-03-02 19:58:53

环境：开发工具：idea，数据库：MySQL5.7 jdk1.8 架构：springMVC，前端jsp 主要功能用户:查看公告、借阅管理；管理员：借阅管理、图书管理、读者管理、类型管理等

收起

Java ssm
基于vue3+element-plus+springboot+mybatis+jpa+mysql的图书管理系统源码毕业设计论文
2022-05-24 22:00:18

本系统作为vue3初学者的入门系统，通过开发经典的《图书管理系统》模拟项目，使vue3的初学者快速掌握从无到有的搭建一套vue3+element-plus前端+spring boot后端+mysql数据库的前后端分离的现代主流项目架构。...

收起
基于Springboot图书管理系统
2022-02-27 23:11:01

环境：开发工具：idea，数据库：MySQL5.7 jdk1.8 架构：spring boot，前端bootstrap 主要功能用户管理、菜单管理、数据字典管理、日志信息等；

收起
java web 基于SSH图书管理系统 |毕业设计
2022-04-07 10:32:09

java web 基于SSH图书管理系统 |毕业设计包括了图书类别管理，图书信息管理，读者类型管理，读者信息管理，借阅信息管理等待。

收起
基于SSM框架的图书管理系统【项目源码+数据库脚本】
2022-03-20 23:09:31

本项目是一套SSM框架的图书管理系统，主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。包含：项目源码、数据库脚本等，该项目可以直接作为bishe使用。项目都经过严格调试，确保可以...

收起
Web开发图书馆管理系统运用layui框架
2022-05-07 22:48:23

项目背景：随着人们知识水平层次的提高，图书馆成为日常生活中不可缺少的一部分，面对图书存书量和业务量庞大，仅靠传统的记帐式管理不可行，图书管理也变得困难而重要，为了拥有可靠的图书管理系统对图书进行有效的...

收起
基于Python+HTML+MySQL的图书借阅管理系统.zip
2022-06-08 17:05:43

前端: HTML + JavaScript + CSS 5.2依赖库 服务器库：BaseHTTPServer 连接MySQL库：MySQLdb 控制台设置库：Sys URL解析库：Urllib 时间库：Time 时间库：Datetime 操作系统库：os 5.3编码方式 ...

收起
基于Java web的图书管理系统
2022-04-05 17:01:56

项目名称：基于Java web的图书管理系统（Library) 当前版本：V2.0.2版本难度等级：✩✩ 复杂程度：✩✩✩✩ 用户类型：双角色（普通用户和管理员）设计模式：MVC（jsp+servlet+javabean) 项目架构：B/S架构 ...

收起
网络教育本科毕业设计图书管理系统源码.zip
2022-05-28 09:47:20

网络教育本科毕业设计图书管理系统源码。springboot+vue+mysql+redis 前后分离快速开发框架开发的图书管理系统，本科教育的毕业设计。已毕业。系统已完成功能：系统管理：用户管理、角色管理、菜单管理、日志查询...

收起
基于javaweb的图书管理系统毕业设计源码.zip
2022-06-13 10:28:14

基于javaweb的图书管理系统毕业设计源码，基于javaweb的图书管理系统，前端由JavaScript编写，后端由javaEE编写，代码注释完整，新手也可尝试自己操作，高分必看功能说明如下支持用户基本借书还书支持书籍名模糊...

收起
javaweb项目之基于SSM框架的图书管理系统源码.zip
2021-01-05 14:57:49

基于SSM框架的图书管理系统，对图书增删改查，图书模糊查询，分类查询，价格查询，分页查询等等，删除，批量删除，前端基于layui框架，环境为jdk8.0+Tomcat8.0

收起

javaweb
图书管理系统的前端代码设计_【免费毕设】PHP教材管理系统设计（源代码+论文）...
2020-11-21 20:26:31

点击上方“蓝字”关注我们目录系统设计在电子计算机技术发展日新月异的今天，计算机技术、网络技术和信息技术的发展和应用早已深入到了各行各业，并...高校教材管理系统是计算机技术和网络迅速发展的一个高校办公...

点击上方“蓝字”关注我们目录
系统设计
在电子计算机技术发展日新月异的今天，计算机技术、网络技术和信息技术的发展和应用早已深入到了各行各业，并发挥着它们的巨大潜力，特别是网络的高速化、广泛化发展和运用。在我国，各类企业的改革，一切都在朝着社会化、高效化、智能化发展，管理体制的改革更是进行着大手笔。但是，国家高校职能的改革程度还远远不够。高校教材管理系统是计算机技术和网络迅速发展的一个高校办公应用解决方案。高校教材管理系统将Internet网络技术与现代管理观念相融合，针对信息技术的特点对办公系统进行规划和重构，对高校内部信息流进行优化及合理配置，生成动态的、安全的、专有的数字化信息源，将办公体系全面自动化，流程化，数字化。以此为桥梁，横向连接同事间的交流与协同工作，纵向实现上下级一体化的高效办公体系，从而更明确、更有效地支持高校的管理和决策。

§1.2 设计方案

本系统采用B/S结构，所有的程序及数据都放在服务器上，终端在取得相应的权限后使用Web页面浏览，录入，修改等功能。在语言方面使用PHP语言，在数据库上我们为了节约成本，采用了免费的MySQL数据库(当然，也可以移植到Oracle上)，服务器使用Apache Web服务器。

处理流程如下图：

系统实现
登    录:四种不同权限的人,管理员/系级人员/老师/学生,不同人登录后界面应有所不同,如果相同要做到不同功能并是是所有人都可用.

教材征订:教师通过每年的开课计划进行教材征订,征订的结果(订单号,教材编号,教材名,教材类型,作者,出版社及版本号,征订时间,征订人,所订班级,征订数量)由系级人员审批并保存,最后由管理员形成征订表单.之后是由采购员去买,与我们无关.

教材入库:和征订单比对后入库(可有可无),入库字段:教材编号,教材名,作者,出版社及版本号,市场价,实购价,数量,入库时间.

教材发放:在首页通知什么时间内领书,各班班长过来领.并记录领书人和所属班级.如果教师领书,只能领一本.每笔记录库存相应减少(在管理员界面实现)

相关查询:四种权限人员都可以查看教材情况(教材编号,教材名,教材类型,作者,出版社,库存量)

        管理员还可查看:预定清单,发放清单,和财务清单并能开成报表(尽可能是可以查一段时间内的信息)

§1.2.2   实现形式

采用页面对话交互方式进行，把页面形成工具(DREAMWAVER4)和动态编辑工具(PHP)以及强大的数据库支持(MYSQL)融为一体，达到完成功能块目的。要求该功能块具有整个系统的统一风格。
源文件
创建数据库和数据表   教材管理子系统所用的数据库名为：jc;   教材管理子系统所用的数据表有5项，名分别为：users(用户简要信息表),aducat(学历信息表),emergen(意外事故情况表),family(家属信息表),resume(个人简历表)。用命令：# cd /var/www/html 回车，进入mysql所在目录；        # mysql –p 回车，根据提示键入密码；用命令：create database jc;//完成创建数据库。用命令：show databases;            //显示数据库。用命令：use jc;            //指定使用的数据库。      以下将完成各表项的创建：教材管理系统数据库设计

表[xuesheng] xuehao ingming banji xi user_name password

表 [laoshi]    jiaoshihao xinmin xi user_name password

表[xi]       xingming xi user_name password

表 [admin]    name user_name password

征订订单号,教材编号,教材名,教材类型,作者,出版社及版本号,征订时间,征订人,所订班级,征订数量

表[zhengding] dingdan jcbianhao jcming jcleixin zuoze cbshe banben shijian zdren szbanjji zdshuliang

入库 :教材编号,教材名,作者,出版社及版本号,市场价,实购价,数量,入库时间.

表 [ruku] jcbianhao jcming zuoze cbshe banben scjia sgjia suliang rukushijian

发放时间领书人所属班级数量

表 [fafang] shijian lsren ssbanji

实体: 学生老师系级人员管理员征订入库发放

实体: xuesheng laoshi xi admin zhengding ruku fafang

学生属性       学号,姓名,班级,系,账号,密码

老师属性       教师号,姓名,系,账号,密码

系级人员属性   姓名,系,账号,密码

管理员属性     姓名,账号,密码

征订属性       订单号,教材编号,教材名,教材类型,作者,出版社及版本号,征订时间,征订人,

所订班级,征订数量

入库属性       教材编号,教材名,作者,出版社及版本号,市场价,实购价,数量,入库时间.

发放属性       时间领书人所属班级数量

§3.2.2 数据库连接   为了保证程序的安全，编写独立的数据库连接功能程序：<?php do{include("../config.php");} while($sql=="");//数据库所在的主机地址，localhost是本机地址  $MYSQL_HOSTNAME = "localhost";//数据库登录的用户名称  $MYSQL_USERNAME = "root";//数据库登录的密码 // $MYSQL_PASSWORD = "1111";//要登录的数据库的名称 // $DATABASE = "jc";//数据库的连接操作 $link_id=$sql;?>§3.2.3 创建数据源                                               用命令：# insert into users           values(1003,’张三’,’男’,’汉’,’教材部’,’部长’,’工程师’,’1978-03-24’,’成都市人民南路3段3号’,12345,6,4,3);其他表数据源类似插入。用命令：# select * from users order by ID;可以查看所录入的数据源。注：教材管理和职员教材信息管理两部分的功能实现，由薪资管理模块和公共信息管理模块提供。

详情请关注小编继续了解，免费赠送源代码与论文哦！

计算机毕业设计(源程序+论文+开题报告+文献综述+翻译+答辩稿)

联系QQ:2932963541进行咨询
网站地址： http://www.webtmall.com/ 扫码关注最新动态更多精彩，点击下方“

收起

展开全文
基于java web 的图书管理系统
2022-06-12 23:09:09

4.2.3 图书管理模块 14 4.2.4 账户管理模块 15 4.2.5 查询模块 17 4.2.6 借阅管理模块 19 第5章测试 20 5.1 登录模块的测试 20 5.2 用户注册模块的测试 20 5.3 账户管理模块 20 5.4 图书管理模块测试 21 5.5 查询...

收起
HopeLibrarySystemUE：厚朴工作室图书设备管理系统前端界面
2021-02-04 14:43:57

HopeLibrarySystemUE厚朴工作室图书设备管理系统前端界面##命名规范1，文件夹，文件名，class，id的命令一律采用中划线-连接2，class命名中拥有层级关系时，应该将相应的所有父级命名一律放置在前，ikes维护时能...

收起
【毕业设计专题】高校图书管理系统
2022-06-16 21:57:58

高校图书管理系统分为管理员、用户和图书模块。其中管理员实现了登录，对读者与图书的增删改查，还有管理读者的图书借阅、续借、归还、预约和逾期处理。技术介绍：前端：LayUI框架+JSP页面后端：SSM框架（整合...

收起