会议室预定系统

简单实现：

前端代码：

<!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;
             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>
View Code

后端代码：

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})
View Code

 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;
             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>
View Code

后端代码：

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)
View Code

 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;
             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>
View Code

后端代码：

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)
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/w-s-l123/p/8024554.html