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

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

页面请求Laravel的一个路由

路由返回渲染一个包含了Vue的SPA框架

在上面渲染出来的框架中使用Vue来加载不同的页面单元模块

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

laravel

vue.js

Vue-router

axios

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

说了这么多，我们开始写代码吧～

1. 安装

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

cd laravel-spa

npm install

npm install vue-router

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

2. 配置Vue Router

在Vue Router中把route和vue组件做了一个映射，在渲染时会把不同的组件渲染到标签中。

首先，我们修改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: '/', // 这是路径

component: Home // 这是使用的组件

{

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

Vue Router Demo App

Home |

Hello World |

export default {}

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

Home.vue :

This is the homepage

Hello.vue :

Hello World!

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

3. 后端代码

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

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

创建一个SpaController：

php artisan make:controller SpaController

在SpaConrtoller的index方法中我们直接返回需要渲染的模版：

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller

{

public function index()

{

return view('spa');

}

最后，编辑resources/views/spa.blade.php模版：

Laravel Vue SPA Demo

基本完成，现在来看看效果，因为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中web和api是单独分开的，所以在访问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: '/',

component: Home

{

path: '/hello',

component: Hello

{

path: '/users',

component: UsersIndex

}

});

实现UsersIndex组件：

Try again

Name: {{ name }},

Email: {{ email }}

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;

})

}

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

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

6. 最后再来个总结吧

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

vue spa php,使用Laravel 和 Vue 构建一个简单的SPA相关推荐

vue-cil+vuex 构建一个简单的记事本应用
学习vuex文档稍微了解了一下vuex,这个练习用于应用一下vuex.构建一个简单的单页笔记本应用,加深对vuex的理解. Demo:https://ccessl.github.io/test/ 实现 ...
基于PyTorch，如何构建一个简单的神经网络
本文为 PyTorch 官方教程中:如何构建神经网络.基于 PyTorch 专门构建神经网络的子模块 torch.nn 构建一个简单的神经网络. 完整教程运行 codelab→ https://ope ...
python推荐系统-利用python构建一个简单的推荐系统
摘要: 快利用python构建一个属于你自己的推荐系统吧,手把手教学,够简单够酷炫. 本文将利用python构建一个简单的推荐系统,在此之前读者需要对pandas和numpy等数据分析包有所了解. 什 ...
github密码格式_如何使用GitHub构建一个简单的网页（不用框架版本）
1.申请GitHub账号进入GitHub官网,点击右上角的Sign up进行注册, 注册很简单,只要填写好用户名,邮箱,密码就行(已注册的用户名,邮箱不能再进行注册) 下面有一个你是人类的验证(照着 ...
【编译原理】构建一个简单的解释器（Let’s Build A Simple Interpreter. Part 9.）（笔记）语法分析（未完，先搁置了！）
[编译原理]让我们来构建一个简单的解释器(Let's Build A Simple Interpreter. Part 9.) 文章目录 spi.py spi_lexer 我记得当我在大学(很久以前) ...
【编译原理】构建一个简单的解释器（Let’s Build A Simple Interpreter. Part 8.）（笔记）一元运算符正负（+，-）
[编译原理]让我们来构建一个简单的解释器(Let's Build A Simple Interpreter. Part 8.) 文章目录 C语言代码(作者没提供完整的python代码,关键的改动提供了 ...
【编译原理】构建一个简单的解释器（Let’s Build A Simple Interpreter. Part 7.）（笔记）解释器 interpreter 解析器 parser 抽象语法树AST
[编译原理]让我们来构建一个简单的解释器(Let's Build A Simple Interpreter. Part 7.) 文章目录 python代码插--后序遍历 C语言代码(有错误) C语言 ...
【编译原理】让我们来构建一个简单的解释器（Let’s Build A Simple Interpreter. Part 6.）（python/c/c++版）（笔记）
[编译原理]让我们来构建一个简单的解释器(Let's Build A Simple Interpreter. Part 6.) 文章目录 python代码 C语言代码总结今天是这一天:) &quo ...
【编译原理】让我们来构建一个简单的解释器（Let’s Build A Simple Interpreter. Part 5.）（python/c/c++版）（笔记）Lexer词法分析程序
[编译原理]让我们来构建一个简单的解释器(Let's Build A Simple Interpreter. Part 5.) 文章目录 python代码 C语言代码总结你如何处理像理解如何创建解 ...

vue spa php,使用Laravel 和 Vue 构建一个简单的SPA

Vue Router Demo App

vue spa php,使用Laravel 和 Vue 构建一个简单的SPA相关推荐

最新文章

热门文章