初始化 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 域名访问应用，现在的首页是默认的首页页面：
第二步：清理默认安装配置
由于我们构建的是基于 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。
11 Comments
你自己配置 github app id 和 secret 了吗