Day7-网页交互功能开发（前端）

最新推荐文章于 2024-07-17 13:47:47 发布

物联网攻城狮

最新推荐文章于 2024-07-17 13:47:47 发布

阅读量860

点赞数 20

分类专栏：基于Zigbee3.0的智慧教室一体化系统文章标签：交互前端单片机嵌入式硬件运维服务器网络

本文链接：https://blog.csdn.net/weixin_72238916/article/details/136433201

版权

基于Zigbee3.0的智慧教室一体化系统专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.界面构思

原型分析

界面构思

标题栏

布局

标题设计

大标题：智慧教室管理系统
小标题：灯光，报警，风扇，温度，湿度，光照

样式设计

背景色配置
字体配置
- 字体大小，格式，颜色

导航栏

布局

导航栏标题

提示用户用于智能管理使用的，用图片进行设计

导航标签

6个导航标签

3 个用于传感器
3 个用于控制
每一个标签，都有图标和文件进行展示

6个导航展示界面

3 个传感器
    显示传感器名称和传感器值
3 个控制
    显示控制名称和控制按钮

样式设计

当鼠标每点击一个导航标签，我都需要进行导航界面展示

前后台交互设计

定时刷新传感器数据值（当用户点击传感器标签，需要把传感器值实时的展示给用户）
控制下发（当用户点击控制标签，需要根据用户下发的命令进行控制实际的硬件，并且在主题栏进行动态展示）

主题栏

布局

主题界面

给用户展示一个智慧教室的图片

风扇图标

当用户开关风扇时，这个图标要进行动态效果

报警器图标

当用户开关报警器时，这个图标要进行动态效果

灯光控制

当用户开关灯泡时，我们教室的主界面要展示动态效果

素材设计

导航栏素材

主题栏素材

2.前端开发技术

开发工具

https://code.visualstudio.com/

前端开发基本技能

html

CSS

JavaScript

jQuery

http://jquery.cuishifeng.cn/index.html

基于框架开发

BootStrap

https://www.bootcss.com/

Vue

https://cn.vuejs.org/

react

https://react.docschina.org/

项目用到的技术

3.Web页面布局

标题栏布局

    <div class="header">
        <div class="content">
            <h1>智慧教室管理系统
                <small>温度、湿度、风扇、报警，光照
                </small>
            </h1>
        </div>
    </div>

导航栏布局

<div class="body-left">
    <img src="images/left-title.png" style="margin:26px 0;">
    <div>
        <ul class="left-nav">
            <li class="line active">
                <a href="#title1" data-toggle="tab">
                    <img src="images/tubiao01.png" width="40px">温度传感器
                </a>
            </li>
            <li class="line">
                <a href="#title2" data-toggle="tab">
                    <img src="images/tubiao02.png" width="40px">湿度传感器
                </a>
            </li>
            <li class="line">
                <a href="#title3" data-toggle="tab">
                    <img src="images/tubiao03.png" width="40px">光照传感器
                </a>
            </li>
            <li class="line">
                <a href="#title4" data-toggle="tab">
                    <img src="images/tubiao04.png" width="40px">LED
                </a>
            </li>
            <li class="line">
                <a href="#title5" data-toggle="tab">
                    <img src="images/tubiao05.png" width="38px">风扇
                </a>
            </li>
            <li class="line">
                <a href="#title6" data-toggle="tab">
                    <img src="images/tubiao06.png" width="40px">报警器
                </a>
            </li>
        </ul>
        <div class="content">
            <div class="box fade in active" id="title1">
                <p>温度值<br /><span>
                        <lable id="temperature"></lable>
                    </span></p>
            </div>
            <div class="box fade" id="title2">
                <p>湿度值<br /><span>
                        <lable id="humidity"></lable>
                    </span></p>
            </div>
            <div class="box fade" id="title3">
                <p>光照值<br /><span>
                        <lable id="light"></lable>
                    </span></p>
            </div>
            <div class="box fade" id="title4">
                <h3>开关</h3>
                <img id="button01" src="images/an-off.png" onclick="anniu01()" />
            </div>
            <div class="box fade" id="title5">
                <h3>开关</h3>
                <img id="button02" src="images/an-off.png" onclick="anniu02()" />
            </div>
            <div class="box fade" id="title6">
                <h3>开关</h3>
                <img id="button03" src="images/an-off.png" onclick="anniu03()" />
            </div>
        </div>
    </div>

背景栏布局

<div class="body-right">
    <img id="sgbj" class="sgbj" src="images/sgbj-off.png" />
    <img id="fan" class="fan" src="images/fan-off.png" />
    <img id="bg" src="images/sys-bg.jpg" />
    <audio id="alarm" src="music/alarm.mp3"></audio>
</div>

4.Web页面样式设计

外部文件引入

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

标题栏样式设计

        h1 {
            padding: 0; 
            margin: 0 0 0 15px;
            font-size: 24px;
            color: #fff;
            line-height: 3em;
            font-weight: 100;
        }

        h1 small {
            font-size: 12px;
            color: #fff;
            margin-left: 10px;
        }

        .content {
            width: 1200px;
            margin: 0 auto;
        }

导航栏样式设计

.body-left {
    float: left;
    width: 311px;
    margin-right: 10px;
    text-align: center;
    color: #fff;
}

.body-left .left-nav {
    float: left;
    width: 180px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.body-left .left-nav .line {
    background: #010146;
}

.body-left .left-nav .active {
    background: #020220;
}

.body-left .left-nav a {
    position: relative;
    display: block;
    line-height: 63px;
    text-decoration: none;
    color: #fff;
    padding-left: 60px;
}

.body-left .left-nav a img {
    position: absolute;
    top: 7px;
    left: 10px;
}

.body-left .content {
    float: left;
    width: 131px;
    background: #020220;
    height: 378px;
}

.body-left .content .box {
    position: absolute;
    margin: 20px 10px;
    width: 111px;
}

.body-left .content .box h3 {
    font-size: 16px;
    padding: 0;
    margin: 20px 0;
}

.body-left .content .box p {
    padding: 0;
    margin: 10px 0;
}

.body-left .content .box p span {
    font-size: 20px;
    color: #FFFF00;
}

.body-left .content .active {
    z-index: 10;
}

#button {
    width: 80px;
}

主题栏样式设计

.body-right {
    position: relative;
    float: left;
    width: 879px;
}

.body-right .sgbj {
    position: absolute;
    top: 135px;
    left: 12px;
    width: 50px;
}

.body-right .fan {
    position: absolute;
    top: 186px;
    left: 473px;
    width: 40px;
}

样式效果设计

bootstrap教程

https://www.runoob.com/bootstrap/bootstrap-tab-plugin.html

导航标签样式设计

<li class="line active">
    <a href="#title1" data-toggle="tab">
        <img src="images/tubiao01.png" width="40px">温度传感器
    </a>
</li>

导航标签内容设计

<div class="box fade in active" id="title1">
    <p>温度值<br /><span>
            <lable id="temperature"></lable>
        </span></p>
</div>

5.前后台交互设计

传感器数据获取

传感器数据初始化

$("#temperature").text("25℃");
$("#humidity").text("45%");
$("#light").text("1233lux");

ajax后台数据获取

//获取传感器数据
function ReadData() {
    $.ajax({
        url: "/DATA/Sensor",
        type: "get",
        cache: false,
        timeout: 2000,
        dataType: "json",
        success: function (data) {
            console.log(data);
            $("#temperature").text(data.temperature + "℃");
            $("#humidity").text(data.humidity + "%");
            $("#light").text(data.light + "lux");
        }
    })
}

        //命令交互
        function SendCmd(type, cmd) {
            $.ajax({
                url: "/CMD/" + type,
                type: "post",
                cache: false,
                timeout: 2000,
                data: cmd,
                success: function (data) {
                    console.log(data);
                }
            })


        }

定时刷新传感器数据

setInterval(ReadData, 5000);

按钮命令交互

灯光控制

function anniu01() {
    var anNiu = $("#button01")[0];
    var bG = $("#bg")[0];
    if (LightStatus) {
        //发送关闭灯光命令
        SendCmd("Light", "Off");
        anNiu.src = ("images/an-off.png");
        bG.src = ("images/sys-bg-off.jpg");
        bG = $("#fan")[0];
        if (FanStatus) {
            bG.src = ("images/bg-fan-on.png");
        }
        else {
            bG.src = ("images/bg-fan-off.png");
        }
        LightStatus = false;
    } else {
        //发送开启灯光命令
        SendCmd("Light", "On");
        anNiu.src = ("images/an-on.png");
        bG.src = ("images/sys-bg.jpg");
        bG = $("#fan")[0];
        if (FanStatus) {
            bG.src = ("images/fan-on.png");
        }
        else {
            bG.src = ("images/fan-off.png");
        }
        LightStatus = true;

    }
}

风扇控制

function anniu02() {
    var anNiu = $("#button02")[0];
    var bG = $("#fan")[0];
    if (FanStatus) {
        //发送关闭风扇命令
        SendCmd("Fan", "Off");
        anNiu.src = ("images/an-off.png");
        if (LightStatus) {
            bG.src = ("images/fan-off.png");
        }
        else {
            bG.src = ("images/bg-fan-off.png");
        }

        FanStatus = false;
    }
    else {
        //发送开启风扇命令
        SendCmd("Fan", "On");
        anNiu.src = ("images/an-on.png");
        if (LightStatus) {
            bG.src = ("images/fan-on.png");
        }
        else {
            bG.src = ("images/bg-fan-on.png");
        }

        FanStatus = true;
    }
}

报警控制

function anniu03() {
    var anNiu = $("#button03")[0];
    var bG = $("#sgbj")[0];
    var AS = $("#alarm")[0];
    if (AlarmStatus) {
        //发送关闭风扇命令
        SendCmd("Alarm", "Off");
        anNiu.src = ("images/an-off.png");
        bG.src = ("images/sgbj-off.png");
        AS.removeEventListener('ended', loop, false);
        AS.pause();
        AlarmStatus = false;
    }
    else {
        //发送开启风扇命令
        SendCmd("Alarm", "On");
        anNiu.src = ("images/an-on.png");
        bG.src = ("images/sgbj-on.gif");
        AS.addEventListener('ended', loop, false);
        AS.play();
        AlarmStatus = true;
    }
}