商城难点重点

1. 构造数组结构（看业务场景，查看数据表现形式）

rbac获取所有的权限—》两个技巧

商品详情页单选属性—》通过attr_id分组

购物车列表 –》加两个下标 goodsInfo attrInfo

后台商品添加动态拼接商品类型属性–》动态属性入库（表单name拼接[]）

完成订单数据入库

订单数据入库的顺序

订单商品入库的顺序：

第一步：先把订单基本数据入库到订单表sh_order

第二步：订单表数据入库成功之后才能把订单商品入库到订单商品表中sh_order_goods中

如果保证上面两步执行过程中都没有问题呢，这里需要借助到mysql的事务，可以保持数据的一致性。当发生异常的时候，会自动回滚。

注意：只有表的引擎是innodb引擎才支持事务操作。

TP5中有关事务操作的相关方法：

启动事务：Db::startTrans()

提交事务：Db::commit()

事务回滚：Db::rollback()

手册示例：

订单商品入库的顺序：

第一步：先把订单基本数据入库到订单表sh_order

第二步：订单表数据入库成功之后才能把订单商品入库到订单商品表中sh_order_goods中

如果保证上面两步执行过程中都没有问题呢，这里需要借助到mysql的事务，可以保持数据的一致性。当发生异常的时候，会自动回滚。

注意：只有表的引擎是innodb引擎才支持事务操作。

订单表（sh_order）和订单商品表(sh_order_goods)的关系：

TP5中有关事务操作的相关方法：

启动事务：Db::startTrans()

提交事务：Db::commit()

事务回滚：Db::rollback()

手册示例：

注：只要在try{}中抛出出一个异常throw new \Exception(‘失败信息’) ，就会执行catch中的回滚操作，$e->getMessage(失败信息);

订单表和订单商品表的数据入库

入库流程图：

1. 在订单结算页面，设置好表单的name字段，或收货人的基本信息（收货地址、电话、邮编）

给提交按钮，绑定单击事件，让上面的表单进行提交：

注：表单跳转还是跳转到当前控制器方法，属于post方式提交（method=post）

1. 在方法_writeOrder中，开启事务，保证订单商品入库成功

1. 在try{}中进行订单表的数据入库，和订单商品表数据的入库

注：上面的代码需要引入Db类

同时建立订单表和订单商品表的模型：

二、支付技术介绍

1、早期网站支付

早期的电商都是送货上门，邮政汇款，这样的话，商家会承担很大的风险。

后面的时候有部分网站和银行进行签约，使用网银、手机银行等。

再往后，就是支付宝、微信。

早期的公司如果想申请网银需要直接去找银行申请相关的支付接口，而且现在银行这么多公司不可能去每家银行申请支付接口，这样未免也太麻烦了。

如果有的网站的资金流动比较少的话，有的银行都不会和这些小公司进行合作，因为从中赚不到什么利润。所以就有了第三方支付平台（微信、支付宝、京东钱包、qq财付通、百度钱包）来解决这些问题。

2、现在的网站支付

为了解决早期网站支付的问题，避免了商家繁琐的去每家银行获取支付接口。现在有些公司专门集合了所有银行的支付接口，这些公司进而在提供支付接口给我们企业或开发者使用，这些公司就是第三方支付平台。

常见的第三方支付平台：微信、支付宝、京东钱包、qq财付通、百度钱包等

有了这些第三方支付平台，我们企业或开发者就不需要独自跑去银行去申请支付接口了，直接利用第三方支付平台，在参考他们的支付接口文档即可完成我们的支付了！

三、支付宝支付

注意一点：现在的支付宝支付需要企业或个体工商户可申请才，个人是没法申请的。

企业或个体工商户申请的条件如下：

1. 提供真实有效的营业执照，且支付宝账户名称需与营业执照主体一致；

2. 网站能正常访问且页面信息有完整商品内容；

3. 网站必须通过ICP备案，个体户备案需与账户主体一致。

（团购类网站不支持个体工商户签约）

不过好处的个人开发者我们可以使用支付宝提供的沙箱环境进行模拟支付。

那么什么是沙箱环境？

答：就是支付宝提供给我们开发者一个虚拟的支付环境。其中的操作和真实支付环境是完全一样的。买家账号和卖家账号沙箱环境都给我们提供好了。

后面的沙箱环境支付，支付宝会提供一个商家账户和个人买家账户给我们，我们在配合支付接口文档即可完成支付。

企业或个体工商户申请支付

申请的网址：https://b.alipay.com/ （b: business企业）

点击下面的电脑网站支付的接入按钮：

这里支付宝提供了5种支付方式给我们使用，网站就要使用电脑网站支付。

早期支付宝只有两种支付方式：

即时到帐：我们上面看到的5个支付方式都是这个衍生出来的 ，一旦付款，立马到账。

担保支付： 7天担保，早期淘宝网，买家买东西的钱先到了淘宝的帐号呆够7天，商家才收到款，担保支付支付宝已经取消了。

企业或个体户点击上面电脑网站支付，需要以下申请条件：

上面的申请条件，以后去企业上班，公司都会帮我们申请好的。

上面是企业或个体工商户申请的基本步骤，我们个人没法申请，所以这里我们只能使用沙箱环境进行支付测试。

申请沙箱应用

首页，登陆支付宝开放平台，进入到如下的开发者中心

https://openhome.alipay.com/platform/developerIndex.htm

点击开发者中心->研发服务，进入如下的沙箱环境：

去创建沙箱应用,如下是已经创建的沙箱环境：

沙箱中的提供两个测试账户：商家账户 和 买家账户，其账户余额都是虚拟的

成功付款的时候，钱会从买家账户打到商家账户

商家账号：

买家账号：

特别注意一点：

3、下载支付宝支付的开发包SDK&Demo

下载地址：https://docs.open.alipay.com/270/106291

下载回来的压缩包如下：

解压下来如下所示：

aop：包含支付宝核心的支付文件。

lotusphp_runtime： 这是一个国外的PHP框架，这里是支付宝默认使用的。

pagepay：具体的实现支付接口的代码文件

config.php：配置文件，填写应用配置APPID、应用密钥、支付宝、支付网关的文件

notify_url.php：支付成功以后支付宝post方式异步跳转的地址，获取支付结果的地址

return_url.php：支付成功以后支付宝get方式同步跳转的地址，获取支付结果的地址

注：支付宝接口对我们的PHP版本有要求，必须在PHP5.5以上，可以使用phpStudy集成环境进行切换。且需要开启对应php版本的php.ini配置文件中的openssl扩展，去掉前面的分号，并重启apache服务器：

四、集成支付宝到项目中

1、引入支付宝到项目中

1、把下载下来的压缩包进行解压，把所有的文件复制到/public/alipay/目录下面

支付前的相关参数配置

几个重要的配置参数：

• APPID:可以从支付宝的沙箱应用中获取到
• 支付宝支付网关

沙箱环境：https://openapi.alipaydev.com/gateway.do

正式环境：https://openapi.alipay.com/gateway.do

提示：以后去公司做支付宝支付时，上线要使用正式环境的支付网关

• 应用私钥
• 应用公钥

其中应用私钥和公钥可通过支付宝提供的相关工具生成。

• 支付宝公钥

我们直接运行RSA签名验签工具

签名：说白了就是加密

验签：说白了判断加密是否正确，

例如:

我们注册会员的时候，会给会员密码加密，你可以理解，我们给会员的密码进行签名，

会员会在网站登录，我们直接从数据库找出密码的加密串 和 会员注册时的密码加密后进行判断，这个动作可以理解为验签

我们使用RSA签名验签工具生成应用的私钥和公钥：

商户的私钥：复制到config.php中。

商户的公钥：复制到支付宝网站中，再获取支付宝的公钥复制到config.php中

应用私钥和应用公钥，支付宝公钥说明：

修改config.php文件：

配置好之后，进行访问，如果能够出现一个支付宝的支付页面，说明配置参数成功：

之后通过沙箱中的买家账号和密码进行支付即可。

分析如何唤起支付宝支付页面

支付流程图解：

当单击支付按钮的时候，跳转到pagepay/pagepay.php文件中进行支付，此页面才是跳转到支付宝的真正支付页面。

文件如下：

即，后面只要在支付的时候，引入上面的pagepay/pagepay.php文件即可完成支付。

实现商城订单的支付

1、上面配置没有问题的话，且可以出现支付页面，我们就可以把/public/alipay目录复制到extend/目录下面：

1. 当订单数据入库成功之后，需要引入上面的pagepay/pagepay.php文件进行支付，这里我们封装在一个支付的方法_payMoney()中。方便后面支付调用

同时需要把pagepay.php文件中的原本是$_POST的变量改为我们上面定义的$payData变量。

之所以要更改是因为后面个人订单支付也可以采用get方式进行传参支付。这样支付就更加灵活。

测试下商品加入购物车进行订单支付，如果下面付款的总金额一致，说明集成项目中成功

支付成功修改订单状态

在上面的支付宝页面进行支付成功之后，会跳转到我们在config.php中设置好的return_url配置项的同步回调地址。

只要支付宝支付成功之后，就会往同步地址和异步地址进行跳转：

同步通知和异步通知的区别：

同步和异步通知携带的支付参数没有本质的区别：

同步通知：支付成功后返回到指定callback回调域，同时携带支付状态的get参数，让自己的网站用于验证（更新支付的状态）。

异步通知：其实是双保险机制，主要是防止意外情况。因为交易涉及到钱的问题，支付宝考虑到如果同步通知的过程中，用户不小心关闭浏览器或者浏览器卡死的情况，这样就无法实现同步通知，从而也就无法更新用户的支付状态(用户支付成功，但显示未付款)。而支付宝服务器会在一段时间内持续的往我们的服务器发送异步通知。直到返回给支付宝success即可，这个一段时间在1-2天内通知8次左右。

1. 在config.php中设置好同步的回调地址

1. 建立一个同步回调的方法returnurl,打印get方法带来的支付成功参数

打印get携带的支付成功的参数如下：

两个重要的参数：

out_trade_no :自己网站的订单号

trade_no:支付宝那么支付成功返回来的订单号

这里我们可以通过out_trade_no订单号进行修改订单的支付状态，把支付状态的字段pay_status改为1.

1. 修改订单的支付状态：

更改用户的支付状态和支付宝返回的订单号：

注：如果是线上环境，支付宝还会以post方式进行异步通知我们在config.php设置的异步回调地址。

异步代码也是更新订单的支付状态，只是把get接收方式改为post,且最后支付成功一定要echo一个success字符串给支付宝那边，否则支付宝在一段时间会一直通知，这个一段时间在1-2天内通知8次左右。

6、订单数据入库验证补充

1. 定义Order验证器即规则

1. 写入订单数据的时候进行验证

查看个人订单

1. 修改模板（nav.html）我的订单的链接地址

1. 在前台的home的order控制器，建立一个selfOrder方法，查询个人的所有订单，并分配到模板中。
2. 把前台模板order.html复制到/home/view/order/目录下面，并改名为selforder.html

b、selfOrder方法

我们可以把用户的付款状态和发货状态对应的文本值定义在配置文件中，这样非常方便后期状态的维护。

1. 模板selfOrder.html遍历订单数据

效果：

完成订单付款

1. 给去付款按钮设置一个链接地址

1. 在payMoney的方法中，完成付款的操作

修改支付成功的get同步回调的方法returnurl,支付成功，跳转到用户的订单列表

七、后台订单管理

1、订单列表无刷新分页

分析：

无属性分页只需要发送ajax请求，只需获取需要的数据返回来进行替换即可。

1. 给分页的超练级a标签绑定单击事件，需要获取到其href属性值，并且阻止默认行为，用ajax请求地址即可，获取所需要的上面两部分数据，进行替换即可

1. 为了获取独立的分页主体数据，我们可以抽离到一个html模板中

3、在index方法判断是否是ajax请求，返回所需要的数据即可。

核心利用fetch方法：此方法其实做了3件事件；

1. 获取到模板内容 2.把分配到此模板中的变量进行替换 3.把替换好的模板内返回

注：由于无刷新分页的页码是ajax动态返回来的，要给动态增加元素绑定事件只能是用委托方式去绑定：

父选择器.on(事件名,子选择器，callback)

2、分配订单物流信息

3、查询订单物流信息

4、订单无刷新搜索

5、搜索关键字高亮显示

功能需求

1. 在添加的时候做用户名唯一性检查

1. 做数据展示做一个无刷新分页（分页插件 layUI 闲心）

1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

实操-添加

用户注册-唯一性检验

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户唯一性处理

注意：这里的swal函数使用的是sweetalert插件提供的。

1. 在后台编写一个checkUser.php文件完成用户唯一性校验，可以注册返回1，不可以注册返回0

用户注册-添加入库

1. 编写一个user.html文件，展示一个注册表单

效果

1. 在user.html页面编写js代码进行校验用户信息，如果前台校验成功，使用ajax发送网络请求，进行用户入库操作

注意：这里的swal函数使用的是sweetalert插件提供的。

3. 在后台编写一个addkUser.php文件完成用户入库操作，成功返回1，失败返回0

sweetalert插件

相关网站：

http://www.bootcdn.cn/sweetalert/

http://mishengqiang.com/sweetalert/

1. 在bootcdn网站查询sweetalert插件

1. 自己的页面引入对应的css和js资源文件，调用 swal 函数进行测试

效果：

实操-用户展示

用户的展示-无刷新分页

昨天使用了一个叫做layUI提供的一个layPage的分页插件。

功能需求分析：

代码实现：

1. 定义一个ulst.php展示用户的列表，默认获取显示第一页的数据

1. 定义一个formatDataEs6方法格式化用户信息，返回一个HTML字符串

1. 定义一个userList.php页面，接收分页请求，返回数据

underscore工具库

简介：

1. 编写一个HTML文件，引入underscore.js文件，编写js代码，调用该工具库提供的方法

注意：_.each() 用于遍历数组 _.uniq() 用于数组去重

2. 效果

实操-用户删除

功能需求：

1. 在ulst.php为table元素定义一个id属性

1. 为该table元素绑定一个点击事件

1. 定义一个ajaxDelUser函数，发送ajax请求，删除用户信息

事件优化处理机制简介

优化处理

json简介

①-json是什么？

1. 什么是json？

答：json是由一个叫做道格拉斯（道叔，josn规范的制定者，一般他是json发现者）发现的一种在多种语言（js\php\java\c\python…）之间进行数据传递的一个文本的数据格式。以前也可以使用XML来组织格式来交换数据，但是XML操作起来非常的麻烦，慢慢的更多的是使用json格式数据做传递。

注意：虽说现在json非常的流行，但不意味着XML没有使用的必要的。在很多的领域XML还是有其独特的优势，尤其是在数据传递格式非常严苛的情况下（DTD：文档约束，主要是可以去约束XML的定义），例如银行的系统。并且可以做小型的数据库、还可以做配置文件（Java里面很多的配置文件都是使用xml）。

注意：json也是可以作为配置文件的，例如composer的包管理器的配置文件。(现在很多的项目都是使用json作为配置文件)

注意：多种格式的数据都可以作为配置文件

1. php.ini
2. httpd.conf
3. conf.yaml
4. composer.json
5. config.xml

面试：json还是XML好？没有什么好或不好，主要是实际的业务需求，以及公司领导的安排。

官网：http://www.json.org.cn/

json是啥？

网站：http://www.json.org.cn/standard.htm

②-json格式到底是如何定义的？

形如下面的数据结构被称为json格式的文本，需要注意：json格式里面的 key/value对是无序的。和php里面的关联数组比较类型，也和js里面的json字面量对象很像。

定义语法：

{

“key”: “value1”, // value值是字符串的时候必须加上双引号，同时 key 必须要加双引号

“age” : 12,

“isBool”: true // 最后的key value 不能加逗号

}

通过工具进行校验：

https://www.bejson.com/

③-php里面如何处理json格式数据？

1. 如何把php里面的复合数据类型转换为json格式的字符串数据？（json_encode 1. 中文 gb2312 2. Unicode编码）

效果

1. 如何把json格式的数据转换为php里面的复合数组类型？(json_decode)

效果：

备注：如果json_decode($jsonString) 不加第二个参数，则转换成php里面的一个标准对象

效果

1. 注意小的细节：在php里面如果要把一个复合数据类型，里面的中文，转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

效果：

注意：如果中文使用的gb2312编码保存的，则转换不成功。

效果：

总结：在使用json_encode做复合数据类型转换的时候，如果数据里面存在中文，则必须是utf-8的编码，如果不是，则准换不成功。（千万注意：公司的老的项目使用的是gb2312编码的，这个时候在做接口处理的时候，特别注意，需要把gb2312转换成utf-8编码）。

4. 在php里面如果要把一个复合数据类型，里面的中文转换成json格式字符串，php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢？

http://www.laruence.com/2011/10/10/2239.html

代码：

header(‘Content-Type:text/html;charset=utf-8’);

$data = array(‘name’=> ‘中文’);

echo json_encode($data, JSON_UNESCAPED_UNICODE);

效果：

④-js里面如何处理json格式的数据？

1. 如何把js里面的复合数据类型转换成json格式的数据？

效果

1. 如何把json格式的数据转换成js里面的复合数据类型？

效果

注意：也可以使用eval 转换（eval可以执行一个满足js语法格式的字符串）

效果

网站：https://www.zhihu.com/question/19884767

1. 在jQuery里面也提供对应的转换函数，遍历函数

1. json2.js文件，可以在js里面把对象和字符串相互的转换（ JSON.parse 和 JSON.stringify 一样，只是做了一个浏览器的兼容性处理，一般在自己的项目的html文件，引入该文件即可，自己会做兼容操作：如果低版本的浏览器不存在JSON.parse 和 JSON.stringify 则使用json2.js文件里面提供的；如果浏览器存在两个方法，则使用浏览器本身提供的方法处理）

网站：https://github.com/douglascrockford/JSON-js

Ajax之文件上传

文章：http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

http://blog.csdn.net/inuyasha1121/article/details/51915742

①-简介

1. 使用Ajax实现文件的上传，但是这个标准只在w3c高版本的浏览器里面有实现，是属于一个ajax level2的标准。在低版本的IE里面是不兼容的。

网站：https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

1. 在使用Ajax做文件上传的时候，需要借助一个FormData对象，这个对象具有收集表单数据的能力，可以收集表单里面普通的数据，也可以收集文件信息。可以参考下面提供的文件。

②-FormData对象简单使用

在ajax里面做无刷新文件上传之前，我们需要先了解一个叫做FormData对象，然后这个对象可以帮我们去收集表单的数据（1. 基本数据 text 2. 可以收集上传文件）。

1. 设计一个如下的注册的表单（收集基本数据 text password）

效果

1. 利用FormData对象收集表单数据，然后使用Ajax技术发送给后台

注意：在使用FormData对象收集表单数据，使用Ajax发送POST请求的时候，不要设置请求头，如果设置，在服务器端，则无法正常收集post提交的数据信息。

1. 服务器定义一个 register.php 文件，接收ajax请求

③-文件上传-显示进度条效果

进度条效果

需求分析：

1. 由于我们上传要显示进度条，文件一般都是很大的文件，所以需要修改post上传数据的大小。
2. 整个表单提交的大小

b. 单个文件提供的大小

1. 创建一个上传文件的表单页面

效果

1. 使用Ajax做文件上传的时候，我们需要不断得知文件已经上传文件的大小和文件总大小的一个百分比。
   1. (loaded size )/ ( total size) 等于小的div宽度的百分比
   2. 如何获取文件已经上传的大小和总大小？

答：利用Ajax leval2 第一个新的方法（在这个Ajax对象上面存在一个upload属性，属性里面存在一个onprocess属性，可以这个属性设置一个回调函数，这个回调函数，会在有文件上传的时候，距离一定的间隔进行触发调用）

1. 在浏览器使用ajax完成图片上传

1. 定义一个register.php文件，接收ajax请求，完成上传

6. 效果

④-上传插件

现在一般来说我们很少自己使用ajax进行文件上传，一般都使用现成插件进行完成。底层的原理使用的 FormData 对象 + ajax ，注意，如果是低版本的IE浏览器也需要做无刷新文件上传，则FormData对象不能在使用，则我们可以使用 iframe技术进行无刷新上传。

插件：

1. 百度出的 webuploader

1. zyupload

Ajax跨域问题

①-什么是跨域？

答：当使用Ajax技术去请求本域名的资源信息的时候，是可以直接请求的。但是如果去别的域名的资源信息的时候，这个时候由于浏览器的一个同源政策的限定，是不允许直接去获取别的域名下的资源信息。

例如：www.sinsea.cn/index.html(ajax) —————>http://www.tngou.net/doc/food(提供的一个接口)

上面的这种请求就是一个跨域请求。

②-浏览器的同源政策是什么？

答：现代的浏览器默认只能让Ajax去请求本域名里面的资源信息，如果要请求域名的资源信息，则是不允许的。（备注：严格是是允许请求，但是请求后，会把响应的数据丢弃掉）

为什么浏览器存在同源政策的限定？

答：主要是为了安全。但是由于现在的项目融合比较多，肯定存在跨域的需求。

③-跨域示例

本域名：local.php.com

请求域名：local.test.com

两个域名不是同一个域。则使用ajax请求就会报错。

④-跨域成熟的解决方案

对于Ajax的跨域成熟的解决方案存在如下三种：

1. jsonp技术【最早技术来解决，比ajax还早】
2. 同域代理【需要自己服务器进行处理】
3. cors 响应头【缺陷 HTML5新标准，现代浏览器才支持】

目前使用最多应该是jsonp技术。其次就是同域代理。最后cors设置

jsonp的原理-只支持get方式-需要目标网站支持

简介

1. 由于同源政策的限定，Ajax是没办法直接请求别的域名的资源信息
2. 但是img script 等标签，可以发送网络请求，这些标签不受同源政策的限定
3. 我们可以动态去创造一个script标签，然后把它的src设置我们请求的地址，然后请求的时候还传递一些参数（传递一个叫做callback参数）
4. 请求的目标站，接受请求，过滤参数，对对应的数据格式化成json【把格式化后的json数据放置在传递过程中传递的一个叫做callback的回调函数里面】，然后在进行响应。

注意：jsonp只能完成get请求，同时jsonp需要目标网站的支持（把需要返回的数据填充在一个callback的回调函数里面）。

uuid相关资料：

http://www.jianshu.com/u/811a3c46491e

功能需求

请求历史上的今天进行数据获取

API接口：

https://api.asilu.com/

历史上的今天：

https://api.asilu.com/today/todayonhistory/

实操

1. 在自己网站定义一个页面，使用jsonp完成网络请求

效果

1. 引入jsonp.js文件，使用jsonp进行数据请求

3. 效果

同域代理

由于jsonp的技术需要目标网站的支持完成get请求，然后才可以完成请求。现在可以在自己的域名下创建一个动态的脚本文件.php（服务器端不受同源政策的限定），让这个php文件帮我们发送目标网站的请求。

原理图：

场景：

1. A域名希望通过Ajax请求B域名接口提供的天气信息，直接请求存在跨域，肯定是不允许的

2. A域名的Ajax可以先请求A域名的一个动态的脚本文本（携带一个参数？请求的B域名目标网站），让该脚本文件帮我们请求B域名的接口，然后请求完成后，把数据进行返回给本域名Ａ

3. A域名就可以通过中间的PHP脚本获取到数据

4. 中间的服务器充当的是一个代理人

代码：

A域名的Ajax请求

A域名的代理op.php 进行代理请求

效果

cors设置响应头-需要注意目前只支持w3c的浏览器

网站：http://www.cnblogs.com/Darren_code/p/cors.html

网站：http://www.cnblogs.com/hustskyking/

网站：http://www.cnblogs.com/TomXu/

原理：在目标网站设置一个允许访问的响应头。

在B域名的目标网站，设置一个响应头

在A域名可以直接使用Ajax调用B域名的资源信息

扩展-允许cors进行跨域

接口：https://cnodejs.org/api/v1/topics

总结：

对于ajax跨域，其真实的解决方法只有 cors（响应头）。

用的 jsonp 、同域代理（解决ajax不能跨域的一种方案）。

功能-自己实现

头条网站接口：

http://v.juhe.cn/toutiao/index?type=&key=d0c418c9d5324a8ddf197e85c3dc9c5a

不支持 jsonp 也不支持 cors 。那么只能进行同域代理。

效果

加载更多