界面效果展示：
1、创建超级管理员，实现预定界面功能
2、预定界面：
（一）基于pymysql设计数据表结构，理清前后端与用户交互逻辑。（用户表，会议室表，预定内容存储表）
1、settings设置默认数据库为mysql
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME':'dbname',
'USER': 'root',
'PASSWORD': '',
'HOST': '',
'PORT': '',
}
}2、model表设计：
1 from django.db import models
2 from django.contrib.auth.models import AbstractUser
3 # Create your models here.
4
5
6 class UserInfo(AbstractUser):
7 tel = models.CharField(max_length=32)
8
9 class Room(models.Model):
10 caption = models.CharField(max_length=32)
11 num = models.IntegerField() #容纳人数
12 def __str__(self):
13 return self.caption
14
15 class Book(models.Model):
16 user = models.ForeignKey(to="UserInfo",on_delete=models.CASCADE)
17 room = models.ForeignKey(to="Room",on_delete=models.CASCADE)
18 date = models.DateField()
19 time_choice = (
20 (1, '8:00'),
21 (2, '9:00'),
22 (3, '10:00'),
23 (4, '11:00'),
24 (5, '12:00'),
25 (6, '13:00'),
26 (7, '14:00'),
27 (8, '15:00'),
28 (9, '16:00'),
29 (10, '17:00'),
30 (11, '18:00'),
31 (12, '19:00'),
32 (13, '20:00'),
33 )
34 time_id = models.IntegerField(time_choice)
35
36 class Meta:
37 unique_together = (
38 ("room","date","time_id"),
39 )
40
41 def __str__(self):
42 return "{}预定了{}".format(self.user,self.room)
2、梳理urls路由系统、利用内置的auth验证模块编写用户登录。利用js在后端处理用户操作，ajax技术发送request数据。
1 from django.shortcuts import render,redirect,HttpResponse
2 from django.contrib import auth
3 from app01 import models
4 import datetime
5 import json
6 # Create your views here.
7
8 def login(request): #设置登录处理函数
9 if request.method == "POST":
10
11 username = request.POST.get("username")
12 pwd = request.POST.get("password")
13 user = auth.authenticate(username=username,password=pwd)
14 if user:
15 auth.login(request,user)
16 return redirect("/index/")
17
18 return render(request,"login.html",locals())
19
20
21 date = datetime.datetime.now().date()
22
23
24 def index(request):
25
26 if not request.user.is_authenticated:
27 return redirect("/login/")
28
29
30 book_date = request.GET.get("book_date",date)
31
32 time_choice=models.Book.time_choice
33 room_obj = models.Room.objects.all()
34 book_obj = models.Book.objects.filter(date=date)
35
36 htmls = ""
37 for room in room_obj:
38 htmls += "<tr><td>{}</td>".format(room)
39
40 for time in time_choice:
41
42 is_choose = False
43
44 for book in book_obj:
45 if book.time_id == time[0] and book.room_id == room.pk: #判断是否有人预订
46 is_choose = True
47 break
48
49 if is_choose:
50 if request.user.pk == book.user_id: #在python代码层面处理模板json数据
51 htmls += "<td class='my_active item' time_id={} room_id={}>{}</td>".format(time[0],room.pk,book.user)
52 else:53 htmls += "<td class='active item' time_id={} room_id={}>{}</td>".format(time[0],room.pk,book.user)
54 else:
55 htmls += "<td class='item' time_id={} room_id={}></td>".format(time[0],room.pk)
56
57 htmls += "</tr>"
58
59 return render(request,"index.html",locals())
60
61 def manage(request):
62 if request.method == "POST":
63 data = json.loads(request.POST.get("post_data"))
64 print(data)
65
66 for room_id,time_id_list in data["del"].items():
67 for time_id in time_id_list:
68 models.Book.objects.filter(user_id=request.user.pk,room_id=room_id,time_id=time_id,date=date).delete()
69
70 for room_id,time_id_list in data["add"].items():
71 for time_id in time_id_list:
72 models.Book.objects.create(user_id=request.user.pk,room_id=room_id,time_id=time_id,date=date)
73
74
75 return HttpResponse(json.dumps("ok"))
3、编写templates模板，利用bootstrap丰富起始界面，在python代码层面处理模板json数据。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
7 <style>
8 .my_active{background-color: red}
9 .active{background-color: silver}
10 .temp_active{background-color: #2aabd2}
11 </style>
12 </head>
13 <body>
14
15 <h1>会议室预订</h1>
16
17
18
19 <table class="table table-bordered">
20 <tr>
21 <th>会议室/时间</th>
22 {% for time in time_choice %}
23 <th>{{ time.1 }}</th>
24 {% endfor %}
25 </tr>
26 {{ htmls|safe }}
27 </table>
28 <button>保存</button>
29 {% csrf_token %}
30
31
32 <script src="/static/jquery.js"></script>
33 <script src="/static/bootstrap/js/bootstrap.js"></script>
34 <script>
35
36
37 var post_data = {"add":{},"del":{}};
38
39 //为td标签绑定点击事件
40 $(".item").click(function(){
41
42 var time_id = $(this).attr("time_id");
43 var room_id = $(this).attr("room_id");
44
45 if($(this).hasClass("my_active")){ //如果是登录人预订的时间
46 $(this).removeClass("my_active");
47 $(this).text("");
48
49 if(post_data["del"][room_id]){
50 post_data["del"][room_id].push(time_id)
51 }else{
52 post_data["del"][room_id] = [time_id,];
53 }
54
55 }else if($(this).hasClass("active")){ //如果是别人预订的时间
56 alert("已经被预订！")
57
58 }else if($(this).hasClass("temp_active")){
59 $(this).removeClass("temp_active")
60 $(this).text("")
61 post_data["add"][room_id].splice(jQuery.inArray(time_id,post_data["add"][room_id]),1)
62
63 }else{ //如果没人预订
64 $(this).addClass("temp_active");
65 $(this).text("{{ request.user.username }}")
66
67 if(post_data["add"][room_id]){
68 post_data["add"][room_id].push(time_id)
69 }else{
70 post_data["add"][room_id] = [time_id,];
71 }
72 }
73 console.log(post_data)
74 })
75
76 var csrf = $("[name='csrfmiddlewaretoken']").val()
77
78 $("button").click(function(){
79 $.ajax({
80 url:"/manage/",
81 type:"post",
82 data:{
83 post_data:JSON.stringify(post_data),
84 csrfmiddlewaretoken:csrf,
85 },
86 dataType:"json",
87 success:function(arg){
88 console.log(arg)
89 location.href = ""
90
91 }
92 })
93 })
94 </script>
95 </body>
96 </html>
