laraver 新写法（前后端分开写）

最新推荐文章于 2022-04-09 17:33:49 发布

mslmhl

最新推荐文章于 2022-04-09 17:33:49 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/mslmhl/article/details/103483972

版权

laraver 新写法（前后端分开写）

1前端和后端程序之间使用ajax的方式交互数据

1.1 创建2个文件，一个放前端，一个放后端`在这里插

在前端文件中新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <button class="btn btn-primary">添加文章</button>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>标题</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</body>
</html>
<script>
loadData();
function loadData(){
  $.ajax({
    url:'http://127.0.0.1:8000/posts',
    type:'get',
    dataType:'json',
    success:function(res){
      console.log(res)
    }
  })
}
</script>

1.2后端代码

第一步创建路由

use Illuminate\Support\Facades\Route;
// 获取所有的文章信息
Route::get('/posts','PostController@index');

第二步创建模型

 php artisan make:model （Post） (名字可以自己起)

第三步创建控制器

 php artisan make:controller （PostControll）（名字可以自己起）

编写index方法代码

class PostController extends Controller
{
    // 获取所有文章信息
    public function index(){
        $res=Post::all();
        return response()->json(['name'=>'姚宏波','age'=>18]);
    }
}

此时请求，会产生跨域问题

跨域解决方案

利用 CORS 跨域资源共享

简单的说就是在被请求数据的网站中设置允许其他网站请求数据

创建中间件CORS

mslmhl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
laraver 新写法（前后端分开写）

laraver 新写法（前后端分开写）1前端和后端程序之间使用ajax的方式交互数据1.1 创建2个文件，一个放前端，一个放后端`在这里插在前端文件中新建index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
复制链接

扫一扫