v1.0

需求：

  • 实现动态数据
  • 实现页面跳转
  • 实现页面可视化

HTML文件

  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html lang="cn">
  5. <head>
  6.   <meta charset="utf-8" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <meta content="haiwen" name="author" />
  9.   <!-- Bootstrap Styles-->
  10.   <link href="{% static 'assets/css/bootstrap.css' %} " rel="stylesheet" />
  11.   <!-- FontAwesome Styles-->
  12.   <link href="{% static 'assets/css/font-awesome.css' %}" rel="stylesheet" />
  13.   <!-- Custom Styles-->
  14.   <link href="{% static 'assets/css/custom-styles.css' %}" rel="stylesheet" />
  15.   <title>{% block title%}{% endblock %}</title>
  16. </head>
  18. <body>
  19. <div id="wrapper">
  20.   <nav class="navbar navbar-default top-navbar" role="navigation">
  21.     <div class="navbar-header">
  22.       <a class="navbar-brand"><i class="icon fa fa-plane"></i> 发布会签到系统</a>
  24.       <div id="sideNav" >
  25.         <i class="fa fa-bars icon"></i>
  26.       </div>
  27.     </div>
  29.     <ul class="nav navbar-top-links navbar-right">
  30.       <li class="dropdown">
  31.         <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
  32.           <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
  33.         </a>
  34.         <ul class="dropdown-menu dropdown-user">
  35.           <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
  36.           </li>
  37.           <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
  38.           </li>
  39.           <li class="divider"></li>
  40.           <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
  41.           </li>
  42.         </ul>
  43.         <!-- /.dropdown-user -->
  44.       </li>
  45.     </ul>
  46.   </nav>
  47.   <!--/. NAV TOP  -->
  48.   <nav class="navbar-default navbar-side" role="navigation">
  49.     <div class="sidebar-collapse">
  50.       <ul class="nav" id="main-menu">
  51.         <li>
  52.           <a class="active-menu" href="/sgin/events"><i class="fa fa-dashboard"></i> 发布会</a>
  53.         </li>
  54.         <li>
  55.           <a href="/sgin/guests"><i class="fa fa-desktop"></i> 嘉宾</a>
  56.         </li>
  58.       </ul>
  60.     </div>
  62.   </nav>
  63.   <!-- /. NAV SIDE  -->
  65.   <div id="page-wrapper">
  66.     <div class="header">
  67.       <div class="page-header">
  68.         {% block maintitle %}{% endblock %} <small></small>
  70.       </div>
  72.     </div>
  73.     <div id="page-inner" class="panel-body">
  75.       {% block content %}
  77.       {% endblock %}
  79.       <footer><p>Author:haiwen.  <a href="https://ke.qq.com/course/3135766" target="_blank">松勤测试开发课程</a></p>
  80.       </footer>
  81.     </div>
  82.     <!-- /. PAGE INNER  -->
  84.   </div>
  85.   <!-- /. PAGE WRAPPER  -->
  86. </div>
  87. <!-- jQuery Js -->
  88. <script src="{% static 'assets/js/jquery-1.10.2.js' %}"></script>
  89. <!-- Bootstrap Js -->
  90. <script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
  92. <!-- Custom Js -->
  93. <script src="{% static 'assets/js/custom-scripts.js' %}"></script>
  94. <script>
  95.   $(document).ready(
  96.     $('#main-menu>li>a').each(function (){
  97.       $(this).attr('class',''); //先取消选中
  98.       let current_href = window.location.pathname
  99.       if(current_href === $(this).attr('href')){
  100.         $(this).attr('class','active-menu');
  101.       }
  102.     }),
  103.   )
  104. </script>
  106. </body>
  108. </html>

{% block content %}

发布会名称：{{ event.name }}
发布会地址：{{ event.address }}
发布会时间：{{ event.start_time }}
返回发布会列表{% endblock %}

  1. </code-block>
  3. <code-block title="events.html">
  5. ```html
  6. {% extends "sgin/base.html" %}
  8. {% block content %}
  9. <ul class="list-group">
  10.   {% for event in event_list %}
  11.     <li class="list-group-item text-center"><a href="/sgin/event_detail/{{ event.id }}">{{ event }}</a></li>
  12.   {% endfor %}
  13. </ul>
  14. {% endblock %}
  1. {% extends "sgin/base.html" %}
  3. {% block content %}
  4.   <div class = "panel panel-info">
  5.   <div class="panel-heading">嘉宾详情页</div>
  6.   <div class="panel-body">
  7.   <p>姓名：{{ guest.name }}</p>
  8.   <p>电话：{{ guest.phone }}</p>
  9.   <p>邮箱：{{ guest.email }}</p>
  10.   <p>发布会：{{ guest.event }}</p>
  11.   </div>
  12.   </div>
  13.   <a href="/sgin/guests/" class="btn btn-info"> 返回嘉宾列表</a>
  14. {% endblock %}
  1. {% extends "sgin/base.html" %}
  2. {% block maintitle %} <h1>这里是嘉宾列表</h1> {% endblock %}
  3. {% block content %}
  4. <ul class="list-group">
  5.   {% for guest in guest_list %}
  6.     <li class="list-group-item text-center"><a href="/sgin/guest_detail/{{ guest.id }}">{{ guest }}</a></li>
  7.   {% endfor %}
  8. </ul>
  9. {% endblock %}

py文件

  1. from django.contrib import admin
  2. from sgin import models
  4. # 后台管理关联数据模型
  5. admin.site.register(models.Event)
  6. admin.site.register(models.User)

发布会数据的字段名

class Event(models.Model):
name = models.CharField(‘发布会名称’, max_length=256)
address = models.CharField(‘发布会地点’, max_length=256)
limits = models.IntegerField(‘发布会人数’, default=100)
status = models.BooleanField(‘发布会状态’, default=True)
start_time = models.DateTimeField(“发布会开始时间”, null=True)

  1.   # 以数据的名称显示
  2.   def __str__(self):
  3.       return self.name

参会人员的字段名

class User(models.Model):
# 关联发布会
event = models.ForeignKey(Event, on_delete=models.DO_NOTHING, verbose_name=”关联发布会”)
# 姓名和手机号唯一
name = models.CharField(‘姓名’, max_length=256, unique=True)
phone = models.CharField(‘手机号’, max_length=11, unique=True)
# 使用专属邮箱字段来管理邮箱地址
email = models.EmailField(‘邮箱’)

  1.   join_time = models.DateTimeField(auto_now_add=True)
  3.   def __str__(self):
  4.       return self.name
  1. </code-block>
  3. <code-block title="urls.py">
  5. ```python
  6. from django.urls import path
  7. from sgin import views
  9. urlpatterns = [
  10.   path('', views.events),
  12.   # 发布会
  13.   path('events/', views.events),
  14.   path('event_detail/<int:event_id>', views.event_detail),
  16.   # 嘉宾
  17.   path('guests/', views.guests),
  18.   path('guest_detail/<int:guest_id>', views.guest_details)
  19. ]
  1. from django.http import HttpResponse
  2. from django.shortcuts import render
  3. from sgin.templates import sgin
  4. from sgin.models import Event, User
  7. # 发布会列表视图
  8. def events(request):
  9.   # 从数据库查询所有发布会信息
  10.   event_list = Event.objects.all()
  11.   return render(request, "sgin/events.html", {'event_list': event_list})
  14. # 发布会详情
  15. def event_detail(request, event_id):
  16.   # 根据 event_id 查询对应的发布会数据
  17.   # pk:主键 默认数据表中的主键名为id
  18.   event = Event.objects.get(pk=event_id)
  19.   return render(request, "sgin/event_detail.html", {"event": event})
  22. # 嘉宾列表视图
  23. def guests(request):
  24.   guest_list = User.objects.all()
  25.   return render(request, "sgin/guests.html", {"guest_list": guest_list})
  28. # 嘉宾详情页
  29. def guest_details(request, guest_id):
  30.   guest = User.objects.get(id=guest_id)
  31.   return render(request, "sgin/guest_detail.html", {"guest": guest})
  1. from django.contrib import admin
  2. from django.urls import path, include
  3. from demo import urls as demo_url
  4. from sgin import urls as sgin_url
  6. urlpatterns = [
  7.   path('admin/', admin.site.urls),
  8.   path('demo/', include(demo_url)),  # 以 demo 开头的路径，全部交给 demo app 处理
  10.   path('sgin/', include(sgin_url)),
  11.   path('', include(sgin_url)),
  12.   ]

V2.0

需求：

  • 增加签到功能

发布会系统开发 - 图1