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

会议室预定功能_高校会议室预订系统功能简介一、功能介绍这是一个基于前端页面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)


相关推荐

  • 解决gradle下载慢的问题

    解决gradle下载慢的问题开发工具:IntelliJIDEA&AndroidStudio问题:新建项目下载gradle慢的问题解决:打开用户主目录linux平台/home/用户名/.gradlewindows平台c:\Users\用户名\.gradlemacos平台/Users/用户名/.gradle找到./gradle/wrapper/dist/gradle-版本号-bin目

  • 数据库常见查询语句_数据库检索语句

    数据库常见查询语句_数据库检索语句常用数据库查询语句基本查询select字段1,字段2,…from表名;例如:selectid,namefromstu;条件查询select字段1,字段2,…from表名where字段关系符号值;关系符号<=>=<=!=大于等于大于等于小于等于不等于例如:select*fromstuid>2;andorin(范围内满足in内部条件)

  • linux查看java程序线程命令_linux查找字符串命令

    linux查看java程序线程命令_linux查找字符串命令在linux系统下可以通过命令查看进程,那么具体是那个命令呢?下面由学习啦小编为大家整理了linux查看进程的命令,希望对大家有帮助!一、linux查看进程的命令有ps、pstree、pgrep等1、ps显示进程信息,参数可省略-aux以BSD风格显示进程常用-efH以SystemV风格显示进程-e,-A显示所有进程a显示终端上所有用户的进程x显示无终端进程u显示详细信息f…

  • java中map根据value找key_Java Map和Map<String, Object>类型,map通过value找key

    java中map根据value找key_Java Map和Map<String, Object>类型,map通过value找keyMap是Map的一个泛型形式,俩个之间实际上是一个东西,但是用法却有点不一样1、Map:里面存放的是键值对集合,键值对的类型可以是任意封装类型实例Mapmap=newHashMap();//以下的俩种使用方式都是对的map.put(“a”,1);map.put(11,”abc”);2、Map:中只能存放指定类型的key和指定类型的value如下Map中只能存放String类型的键,Object…

  • python怎么表示取余_python如何实现取余操作[通俗易懂]

    python怎么表示取余_python如何实现取余操作[通俗易懂]python实现取余操作的方法:可以利用求模运算符(%)来实现。求模运算符可以将两个数相除得到其余数。我们还可以使用divmod()函数来实现取余操作,具体方法如:【divmod(10,3)】。在python中要实现取余操作可以使用求模运算符(%),该运算符可以将两个数相除得到其余数。(推荐教程:Python入门教程)如果一个数恰好能被另外一个数据整除,则余数为0,%运算后返回结果为0。可利用余数…

  • mysql数据库基础知识总结

    mysql数据库基础知识总结mysql数据库基础知识总结一、基础常用命令1.创建命令createuser‘用户名’@‘ip’identifiedby‘密码’;创建用户dropuser用户名@ip删除用户showdatabases;查数据库showtables;看表createdatabase数据库名defaultcharsetutf8;创建数据库createtable表名(列名数据类型约束···,列名数据类型约束···)engine=in

发表回复

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

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