0. 目的效果
1. 创建Django项目
2. 数据库表
2.1 models.py
from django.db import models # Create your models here. from django.db import models from django.contrib.auth.models import AbstractUser # 继承django自带的user表，自定义User model class UserInfo(AbstractUser): tel = models.CharField(max_length=32) class Room(models.Model): """ 会议室表 """ caption = models.CharField(max_length=32) num = models.IntegerField() # 容纳人数 def __str__(self): return self.caption class Book(models.Model): """ 会议室预定信息 who在 when预定了 which room？ """ user = models.ForeignKey("UserInfo",on_delete=models.CASCADE) # on_delete=models.CASCADE 级联删除 room = models.ForeignKey("Room",on_delete=models.CASCADE) date = models.DateField() time_choices = ( (1,'8:00'), (2,'9:00'), (3,'10:00'), (4,'11:00'), (5,'12:00'), (6,'13:00'), (7,'14:00'), (8,'15:00'), (9,'16:00'), (10,'17:00'), (11,'18:00'), (12,'19:00'), (13,'20:00'), ) time_id = models.IntegerField(choices=time_choices) # 联合唯一 class Meta: unique_together = ( ("room","date","time_id") ) def __str__(self): return str(self.user)+"预定了"+str(self.room)
2.2 settings.AUTH_USER_MODEL
自定义User model
settings.py
# 用户可以自定义User model了, 如果需要外键使用user model AUTH_USER_MODEL = "app01.UserInfo"
2.3 数据库生成与迁移
python manage.py makemigrations
python manage.py migrate
2.4 添加2个superuser
python manage.py createsuperuser
2.5 知识点
（1）显示名称
def __str__(self): return str(self.user)+"预定了"+str(self.room)
（2）联合唯一（time_choice）
time_choice = ( (1,'8:00'), ... ) 存的是key 显示的是value，且只能存key time_id = models.IntegerField(choices=time_choice) class Meta: unique_together = ( ('room','date','time_id'), )
（3）使用settings.AUTH_USER_MODEL
3. 登录页面
3.1 urls
from django.contrib import admin from django.urls import path from app01 import views # impor app01下的view 对应到 url urlpatterns = [ path('admin/', admin.site.urls), path('login/', views.login), path('index/', views.index), ]
3.2 views
from django.shortcuts import render from django.shortcuts import redirect # 重定向，跳转 # Create your views here. from django.contrib import auth # django自带的用户认证 def login(request): # 登录验证 if request.method == "POST": user=request.POST.get("user") pwd=request.POST.get("pwd") # django用户认证判定 user=auth.authenticate(username=user,password=pwd) if user: auth.login(request,user) # request.user # 注册下 return redirect("/index/") return render(request,"login.html") def index(request): return render(request,"index.html")
3.3 login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post"> {% csrf_token %} username:<input type="text" name="user"> password:<input type="password" name="pwd"> <input type="submit"> </form> </body> </html>
3.4 index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> Index </body> </html>
3.5 项目启动，登录验证
3.6 知识点
auth认证
from django.contrib import auth # django自带的用户认证 # django用户认证判定 user=auth.authenticate(username=user,password=pwd) if user: auth.login(request,user) # request.user # 注册下 return redirect("/index/")
4.admin操作
4.1 SQLite配置
4.2 添加2条数据
4.3 admin.py中注册模型表
admin.py
from django.contrib import admin # Register your models here. # 注册模型表，显示在admin页面中 from .models import UserInfo,Room,Book admin.site.register(UserInfo) admin.site.register(Room) admin.site.register(Book)
在admin主页中可以显示表
4.4 admin添加data
5.index页面
5.1 导入bootstrap，jquery，datetimepicker
5.2 版本1：前台渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {# 导入bootstrap和jquery #} <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> <script src="/static/js/jquery-1.12.4.min.js"></script> {# 导入datetimepicker #} <script src="/static/datetimepicker/bootstrap-datetimepicker.min.js"></script> <script src="/static/datetimepicker//bootstrap-datetimepicker.zh-CN.js"></script> </head> <body> <h3>会议室预定</h3> <table class="table table-bordered table-striped"> <thead> <tr> <th>会议室/时间</th> {# 循环会议室时间 #} {# <th>8:00</th> #} {# <th>9:00</th> #} {# <th>10:00</th> #} {% for time_choice in time_choices %} <th>{{ time_choice.1 }}</th> {% endfor %} </tr> </thead> <tbody> {% for room in room_list %} <tr> <td>{{ room.caption }}</td> {% for time_choice in time_choices %} <td></td> {% endfor %} </tr> {% endfor %} </tbody> </table> </body> </html>
5.3 版本2：后端渲染
（1）为什么要在后端渲染
后台渲染html,不在模板处理数据，因为后台更方便一些
（2）如何后端渲染？？
（3）进化版本
5.4 预定信息显示，不同登录人显示不同
（1）如何匹配？
（2）如何取出来
（3）登录人不同显示不同color
5.5 代码：版本2
（1）效果图
（2）view.py
from django.shortcuts import render from django.shortcuts import redirect # 重定向，跳转 # Create your views here. from django.contrib import auth # django自带的用户认证 def login(request): # 登录验证 if request.method == "POST": user=request.POST.get("user") pwd=request.POST.get("pwd") # django用户认证判定 user=auth.authenticate(username=user,password=pwd) if user: auth.login(request,user) # request.user # 注册下 return redirect("/index/") return render(request,"login.html") import datetime from .models import Book,Room def index(request): time_choices = Book.time_choices room_list = Room.objects.all() # 预定msg date=datetime.datetime.now().date() # 当前日期 book_date=request.GET.get("book_date",date) #预定日期 book_list=Book.objects.filter(date=book_date) # 过滤出表中预定的msg # LowB版本 htmls_lowb = """ <tr> <td>401(12)</td> <td class="active_other item" room_id="1" time_id="13"></td> <td class="active_other item" room_id="2" time_id="13"></td> <td class="active_other item" room_id="3" time_id="13"></td> <td class="active_other item" room_id="4" time_id="13"></td> <td class="active_other item" room_id="5" time_id="13"></td> <td class="active_other item" room_id="6" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> <td class="active_other item" room_id="7" time_id="13"></td> </tr> """ # Nb版本 htmls = "" for room in room_list: htmls += "<tr><td>{}({})</td>".format(room.caption,room.num) for time_choice in time_choices: book = None flag = False # 是否已经被预定 for book in book_list: if book.room.pk==room.pk and book.time_id==time_choice[0]: # 意味着这个单元格已经预定 flag=True break if flag: # 被预定 if request.user.pk == book.user.pk: # 登录人不同显示颜色不同 htmls += "<td class='active' room_id='{}' time_id='{}'>{}</td>".format(room.pk,time_choice[0],book.user.username) else: htmls += "<td class='another_active' room_id='{}' time_id='{}'>{}</td>".format(room.pk,time_choice[0],book.user.username) else: # 没被预定 htmls += "<td room_id='{}' time_id='{}'></td>".format(room.pk, time_choice[0]) htmls += "</tr>" return render(request,"index.html",locals())
（3）index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {# 导入bootstrap和jquery #} <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> <script src="/static/js/jquery-1.12.4.min.js"></script> {# 导入datetimepicker #} <script src="/static/datetimepicker/bootstrap-datetimepicker.min.js"></script> <script src="/static/datetimepicker//bootstrap-datetimepicker.zh-CN.js"></script> <style type="text/css"> .active{ background-color: green !important; color: white; } .another_active{ background-color: blue; color: white; } </style> </head> <body> <h3>会议室预定</h3> <table class="table table-bordered table-striped"> <thead> <tr> <th>会议室/时间</th> {# 循环会议室时间 #} {# <th>8:00</th> #} {# <th>9:00</th> #} {# <th>10:00</th> #} {% for time_choice in time_choices %} <th>{{ time_choice.1 }}</th> {% endfor %} </tr> </thead> <tbody> {# 后端渲染 #} {{ htmls|safe }} </tbody> </table> </body> </html>
6. Book预定
6.1 为td绑定单击事件
6.2 构建提交data
（1）js中要掌握的
// js 字符串 数组 obejct{} 的常用方法
（2）增加预定
