物联网智慧教室项目（七）：网页交互功能开发（前端）

源码已通过百度云上传，推荐使用谷歌浏览器打开，使用开发者模式浏览学习，也可自行修改样式。
链接：https://pan.baidu.com/s/1gYXIK8YYXrwZbwsCJSS-MQ?pwd=gbls 
提取码：gbls

一、界面构思

（一）原型分析

（二）界面构思

1、标题栏

布局

标题设计

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

样式设计

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

2、导航栏

布局

导航栏标题

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

导航标签

6个导航标签

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

6个导航展示界面

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

样式设计

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

前后台交互设计

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

3、主题栏

布局

• 主题界面

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

• 风扇图标

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

• 报警器图标

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

• 灯光控制

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

（三）素材设计

1、导航栏素材

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/

项目用到的技术

三、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