博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
会议室预定功能
阅读量:6820 次
发布时间:2019-06-26

本文共 4323 字,大约阅读时间需要 14 分钟。

  一、功能介绍

这是一个基于前端页面js代码的动态效果和后端对数据库数据更新的操作,主要实现的是会议室的预定功能,当员工进入预定页面后可以看到某天的某个会议室的某个时段是否被预定,当没被预定的情况下,就可以预定会议室,这相当于对于会议室这种共享资产的合理化分配,快速便捷的完成会议室的预定。前端页面时长这样的。

  从上图中,可以清晰的看出那些人预定那些房间。我们要实现的功能如下:

1,当选择一个时间,然后点击提交按钮,就会发送一个基于form表单的post请求,会把时间发过去然后,返回的页面就是刚才选择日期的会议室预定情况2,点击空白小格子时,颜色会变浅绿,3,点击被预定的小格子时,当名字是自己的名字时,会使颜色消失,变成白色小格子,然后把房间号和时间段放入删除列表;当点击的名字不是自己时,会弹出警告框,不能对其进行操作4,点击保存按钮时,会把所有的浅绿的小格子的房间号和时间段放入添加列表;然后发送ajax请求,把添加列表和删除列表发送到后端处理5,后端拿到数据,先对删除列表,把要删除的删除;然后再处理添加列表,把该添加的添加上

  二、代码

  1,创建模型

class UserInfo(models.Model):       #这是user表   pass class House(models.Model):          #这是房间表    '''会议室表'''    name=models.CharField(max_length=5)    size=models.CharField(max_length=5)    def __str__(self):        return self.nametimes=((1, '09:00-10:00'), (2, '10:00-11:00'), (3, '11:00-12:00'), (4, '12:00-13:00'),        (5, '13:00-14:00'), (6, '14:00-15:00'), (7, '15:00-16:00'), (8, '16:00-17:00'),        (9, '17:00-18:00'), (10, '18:00-19:00'), (11, '19:00-20:00'),(12, '20:00-21:00'))class Order(models.Model):            #这是会议室预定记录表    '''会议室预定记录表'''    date=models.DateField()    user=models.ForeignKey(to='UserInfo',on_delete=models.CASCADE)    house=models.ForeignKey(to='House',on_delete=models.CASCADE)    time = models.IntegerField(choices=times)    class Meta:        unique_together = ("date", "house", 'time')          #这是联合唯一,

  2,前端代码

{% extends 'base.html' %}{% block css %}    {% endblock %}{% block content %}    
#这是日期
{% csrf_token %}
会议室预定表
{% for choice in choices %} #这是循环生产时间的信息,也就是表头
{% endfor %}
{
{ data }} #所有的表体数据都是由后端构造的
会议室 {
{ choice.1 }}
{% endblock %}{% block script %} {% endblock %}

  3,后端代码

def houseorder(request):    date = request.GET.get('time')    now = time.strftime('%Y-%m-%d', time.localtime(time.time()))    if request.is_ajax():                #这是对ajax请求的处理        add_dic = json.loads(request.POST.get('add_dic'))        del_dic = json.loads(request.POST.get('del_dic'))        date = json.loads(request.POST.get('date'))        date =date or now        if del_dic:                   #拿到要删除的字典,然后删除            for key, value in del_dic.items():                for ele in value:                    Order.objects.filter(date=date, user_id=request.user.id, house_id=int(key),                                         time=int(ele)).delete()        if add_dic:                   #这是拿到添加的字典,然后添加            for key, value in add_dic.items():                for i in value:                    Order.objects.create(date=date, user_id=request.user.id, house_id=int(key), time=int(i))        return HttpResponse(date)    #点击日历提交的post请求    if request.method == 'POST':        date = request.POST.get('time')   这是构建页面需要的数据,比如说表体。。。    date=date or now    username = request.user.name    orders = Order.objects.filter(date=date)    houses = House.objects.all()    choices = times    data_list = []    for house in houses:      #这就是构建表体数据        data_list.append(mark_safe('%s(%s)' % (house.id, house.name, house.size)))        for choice in choices:            for order in orders:                if order.house.id == house.id and choice[0] == order.time:                    if username==order.user.name:                        tt = mark_safe('%s' % (choice[0], order.user.name))                        break                    else:                        tt = mark_safe('%s' % (choice[0], order.user.name))                        break            else:                tt =mark_safe( '' % choice[0])            data_list.append(tt)        data_list.append('')    data = mark_safe(''.join(data_list))    return render(request, 'houseorder.html', locals())

  对于预定类的功能都可以与此雷同,所有就可以用同样思路完成。

转载于:https://www.cnblogs.com/12345huangchun/p/10446619.html

你可能感兴趣的文章
《Android开发从零开始》——38.WebView控件学习
查看>>
Windows Server 2012 Hyper-V PK VMware 性能
查看>>
IOS 手写控件 简单播放器 AVFoundation音乐播放
查看>>
FPGA设计——图像处理(均值滤波)
查看>>
Windows7无法访问共享文件夹(0x800704cf,0x80070035)解决方法
查看>>
ubuntu 个人使用技巧
查看>>
android JNI使用chdir来改变当前目录
查看>>
局域网络必备-mac地址修改
查看>>
Linux学习之逻辑卷管理
查看>>
about asm in linux
查看>>
我的友情链接
查看>>
通过Power Shell 管理Office 365
查看>>
ECMAScript 语法
查看>>
Flex 数据类型学习总结
查看>>
Linux下DNS服务,相关配置文件关系(刚刚学来的展示一下)
查看>>
linux学习第2天(自习)
查看>>
P2P大潮正在消退,第一梯队亦需自危
查看>>
Final 变量测试
查看>>
python面向对象
查看>>
linux下vim下光标下显示这一横杠
查看>>