一、功能介绍
这是一个基于前端页面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 %}{% endblock %}{% block script %} {% endblock %}#这是日期会议室预定表
{ { data }} #所有的表体数据都是由后端构造的 会议室 {% for choice in choices %} #这是循环生产时间的信息,也就是表头{ { choice.1 }} {% endfor %}
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())
对于预定类的功能都可以与此雷同,所有就可以用同样思路完成。