Cgi服务

​ Python和其他脚本语言有一个不同的点，就是自带web服务器，我们在工作当中常用web服务器：Apache，nginx。使用web服务器可以发布网站，给更多用户提供更好的web服务。

1、创建了一个目录

2、在目录下编写了HTML文件

3、在目录对应的命令行启动了cgi服务器:

python -m http.server --cgi

4、同一网段就可以访问了

1、同一网段的同学就可以访问了

​ 上面，我们描述的就是一个cgi的web服务器，这个服务器是由python开发的轻量级服务器，最多支持200的并发，用于开发很好，不擅长于实际项 。Cgi（通用网关接口），是解析动态网站的规则。

动态网站：数据是动态获取，可以和用户实现交互的网站。

静态网站：数据来源于固定的脚本或者页面。

​ 通常前端的页面并不能和数据库发生交互，所以需要有一门脚本语言和数据库发生交互来进行数据的存取。

​ 在web开发当中，所有的服务器都会用域名（ip和端口）代替网站的根目录，大部分服务器都会自动加载自己根目录下的index.html,基于cgi也是这样的，所以，如果加载非index.html的页面就需要用路径，而且这个路径当中ip:端口作为根，cgi命令在哪个目录执行，哪个目录就是根目录。

​ 在web技术当中，有请求和响应两种类型的内容。不论是请求还是响应都有两大部分组成，head和body, head(头部)负责请求或者响应的描述，body不是是真正的内容。

刚才的操作步骤

1、创建一个目录

2、在目录下创建了HTML，index.html会在访问ip:端口的时候自动被加载

3、创建了cgi-bin目录

4、在cgi-bin目录下编写.py文件

文件的步骤：

1、定义响应的内容

2、返回响应的头部

3、返回响应头部结束符号 \n

4、返回响应内容

数据可视化

Chart，Echart ——》使用HTML+js绘制图表

Restful ——》网站接口

Json 是在web服务直接传到的一种数据类型，类似python的字典

Ajax ——》局部提交

Chart.js，Jq——》将接口数据进行图形化展示，

<canvas id="panel" height="330px" width="500px">

</canvas>
<script>
   $(
      function () {
         var can = $("#panel").get(0).getContext("2d");#设置为2d画布
         var canData = {
            labels:["a","b","c","d","e","f"], #x轴的坐标
            datasets:[
               {
                  fillColor: "rgba(255,255,0,0.2)", #线条下的填充色
                  strokeColor: "rgba(0,255,0,1)", #线条颜色
                  data:[1,2,3,2,1,5] #y轴对应x轴的数据
               }
            ]
         };
         var line = new Chart(can).Line(canData);_

      }
   )
</script>
#需要动态获取数据，数据由/cgi-bin/jsonData.py
import json
import time
import random

now = time.strftime("%H:%M:%S",time.localtime())
num = random.randint(1,11)

result = {"now":now,"num":num}

josn_result = json.dumps(result) #将字典转换为json
#loads 将json转换为字典

print("content-type:application/json") #返回响应的头部，具体描述的要返回的内容类型，在cgi当中用print进行返回
print("\n") #返回头部结束
print(josn_result) #返回响应的body
#Ajax 局部提交，只是提交一部分网页，数据通过js返回
setInterval(	
   function () {
      $.ajax(
         {
            type:"get", #ajax请求的类型
            url:"/cgi-bin/jsonData.py", #ajax请求的地址
            data:"", #请求需要携带的数据
            success: function (data) {
               console.log(data)
            },#回调函数，如果请求成功，ajax自动调用当前函数，将返回结果传递给data
            error: function (error) {
               console.log(error)
            }#回调函数，如果请求失败，ajax自动调用当前函数，将返回错误传递给error
         }
      )#使用ajax
   },1000
)