快捷搜索:

w88官方网站手机版座谈前后端的分工同盟

作者: w88官方网站手机版  发布:2019-04-19

三、小结

本文只是对前后端协作存在的问题和现有的几种常见模式做了简要的列举,JSON Schema 具体如何去运用,还有接口的维护问题、接口信息的获取问题没有具体阐述,这个后续有时间会整理下我对他的理解。

赞 2 收藏 1 评论

w88官方网站手机版 1

实现加载更多的功能,后端在本地使用server-mock来模拟数据

https://github.com/a625689014/server-mock

利用script获取不同源的json

既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

添加一个按钮事件来测试一下:

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp")
})

w88官方网站手机版 2

首先,第一个浏览器, 2698网页上用script标签来请求这个2701这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

一、开发流程

前端切完图,处理好接口信息,接着就是把静态demo交给后台去拼接,这是一般的流程。这种流程存在很多的缺陷。

  • 后端同学对文件进行拆分拼接的时候,由于对前端知识不熟悉,可能会搞出一堆bug,到最后又需要前端同学帮助分析原因,而前端同学又不是特别了解后端使用的模板,造成尴尬的局面。
  • 如果前端没有使用统一化的文件夹结构,并且静态资源(如图片,css,js等)没有剥离出来放到 CDN,而是使用相对路径去引用,当后端同学需要对静态资源作相关配置时,又得修改各个link,script标签的src属性,容易出错。
  • 接口问题
    1. 后端数据没有准备好,前端需要自己模拟一套,成本高,如果后期接口有改变,自己模拟的那套数据又不行了。
    2. 后端数据已经开发好,接口也准备好了,本地需要代理线上数据进行测试。这里有两个费神的地方,一是需要代理,否则可能跨域,二是接口信息如果改动,后期接你项目的人需要改你的代码,麻烦。
  • 不方便控制输出。为了让首屏加载速度快一点,我们期望后端先吐出一点数据,剩下的才去 ajax 渲染,但让后端吐出多少数据,我们不好控。

当然,存在的问题远不止上面枚举的这些,这种传统的方式实在是不酷(Kimi 附身^_^)。还有一种开发流程,SPA(single page application),前后端职责相当清晰,后端给我接口,我全部用 ajax 异步请求,这种方式,在现代浏览器中可以使用 PJAX 稍微提高体验,Facebook 早在三四年前对这种 SPA 的模式提出了一套解决方案,quickling bigpipe,解决了 SEO 以及数据吐出过慢的问题。他的缺点也是十分明显的:

  • 页面太重,前端渲染工作量也大
  • 首屏还是慢
  • 前后端模板复用不了
  • SEO 依然很狗血(quickling 架构成本高)
  • history 管理麻烦

问题多的已经是无力吐槽了,当然他依然有自己的优势,咱们也不能一票否决。

针对上面看到的问题,现在也有一些团队在尝试前后端之间加一个中间层(比如淘宝UED的 MidWay )。这个中间层由前端来控制。

JavaScript

---------------- | F2E | ---↑--------↑--- | | ---↓--------↓--- | Middle | ---↑--------↑--- | | ---↓--------↓--- | R2E | ----------------

1
2
3
4
5
6
7
8
9
10
11
     ----------------
    |       F2E      |
     ---↑--------↑---
        |        |
     ---↓--------↓---
    |     Middle     |
     ---↑--------↑---
        |        |  
     ---↓--------↓---
    |       R2E      |
     ----------------

中间层的作用就是为了更好的控制数据的输出,如果用MVC模型去分析这个接口,R2E(后端)只负责 M(数据) 这部分,Middle(中间层)处理数据的呈现(包括 V 和 C)。淘宝UED有很多类似的文章,这里不赘述。

ajax 是什么?有什么作用?

ajax是Async Javascript And Xml的缩写,即异步的JavaScript和XML。
ajax的作用是通过JavaScript模仿浏览器发出的请求,实现局部刷新和加载,当像服务器请求数据时,无需刷新整个页面,提高用户体验。
ajax现在最常用的数据传输格式是json

利用jQuery获取jsonp

上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp:

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的结果跟上面类似。

二、核心问题

上面提出了在业务中看到的常见的三种模式,问题的核心就是数据交给谁去处理。数据交给后台处理,这是模式一,数据交给前端处理,这是模式二,数据交给前端分层处理,这是模式三。三种模式没有优劣之分,其使用还是得看具体场景。

既然都是数据的问题,数据从哪里来?这个问题又回到了接口。

  • 接口文档由谁来撰写和维护?
  • 接口信息的改动如何向前后端传递?
  • 如何根据接口规范拿到前后端可用的测试数据?
  • 使用哪种接口?JSON,JSONP?
  • JSONP 的安全性问题如何处理?

这一系列的问题一直困扰着奋战在前线的前端工程师和后端开发者。淘宝团队做了两套接口文档的维护工具,IMS以及DIP,不知道有没有对外开放,两个东西都是基于 JSON Schema 的一个尝试,各有优劣。JSON Schema 是对 JSON 的一个规范,类似我们在数据库中创建表一样,对每个字段做一些限制,这里也是一样的原理,可以对字段进行描述,设置类型,限制字段属性等。

接口文档这个事情,使用 JSON Schema 可以自动化生产,所以只需编写 JSON Schema 而不存在维护问题,在写好的 Schema 中多加些限制性的参数,我们就可以直接根据 Schema 生成 mock(测试) 数据。

mock 数据的外部调用,这倒是很好处理:

JavaScript

typeof callback === "function" && callback({ json: "jsonContent" })

1
2
3
typeof callback === "function" && callback({
   json: "jsonContent"
})

在请求的参数中加入 callback 参数,如 /mock/hashString?cb=callback,一般的 io(ajax) 库都对异步数据获取做了封装,我们在测试的时候使用 jsonp,回头上线,将 dataType 改成 json 就行了。

JavaScript

IO({ url: "", dataType: "jsonp", //json success: function(){} })

1
2
3
4
5
IO({
  url: "http://barretlee.com",
  dataType: "jsonp", //json
  success: function(){}
})

这里略微麻烦的是 POST 方法,jsonp 只能使用 get 方式插入 script 节点去请求数据,但是 POST,只能呵呵了。

这里的处理也有多重方式可以参考:

  • 修改 Hosts,让 mock 的域名指向开发域名
  • mock 设置 header 响应头,Access-Allow-Origin-Control

对于如何拿到跨域的接口信息,我也给出几个参考方案:

  • fiddler 替换包,好像是支持正则的,感兴趣的可以研究下(求分享研究结果,因为我没找到正则的设置位置)
  • 使用 HTTPX 或者其他代理工具,原理和 fiddler 类似,不过可视化效果(体验)要好很多,毕竟人家是专门做代理用的。
  • 自己写一段脚本代理,也就是本地开一个代理服务器,这里需要考虑端口的占用问题。其实我不推荐监听端口,一个比较不错的方案是本地请求全部指向一个脚本文件,然后脚本转发URL,如:

JavaScript

原始请求: 在ajax请求的时候: $.ajax({ url: "" });

1
2
3
4
5
原始请求:http://barretlee.com/api/test.json
在ajax请求的时候:
$.ajax({
  url: "http://<local>/api.php?path=/api/text.json"
});
  • php中处理就比较简单啦:

JavaScript

if(!isset($_GET["page"])){ echo 0; exit(); } echo file_get_contents($_GET["path"]);

1
2
3
4
5
if(!isset($_GET["page"])){
  echo 0;
  exit();
}
echo file_get_contents($_GET["path"]);
  • Ctrl S,保存把线上的接口数据到本地的api文件夹吧-_-||

点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  ul,li {
    margin: 0;
    padding: 0;
  }
  .list>li {
    border: 1px solid pink;
    list-style: none;
    margin: 0 auto;
    width: 90%;
    padding:10px;
  }
  .btn {
    display: block;
    width: 100px;
    height: 40px;
    border: 2px solid rgba(0, 212, 46, 0.54);
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    color: #000;
    text-decoration: none;
  }
  .btn:hover {
    background: rgba(0, 212, 46, 0.54);
  }
</style> 
</head>
<body>
  <ul class="list">
  </ul>
  <a class="btn" href="#">加载更多</a>


  <script type="text/javascript">
   var btn = document.querySelector('.btn')
   var list = document.querySelector('.list')
   var pageIndex=0
   var isDataOk = true    //加一个状态锁,默认为true
   // 给btn加载点击事件,点击时发送请求
   btn.addEventListener('click',function(e){   
    e.preventDefault()

    //先判断数据有没有到来 ,如果没有,将不再向后端发送请求
    if(!isDataOk){
      return
    }

    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        if(xhr.status === 200 || xhr.status === 304){
          // 把响应的数据转换为json格式的字符串
          var results = JSON.parse(xhr.responseText)
          // console.log(results)  这里可以先判断一下数据有没有到来
          var fragment = document.createDocumentFragment()
          for(var i=0;i<results.length;i  ){
            var node = document.createElement('li')
            node.innerText = results[i]
            fragment.appendChild(node)
          }
          list.appendChild(fragment)
          pageIndex  = 5
        }else{
          console.log('出错了')
        }
        isDataOk = true //表示是响应数据状态
      }
    }
    xhr.open('get','/loadMore?index=' pageIndex '&length=5',true)
    xhr.send()
    isDataOk = false  //请求发送后,设置为false。当用户再次点击时,会做一个判断,如果数据没有没有到来,将不会再向后端发送请求。
  })
</script> 
</body>
</html>

二、浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

JSON和JSONP
 
  JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。
 
  JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。
 
  JSON是一种数据格式,JSONP是一种数据调用方式。

JSON和JSONP
 
  JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。
 
  JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。
 
  JSON是一种数据格式,JSONP是一种数据调用方式。

 //JSON
 {
 “name”: “sb”
 }

 //JSONP
 callback({
 “name”: “sb”
 })

出于安全考虑,脚本(AJAX)不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。
 
例1:

 //定义shoPrice函数
 function showPrice(data) {
     alert("Symbol: "   data.symbol   ", Price: "   data.price);
 }

 //在Web页面中包含showPrice函数和参数
 <script type="text/javascript">
 function showPrice(data) {
     alert("Symbol: "   data.symbol   ", Price: "   data.price);
 }
 </script>
 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

  本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
 
 例2:
 
  第一种的函数调用完全可以写在一个js文件中放在服务器上,用script标签加载到页面,而且这个标签可以动态地创建。  

 <script type="text/javascript">
 // This is our function to be called with JSON data
 function showPrice(data) {
     alert("Symbol: "   data.symbol   ", Price: "   data.price);
 }

 var url = “remote.js”; // 外部脚本的URL
 // 动态插入脚本
 var script = document.createElement('script');
 script.setAttribute('src', url);

 // 加载script
 document.getElementsByTagName('head')[0].appendChild(script); 
 </script>

remote.js的内容和之前在标签里写的一样是:
 
 1 showPrice({symbol: 'IBM', price: 91.42}); 
 
  动态插入的JavaScript代码,将要传递的JSON数据作为参数,showPrice函数调用语句的参数。
 
  那么问题来了,每次获取到数据都调用showPrice函数吗?这就需要前后端程序猿做好约定,当然这样有很多不便,尤其是对于开放接口给公众开发的情况。JSOP这样处理:支持前端传递一个回调函数名参数,后端接收回调函数名参数,然后生成对该函数的调用,将JSON数据作为参数传递,在到达客户端时将其插入页面开始执行。
 
例3:
 
  动态插入代码,带有callback参数:

  <script type="text/javascript">
  // This is our function to be called with JSON data
  function showPrice(data) {
      alert("Symbol: "   data.symbol   ", Price: "   data.price);
  }
 var url = “remote.js?callback='showPrice'”; // 外部脚本的URL
 // 动态插入脚本
 var script = document.createElement('script');
 script.setAttribute('src', url);
 // 加载script
 document.getElementsByTagName('head')[0].appendChild(script); 
  </script>

后端用PHP实现的JSONP服务的代码片段:

 $jsonData = getDataAsJson($_GET['symbol']);
 echo $_GET['callback'] . '(' . $jsonData . ');';
 // 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定义,打包在函数调用中的JSON数据。
 
以上几个例子来自:
 
使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
 
在jQuery中使用JSONP  
  AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装,但JSONP并不是AJAX的一种形式或一种特例。

 $.ajax({
     url: "http://query.yahooapis.com/v1/public/yql",
     jsonpCallback: "showPrice",
     jsonp: "callback",
     // tell jQuery we're expecting JSONP
     dataType: "jsonp",
     data: {
         q: "select title,abstract,url from search.news where query="cat"",
         format: "json"
     },
     // work with the response
     success: function( data ) {
         console.log( data ); // server response
     }
 });

ajax请求参数说明:

dataType  String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

"text": 返回纯文本字符串

jsonp,  
  重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种GET或POST请求URL参数里的“callback”部分,例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。
 
jsonpCallback,
 
  为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。但是实际使用过程中,并不用写回调函数,比如此例中的showPrice,不写也不会报错,因为jQuery在处理JSONP的时候,自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样:

 function success_jsonpCallback(data) { success(data); }  

以上就是本文的全部内容了,大家是否对jsonp有了细致的了解了呢。有什么疑问也请给我留言,大家共同探讨。

 

谈谈前后端的分工协作

2015/05/15 · HTML5 · 1 评论 · Web开发

原文出处: 小胡子哥的博客(@Barret李靖)   

前后端分工协作是一个老生常谈的大话题,很多公司都在尝试用工程化的方式去提升前后端之间交流的效率,降低沟通成本,并且也开发了大量的工具。但是几乎没有一种方式是令双方都很满意的。事实上,也不可能让所有人都满意。根本原因还是前后端之间的交集不够大,交流的核心往往只限于接口及接口往外扩散的一部分。这也是为什么很多公司在招聘的时候希望前端人员熟练掌握一门后台语言,后端同学了解前端的相关知识。

前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?

前后端开发联调需要注意:

  1. 约定数据格式,常用json格式传输数据
  2. 约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式;
    后端接口完成前如何mock数据:
    mock数据指的是在后端开发没有完成时,前端可以通过mock方法搭建本地服务器,模拟后台数据来实现数据交互的效果。可以安装server-mock,也可以使用easy-mock,这样不需要特地去写一个后台的处理页面文件来访问数据。

1.随便建两个网页

一个端口是2698,一个2701,按照定义它们是不同源的。

w88官方网站手机版 3

 

 

2.用jQuery发起不同源的请求

在2698端口的网页上添加一个按钮,Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function () {
    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
        console.log(data)
    })

    $.get("http://localhost:2701/home/index", function (data) {
        console.log(data)
    })
})
根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。(not allowed by Access-Control-Allow-Origin)

w88官方网站手机版 4

OK,原来jsonp是要解决这个问题的。

不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:

<script src="http://www.gg37a9w.cn/uploads/allimg/190419/04130V016-4.jpg" type="text/javascript"></script>

回到我们的2698端口的网页,上面我们在Click事件里有一个对2701端口域的jQuery文件的请求,这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然,200,OK了

w88官方网站手机版 5

同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。

利用script获取异域的jsonp

显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:

w88官方网站手机版 6

如果存在jsonpcallback这个方法,那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回调方法是什么,当然,QueryString的key要遵从服务端的约定,上面的是”callback“。

添加回调函数:

function jsonpcallback(json) {
    console.log(json)
}

把前面的方法稍微改改参数:

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

w88官方网站手机版 7

200OK,服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"}),我们也写了jsonpcallback方法,当然会执行。OK顺利获得了json。没错,到这里就是jsonp的全部。

一、JSONP详解

 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

总结

一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})

 

同源策略

首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:w88官方网站手机版座谈前后端的分工同盟

关键词: www.w88985.c

上一篇:十大经典排序算法
下一篇:没有了