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框架来实现个人博客的前台页面。