devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Django】第二课 基于Django图书借阅管理网站平台_基于django web的图书管理系统前端登陆注册网页代码

作者：Li_阴宅 | 2024-06-19 00:47:36

赞

踩

基于django web的图书管理系统前端登陆注册网页代码

概念

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

登录功能实现

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

urls.py

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

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

  1. # 保存登录信息
  2. student=[]
  3.  
  4. def toLogin(request):
  5.     # 接收学生的登录信息，并将登录成功的学生信息临时存储
  6.     num=request.POST["num"]
  7.     psd=request.POST["psd"]
  8.     # 根据登录信息查询数据库该学生是否存在
  9.     global student
  10.     student=Student.objects.filter(number=num,psd=psd)
  11.  
  12.     # 如果能查询到数据，则进入主页
  13.     if student:
  14.         return redirect(bookList)
  15.     else:
  16.         return render(request,"loginError.html")

主页地址请求为: 

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

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

  1. def bookList(request):
  2.     try:
  3.         ym=request.GET["ym"]
  4.     except:
  5.         ym=1
  6.     # 将所有图书信息查询出来
  7.     bookList = Book.objects.all().values()
  8.     p=paginator.Paginator(bookList,16)
  9.     page=p.get_page(ym)
  10.     bookList=page.object_list
  11.     yms=p.page_range
  12.     for b in bookList:
  13.         b["image"] = "img/" + str(b["image"])
  14.     return render(request, "home.html", {"student": student[0], "bookList": bookList,"page":page,"yms":yms})

top.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         #top_{
  8.             width: 100%;
  9.             height: 160px;
  10.             font-size: 16px;
  11.             color: white;
  12.         }
  13.         #top ul{
  14.             list-style: none;
  15.             margin: 0px;
  16.             padding: 0px;
  17.           }
  18.         p{
  19.             width: 200px;
  20.             height: 40px;
  21.             line-height: 60px;
  22.             margin: 0px auto;
  23.             color: white;
  24.             font-size: 30px;
  25.             font-weight: bold;
  26.         }
  27.         #top_ ul li{
  28.             margin: 0px;
  29.             padding: 0px 10px;
  30.             width: 80px;
  31.             height: 40px;
  32.             text-align: center;
  33.         }
  34.         .li_name{
  35.             float: left;
  36.         }
  37.         .li_{
  38.             float: right;
  39.         }
  40.         #top_ ul li a{
  41.             text-decoration: none;
  42.             color: white;
  43.         }
  44.         #top_ ul li a:hover{
  45.             color: red;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div id="top">
  51.         {% load static %}
  52.         <div id="top_" style="background: url('{% static 'img/bg.jpeg' %}')">
  53.             <ul>
  54.                 <li class="li_name"><a href="">
  55.                     <span style="color: #0077ff">{{ student.name }}</span>
  56.                     同学</a></li>
  57.                 <li class="li_"><a href="/">注销</a></li>
  58.                 <li class="li_"><a href="/hisInfo/">历史记录</a></li>
  59.                 <li class="li_"><a href="/MyJY/">我的借阅</a></li>
  60.                 <li class="li_"><a href="/bookList/">返回首页</a></li>
  61.             </ul>
  62.             <p id="p_">图&nbsp;书&nbsp;借&nbsp;阅&nbsp;系&nbsp;统</p>
  63.         </div>
  64.  
  65.     </div>
  66. </body>
  67. </html>

主页的html代码如下:

  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>首页</title>
  6.     {% load static %}
  7.     <link rel="stylesheet" type="text/css" href="{% static 'css/css1.css' %}">
  8.  
  9.     <style type="text/css">
  10.         #h_content {
  11.             width: 100%;
  12.             margin: 10px 0px;
  13.         }
  14.  
  15.         #h_content_top {
  16.             width: 100%;
  17.             height: 60px;
  18.         }
  19.         #seach {
  20.             width: 400px;
  21.             margin: auto;
  22.         }
  23.  
  24.         #seach form {
  25.             width: 380px;
  26.             margin: 0px auto;
  27.         }
  28.  
  29.         #seach form .t_seach {
  30.             width: 300px;
  31.             height: 30px;
  32.             border-radius: 3px;
  33.             border-width: 3px;
  34.             border-color: chocolate;
  35.         }
  36.  
  37.         #seach form .btn_seach {
  38.             width: 60px;
  39.             height: 30px;
  40.             border-radius: 3px;
  41.             border-width: 0px;
  42.             background-color: #00aaff;
  43.             color: white;
  44.         }
  45.  
  46.         #h_content_center {
  47.             width: 100%;
  48.         }
  49.  
  50.         #h_content_center ul {
  51.             list-style: none;
  52.             width: 900px;
  53.             margin: 0px;
  54.             padding: 0px;
  55.         }
  56.  
  57.         #h_content_center ul li {
  58.             width: 200px;
  59.             float: left;
  60.             margin: 5px;
  61.         }
  62.  
  63.  
  64.         #h_content_center ul li img {
  65.             width: 200px;
  66.             margin: 0px auto;
  67.         }
  68.  
  69.         #h_content_center ul li p {
  70.             width: 100%;
  71.             text-align: center;
  72.             color: black;
  73.             font-size: 11px;
  74.         }
  75.  
  76.         #h_content_center a {
  77.             text-decoration: none;
  78.             color: black;
  79.         }
  80.  
  81.         #h_content_center a:LINK {
  82.             color: black;
  83.         }
  84.  
  85.          #h_content_center a:HOVER {
  86.             color: red;
  87.         }
  88.  
  89.         #h_content_foot ul {
  90.             margin: 0px;
  91.             padding: 0px;
  92.             list-style: none;
  93.         }
  94.  
  95.         #h_content_foot ul li {
  96.             width: 20px;
  97.             height: 20px;
  98.             font-size: 12px;
  99.             float: left;
  100.             margin: 10px;
  101.             text-align: center;
  102.         }
  103.  
  104.         #h_content_foot ul li:HOVER {
  105.             color: white;
  106.             background-color: #0077ff;
  107.         }
  108.  
  109.         #nav{
  110.             width: 900px;
  111.             height: 40px;
  112.             margin-top: 20px;
  113.             clear: left;
  114.         }
  115.         #nav a{
  116.             text-decoration: none;
  117.             margin: 3px;
  118.             background-color: cadetblue;
  119.         }
  120.         #nav a:hover{
  121.             background-color: #FF1719;
  122.         }
  123.  
  124.         #nav a.c_page{
  125.             background-color: #FF1719;
  126.         }
  127.         #nav a.up_page,#nav a.do_page{
  128.             width: 80px;
  129.             height: 40px;
  130.             padding: 5px 10px;
  131.             border-radius: 5px;
  132.             color: white;
  133.         }
  134.         #nav a.p_page{
  135.             width: 40px;
  136.             height: 40px;
  137.             padding: 3px;
  138.             border-radius: 5px;
  139.             color: white;
  140.         }
  141.  
  142.     </style>
  143.     <script type="text/javascript">
  144.  
  145.          //定义方法，用于处理分页导航栏的样式
  146.         function a_style() {
  147.             //通过class选择器获得分页导航栏对象
  148.             var aElements=document.getElementsByClassName("p_page");
  149.             for (var i = 0; i < aElements.length; i++) {
  150.                 var text=aElements.item(i).innerHTML;
  151.                 if (text<10){
  152.                     aElements.item(i).innerHTML="&nbsp;"+text+"&nbsp;";
  153.                 }
  154.             }
  155.         }
  156.  
  157.     </script>
  158. </head>
  159. <body onload="a_style()">
  160. <div id="h_body"
  161.      style="width: 900px;
  162. 	height: 800px;margin: 10px auto;">
  163.     <!-- 头部:登录的用户，历史记录，我的借阅，注销 -->
  164.     {% include "top.html" with stu=student %}
  165.     <!-- 内容 -->
  166.     <div id="h_content">
  167.         <div id="h_content_top">
  168.             <div id="seach">
  169.                 <form action="/seach/" method="post">
  170.                     {% csrf_token %}
  171.                     <input type="text" class="t_seach" width="80" height="40"
  172.                            name="seach" placeholder="根据书名搜索，例如:java"> &nbsp;&nbsp;<input
  173.                         type="submit" class="btn_seach" name="submit" value="搜索">
  174.                 </form>
  175.             </div>
  176.         </div>
  177.         <div id="h_content_center">
  178.             <ul>
  179.                 {% for foo in bookList %}
  180.                     <li ><a href="/bookInfo/?bookid={{ foo.id }}"><img alt="{{ foo.bookName }}"
  181.                                                                                               src="{% static foo.image %}"></a>
  182.                         <p><a href="/bookInfo/?bookid={{ foo.id }}">{{ foo.bookName }}</a></p>
  183.                     </li>
  184.                 {% endfor %}
  185.             </ul>
  186.         </div>
  187.         <!-- 显示页码导航栏 -->
  188.         <div id="nav" align="center">
  189.             <!-- 上一页 -->
  190.             <!-- 判断当前页是否有上一页，如果有上一页则显示上一页的按钮，否则就不显示上一页 -->
  191.             {% if page.has_previous %}
  192.                 <a href="/bookList/?ym={{ page.previous_page_number }}" class="up_page">上一页</a>
  193.             {% endif %}
  194.             <!-- 页码 -->
  195.             {% for ym in yms %}
  196.                 {% if page.number == ym %}
  197.                     <a href="/bookList/?ym={{ ym }}" class="p_page c_page">{{ ym }}</a>
  198.                 {% else %}
  199.                     <a href="/bookList/?ym={{ ym }}" class="p_page">{{ ym }}</a>
  200.                 {% endif %}
  201.             {% endfor %}
  202.  
  203.             <!-- 下一页 -->
  204.             {% if page.has_next %}
  205.                 <a href="/bookList/?ym={{ page.next_page_number }}" class="do_page">下一页</a>
  206.             {% endif %}
  207.         </div>
  208.     </div>
  209.     <!-- 底部 -->
  210.     {% include "foot.html" %}
  211. </div>
  212. </body>
  213. </html>

其界面效果如下

根据关键字查询图书信息

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

urls.py中进行匹配

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

 views.py

  1. def seach(request):
  2.     info=request.POST["seach"]
  3.     # 进行模糊查询
  4.     bookList=Book.objects.filter(bookName__contains=info).values()
  5.     try:
  6.         ym = request.GET["ym"]
  7.     except:
  8.         ym = 1
  9.     p = paginator.Paginator(bookList, 16)
  10.     page = p.get_page(ym)
  11.     bookList = page.object_list
  12.     yms = p.page_range
  13.     for b in bookList:
  14.         b["image"] = "img/" + str(b["image"])
  15.     return render(request, "home.html", {"student": student[0], "bookList": bookList, "page": page, "yms": yms})

其页面效果如下

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

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

 urls.py文件中定义该地址

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

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

  1. def bookInfo(request):
  2.     bookId=request.GET["bookId"]
  3.     # 将图书编号作为条件查询该图书的详细信息
  4.     book=Book.objects.get(id=bookId)
  5.     # 修改图书的图片路径
  6.     book.image="img/"+str(book.image)
  7.     # 查询借阅信息表当前这本书是否有学生已经借走了
  8.     infos=UserBookInfo.objects.filter(number=student[0].number,
  9.                                       bookId=bookId)
  10.     # 判断当前这本书的状态
  11.     if infos:
  12.         state=2
  13.         for i in infos:
  14.             if i.state == 1:
  15.                 state=i.state
  16.     else:
  17.         state=0
  18.     return render(request,"bookInfo.html",{"student":student[0],
  19.                                            "book":book,
  20.                                            "state":state})

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

  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>书籍详情</title>
  6.     {% load static %}
  7. <link rel="stylesheet" type="text/css" href="{% static 'css/css1.css' %}">
  8.  
  9. 	<style type="text/css">
  10. 		#b_content input{
  11. 			width: 200px;
  12. 			height: 40px;
  13.             border-radius: 5px;
  14. 			color: white;
  15. 			font-size: 18px;
  16. 			font-weight: bold;
  17. 		}
  18. 	</style>
  19. 	<script type="text/javascript">
  20. 		function a_() {
  21. 			alert("该书已借阅,不能同时借阅同一本书！！！");
  22. 		}
  23. 	</script>
  24. </head>
  25. <body>
  26.     <div id="body">
  27.     	<!-- 头部 -->
  28.     	{% include "top.html" with stu=student %}
  29.     	<!-- 内容 -->
  30.     	<div id="b_content">
  31.     		<table>
  32.  
  33.     			<tr >
  34.     				<td rowspan="5" width="30%" align="center">
  35.     				<img alt="封面" title="封面"
  36.     				src="{% static book.image %}"> </td>
  37.     				<td width="70%"><b>书籍名称:</b>&nbsp;&nbsp;{{ book.bookName }}</td>
  38.     			</tr>
  39.     			<tr>
  40.     				<td><b>作者:</b>&nbsp;&nbsp;{{ book.author }}</td>
  41.     			</tr>
  42.     			<tr>
  43.     				<td><b>出版日期:</b>&nbsp;&nbsp;{{ book.bookDate }}</td>
  44.     			</tr>
  45.     			<tr>
  46.     				<td><b>出版社:</b>&nbsp;&nbsp;{{ book.bookAddress }}</td>
  47.     			</tr>
  48.     			<tr>
  49.     				<td><b>所属分类:</b>&nbsp;&nbsp;{{ book.type }}</td>
  50.     			</tr>
  51.     			<tr>
  52.     				<td colspan="2"><b>内容简介:</b>
  53.     				<br>
  54.     				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ book.info }}</td>
  55.     			</tr>
  56.     			<tr>
  57.     				<td colspan="2" align="center">
  58.                     {% if state == 0 or state == 2 %}
  59.                         <a href="/addUserBookInfo/?bookid={{ book.id }}">
  60.     				<input type="button" style="background-color: #0077ff;" value="借阅">
  61.     				</a>
  62.                     {% elif state == 1 %}
  63.                         <a onclick="a_()">
  64.     				<input type="button" style="background-color: red;" value="已借阅">
  65.     				</a>
  66.                     {% endif %}
  67.     				</td>
  68.     			</tr>
  69.     		</table>
  70.     	</div>
  71.     	<!-- 底部 -->
  72.     	{% include "foot.html" %}
  73.     </div>
  74.   </body>
  75. </html>

其界面效果如下

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/734814
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号