会议室预定小项目

from django.db import models

# Create your models here.
from django.db import models
from django.contrib.auth.models import AbstractUser


# 使用了django原生的user表
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):
    """
    会议室预定信息

    """
    user = models.ForeignKey('UserInfo', 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:
        # 联合唯一不能重复,限制了不能一个时间出现2次预定
        unique_together = (
            ('room', 'date', 'time_id'),
        )

    def __str__(self):
        return str(self.user) + "预定了" + str(self.room)

from django.shortcuts import render, HttpResponse, redirect
from app01 import models
from django.contrib import auth
import datetime
import json


# Create your views here.


def login(request):
    if request.method == "POST":
        user = request.POST.get("user")
        pwd = request.POST.get("pwd")
        print(user, pwd)
        user = auth.authenticate(username=user, password=pwd)
        print(user)
        if user:
            auth.login(request, user)  # request.user 将user的值注册到session中
            return redirect("/index/")

    return render(request, "login.html")

def index(request):
    # 取到当前日期
    date = datetime.datetime.now().date()
    # 接受前端post数据更新数据库
    if request.method == "POST":
        Book_add = json.loads(request.POST.get("Book_add"))
        Book_del = json.loads(request.POST.get("Book_del"))
        # 定义一个返回前端的字典
        book_stadus = {"stadus": 0, "msg": ""}
        # 删除数据
        if Book_del:
            print(Book_del)
            for k, v in Book_del.items():
                for time_id in v:
                    models.Book.objects.filter(room_id=k, time_id=time_id).delete()
            book_stadus['stadus'] = 1
            book_stadus['msg'] = "取消成功预定成功"


        # 添加数据库
        if Book_add:
            for k, v in Book_add.items():
                for time_id in v:
                    add_book = models.Book.objects.create(user_id=request.user.pk, date=date, room_id=k,
                                                          time_id=time_id)
            book_stadus['stadus'] = 2
            book_stadus['msg'] = "添加预定成功"

        return HttpResponse(json.dumps(book_stadus))

    time_choices = models.Book.time_choices
    room_list = models.Room.objects.all()
    # 取到当前时间的值
    book_list = models.Book.objects.filter(date=date)

    # 在前端模板系统页面所实现的功能有限，后端好一些
    htmls = ""

    # 取到了所有的会议室和数量
    # [<Room: 301 会议室>, <Room: 302会议室>, <Room: 303会议室>, <Room: 304会议室>, <Room: 305会议室>, <Room: 306会议室>]
    for room in room_list:
        htmls += "<tr><td>{}({})</td>".format(room.caption, room.num)
        # 1~13点的选择
        for time_choice in time_choices:
            flag = False
            # 找到今天已经预定的房间的pk值
            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 click_event users' 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:
                # 每一个方格上都让他有自己的id值
                htmls += "<td class='click_event '  room_id={} time_id={}></td>".format(room.pk, time_choice[0])

        htmls += "</tr>"
    return render(request, "index.html", locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--配置手机端适应-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--配置css文件 核心CSS样式压缩文件-->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
    <!--配置jQuery-->
    <script src="/static/bootstrap/jQuery.js"></script>
    <!--配置 核心Boot script JS压缩文件-->
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>

    <style>
        .active {
        {#优先级问题#} background-color: orange !important;
        }
        .another_active {
            background-color: #2b669a;
            color: white;
        }

        #msg {
            position: relative;
            top: 0px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-13 col-md-offset-0">
            <h3>会议室预定系统({{ date|date:"Y-m-d " }})</h3>
            <table class="table table-bordered table table-striped">
                <thead>
                <tr>
                    <th>会议室/时间</th>
                    {% for time in time_choices %}
                        <th>{{ time.1 }}</th>
                    {% endfor %}
                </tr>

                </thead>
                <tbody>
                {{ htmls|safe }} <!--需要在后端做-->
                </tbody>
            </table>
            <span id="msg" class="pull-right"></span>
            <div>
                <button id="updata_meeting" type="submit" class="btn btn-success pull-right">确认提交</button>
            </div>
        </div>
    </div>

</div>

{% csrf_token %}
</body>
<script>
    //获取选中会议室的数据(最难)
    var POST_DATA = {
        // 定义了一个添加的列表和一个删除的列表
        "ADD_room": {},
        "DEL_room": {},
    };

    // 给每个时间格子绑定点击事件
    $(".click_event").on("click", function () {
        // 在点击的一瞬间
        var room_id = $(this).attr("room_id");
        var time_id = $(this).attr("time_id");


        {#alert($(this).hasClass('active'));#}
        //点击后将添加颜色
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).text('');

            // 如果点击取消的值是当前登录用户已经选择的会议室
            if ($(this).hasClass('users')) {
                if (POST_DATA.DEL_room[room_id]) {

                    POST_DATA.DEL_room[room_id].push(time_id)
                }
                else {
                    // time_id必须定义一个列表 方便点击push放值
                    POST_DATA.DEL_room[room_id] = [time_id];
                }

            }
            else {
                POST_DATA.ADD_room[room_id].pop(time_id);
                //如果当前的列表为空，我就把key也删除
                if (POST_DATA.ADD_room[room_id].length === 0) {
                    delete POST_DATA.ADD_room[room_id]
                }
            }
        }
        else {
            if ($(this).hasClass('users')) {
                $(this).addClass('active');
                $(this).text('{{ request.user }}');
                //应为他已经是选择好的，所以把他删除了
                delete POST_DATA.DEL_room[room_id]
            }
            else {
                $(this).addClass('active');
                $(this).text('{{ request.user }}');
                if (POST_DATA.ADD_room[room_id]) {

                    POST_DATA.ADD_room[room_id].push(time_id)
                }
                else {
                    // time_id必须定义一个列表 方便点击push放值
                    POST_DATA.ADD_room[room_id] = [time_id];
                }
            }
        }
    });

    //向后端发送数据
    $("#updata_meeting").on("click", function () {
        $.ajax({
            url: "/index/",
            type: "POST",
            data: {
                //当时对象的时候一点要记得json一下在发送过去
                'csrfmiddlewaretoken': $("input[name='csrfmiddlewaretoken']").val(),
                "Book_add": JSON.stringify(POST_DATA.ADD_room),
                "Book_del": JSON.stringify(POST_DATA.DEL_room),
            },
            success: function (arg) {
                arg = JSON.parse(arg);
                if (arg.stadus == 2) {

                    $("#msg").text(arg.msg);
                    $("#msg").css('color', 'hotpink');
                    var t1 = window.setTimeout(function () {

                        $("#msg").text("");

                    }, 2000)

                }
                else {
                    $("#msg").text(arg.msg);
                    $("#msg").css('color', 'red');
                    var t1 = window.setTimeout(function () {

                        $("#msg").text("");

                    }, 2000)
                }
                $("#msg").text(arg.msg);
                $("#msg").css('color', 'red');
                var t1 = window.setTimeout(function () {

                    location.reload();

                }, 3000)
            }
        });
        //清空POST_DATA列表
        //获取选中会议室的数据(最难)
        POST_DATA = {
            // 定义了一个添加的列表和一个删除的列表
            "ADD_room": {},
            "DEL_room": {},

        }
    })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--配置手机端适应-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--配置css文件 核心CSS样式压缩文件-->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
    <!--配置jQuery-->
    <script src="/static/bootstrap/jQuery.js"></script>
    <!--配置 核心Boot script JS压缩文件-->
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <style>
        .top_move{

            margin-top: 100px;

        }

    </style>

</head>
<body>
<div class="container top_move">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="/login/" method="post">
                {% csrf_token %}
                <p >
                    用户名: <input type="text" class="form-control" name="user">
                </p>

                <p >
                    密码: <input type="password" class="form-control" name="pwd">
                </p>

                <button type="submd" class="btn btn-success">提交</button>

            </form>
        </div>

    </div>

</div>



</body>
</html>