使用laraval框架和前端完成restful風格的請求對接（這裏只是討論restful的概念）

時間 2020-05-15

標籤使用 laraval 框架前端完成 restful 風格請求對接這裏只是討論概念简体版

原文原文鏈接

如今，在開發中restful風格的api是比較流行的，尤爲是在先後端分離的架構中。php

這些東西這一下這篇文章中說的很詳細：RESTful接口設計原則和優勢css

下面，咱們來討論如何使用laraval和前端完成restful風格的接口對接。html

由於，restful風格的接口中不包含動詞，它得增刪改查有http請求方式決定：post、delete、put(patch)、get。前端

因此咱們第一件事情，先在laraval中編寫好對應的路由（我這裏只是討論了restful的一個概念，因此只是寫到路由層次，沒有再更深的寫邏輯，網讀者見諒）：jquery

一、找到路由文件（laravel\app\Http\Routes.php），作以下編輯：laravel

<?php程序員

header('Access-Control-Allow-Origin:*'); //表明容許任何網址請求,若是不寫的話，跨域訪問回報錯。ajax

header('Access-Control-Allow-Methods:GET, POST, PATCH, PUT, DELETE, OPTIONS'); //表明容許以上請求方式訪問，若是沒有這句話的話，put/patch/delete訪問回報沒有訪問權限的錯！！！json

Route::get('/', function () {
return view('welcome');
});後端

//接受get請求的路由
Route::get('restful',function(){
$arr = array('statuCode' =>200,'content' => 'this is GET');

return json_encode($arr);
});
//接受post請求的路由
Route::post('restful',function(){
$arr = array('statuCode' =>200,'content' => 'this is POST');
return json_encode($arr);
});
//接受put請求的路由
Route::put('restful',function(){
$arr = array('statuCode' =>200,'content' => 'this is PUT');
return json_encode($arr);
});
//接受patch請求的路由
Route::patch('restful',function(){
$arr = array('statuCode' =>200,'content' => 'this is PATCH');
return json_encode($arr);
});
//接受delete請求的路由
Route::delete('restful',function(){
$arr = array('statuCode' =>200,'content' => 'this is DELETE');
return json_encode($arr);
});

二、編輯前端html文件（該文件能夠放在任何地方，由於咱們這裏是先後端分離的，使用ajax請求的數據）：

<script

src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<head>

<style type="text/css">
.div {
width:100px;
color:red;
float:left;
text-align:center;
background:#ccc;
margin-left:5px;
}

</style>
</head>

<div class = 'div get'>
get
</div>
<div class = 'div post'>
post
</div>
<div class = 'div put'>
put
</div>
<div class = 'div patch'>
patch
</div>
<div class = 'div delete'>
delete
</div>
<script>
$(".div").click(function(){
$(this).css("background-color","yellow");
});
$(".div").mouseover(function(){
$(this).css("background-color","#333");
});
$(".div").mouseleave(function(){
$(this).css("background-color","#ccc");
});
//get請求
$(".get").click(function(){
var method = 'get';
requireFunction(method);
});
//post請求
$(".post").click(function(){
var method = 'post';
requireFunction(method);
});
//put請求
$(".put").click(function(){
var method = 'put';
requireFunction(method);
});
//patch請求
$(".patch").click(function(){
var method = 'patch';
requireFunction(method);
});
//delete請求
$(".delete").click(function(){
var method = 'delete';
requireFunction(method);
});
//ajax公共方法
function requireFunction(method){
$.ajax({
type: method,
dataType: 'json',
url: 'http://localhost:8080/laravel/public/restful',
success:function(data){
console.log(data);
},
error:function(){
alert('shibai');
}
});
}

</script>

作完以上兩個文件的編輯，咱們就完成了一個簡單的基於restful的先後端分離的請求場景。

下面咱們來作觀察：

一、觀察請求頁面。

二、咱們觀察一下laraval的路由。

三、看一下ajax請求的路徑。

經過上面兩張圖片的結合，咱們能夠知道，咱們編寫的這個小例子，是一個真正的restful類型的接口風格。拿到數據後前端程序員在進行頁面渲染，這就是一個先後端分離的理念。

須要注意的是：

laraval的post請求，默認是有CsrfToken驗證的。這個例子中咱們不須要驗證，能夠修改一下文件（laravel\app\Http\Middleware\VerifyCsrfToken.php）文件。

找到 VerifyCsrfToken.php文件（app/http/middleware）添加以下方法

public function handle($request, \Closure $next)
{
// 使用CSRF
//return parent::handle($request, $next);
// 禁用CSRF
return $next($request);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。