简单的HTTP服务实现目录图片随机返回和HTML实现Web页面设计（实验小结）

最新推荐文章于 2024-08-08 13:02:48 发布

WJYM

最新推荐文章于 2024-08-08 13:02:48 发布

阅读量297

点赞数 1

文章标签：前端学习网络协议 http html

本文链接：https://blog.csdn.net/WJY2003IBDM/article/details/134239152

版权

一、随机图片返回的HTTP服务

实现配置环境：python，flask包（pip命令安装或者直接在ide里面搜索了直接安装）

直接python创建个flask项目放个代码


from flask import Flask
app = Flask(__name__)  
import os              
import random          
from flask import send_
                       
@app.route('/')        
def serve_image():     
    dir_path = 'C:\\Use
    all_files = os.list
    image_file = random
    return send_file(os
                       
if __name__ == '__main_
   app.run(host="0.0.0.0", port=5000)

如果仅仅只需要本机访问，host里面可以只填自己的ip地址，如果需要外网也能访问该服务，则填0.0.0.0，端口号flask默认是5000，如果有需要也可以改成其他的

当然，app.run也可以什么都不填，直接在运行的编辑配置里面的其他选项框里加上--host=0.0.0.0

运行之后是这样的

生成的这两个地址都能在本机浏览器上进行访问，当然如果想要外网进行访问还需要进行内网穿透（因为我们连接的大都是局域网而不是公网，比如校园网）

内网穿透需要一个小工具ngrok（直接百度搜索下载，一个很小的应用程序，大概作用就是给你打开的端口服务分配一个公网地址，比如上面我们用的是端口5000）

下载好后直接点开这个程序，输入ngrok http 5000，结果如下

在forwarding那一行可以看到你获得了一个公网地址，这样你可以在连接着其他网络的设备上进行此服务的访问，比如我是在阿里云服务器上部署的此项服务，然后在本机访问（当然本机部署这个服务，手机访问也可以），实现效果如下

二、HTML的Web页面设计

实现配置环境：安装lls服务器（windows控制面板安装，网上教程蛮简单详细）

将自己写的html文件放到一个目录下，我的HTML文件如下（现学现用了属于是）

<!DOCTYPE html>
<html>
<head>
    <title>表格示例</title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>
    <script>
        function generateValues() {
            var voltage = Math.floor(Math.random() * 1010)/10; // 生成0-100的随机数
            var tan = (Math.floor(Math.random() * 2010000) - 1000000)/10000; // 生成-100-100的随机数
            var point = Math.floor(Math.random() * 90000000) + 10000000; // 生成10000000-99999999的随机数
            var temperature = Math.floor(Math.random() * 1010)/10; // 生成0-100的随机数
            var time =Math.floor(Math.random() * 11) * 100 + 100+Math.floor(Math.random() * 31)+20230000; // 
            var shidu = Math.floor(Math.random() * 1010)/10; //
            var ao1 = Math.floor(Math.random() * 10000)/10000; //
            var bo1 =Math.floor(Math.random() * 10000)/10000; //
            var co1 =Math.floor(Math.random() * 10000)/10000; //
            var ao2 =-Math.floor(Math.random() * 10000)/10000; //
            var bo2 =-Math.floor(Math.random() * 10000)/10000; //
            var co2 =-Math.floor(Math.random() * 10000)/10000; //
            var ao3 = Math.floor(Math.random() * 10000)/10000; //
            var bo3 =Math.floor(Math.random() * 10000)/10000; //
            var co3 =Math.floor(Math.random() * 10000)/10000; //
            var ao4 = Math.floor(Math.random() * 101000)/1000; //
            var bo4 = Math.floor(Math.random() * 101000)/1000; //
            var co4 = Math.floor(Math.random() * 101000)/1000; //
            var ao5 = Math.floor(Math.random() * 101000)/1000; //
            var bo5 = Math.floor(Math.random() * 101000)/1000; //
            var co5 = Math.floor(Math.random() * 101000)/1000; //
            var r = Math.floor(Math.random() * 10000)/1000; //
            var r1 = Math.floor(Math.random() * 10000)/1000; //
            var r2 = Math.floor(Math.random() * 10000)/1000; //
            var r3 = Math.floor(Math.random() * 60000)/10; //
            var r4= Math.floor(Math.random() * 10000)/1000; //
            document.getElementById("voltage").innerText = voltage + "U";
            document.getElementById("tan").innerText = tan;
            document.getElementById("point").innerText = point;
            document.getElementById("temperature").innerText = temperature + "℃";
            document.getElementById("time").innerText = time;
            document.getElementById("shidu").innerText = shidu + "%";
            document.getElementById("ao1").innerText = ao1;
            document.getElementById("bo1").innerText = bo1;
            document.getElementById("co1").innerText = co1;
            document.getElementById("ao2").innerText = ao2;
            document.getElementById("bo2").innerText = bo2;
            document.getElementById("co2").innerText = co2;
            document.getElementById("ao3").innerText = ao3;
            document.getElementById("bo3").innerText = bo3;
            document.getElementById("co3").innerText = co3;
            document.getElementById("ao4").innerText = ao4;
            document.getElementById("bo4").innerText = bo4;
            document.getElementById("co4").innerText = co4;
            document.getElementById("ao5").innerText = ao5;
            document.getElementById("bo5").innerText = bo5;
            document.getElementById("co5").innerText = co5;
            document.getElementById("r").innerText = "r%"+r ;
            document.getElementById("result").innerText = "测量结束"+"    "+r1+"    "+r2+"    "+r3+"    "+r4;
        }

        setInterval(generateValues, 1000); // 每一秒更新一次数值
    </script>
</head>
<body>
    <table>
        <tr>
            <th>二次电压</th>
            <td id="voltage"></td>
            <th>tan</th>
            <td id="tan" colspan="2"></td>
        </tr>
        <tr>
            <th>计量点编号</th>
            <td id="point"></td>
            <th>温度</th>
            <td id="temperature" colspan="2"></td>
        </tr>
        <tr>
            <th>测试日期</th>
            <td id="time"></td>
            <th>湿度</th>
            <td id="shidu" colspan="2"></td>
        </tr>
        <tr>
            <th>    </th>
            <th> ao </th>
            <th> bo </th>
            <th> co </th>
            <td rowspan="2">PT侧不带自校</td>
        </tr>
        <tr>
            <th> f(x) </th>
            <td id="ao1"></td>
            <td id="bo1"></td>
            <td id="co1"></td>
        </tr>
        <tr>
            <th> d(分) </th>
            <td id="ao2"></td>
            <td id="bo2"></td>
            <td id="co2"></td>
            <td rowspan="3">按1测量 按2储存 </td>
        </tr>
        <tr>
            <th> dU(x) </th>
            <td id="ao3"></td>
            <td id="bo3"></td>
            <td id="co3"></td>
        </tr>
        <tr>
            <th> Upt:U </th>
            <td id="ao4"></td>
            <td id="bo4"></td>
            <td id="co4"></td>
        </tr>
        <tr>
            <th> Uyp:U </th>
            <td id="ao5"></td>
            <td id="bo5"></td>
            <td id="co5"></td>
            <td id="r"></td>
        </tr>
        <tr>
            <td id="result" colspan="5"></td>
        </tr>
    </table>
</body>
</html>

在lls服务器下载好后进入添加网站