基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(一) —— 初始化 Laravel 单页面应用

今天开始,学院君要开启一个系列教程,和之前的博客系列一样,通过一个完整的手把手教程带大家学习如何通过 Laravel + VueJS 开发 API 驱动的应用程序,整个教程的篇幅大概在 40 篇左右,主要讲述 Web 端及移动端的单页面应用(Single Page Application)开发,后端基于 Laravel 5.6,前端基于 Vue 2,演示教程的开发环境使用的是 MacOS + Laradock。

在开篇部分,我们将通过三篇左右的篇幅来介绍 Laravel 应用的安装配置,Socialite 及 Passport 扩展包的安装和使用,关于这些,Laravel 文档和网上都有大量的资源和文档可供参考,所以我这里不会过多的深究细节(你可以在学院上对感兴趣的内容进行搜索),而是将关注点更多地放在项目本身上:要开发一个 API 驱动的 Laravel 应用要怎么做。

我们这个 App 的主要功能是查找本地附近的咖啡烘培店和专卖店,开发这个应用很简单,我们需要一些实体比如用户、咖啡店、标签等等,这个应用的名字我们姑且叫做 Roast,演示地址和项目源码会在教程更新完成后公开到 API 应用系列教程页面。

第一步:安装 Laravel

首先我们需要安装一个新的 Laravel 应用,我这里通过 Composer 进行安装(更多安装方式可以参考 Laravel 安装配置文档):

composer create-project --prefer-dist laravel/laravel roast "5.6.*"

在我的开发环境上,我为这个应用配置的虚拟域名是 roast.test,安装完应用并配置好 Web 服务器后,通过 roast.test 域名访问应用,现在的首页是默认的首页页面:

Laravel默认首页

第二步:清理默认安装配置

由于我们构建的是基于 API 驱动的应用,所以有些自带的代码、文件及目录是不需要的:

  • 移除 app/Http/Controllers/Auth 目录,我们将通过 Socialite 重构用户认证功能
  • 移除 resources/views/welcome.blade.php 文件,这个是默认的欢迎页面,我们呢不需要它

关于 JS 和 SASS 配置留到 JavaScript 部分讨论,这里我们只讨论后端部分代码。

第三步:新增目录

对于提供 API 的应用而言,我们可以基于 API 和 Web 将控制器进行分隔:

  • 创建 app/Http/Controllers/API 目录来存放 API 控制器
  • 创建 app/Http/Controllers/Web 目录来存放 Web 控制器

如果你以后还会开发其它应用,比如博客、电商、社交等,也可以这么做。

第四步:新增视图

由于我们构建的是单页面应用(SPA),所以在整个应用中只需要两个视图即可!我们会通过 VueJS 组件和 Vue Router 来处理多个页面,因此所需要的只是一个可以展示 SPA 视图以及一个登录视图:

  • 新增 resources/views/app.blade.php 视图文件
  • 新增 resources/views/login.blade.php 视图文件

编辑 app.blade.php 视图文件内容如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"/>

        <link rel="icon" type="image/x-icon" href="/favicon.ico">

        <title>Roast</title>

        <script type='text/javascript'>
             window.Laravel = <?php echo json_encode([
                'csrfToken' => csrf_token(),
            ]); ?>
        </script>
    </head>
    <body>

        <div id="app">
            <router-view></router-view>
        </div>

        <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

    </body>
</html>

在这段代码中,我们在两个地方存放了 CSRF Token 值,一个是名为 csrf-token 的 meta 标签,一个是全局 JavaScript 变量 window.Laravel,我们会将其添加到 Axios 请求头,以便在每个请求中传递来阻止恶意请求。此外,我们还需要在所有 API 路由和 Web 路由的 CreateFreshApiToken 中使用 auth:api 中间件(下一篇教程中详细讲述),以便可以安全消费应用自己提供的 API。

<div id="app"><router-view></router-view></div> 元素将在我们开发应用侧边栏时包含由 VueRouter 定义的路由视图。

所有的外部 CSS 和 JavaScript 文件都将通过 Laravel Mix 编译合并之后通过 <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"/><script type="text/javascript" src="{{ asset('js/app.js') }}"></script> 引入。

编辑 login.blade.php 视图文件内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roast</title>

</head>
<body>
<a href="/auth/github">
    Log In With Github
</a>
</body>
</html>

这个视图用于展示登录界面,本应用仅支持通过 Laravel Socialite 实现的第三方应用登录,在下一篇教程中我们将为 Socialite 设置认证路由。

第五步:新增 Web 控制器和路由

接下来,我们定义一个简单的 Web 控制器,并通过这个控制器返回 app.blade.php 视图。新增控制器 app/Http/Controllers/Web/AppController.php 并编辑其代码如下:

<?php

namespace app\Http\Controllers\Web;

use App\Http\Controllers\Controller;

class AppController extends Controller
{
    public function getApp()
    {
        return view('app');
    }
}

routes/web.php 文件中移除自带的 / 路由并新增如下路由:

Route::get('/', 'Web\AppController@getApp')
->middleware('auth');

本应用只允许认证用户才能访问,所以我们在入口路由上使用了 auth 中间件。

至此,Roast 应用的初始化工作已经完成,由于尚未实现用户认证相关功能,所以应用还不能正常访问,在下一篇教程中,我们将为其添加基于 Laravel Socialite 实现的用户认证功能。

项目源码位于 Github 上:nonfu/roastapp

学院君 has written 978 articles

Laravel学院院长,终身学习者

积分:112087 等级:P12 职业:手艺人 城市:杭州

5 条回复

  1. Laragh Laragh says:

    修改一个地方: composer create-project --prefer-dist laravel/laravel roast "5.6.*"

  2. 学院君 学院君 says:
    @ Laragh

    这几年我都没什么时间维护 不过学院的发展思路和它不一样 没有对比性 我更倾向于做成阮一峰博客这种类型的网站 对内容有严格把控 这个项目的代码肯定会上传的 敬请关注

  3. Laragh Laragh says:

    学院君,能不能上传到github上。觉得学院的教程比laravel-china 多。但是很少有真正的源码上传。思路上前几年是laravel 学院超前,慢慢的就不如laravel-china 了。。。

登录后才能进行评论,立即登录?