通过 Laravel 创建一个 Vue 单页面应用(一)

使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中,我们将学习如何构建并运行一个以 Vue 路由为前端,laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上,然后在后续的教程中,我们再演示如何将 Laravel 作为 API 层而构建一个完整的应用。

一个以 Laravel 为后端的 Vue SPA 应用的基本运行流程如下:

  • 第一个请求触发服务端的 Laravel 路由
  • Laravel 渲染 SPA 布局
  • 接下来的请求使用 history.pushState API 触发页面跳转而无需重载页面

Vue router 有两种模式,分别为 history 模式和默认的 hash 模式。hash 模式使用 URL hash 来模拟一个完整的 URL,这样就可以使 URL 变化时页面却无需重新加载。

我们这里将要使用 history 模式,也就是说我们需要配置一个 Laravel 路由来匹配所有用户在 SPA 页面中可以进入的 URL。举个例子, 如果用户在浏览器中刷新了 /hello 这个路由,我们 (Laravel) 需要匹配到它并返回对应的 Vue 模板。Vue Router 将会识别该路由并渲染对应的 Vue 页面组件。

安装

首先我们会创建一个 Laravel 项目,然后再安装 Vue 的 NPM 路由包:

laravel new vue-router
cd vue-router

# 当使用 Valet 时,建立项目链接
valet link

# 安装 NPM 依赖,添加 vue-router 包
yarn install
yarn add vue-router # or npm install vue-router

我们已经完成了 Laravel 项目的安装,而且 vue-router 包也已经就绪。接下来,配置路由,定义一系列路由和组件。

配置 Vue 路由

Vue 路由执行的过程是为 Vue 组件定义一个路由,然后在应用中下面的标签中渲染:

<router-view></router-view>

router view 是在整个 Vue 应用组件中都生效的。我们暂时回到 APP 组件中。

首先,我们将更新最主要的 JavaScript 文件 resources/assets/js/app.js 以及配置 Vue 路由。将 app.js 中的内容替换成下面这个样子:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

我们需要添加一些文件,但是在这之前,我们来检查一下 app.js :

  • 通过  Vue.use() 来导入和安装 VueRouter 插件
  • 我们导入三个 Vue 组件:

    • App 组件(最外层的应用组件)
    • Hello 组件匹配 /hello 路由
    • Home 组件匹配 / 路由
  • 创建一个新的 VueRouter 对象,来存储相关配置
  • 通过在 Vue 的构造方法中添加 App 组件,来让 Vue 知道 App 组件
  • 将 router 常量添加到这个 Vue 应用中,通过 this.$router 和 this.$route 来调用

    VueRouter 构造器包含一个路由数组,在这个数组中定义路由的路径,名称(类似于 Laravel 的命名路由)和这个路径对应的页面组件。

我一般会把路由定义在一个单独的路由模块中,然后再引入主应用文件,但这里为了简便,我会直接在主应用文件(app.js)中定义这些路由。

为了让 Laravel mix 成功运行,我们需要定义如下三个组件:

mkdir resources/assets/js/views
touch resources/assets/js/views/App.vue
touch resources/assets/js/views/Home.vue
touch resources/assets/js/views/Hello.vue

首先是 App.vue 文件,这是应用的最外层的容器元素。在这个组件中,我们使用 Vue Router 的 <router-link/> 标签定义一个「头部」和一些导航:

<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to="{ name: 'home' }">Home</router-link> |
            <router-link :to="{ name: 'hello' }">Hello World</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

App 组件中最重要的标签是 <router-view></router-view>,其它通过路由匹配到的组件(如 Home 和 Hello)都是在这里进行渲染的。

下一个需要定义的组件是 resources/assets/js/views/Home.vue

<template>
  <p>This is the homepage</p>
</template>

最后,我们在 resources/assets/js/views/Hello.vue 路径下定义一个 Hello 组件。

<template>
  <p>Hello World!</p>
</template>

我倾向于把复用组件从页面组件中分离出来,做法是把页面组件放在 resources/assets/js/views 文件夹下,把复用组件放在 resources/assets/js/components 文件夹下。我通常会这么做,因为这可以让我轻松地分辨出哪些是可复用的组件,哪些是纯页面组件。

前端页面做到这些,就已达到运行我们的 Vue 应用所需要的了。接下来,我们需要定义好后端路由和服务端模板。

服务器端

我们使用带有Vue SPA的Laravel应用程序框架,可以很方便的在我们的应用程序中构建服务端API。我们还可以使用Blade渲染应用程序并且通过全局JavaScript对象来配置公共环境,我认为这是很方便的。

在本教程中,我们不会去构建一个API实例,但是我们将在后续教程中介绍。 这篇文章主要是关于连接Vue路由的。

我们在服务器端要解决的第一件事是定义路由。 打开 routes/web.php 文件并且替换 welcome 路由为一下内容:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| 你可以在这里为你的应用程序注册web路由。 这些
| 路由由RouteServiceProvider加载到一个包含「web」
| 的中间件组中。现在让我们创建一些很棒的东西!
|
*/

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

我们为 SpaController控制器定义了一个综合路由,这意味着任何 web 路由都将映射到我们的SPA。如果我们不这样做, 当用户发送了一个 /hello请求时, Laravel 将返回 404 响应.

接下来, 我们需要创建 SpaController 控制器并且定义视图:

php artisan make:controller SpaController

打开 SpaController 控制器并且输入以下内容:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

最后, 输入以下内容到 resources/views/spa.blade.php:

<!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>Vue SPA Demo</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

我们定义了必需的 ~#app 元素 ,其中包含了将要呈现的 App 组件,以及根据URL所呈现的其他组件。

运行项目

自此, 我们完成了一个使用 Vue 和 Vue Router 的 SPA 应用的基本框架, 接下来让我们通过运行 JavaScript 让它显示出来:

yarn watch # 或 npm run watch

下一步

我们已经建立起了一个使用 Laravel 作为 API 层的 Vue SPA 应用的骨架。但这个应用仍有很多功能需要我们在后续的教程中来实现:

  • 在前端定义一个 404 路由
  • 使用路由参数
  • 子路由
  • 在组件中向 Laravel 发起一个 API 请求
  • 可能还有很多,但我不准备全部列在这里...

本篇教程通过这些基础准备工作展示了我们可以轻松地使用 Vue Router 来开始一个 SPA 应用。如果你还不熟悉 Vue Router,请查阅 Vue Router 文档

评论