python与javascript网页开发_基于 python 、js 的一个网页模块开发流程总结

作者：朱桃

导语

刚来公司，接手的第一个任务是，开发网站项目的一个功能模块，需要用到python、js、html，在这之前，python还算比较熟悉，js、html完全没使用过，项目基于Django，也是没有用过。因此整个开发过程比较坎坷，边学边用，踩过了很多坑之后，才基本上手了。

比较好的是项目的大框架已经有了，有很多代码可以借鉴和学习，因此降低了入门的难度。从7月20号到8月10号历时二十来天，整个功能初步完成，现在总结下一些关键内容和踩过的坑。

1、功能模块背景和需求

在视频点播业务中，视频的资源分布在全国各地的cdn机房中，机房的磁盘有SSD和SATA两种类型，我们需要尽量将用户请求的视频资源保存在SSD磁盘。主要原因有：

SSD读取速度快，SATA读取速度慢，在播放高码率的视频文件时，有可能会出现SATA读取速度跟不上，导致视频播放出现卡顿；

SATA读取速度慢，在有大量请求时，系统不能及时处理，导致系统负载增大，以至于最后可能挂掉；

SSD比SATA更贵，控制成本的原因只有部分为SSD，提高SSD命中率使得现有资源可以同时处理的请求更多。

因此，对于机房来说，最主要的优化之一就是提高SSD的命中率。我这里做的事情就是，汇总所有机房的SSD命中率，然后在页面上进行展示，以方便观察各种优化措施是否有效。

这里对SSD命中率，有两种计算方式得到的结果：

计算方式一：根据机房的进程数据计算，结果以CGI接口提供，可以按照机房名称、时间等信息去拉取数据，数据按照一分钟进行计算的，拉取时需要分别拉取机房的SSD命中率和总流量(两个接口)。

计算方式二：根据访问的流水日志进行计算，保存的日志文件是十分钟一个，数据组用Spark平台计算出这十分钟日志里面，每个机房的SSD流量、SATA流量，将每十分钟的数据导出到Mysql数据库的表中，机房数量大概是400+。

具体展示需求有：

可以对比两种计算方式的命中率汇总结果和实时曲线。

查询特定机房的命中率实时曲线。

查询特定机型的命中率汇总结果和实时曲线。

查询特定运营商的SSD命中率汇总结果和实时曲线。

查询时间段可选。

下面将对功能模块中主要的部分进行介绍。

2、拉取数据接口数据

上面提到的计算方式一，需要从CGI接口拉取数据，数据接口示例：

http:xxxx/getStructedFeatureData.cgi?data=my_data&user_id=my_id&user_rtx=my_rtx

data中包含了请求的各种参数，示例如下：

data= [{"business_name":"下载","days":1,"date":"2017-07-31","query":[{"module":"oc_http", "target": "ssd_ratio", "type":"server","dimens":{"room":"东莞电信大朗OC3-30G-V"}} ]}]

一开始没考虑太多，想到的是利用jquery的Ajax直接请求数据接口，获取数据展示出来，处理代码全部用js完成。请求和处理代码大概是这样：

function query_download_handler_record(query_arg){

//reate_query_url是根据接口文档构造的url字符串

my_url = create_query_url(query_arg);

$.ajax({

url: my_url,

type: "GET",

contentType : "application/json",

dataType: 'json',

cache: false,

async: true,

}).then(function(result) {

//handler code 省略

return true;

},

function(result) {

alert("查询出错");

return false;

});

return true;

}

问题：

访问拉取数据接口，Ajax请求出现以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

无法跨域，按照网上建议，将dataType=”json”改为了”jsonp”，解决了上述错误，但是得到请求后出现：'Uncaught SyntaxError: Unexpected token :'

原因是返回的是json格式，json和jsonp格式不匹配。

解决办法：

不使用ajax直接跨域请求数据接口，改用python请求数据接口获取数据，处理后返回数据到JS页面中。Python中获取数据接口的数据很简单，直接用requests包就可以了。这时对应的ajax请求部分代码改为：

function query_download_handler_record(query_arg){

$.ajax({

url: "ftp_dispatch_download_hander",

type: "GET",

data: query_arg, //传递的参数

contentType : "application/json",

dataType: 'json',

cache: false,

async: true,

}).then(function(result) {

//handler code

return true;

},

func