Django第二课 基于Django图书借阅管理网站平台

Posted 笔触狂放

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django第二课 基于Django图书借阅管理网站平台相关的知识,希望对你有一定的参考价值。

概念

本文在上一篇文章之上完成登录,图书显示,关键字搜索以及分页功能

登录功能实现

当用户在首页进行输入学生用户信息后,点击登录按钮发送请求给服务器,地址请求为: /toLogin/

urls.py

path('toLogin/',views.toLogin),

将接收的学号和密码发送给服务器进行查询数据库进行验证,如果该学生不存在,则跳转至登录提示页面,否则进入主页,并将登录的用户信息存储起来

# 保存登录信息
student=[]

def toLogin(request):
    # 接收学生的登录信息,并将登录成功的学生信息临时存储
    num=request.POST["num"]
    psd=request.POST["psd"]
    # 根据登录信息查询数据库该学生是否存在
    global student
    student=Student.objects.filter(number=num,psd=psd)

    # 如果能查询到数据,则进入主页
    if student:
        return redirect(bookList)
    else:
        return render(request,"loginError.html")

主页地址请求为: 

path('bookList/',views.bookList),

views.py,将数据库中所有图书信息进行查询并做分页处理

def bookList(request):
    try:
        ym=request.GET["ym"]
    except:
        ym=1
    # 将所有图书信息查询出来
    bookList = Book.objects.all().values()
    p=paginator.Paginator(bookList,16)
    page=p.get_page(ym)
    bookList=page.object_list
    yms=p.page_range
    for b in bookList:
        b["image"] = "img/" + str(b["image"])
    return render(request, "home.html", "student": student[0], "bookList": bookList,"page":page,"yms":yms)

主页的html代码如下:

<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>首页</title>
    % load static %
    <link rel="stylesheet" type="text/css" href="% static 'css/css1.css' %">

    <style type="text/css">
        #h_content 
            width: 100%;
            margin: 10px 0px;
        

        #h_content_top 
            width: 100%;
            height: 60px;
        
        #seach 
            width: 400px;
            margin: auto;
        

        #seach form 
            width: 380px;
            margin: 0px auto;
        

        #seach form .t_seach 
            width: 300px;
            height: 30px;
            border-radius: 3px;
            border-width: 3px;
            border-color: chocolate;
        

        #seach form .btn_seach 
            width: 60px;
            height: 30px;
            border-radius: 3px;
            border-width: 0px;
            background-color: #00aaff;
            color: white;
        

        #h_content_center 
            width: 100%;
        

        #h_content_center ul 
            list-style: none;
            width: 900px;
            margin: 0px;
            padding: 0px;
        

        #h_content_center ul li 
            width: 200px;
            float: left;
            margin: 5px;
        


        #h_content_center ul li img 
            width: 200px;
            margin: 0px auto;
        

        #h_content_center ul li p 
            width: 100%;
            text-align: center;
            color: black;
            font-size: 11px;
        

        #h_content_center a 
            text-decoration: none;
            color: black;
        

        #h_content_center a:LINK 
            color: black;
        

         #h_content_center a:HOVER 
            color: red;
        

        #h_content_foot ul 
            margin: 0px;
            padding: 0px;
            list-style: none;
        

        #h_content_foot ul li 
            width: 20px;
            height: 20px;
            font-size: 12px;
            float: left;
            margin: 10px;
            text-align: center;
        

        #h_content_foot ul li:HOVER 
            color: white;
            background-color: #0077ff;
        

        #nav
            width: 900px;
            height: 40px;
            margin-top: 20px;
            clear: left;
        
        #nav a
            text-decoration: none;
            margin: 3px;
            background-color: cadetblue;
        
        #nav a:hover
            background-color: #FF1719;
        

        #nav a.c_page
            background-color: #FF1719;
        
        #nav a.up_page,#nav a.do_page
            width: 80px;
            height: 40px;
            padding: 5px 10px;
            border-radius: 5px;
            color: white;
        
        #nav a.p_page
            width: 40px;
            height: 40px;
            padding: 3px;
            border-radius: 5px;
            color: white;
        

    </style>
    <script type="text/javascript">

         //定义方法,用于处理分页导航栏的样式
        function a_style() 
            //通过class选择器获得分页导航栏对象
            var aElements=document.getElementsByClassName("p_page");
            for (var i = 0; i < aElements.length; i++) 
                var text=aElements.item(i).innerHTML;
                if (text<10)
                    aElements.item(i).innerHTML="&nbsp;"+text+"&nbsp;";
                
            
        

    </script>
</head>
<body onload="a_style()">
<div id="h_body"
     style="width: 900px;
	height: 800px;margin: 10px auto;">
    <!-- 头部:登录的用户,历史记录,我的借阅,注销 -->
    % include "top.html" with stu=student %
    <!-- 内容 -->
    <div id="h_content">
        <div id="h_content_top">
            <div id="seach">
                <form action="/seach/" method="post">
                    % csrf_token %
                    <input type="text" class="t_seach" width="80" height="40"
                           name="seach" placeholder="根据书名搜索,例如:java"> &nbsp;&nbsp;<input
                        type="submit" class="btn_seach" name="submit" value="搜索">
                </form>
            </div>
        </div>
        <div id="h_content_center">
            <ul>
                % for foo in bookList %
                    <li ><a href="/bookInfo/?bookid= foo.id "><img alt=" foo.bookName "
                                                                                              src="% static foo.image %"></a>
                        <p><a href="/bookInfo/?bookid= foo.id "> foo.bookName </a></p>
                    </li>
                % endfor %
            </ul>
        </div>
        <!-- 显示页码导航栏 -->
        <div id="nav" align="center">
            <!-- 上一页 -->
            <!-- 判断当前页是否有上一页,如果有上一页则显示上一页的按钮,否则就不显示上一页 -->
            % if page.has_previous %
                <a href="/bookList/?ym= page.previous_page_number " class="up_page">上一页</a>
            % endif %
            <!-- 页码 -->
            % for ym in yms %
                % if page.number == ym %
                    <a href="/bookList/?ym= ym " class="p_page c_page"> ym </a>
                % else %
                    <a href="/bookList/?ym= ym " class="p_page"> ym </a>
                % endif %
            % endfor %

            <!-- 下一页 -->
            % if page.has_next %
                <a href="/bookList/?ym= page.next_page_number " class="do_page">下一页</a>
            % endif %
        </div>
    </div>
    <!-- 底部 -->
    % include "foot.html" %
</div>
</body>
</html>

其界面效果如下

根据关键字查询图书信息

在搜索文本框中输入要搜索的书籍名称的关键字,点击搜索后,发出请求  /seach/

urls.py中进行匹配

path('seach/',views.seach),

 views.py

def seach(request):
    info=request.POST["seach"]
    # 进行模糊查询
    bookList=Book.objects.filter(bookName__contains=info).values()
    try:
        ym = request.GET["ym"]
    except:
        ym = 1
    p = paginator.Paginator(bookList, 16)
    page = p.get_page(ym)
    bookList = page.object_list
    yms = p.page_range
    for b in bookList:
        b["image"] = "img/" + str(b["image"])
    return render(request, "home.html", "student": student[0], "bookList": bookList, "page": page, "yms": yms)

其页面效果如下

查看图书详情信息功能实现

当用户需要查看某一本图书的时候,进行选择对应的图书信息点击,想服务器发送请求 /bookInfo/

 urls.py文件中定义该地址

path('bookInfo/',views.bookInfo),

views.py文件中接收用户发送的图书id进行获取图书信息,以及该用户是否对该图书有借阅记录的状态获取

def bookInfo(request):
    id=request.GET["bookid"]
    # 根据id获得该对应的图书信息
    book=Book.objects.get(id=id)
    book.image="img/"+str(book.image)
    # 根据当前登录的学生的学号和图书id查询借阅记录表的借阅状态
    infos=UserBookInfo.objects.filter(number=student[0].number,bookId=id)
    # 如果未查询到,则状态为0,表示未借阅,1表示已借阅,2表示已归还
    state=  infos[0].state  if infos else 0
    return render(request,"bookInfo.html","student":student[0],"book":book,"state":state)

并显示在图书详细html页面上,其代码如下

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>书籍详情</title>
    % load static %
<link rel="stylesheet" type="text/css" href="% static 'css/css1.css' %">

	<style type="text/css">
		#b_content input
			width: 200px;
			height: 40px;
            border-radius: 5px;
			color: white;
			font-size: 18px;
			font-weight: bold;
		
	</style>
	<script type="text/javascript">
		function a_() 
			alert("该书已借阅,不能同时借阅同一本书!!!");
		
	</script>
</head>
<body>
    <div id="body">
    	<!-- 头部 -->
    	% include "top.html" with stu=student %
    	<!-- 内容 -->
    	<div id="b_content">
    		<table>

    			<tr >
    				<td rowspan="5" width="30%" align="center">
    				<img alt="封面" title="封面"
    				src="% static book.image %"> </td>
    				<td width="70%"><b>书籍名称:</b>&nbsp;&nbsp; book.bookName </td>
    			</tr>
    			<tr>
    				<td><b>作者:</b>&nbsp;&nbsp; book.author </td>
    			</tr>
    			<tr>
    				<td><b>出版日期:</b>&nbsp;&nbsp; book.bookDate </td>
    			</tr>
    			<tr>
    				<td><b>出版社:</b>&nbsp;&nbsp; book.bookAddress </td>
    			</tr>
    			<tr>
    				<td><b>所属分类:</b>&nbsp;&nbsp; book.type </td>
    			</tr>
    			<tr>
    				<td colspan="2"><b>内容简介:</b>
    				<br>
    				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; book.info </td>
    			</tr>
    			<tr>
    				<td colspan="2" align="center">
                    % if state == 0 or state == 2 %
                        <a href="/addUserBookInfo/?bookid= book.id ">
    				<input type="button" style="background-color: #0077ff;" value="借阅">
    				</a>
                    % elif state == 1 %
                        <a onclick="a_()">
    				<input type="button" style="background-color: red;" value="已借阅">
    				</a>
                    % endif %
    				</td>
    			</tr>
    		</table>
    	</div>
    	<!-- 底部 -->
    	% include "foot.html" %
    </div>
  </body>
</html>

其界面效果如下

如果当前学生对某图书有借阅则不允许再对该书进行借阅

 

 

 

以上是关于Django第二课 基于Django图书借阅管理网站平台的主要内容,如果未能解决你的问题,请参考以下文章

Django第三课 基于Django图书借阅管理网站平台

Django第三课 基于Django图书借阅管理网站平台

Django第一课 基于Django图书借阅管理网站平台

Django第一课 基于Django图书借阅管理网站平台

计算机毕业设计django基于python图书馆借阅系统

基于 Django 的图书馆借阅系统