简单实现：
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="/static/Font-Awesome-3.2.1/css/font-awesome.min.css"> <script src="/static/jquery-3.2.1.min.js"></script> <title>会议室预定</title> <style> .c1 { height: 60px; width: 100%; background-color: #2446AB; font-size: 30px; } .crm { font-family: inherit; color: white; } </style> </head> <body> <div class="c1"> <div class="crm"> <b>会议室预定系统</b> </div> </div> <hr> <div class="container"> <div class="row col-md-12"> <div class="input-append date form_datetim pull-right" data-date="2013-02-21T15:25:00Z"> <input size="16" type="text" value="" readonly> <span class="add-on"><i class="icon-remove"></i></span> <span class="add-on"><i class="icon-calendar"></i></span> <button class="btn btn-primary">保存</button> </div> <p></p> <div class="bs-example" data-example-id="bordered-table"> <table class="table table-bordered"> <thead> <th>会议室</th> {% for time in time_list %} <th>{{ time.1 }}</th> {% endfor %} </tr> </thead> <tbody> {% for room in room_list %} <tr> <td>{{ room.title }}</td> {% for time in time_list %} <td></td> {% endfor %} </tr> {% endfor %} </tbody> </table> </div> </div> </div> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> {#日期选择器#} <script> $('.date').datetimepicker({ language: 'zh-CN',//显示中文 format: 'yyyy-mm-dd',//显示格式 minView: "month",//设置只显示到月份 initialDate: new Date(),//初始化当前日期 autoclose: true,//选中自动关闭 todayBtn: true//显示今日按钮 }); $("#datetimepicker").datetimepicker({ format: 'yyyy-mm-dd', minView: 'month', language: 'zh-CN', autoclose: true, startDate: new Date() }); </script> <script> </script> </body> </html>
后端代码：
def conference_room_reservation(request): time_list = models.Conference_room_reservation.time_choices room_list = models.Conference_room.objects.all() return render(request,"conference_room_reservation.html",{"time_list":time_list,"room_list":room_list})
AJax实现页面显示（伪数据）：
url:
url(r'^index/$', views.conference_room_reservation), url(r'^booking/$',views.booking)
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="/static/Font-Awesome-3.2.1/css/font-awesome.min.css"> <script src="/static/jquery-3.2.1.min.js"></script> <title>会议室预定</title> <style> .c1 { height: 60px; width: 100%; background-color: #2446AB; font-size: 30px; } .crm { font-family: inherit; color: white; } </style> </head> <body> <div class="c1"> <div class="crm"> <b>会议室预定系统</b> </div> </div> <hr> <div class="container"> <div class="row col-md-12"> <div class="input-append date form_datetim pull-right" data-date="2013-02-21T15:25:00Z"> <input size="16" type="text" value="" readonly> <span class="add-on"><i class="icon-remove"></i></span> <span class="add-on"><i class="icon-calendar"></i></span> <button class="btn btn-primary">保存</button> </div> <p></p> <div class="bs-example" data-example-id="bordered-table"> <table class="table table-bordered"> <thead> <th>会议室</th> {% for time in time_list %} <th>{{ time.1 }}</th> {% endfor %} </tr> </thead> <tbody id="Tbody"> {# 简单展示#} {# {% for room in room_list %}#} {# <tr>#} {# <td>{{ room.title }}</td>#} {# {% for time in time_list %}#} {# <td></td>#} {# {% endfor %}#} {# </tr>#} {# {% endfor %}#} {# Ajax获取#} </tbody> </table> </div> </div> </div> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> {#日期选择器#} <script> $('.date').datetimepicker({ language: 'zh-CN',//显示中文 format: 'yyyy-mm-dd',//显示格式 minView: "month",//设置只显示到月份 initialDate: new Date(),//初始化当前日期 autoclose: true,//选中自动关闭 todayBtn: true//显示今日按钮 }); $("#datetimepicker").datetimepicker({ format: 'yyyy-mm-dd', minView: 'month', language: 'zh-CN', autoclose: true, startDate: new Date() }); </script> {#ajax获取数据----------#} {#执行下面的函数#} <script> $(function () { ajax_rom() }); {# 定义一个函数#} function ajax_rom() { $.ajax({ url:'/booking/', type:'GET', success:function (arg) { console.log(arg); if (arg.status){ $.each(arg.data,function (i,item) { {# 循环生成每一条数据，创建一个tr标签#} var tr =$("<tr>"); {# 循环生成每一条数据，创建一个td标签#} $.each(item,function (k,j) { var td =$("<td>"); td.text(j.text); tr.append(td) }); $("#Tbody").append(tr) }) }else { } } }) } </script> </body> </html>
后端代码：
from django.shortcuts import render,HttpResponse from django.contrib import auth import json from . import models from django.http import JsonResponse # Create your views here. from django.forms import widgets # 登录 def login(request): if request.is_ajax(): login_response = {"is_login": False, "error_msg": None} # 定义一个字典 username = request.POST.get("username") # 取到用户名 password = request.POST.get("password") # 取到密码 auth_code = request.POST.get("auth_code") # 取到验证码 if auth_code.upper() == request.session.get("auth_code").upper(): # 从session中获取验证码，判断是否正确 # print(username, password, '==========') user = auth.authenticate(username=username, password=password) print(user) # 通过auth模块获取用户名密码 if user: # 正确，判断用户名和密码是否正确 login_response["is_login"] = True auth.login(request, user) else: login_response["error_msg"] = "用户名或密码不正确" # 前端显示用户名或密码错误 else: login_response["error_msg"] = '验证码不正确' # 前端显示验证码错误 return HttpResponse(json.dumps(login_response)) # 返回 return render(request, "login.html") # 若不是Ajax访问方式，返回登录页面重新登录 # 验证码 def get_authCode_img(request): from io import BytesIO import random from PIL import Image, ImageDraw, ImageFont img = Image.new(mode="RGB", size=(120, 40), color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) draw = ImageDraw.Draw(img, "RGB") font = ImageFont.truetype("static/font/kumo.ttf", 25) valid_list = [] for i in range(5): random_num = str(random.randint(0, 9)) random_lower_zimu = chr(random.randint(65, 90)) random_upper_zimu = chr(random.randint(97, 122)) random_char = random.choice([random_num, random_lower_zimu, random_upper_zimu]) draw.text([5 + i * 24, 10], random_char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)), font=font) valid_list.append(random_char) f = BytesIO() img.save(f, "png") data = f.getvalue() valid_str = "".join(valid_list) print(valid_str) request.session["auth_code"] = valid_str # 将验证码写入session中 return HttpResponse(data) #首页 def conference_room_reservation(request): time_list = models.Conference_room_reservation.time_choices # room_list = models.Conference_room.objects.all() return render(request,"conference_room_reservation.html",{"time_list":time_list}) #后端生成伪数据 def booking(request): response = {'status':True,'msg':None,'data':None} try: data = [ [{'text': '花果山'}, {'text': ''}, {'text': '老王'}], [{'text': '流沙河'}, {'text': ''}, {'text': '老王'}], [{'text': '高老庄'}, {'text': ''}, {'text': '老王'}], ] response['data']=data JsonResponse(response) except Exception as e: response['status']=False response['msg']=str(e) return JsonResponse(response)
Ajax实现页面显示，添加属性（伪数据）：
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="/static/Font-Awesome-3.2.1/css/font-awesome.min.css"> <script src="/static/jquery-3.2.1.min.js"></script> <title>会议室预定</title> <style> .c1 { height: 60px; width: 100%; background-color: #2446AB; font-size: 30px; } .crm { font-family: inherit; color: white; } td.setting{ background-color: red; } </style> </head> <body> <div class="c1"> <div class="crm"> <b>会议室预定系统</b> </div> </div> <hr> <div class="container"> <div class="row col-md-12"> <div class="input-append date form_datetim pull-right" data-date="2013-02-21T15:25:00Z"> <input size="16" type="text" value="" readonly> <span class="add-on"><i class="icon-remove"></i></span> <span class="add-on"><i class="icon-calendar"></i></span> <button class="btn btn-primary">保存</button> </div> <p></p> <div class="bs-example" data-example-id="bordered-table"> <table class="table table-bordered"> <thead> <th>会议室</th> {% for time in time_list %} <th>{{ time.1 }}</th> {% endfor %} </tr> </thead> <tbody id="Tbody"> {# 简单展示#} {# {% for room in room_list %}#} {# <tr>#} {# <td>{{ room.title }}</td>#} {# {% for time in time_list %}#} {# <td></td>#} {# {% endfor %}#} {# </tr>#} {# {% endfor %}#} {# Ajax获取#} </tbody> </table> </div> </div> </div> <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script> <script src="/static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> {#日期选择器#} <script> $('.date').datetimepicker({ language: 'zh-CN',//显示中文 format: 'yyyy-mm-dd',//显示格式 minView: "month",//设置只显示到月份 initialDate: new Date(),//初始化当前日期 autoclose: true,//选中自动关闭 todayBtn: true//显示今日按钮 }); $("#datetimepicker").datetimepicker({ format: 'yyyy-mm-dd', minView: 'month', language: 'zh-CN', autoclose: true, startDate: new Date() }); </script> {#ajax获取数据----------#} {#执行下面的函数#} <script> $(function () { ajax_rom() }); {# 定义一个函数#} function ajax_rom() { $.ajax({ url: '/booking/', type: 'GET', success: function (arg) { console.log(arg); if (arg.status) { $.each(arg.data, function (i, item) { {# 循环生成每一条数据，创建一个tr标签#} var tr = $("<tr>"); {# 循环属性 #} {# 循环生成每一条数据，创建一个td标签#} $.each(item, function (k, j) { var td = $("<td>"); td.text(j.text); $.each(j.attr, function (w,l) { {# 给每一个td添加属性#} $(td).attr(w,l); }); tr.append(td); }); $("#Tbody").append(tr) }) } else { } } }) } </script> </body> </html>
后端代码：
from django.shortcuts import render,HttpResponse from django.contrib import auth import json from . import models from django.http import JsonResponse # Create your views here. from django.forms import widgets # 登录 def login(request): if request.is_ajax(): login_response = {"is_login": False, "error_msg": None} # 定义一个字典 username = request.POST.get("username") # 取到用户名 password = request.POST.get("password") # 取到密码 auth_code = request.POST.get("auth_code") # 取到验证码 if auth_code.upper() == request.session.get("auth_code").upper(): # 从session中获取验证码，判断是否正确 # print(username, password, '==========') user = auth.authenticate(username=username, password=password) print(user) # 通过auth模块获取用户名密码 if user: # 正确，判断用户名和密码是否正确 login_response["is_login"] = True auth.login(request, user) else: login_response["error_msg"] = "用户名或密码不正确" # 前端显示用户名或密码错误 else: login_response["error_msg"] = '验证码不正确' # 前端显示验证码错误 return HttpResponse(json.dumps(login_response)) # 返回 return render(request, "login.html") # 若不是Ajax访问方式，返回登录页面重新登录 # 验证码 def get_authCode_img(request): from io import BytesIO import random from PIL import Image, ImageDraw, ImageFont img = Image.new(mode="RGB", size=(120, 40), color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) draw = ImageDraw.Draw(img, "RGB") font = ImageFont.truetype("static/font/kumo.ttf", 25) valid_list = [] for i in range(5): random_num = str(random.randint(0, 9)) random_lower_zimu = chr(random.randint(65, 90)) random_upper_zimu = chr(random.randint(97, 122)) random_char = random.choice([random_num, random_lower_zimu, random_upper_zimu]) draw.text([5 + i * 24, 10], random_char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)), font=font) valid_list.append(random_char) f = BytesIO() img.save(f, "png") data = f.getvalue() valid_str = "".join(valid_list) print(valid_str) request.session["auth_code"] = valid_str # 将验证码写入session中 return HttpResponse(data) #首页 def conference_room_reservation(request): time_list = models.Conference_room_reservation.time_choices # room_list = models.Conference_room.objects.all() return render(request,"conference_room_reservation.html",{"time_list":time_list}) #后端生成伪数据 def booking(request): response = {'status':True,'msg':None,'data':None} try: data = [ [{'text': '花果山'},{'text': '老王','attr':{'room_id':1,'time_id':1,'class':'setting'}},{'text': '','attr':{'room_id':1,'time_id':3}}], [{'text': '流沙河'},{'text': '','attr':{'room_id':2,'time_id':1}},{'text': '','attr':{'room_id':1,'time_id':3}}], [{'text': '高老庄'},{'text': '','attr':{'room_id':3,'time_id':1}},{'text': '老王','attr':{'room_id':1,'time_id':3,'class':'setting'}}], ] response['data']=data JsonResponse(response) except Exception as e: response['status']=False response['msg']=str(e) return JsonResponse(response)