项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,

这篇具有很好参考价值的文章主要介绍了项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一。页面构思

1.标题栏

        大标题:智慧教室管理系统

        小标题:灯光,报警,风扇,温度,湿度,光照

2.样式设计

        背景设置。字体设置(字体大小,格式,颜色)

3.导航栏

        6个导航栏标签:3个传感器,3个控制

        每次点击导航栏标签:页面对应做出页面展示。

4.前后台交互设计

        1.定时刷新传感器设置(当用户点击传感器标签,需要把数据展示给用户)

        2.控制下发(当用户点击控制标签,需要根据用户下发的命令进行控制实际的硬件,并且在主题栏进行动态展示)

二。前端开发基本技能

1.html

主要内容:html(最外边),head(页面头),body(页面身)标签

        项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

2.CSS--》静态页面的样式

        对不同区域的资源设置样式(body,header,h1区域的样式设计)

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

3.javaScript(js)

        动图设计,

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

常用的网页:jQuery,有很多现成的页面资源可以使用。

        jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

开发方式:

1.BootStrap(基于框架的开发)

Bootstrap中文网

2.Vue(渐进式js框架)

Vue.js - 渐进式 JavaScript 框架 | Vue.js

3.react(现成的框架)

React 官方中文文档

本项目运用到的技术:js,css(了解即可)

三。Web页面布局

1.标题栏布局

(1)页面展示

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

具体代码

headr,h1的样式在上面CSS中有定义。

(2)small是小字体

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

2.导航栏布局

(1)页面展示

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

(2)具体代码

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

四。页面展示

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

五。页面与stm32开发板的交互

1.html的文件拷贝到stm的SD卡中

注意:

拷贝的是Web文件夹的内容,拷贝到SD卡的根目录下。不要拷贝成文件夹了。

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

2.移植三个.c文件到keil文件夹中。头文件拷贝到inc文件夹中。

注意:不要忘记keil工程中,添加已存在文件到工程目录中

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

4.运行

注意:stm32的IP地址是多少。在LWIP初始化中192.168.1.7

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

5.运行成功

项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,,物联网项目:智慧农业,物联网,单片机,stm32,人机交互

补充:WebServer开发流程

1.WebServer主线程实现

我们发现就是不停的函数调用,层层调用。

(1)我们需要使用SD卡,所以移植fatfs,需要使用http协议,所以移植httpserver-socket.c

(2)html拷贝到sd卡中。

(3)在任务中调用http_server_socket_thread

2.http_server_socket_thread实现

(1)创建socket,绑定套接字,开始监听,等待客户端过来接受并响应。

(2)响应使用http_server_serve函数

3.http_server_serve实现

(1)read读数据,Respond_Http_Request请求响应数据

(2)关闭socket,这就是一次短链接的实现。

4.Respond_Http_Request实现

(1)Parse_Http_Request解析HTTP请求

(2)通过对(1)的数据进行分析对比,并针对解析结果对数据进行处理。

(3)在(2)中处理时需要Send_Response_File响应文件请求

5.Parse_Http_Request实现

(1)通过对比GET,HEAD,POST字符串,对http结构体属性msg进行修改。

(2)对http结构体属性URl进行赋值。

6.Send_Response_File

(1)分析请求URL报文中的文件类型

(2)把需要发送的数据 通过封装成HTTP报文,通过write写回。

(3)读取文件并写回

交互时发送的数据通过数据结构的方式封装

(1)web处理封装成结构体

(2)get,post请求所需字符封装成字符串

(3)数据的处理都各自封装成函数文章来源地址https://www.toymoban.com/news/detail-704124.html

到了这里,关于项目(智慧教室)第四部分,页面交互功能,WebServer建立与使用,的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebView引入的页面如何实现交互。通过webview方式嵌套在小程序里面的页面如何实现保存到相册的功能

    通过 WebView 方式嵌套在小程序中的页面,保存图片到相册的功能需要借助 WebView 的内部通信机制。以下是实现步骤: 1. 小程序端,给 WebView 组件添加一个监听事件,以便接收来自 WebView 页面的消息: ```html web-view src=\\\"your-website.com domain name is for sale. Inquire now.\\\" bindmessage=\\\"handle

    2024年01月17日
    浏览(39)
  • 在vue项目中使用unity资源,实现页面和unity中事件的交互。

    1.将unity给的包放在public路径下。 2.在iframe中引入。 3.在vue项目中监听unity中的事件。关闭页面的时候需要销毁。 4.vue页面向unity发送参数信息。 5.在unity中的index.html文件中接收页面传来的参数。 6.调用unity内部的事件。

    2024年04月13日
    浏览(28)
  • 开发者工具network里请求pending状态耗时长是为什么?(项目部分页面的请求)

    前言:本文主要是提问,后文有一个解决办法,但仅供参考 目录 问题 排查过程 解决办法(仅供参考) 提问:         在开发一个数字化大屏项目的时候遇到问题:某个大屏接口请求10多秒才能拿到响应数据,其他大屏页面接口响应很快。         发现主要是接口statu

    2023年04月08日
    浏览(75)
  • C++初级项目webserver项目流程介绍(2)

    C++的webserver项目是自己在学完网络编程后根据网课的内容做的一个初级的网络编程项目。 这个项目的效果是可以在浏览器通过输入网络IP地址和端口,然后打开对应的文件目录 效果如下: 也可以打开文件夹后点击目录,打开到对应的文件夹中去。 这个就是简单的webserver功能

    2024年02月05日
    浏览(43)
  • WebServer项目的亮点和难点

    面试被问到了这个问题,答得稀烂…但是我觉得这个问题真的问的很好,还是要好好想一想总结一下。 亮点: 并发模型为Reactor 使用Epoll水平触发+EPOLLONESHOT,非阻塞IO 为充分利用多核CPU的性能,以多线程的形式实现服务器,并实现线程池避免线程频繁创建销毁造成的系统开销

    2024年02月09日
    浏览(29)
  • C++初级项目-webserver(1)

    Web服务器是一个基于Linux的简单的服务器程序,其主要功能是接收HTTP请求并发送HTTP响应,从而使客户端能够访问网站上的内容。本项目旨在使用C++语言,基于epoll模型实现一个简单的Web服务器。选择epoll模型是为了高效地处理大量并发连接。 这个项目的目标是实现一个简单的

    2024年02月05日
    浏览(42)
  • vue项目中页面实现全屏的功能

    2024年02月07日
    浏览(37)
  • 分布式项目 12 用jsonp来完成单点登录功能(两个系统之间进行信息交互)

    在项目中使用ctrl+H ,来快速查找相关的hrl请求。 首先全部的请求会进过jt-web,在进行对其他系统的通信。 说明:当点击“登录”或者\\\"免费注册\\\"跳转到登录或者注册页面。 在jt-web项目中,声明UserController资源,完成页面资源的调度,具体代码实现如下所示: 创建项目sso 修改

    2024年02月08日
    浏览(66)
  • Vue项目搭建及使用vue-cli创建项目、创建登录页面、与后台进行交互,以及安装和使用axios、qs和vue-axios

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求: 3.2.3 发送post请求: 3.2.4 简化axio

    2024年02月07日
    浏览(56)
  • Vue+SpringBoot项目开发:登录页面美化,登录功能实现(三)

    上一章写了从零开始Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建 Vue+TypeScript的前端项目已经搭建完成了 这一章的内容是引入element-plus和axios实现页面的布局和前后端数据的串联,实现一个登陆的功能,跳转到首页 现在前端项目的一个结构目录 在src/main.js中加入element-plus

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包