使用Laravel 和 Vue 构建一个简单的SPA

本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正。

Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Application)呢?流程大致分为下面三步:

  1. 页面请求Laravel的一个路由
  2. 路由返回渲染一个包含了Vue的SPA框架
  3. 在上面渲染出来的框架中使用Vue来加载不同的页面单元模块

主要会学习使用到三个东西:

  1. laravel
  2. vue.js
  3. Vue-router
  4. axios

上面是一个简单的流程图,从图中我们可以看到,当请求34的路由时,并不会再次请求后端的Laravel,而是前端渲染了。

说了这么多,我们开始写代码吧~

1. 安装

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

npm install
npm install vue-router

安装好laravelvue-router后,我们需要配置前端路由和路由对应的组件

2. 配置Vue Router

Vue Router中把route和vue组件做了一个映射,在渲染时会把不同的组件渲染到<router-view></router-view>标签中。

首先,我们修改resources/assets/js/app.js这个文件:

window.Vue = require('vue');
// 或者
import Vue from 'vue'

import VueRouter from 'vue-router'
// 引入Vue Router并加载到Vue中
Vue.use(VueRouter)

// 引入我们要使用到的几个组件
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

// 实例化一个Vue Router
const router = new VueRouter({
    mode: 'history',
    base: '/spa',
    routes: [
        {
            path: '/',  // 这是路径
            name: 'home',   // 这是名称
            component: Home // 这是使用的组件
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello
        }
    ],
});

// 注入Vue Router 实例,我们就能在vue里面这样使用: this.$router, this.$route
const app = new Vue({
    el: '#app',
    components: { App, },
    router 
});

然后,新建以下几个文件:

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是所有组件的父组件,负责渲染其他页面,代码如下:

<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>

注意这个router-view标签,Vue Router会将组件渲染到该标签里面。其他几个页面就是我们需要展示的组件页面了。

Home.vue :

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

Hello.vue :

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

现在的目录结构是把页面的模版和组件模版放在同一个目录里面的,为了方便管理,我们可以把重用的组件单独放一个component目录里。

3. 后端代码

SPA应用主要是以接口的形式请求的,后端在接收到页面请求时不需要做过多的处理,代码也很简单,routes/web.php修改如下,删除了原来的/路由:

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

创建一个SpaController

php artisan make:controller SpaController

SpaConrtollerindex方法中我们直接返回需要渲染的模版:

<?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>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Laravel Vue SPA Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div id="app">
        <app></app>
    </div>
</body>

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

基本完成,现在来看看效果,因为laravel已经集成了一些前端开发的脚手架,可以说非常友好了,所以在写好前端的组件后,运行如下命令就能打包前端代码了:

npm run watch

现在我们简单的SPA静态页面已经搭建完成了,可以看到当切换URL时,整个页面的主题和菜单并没有换,更新的只是下面的内容,接下来我们是这调用后端的API。

4. 编写一个测试API

由于是测试,后端代码很简单,就几行,routes/api.php修改如下:

Route::get('/users', function () {
    return factory('App\User', 10)->make();
});

上面就是我们编写的一个简单接口,我么直接在路由中使用了Laravel现成的User模型mock10条数据,注意,由于Laravel中webapi是单独分开的,所以在访问api接口时需要加上/api前缀,分析App\Providers\RouteServiceProvider文件就能看出来:

/**
 * Define the "api" routes for the application.
 *
 * These routes are typically stateless.
 *
 * @return void
 */
protected function mapApiRoutes()
{
    Route::prefix('api')
         ->middleware('api')
         ->namespace($this->namespace)
         ->group(base_path('routes/api.php'));
}

我们试着访问下接口:


接口写好,现在我们需要在前端用axios调用我们的接口。

5. axios上手

现在回到我们Vue Router的配置中,添加一个组件并定义一个新的路由:

…
import UsersIndex from './views/UsersIndex'
…

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

实现UsersIndex组件:

<template>
    <div class="users">
        <div v-if="loading" class="loading">Loading</div>
        <div v-if="error" class="error">
            <p>{{ error }}</p>

            <p><button @click.prevent="fetchData">Try again</button></p>
        </div>

        <ul v-if="users">
            <li v-for="{name, email} in users" @key="name">
                <strong>Name: </strong>{{ name }},
                <strong>Email: </strong>{{ email }}
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            loading: false,
            users: null,
            error: null,
        };
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.error = this.users = null;
            this.loading = true;
            axios.get('/api/users')
                .then(response => {
                    this.loading = false;
                    this.users = response.data;
                })
                .catch(error => {
                    this.loading = false;
                    this.error = error.response.data.message || error.message;
                })
        }
    }
}
</script>

这个Vue的组件很简单,说说fetchData这个方法,使用了axiosget我们写好的后端接口,将得到的数据用Vue在前端渲染出来,看看效果:

我们成功获取到了后端数据,并在前端渲染出来。到此,我们现在已经了解了开发SPA应用的简单流程。

6. 最后再来个总结吧

使用SPA有什么好处呢?第一,不同页面之前切换时不会有明显的变化,至少整个页面框架不会切换,前端再配合一个loading动画,会更加友好,而全部用服务端渲染,页面在切换时会有一段时间的页面空白现象,在网速不理想的情况下空白的时间会更长。第二,职责更加清晰,SPA应用完全是前后端分离,后端只需要认真编写接口,前端只要获取并渲染,开发人员不需要同时看后端代码和前端代码,职责清晰的同时保证了码代码的效率,第三,SPA是无状态的,不需要管理session

参考 :
https://laravel-news.com/using-vue-router-laravel
https://router.vuejs.org/zh/


👏文章首发【正义的程序猿】,欢迎大家关注哦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249