axios可以訪問API獲取資料
這里我訪問的API是我在PHP的cakephp框架本地環境撰寫的介面，撰寫的介面遵循restful風格，
前端頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
</body>
</html>
<script>
//獲取全部資料
axios.get("http://cakephp.com/api")
.then((data) => {
console.log(data);
});
//獲取一條資料
axios.get("http://cakephp.com/api/4")
.then((data)=>{
console.log(data);
});
//添加一條資料
axios.post("http://cakephp.com/api",{title:'學習',user_id:1})
.then((data)=>{
console.log(data);
}).catch(error => console.log(error));
// 洗掉一條資料
axios.delete("http://cakephp.com/api/13")
.then((data)=>{
console.log(data);
}).catch(error => console.log(error));
//獲取要修改的一條資料資訊
axios.put('http://cakephp.com/api/4')
.then((d)=>{
console.log(d);
}).catch(error => console.log(error));
//修改一條資料
axios.post('http://cakephp.com/api/4',{'title':'修改資訊'})
.then((data)=>{
console.log(data);
}).catch(error => console.log(error));
</script>
Cakephp介面代碼
路由的定義：
在cakephp中定義資源路由：就可以滿足restful介面風格，在route.php中撰寫代碼如下
Router::mapResources('api');
Router::parseExtensions();
資源路由定義之后的介面官方檔案定義如下圖：
控制器ApiController代碼：
這里因為前端的代碼和后端的代碼存在跨域問題，所以需要處理跨域的問題，在代碼中需要添加跨域的代碼，不然前端發送請求時會報跨域的錯誤，在代碼中我有詳細的注釋，
<?php
/**
* Created by PhpStorm.
* User: wyq
* Date: 2021/8/3
* Time: 10:41
*/
class ApiController extends AppController
{
public $uses = array('Article');
public $components = array('publicFunction');
/*
* 在建構式中處理跨域問題
*/
public function __construct(CakeRequest $request = null, CakeResponse $response = null)
{
parent::__construct($request, $response);
//允許的源域名 *
header("Access-Control-Allow-Origin: *");
//允許的請求頭資訊 Origin, X-Requested-With, Content-Type, Accept, Authorization
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");
//允許的請求型別 GET, POST, PUT, DELETE, OPTIONS, PATCH
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, PATCH');
}
/*
* 展示資訊 get請求
*/
public function index(){
$data = $this->Article->findAll();
foreach ($data as $k=>$v){
$res[$k]['id'] = $v['Article']['id'];
$res[$k]['title'] = $v['Article']['title'];
}
$this->publicFunction->success($res);
}
/*
* 展示一條資訊 get請求
*/
public function view($id){
$data = $this->Article->findOne($id);
$res = $data['Article'];
$this->publicFunction->success($res);
}
/*
* 新增一條資訊 Post請求
*/
public function add(){
$post = file_get_contents('php://input');
$data = json_decode($post,true);
$res = $this->Article->dell($data);
$this->publicFunction->success($res['Article']);
}
/*
* 修改頁面展示 Put請求
*/
public function edit($id){
$post = file_get_contents('php://input');
$data = json_decode($post,true);
if ($data){
$data['id'] = $id;
$data = $this->Article->dell($data);
$res = $data['Article'];
$this->publicFunction->success($res);
}else{
$data = $this->Article->findOne($id);
$res = $data['Article'];
$this->publicFunction->success($res);
}
}
/*
* 洗掉頁面處理 delete請求
*/
public function delete($id){
$data = $this->Article->del($id);
if ($data){
$this->publicFunction->success();
}else{
$this->publicFunction->error();
}
}
}
模型Article代碼：
<?php
/**
* Created by PhpStorm.
* User: wyq
* Date: 2021/7/21
* Time: 10:18
*/
class Article extends AppModel
{
/*
* 顯示全部文章數量
*/
public function count(){
$this->setSource('article');
$count = $this->find('count');
return $count;
}
/*
* 查詢全部文章的資訊
*/
public function findAll($page='',$limit=''){
$this->setSource('article');
$data = $this->find('all',array(
'fields' => array('id','user_id','title','content','create_time','update_time','u.id','u.username'),
'joins'=> array(
array(
'table' => 'users',
'alias' =>'u',
'type' => 'left',
'conditions' => array('user_id = u.id')
)
),
'limit' => $limit,
'page' => $page,
));
return $data;
}
/*
* 查詢一篇文章的資訊
*/
public function findOne($id){
$this->setSource('article');
$data = $this->find('first',array(
'conditions'=>array('id'=>$id)
));
return $data;
}
/*
* 文章處理
*/
public function dell($data){
$this->setSource('article');
$res = $this->save($data);
return $res;
}
/*
* 文章洗掉
*/
public function del($id){
$this->setSource('article');
$data = $this->delete($id);
return $data;
}
}
效果展示：
未操作時資料庫：
操作后：
請求獲取資料
這里接介面報錯的原因是因為id為14的記錄已經被洗掉了
總結：
這里我后臺使用的是cakephp寫的介面，這只是一個示例，因為公司介面的代碼使用的是Codelgniter框架，所以我會使用Codelgniter框架來進行介面編程，繼續實作我的個人博客系統，我準備使用Vue和Codelgniter框架來實作個人博客的前臺頁面，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/292212.html
標籤：其他