现在,在开发中restful风格的api是比较流行的,尤其是在前后端分离的架构中。

这些东西这一下这篇文章中说的很详细:RESTful接口设计原则和优点

下面,我们来讨论如何使用laraval和前端完成restful风格的接口对接。

因为,restful风格的接口中不包含动词,它得增删改查有http请求方式决定:post、delete、put(patch)、get。

所以我们第一件事情,先在laraval中编写好对应的路由(我这里只是讨论了restful的一个概念,所以只是写到路由层次,没有再更深的写逻辑,网读者见谅):

1、找到路由文件(laravel\app\Http\Routes.php),做如下编辑:

<?php

header('Access-Control-Allow-Origin:*'); //代表允许任何网址请求,如果不写的话,跨域访问回报错。

header('Access-Control-Allow-Methods:GET, POST, PATCH, PUT, DELETE, OPTIONS'); //代表允许以上请求方式访问,如果没有这句话的话,put/patch/delete访问回报没有访问权限的错!!!

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);
});

2、编辑前端html文件(该文件可以放在任何地方,因为我们这里是前后端分离的,使用ajax请求的数据):

<!-- 这是jquery的cdn -->
<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的前后端分离的请求场景。

下面我们来做观察:

1、观察请求页面。

2、我们观察一下laraval的路由。

3、看一下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);
}

使用laraval框架和前端完成restful风格的请求对接(这里只是讨论restful的概念)的更多相关文章

  1. springboot的restful风格获取请求中携带的参数

    http://localhost:8080/emp/1 有以上请求,我们controller要怎么获取请求中传递的参数1呢? 通过PathVariable注解,如下: @DeleteMapping(& ...

  2. restful风格,restcontroller与controller

    restful风格,restcontroller与controller 初步接触springmvc的时候,被要求使用restful风格,彼时一头雾水,不懂何谓restful,参阅了很多资料,慢慢的接触 ...

  3. Restful风格接口浅析

    为什么使用RESTful1.JSP技术可以让我们在页面中嵌入Java代码,但是这样的技术实际上限制了我们的开发效率,因为需要我们Java工程师将html转换为jsp页面,并写一些脚本代码,或者前端代码 ...

  4. SpringMVC(三)Restful风格及实例、参数的转换

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Restful风格 1.Restful风格的介绍 Restful 一种软件架构风格.设计风格,而不是 ...

  5. 使用RESTful风格开发Java Web

    什么是RESTful风格? REST是REpresentational State Transfer的缩写(一般中文翻译为表述性状态转移),REST 是一种体系结构,而 HTTP 是一种包含了 RES ...

  6. Restful风格wcf调用4——权限认证

    写在前面 在前面的三篇文章,已经介绍了restful风格wcf,如何实现增删改查以及文件的上传下载操作.本篇文章将介绍一下,调用restful的权限认证的内容.在调用的接口,为了安全,总会需要对请求进 ...

  7. 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求

    这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,使用POST与GET请求时都正常,而Request Meth ...

  8. RESTful风格的Web服务框架:Swagger

    Swagger与SpringMVC项目整合 为了方便的管理项目中API接口,在网上找了好多关于API接口管理的资料,感觉目前最流行的莫过于Swagger了,功能强大,UI界面漂亮,并且支持在线测试等等 ...

  9. django框架实现restful风格的API开发

    RESTful风格的要求:https://www.cnblogs.com/chichung/p/9933116.html 利用django原生的框架直接做RESTful的API开发是怎样的呢?感受一下 ...

随机推荐

  1. Python练手例子(7)

    37.对10个数进行排序. 程序分析:可以利用选择法,即从后9个比较过程中,选择一个最小的与第一个元素交换,下次类推,即用第二个元素与后8个进行比较,并进行交换. #python 3.7 if __n ...

  2. 写给踏入IT行业的自己

    在IT工程师和培训机构多如牛毛的时代,拜师学艺并不难.但自学编程对于毫无基础的同学来说却可能是个问题,相信有过类似经历的朋友都有一把辛酸泪和一肚不吐不快的体会.让我们从一个故事说起… 故事 某君在一个 ...

  3. iview menu组件手动收起与展开

    本文主要介绍menu组件在有子菜单时如何手动的展开与收起. 展开: 在需要展开的地方先设置openname变量如this.openname = ["设置"]; 再在$nextTic ...

  4. StarUML[3.1.0]官方安装破解版[app.asar]

    StarUml 3.1.0 自注册破解版 安装完毕在注册界面随便输入一个 License 即可. 安装包方式可以选择从官方下,如果下载过慢,也可以选择分享包中的原版安装文件: 不放心的可以去校验MD5 ...

  5. 在docker上部署mysql

    1.拉取官方镜像5.6的版本.(查看有哪些版本,可以在阿里云的镜像仓库查看,我配置的镜像是阿里云的) docker pull mysql:5.6 2.查看拉取的镜像,获取镜像id docker ima ...

  6. 使用re开发python计算器

    #!/usr/bin/env python import reimport functools def minus_operator_handler(formula): '''处理一些特殊的减号运算' ...

  7. cadence16.6 暴力破解出现再次安装出现问题为Sever-----------问题

    根据本人,实测,本人研究几天和在网络上借鉴,此方法是几天的成果,如有借鉴,请说明出处,谢谢,不懂的请留言. 最优解决方式,是自己卸载软件,有人会说,都完全删除了还怎么卸载软件. (1)在安装包里有个注 ...

  8. rpm和yum模拟安装

    在更新安装包之前,我们可能会想做一个测试运行,换句话说,模拟而不是实际安装更新的包,以确定在安装之前是否有任何需要处理的问题. 以测试更新openssh2为例: yum update openssh2 ...

  9. BeautifulSoup库的使用

    1.简介 BeautifulSoup库也是一个HTML/XML的解析器,其使用起来很简单,但是其实解析网站用xpath和re已经足矣,这个库其实很少用到.因为其占用内存资源还是比xpath更高. '' ...

  10. FPC导通阻抗计算

    pc线路板是有导电功能的,那么如何仅适用手工计算出线路的阻值能?那么就需要使用到一个公式: W*R*T=6000 W是指铜箔的宽度单位是密耳mil. T是指铜箔厚度单位是盎司oz. R是指铜箔的电阻单 ...