会议室预定功能_高校会议室预订系统功能简介

会议室预定功能_高校会议室预订系统功能简介一、功能介绍这是一个基于前端页面js代码的动态效果和后端对数据库数据更新的操作,主要实现的是会议室的预定功能,当员工进入预定页面后可以看到某天的某个会议室的某个时段是否被预定,当没被预定的情况下,就

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

  一、功能介绍

这是一个基于前端页面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.name times=((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 %} <style> .outer{ width: 100%; height: 40px; background-color: #337ab7; color: white; line-height: 40px; } .left{ float: left; margin-top: 10px; margin-left: 10px; color: black; height: 20px; } #title{ float: right; margin-right: 500px; font-size: 20px; } #date{ float: left; } </style> {% endblock %} {% block content %} <div class="container"> <div class="outer"> <div id="date"> #这是日期 <form action="/houseorder/" method="post"> {% csrf_token %} <div>  <input type="submit" style="color: black;height: 20px;margin-top: 10px;line-height: 20px"> <input type="date" name="time" class="left" value="{{ date }}"> </div> </form> </div> <div id="title">会议室预定表</div> </div> <table class="table table-bordered"> <thead> <tr> <th>会议室</th> {% for choice in choices %} #这是循环生产时间的信息,也就是表头 <th>{{ choice.1 }}</th> {% endfor %} </tr> </thead> <tbody> {{ data }} #所有的表体数据都是由后端构造的 </tbody> </table> <button class="btn btn-info tijiao">保存</button> </div> {% endblock %} {% block script %} <script> var add_dic={}; var del_dic={}; //给每个nn类的标签绑定点击事件  $('.nn').click(function () { var text=$(this).text(); var user=$('.user').attr('id'); console.log(user); var num=$(this).children('span').first().attr('class'); var name=$(this).parent().attr('class'); //已经被别人选中的 if ($(this).hasClass('warning')){ alert('别人已经选定') } //被自己选中的 else if ($(this).hasClass('danger')){ $(this).removeClass('danger'); $(this).children('span').text(''); if (del_dic[name]){ del_dic[name].push(num)} else {del_dic[name]=[num]} } //刚才被点中的,再次点击,取消颜色 else if($(this).hasClass('success')){ $(this).removeClass('success'); } //没被选中的,点击变颜色 else { $(this).addClass('success'); } }); //保存的点击事件  $('.tijiao').click(function () { //循环所有的td标签,然后把拥有success类的标签的值放入add_dic  $('td').each(function () { var num=$(this).children('span').first().attr('class'); var name=$(this).parent().attr('class'); if($(this).hasClass('success')){ if (add_dic[name]){ add_dic[name].push(num)} else {add_dic[name]=[num]} }}); //把add_dic,not_add_dic加入一个列表中,最后把当前选择的日期也放进去 var date=$('.left').first().val(); //用ajax请求,把列表发送到后端  $.ajax({ url:'', type:'post', data: {'add_dic':JSON.stringify(add_dic),'del_dic':JSON.stringify(del_dic),'date':JSON.stringify(date),'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()}, success: function (res) { console.log(res); location.href='/houseorder/?time='+res } }) }) </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('<tr class="%s"><td>%s(%s)</td>' % (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('<td class="nn danger"><span class="%s">%s</span></td>' % (choice[0], order.user.name)) break else: tt = mark_safe('<td class="nn warning"><span class="%s">%s</span></td>' % (choice[0], order.user.name)) break else: tt =mark_safe( '<td class="nn"><span class="%s"></span></td>' % choice[0]) data_list.append(tt) data_list.append('</tr>') data = mark_safe(''.join(data_list)) return render(request, 'houseorder.html', locals())

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168191.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • SpringBoot热部署(IDEA 2109 )「建议收藏」

    SpringBoot热部署(IDEA 2109 )「建议收藏」SpringBoot热部署(IDEA 2109 )

  • 浏览器被hao.360.cn劫持怎么办

    浏览器被hao.360.cn劫持怎么办特么的现在互联网太没节操了,一大早发现我的浏览器被hao.360.cn劫持了,弄了好久都没弄好,后来一想可能是因为qvod的原因,这可是哥当年看片的神器啊……废话不说:1,进入:C:\ProgramData\QvodPlayer\QvodWebBase2,点开1.0.0.53(或者其它)文件夹3,直接删除里面的文件是删除不了的。更改QvodWebBase64.dll后缀名为QvodWebB…

  • Pycharm 运行py文件[通俗易懂]

    Pycharm 运行py文件[通俗易懂]1 在桌面上建立一个文件夹  2.打开pycharm,如果已经有文件了,就点击File-&gt;closeproject,回到主界面3 选择Createanewproject 4.    将该文件夹的所在路径设为工程的路径,选择一下解释器,就点击Create,如果提示该文件夹不空的话,点击yes即可,可以提前把数据放入该aaaa文件夹5.   现在进入该页面,然后新建一个…

  • linux 驱动移植_免驱动led灯好吗

    linux 驱动移植_免驱动led灯好吗通过前两篇文章的介绍,我们已经把linux内核移植到了tiny210上,但是看到的现象都是通过超级终端来观察的,下面了,我们介绍一下led灯的移植,给大家一个更直观的感受。这篇文章主要的内容如下:1.对平台总线的简介;2.led驱动的移植。一.平台总线   首先介绍一下,我们为什么要简单介绍一下平台总线呢?因为我们是做led驱动的移植,而不是自己编写led的驱动代码。我们要移植

  • 解决了无法显示验证码的问题怎么办_验证码不能显示的问题

    解决了无法显示验证码的问题怎么办_验证码不能显示的问题 晚上检测一个站的时候,猜解出了密码,扫出了后台,可验证码就是无法显示,难道管理员故意弄的?不太可能吧?于是上网一搜,没想到还真找到了解决的方法。我的是VistaUltimate,部分XPSP2也会有这个问题。好了,不废话了,解决办法如下:运行regedit,找到“HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/InternetExplorer/Securit

  • jupyter notebook的安装与使用

    jupyter notebook的安装与使用最近由于项目需要,开始学习python,然后发现一个非常有用的python交互式编辑器,非常容易上手而且非常有用和实在,本博文是对学习jupyternotebook的一个汇总和记录,与大家一起分享!下面的内容是针对ubuntu系统的,当然,jupyternotebook在windows也是支持的。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号