在实际的开发当中，前端和后端的开发会同步进行
后台人员新建laravel项目，编写控制器和模型（视图），用于向前端同学提供数据，或者收集前端同学提供的数据
前端人员新建web或者android或者ios 等项目，用于获取后台人员提供的数据，渲染界面
前端和后端程序之间使用 ajax 的方式交互数据
1. 新建项目 新建前端项目 news_client 和 后端laravel项目 news_server
文章图片
2. 文章列表展示
2.1 前端代码编写 在 news_client 项目中，新建 index.html
html 代码
Document - 锐客网
编号
标题
操作
添加文章
说明：
html 代码中已经加入了用于添加文章的模态框
为“添加文章”按钮，添加了如下两个属性，作用是点击此按钮能够显示和隐藏模态框
data-toggle="modal" data-target="#myModal"
js 代码
loadData();
function loadData() {
// 清除tbody 中的数据
$('tbody tr').remove()
$.ajax({
url: 'http://127.0.0.1:8000/posts',
type: 'get',
dataType: 'json',
success: function (res) {
$(res).each(function (index, domEle) {
// console.log(domEle)
var tr = `
${domEle.id}
${domEle.title}
`;
$('tbody').append(tr)
})
}
})
}
说明：
使用a标记将标题包含起来，点击文章标题可以跳转到文章详情展示页面，这里使用超链接跳转即可，不需要使用 ajax 方式
2.2 后端代码编写 创建路由
use Illuminate\Support\Facades\Route;
// 获取所有的文章信息
Route::get('/posts','PostController@index');
【前后端分离开发中的laravel】创建模型
php artisan make:model Post
创建控制器
php artisan make:controller PostController
编写 index 方法代码
// 获取所有文章信息
public function index()
{
$res = Post::all();
return response()->json($res);
}
此时请求，会产生跨域问题
跨域解决方案
利用 CORS 跨域资源共享
简单的说就是在被请求数据的网站中设置允许其他网站请求数据
创建中间件 CORS
php artisan make:middleware Cors
上面命令会在 App\Http\Middleware 目录下创建 Cors.php 文件，在 handle 方法中编写如下代码
public function handle($request, Closure $next)
{
$response = $next($request);
// 允许任何网站访问本网站的数据
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
$response->header('Access-Control-Allow-Credentials', 'false');
return $response;
}
注册中间件
在 app\http 的 kernel.php 文件中 的 $middleware 属性中，加入如下代码
文章图片
重新请求即可实现跨域访问
3. 新增数据 3.1 前端代码 添加文章模态框已经在上一节编写完毕
这里只列出相关js代码即可
js 代码
$('#btn-save').on('click', function () {
var data = https://www.it610.com/article/{ title: $('#title').val(), content: $('#content').val() }
$.ajax({
url: 'http://127.0.0.1:8000/posts',
type: "post",
data: data,
dataType: 'json',
success: function (res) {
if (res.error == 0) {
// 重新加载数据
loadData();
// 关闭模态框
$('#myModal').modal('hide')
}
}
})
})
3.2 后端代码 添加方法 在 PostController 控制器中编写方法
public function store()
{
$title = request('title');
$content = request('content');
$model = new Post();
$model->title = $title;
$model->content = $content;
$res = $model->save();
if ($res) {
return response()->json([
'error' => 0,
'msg' => 'success',
'data' => null,
]);
} else {
return response()->json([
'error' => 201,
'msg' => 'error',
'data' => null,
]);
}
}
配置路由
// 新增数据
Route::post('/posts','PostController@store');
添加例外
运行添加文章后，浏览器控制台中出现如下错误
文章图片
错误原因是：laravel 开启了 CSRF 防护，也就是说当其前端以 post、delte 或者 Put 方式访问路由的时候，就会收到 CSRF 保护，就是要求提供一个令牌，如果没有令牌，则就会报 419
解决方法：指定某些路由不需要CSRF防护
在 Http\Middleware 目录下的 verifycsrgtoken.php 中的 except 属性中加入想要不受保护的路由
文章图片
此时重新添加文章即可
4. 删除文章 4.1 前端代码 这里只列出 js 代码，html 代码参考 第一节
// 使用委派的方式添加单击事件
$('tbody').on('click','.del', function () {
var id = $(this).data('id');
$.ajax({
url:`http://127.0.0.1:8000/posts/${id}`,
type:'post',
data:{_method:"DELETE"},
dataType:"json",
success:function(res){
if (res.error == 0) {
// 重新加载数据
loadData();
}
}
})
})
代码的解释参见 9.3.3 请求方法详解
4.2 后台代码 删除方法
在 PostController 控制器中添加如下方法
public function delete(Post $post)
{
$res = $post->delete();
if ($res) {
return response()->json([
'error' => 0,
'msg' => 'success',
'data' => null,
]);
} else {
return response()->json([
'error' => 201,
'msg' => 'error',
'data' => null,
]);
}
}
配置路由
Route::delete('/posts/{post}','PostController@delete');
CSRF忽略
在 VerifyCsrfToken.php 文件中进行如下配置
protected $except = [
//
'/posts/*',
'/posts',
];
4.3 请求方法详解 在以前的课程中，我们的原则是如果从服务器获取数据，就使用 get 方法，如果向服务器发送数据，就使用 post 方式。但是按照现在流行的方式来看，同样是向服务器发送数据，也分几种情况
- 增加数据，使用 post
- 更新数据，使用 put
- 删除数据，使用 delete
但是，不能直接将 type 的值设置为 delete，这样并不能访问到服务器端配置的如下路由
Route::delete('/posts/{post}','PostController@delete');
需要如下的方式才能发送 delete 请求
- 设置 type 的值为 post
- 在 data 中设置 _method 为 delete
5. 编辑数据 下篇继续
6. 文章详情 下篇继续
