thinkPHP6框架中,使用基于restful风格的资源路由,前端调用后端接口:
前端三要素:url、method、参数
后端三要素:状态码,提示信息,数据
前端代码:
<script>
$('.btn').click(function(){
var content = $('.content').val();
$.ajax({
url:"http://www.tp8.com/news/"+content,
data:"get",
dataType:"json",
success:function(res){
var data = JSON.parse(res);
console.log(data);
$('ul>li').eq(0).text('城市:'+data.result.city);
$('ul>li').eq(1).text('风向:'+data.result.realtime.direct);
$('ul>li').eq(2).text('天气:'+data.result.realtime.info);
$('ul>li').eq(3).text('级别:'+data.result.realtime.power);
$('ul>li').eq(4).text('温度:'+data.result.realtime.temperature);
}
})
})
</script>
前端使用get方式请求,并且传递参数,根据restful规范,会到后端thinkPHP框架,域名www.tp8.com下的单应用模块下news路由的read方法,并且传递参数
后端接收参数,(有几个参数自己提前已经定义好)
使用curl发送请求,根据接口地址,获取数据,在从本地集成环境服务器返回前端,进行展示
封装函数:
<?php namespace app\common; // 应用公共文件 if (!function_exists('curl_request')){ /** * 使用curl函数库发送请求 */ function curl_request($url, $method='get', $params=[], $type='http'){ /** * 初始化curl,返回资源 */ $curl = curl_init($url); /** * 默认是get请求,如果是post/put请求,设置请求方式和请求参数 */ if (strtoupper($method) == 'POST'){ curl_setopt($curl,CURLOPT_POST,true); curl_setopt($curl,CURLOPT_POSTFIELDS,$params); } if (strtoupper($method) == 'PUT'){ curl_setopt($curl,CURLOPT_PUT,true); } /** * 如果是HTTPS协议,禁止从服务器验证本地证书 */ if (strtoupper($type) == 'HTTPS'){ curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,false); } /** * 发送请求,返回结果 */ curl_setopt($curl,CURLOPT_RETURNTRANSFER,true); /** * 选择地址 * curl_setopt($curl,CURLOPT_URL,$url); */ $res = curl_exec($curl); /** * 关闭请求 */ curl_close($curl); return $res; } }
控制器read方法,调用公共函数:
use app\common
public function read($id) { $area = $id; $key = '40d63c4082fc99ce813c29de4d720038'; $method = 'get'; $type='http'; $params = []; $url = "http://apis.juhe.cn/simpleWeather/query?city=$area&key=$key"; $result = common\curl_request($url,$method,$params,$type); return $result; }
整个过程涉及跨域
路由写法:
Route::resource('news',"News")->allowCrossDomain([ "Access-Control-Allow-Origin"=>"*", "Access-Control-Allow-Methods"=>"GET, POST, PATCH, PUT, DELETE", "Access-Control-Allow-Headers"=>"Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With", ]);
header头是框架默认加上去的,不写也可以,只要指向allowCrossDomain即可;
同学们,这是整个详细过程,虽然简单,却也对我们在清华大学计算机系初级阶段的学习有所帮助,我将博客发布在CSDN平台,希望对大家有所帮助。
学如逆水行舟,不进则退。
愿各位同学,在大学第一学期期末考试,能够取得好成绩
------清华 赵志磊