Vuejs 和 Laravel API 前后端分离

q8961152

8年前

很期待会出一个前后端分离的用户系统视频，用户登录方式是怎么处理，还有api怎么设计，公开可以访问的和只用用户验证才可以访问的，或者是需要一定验证才可以访问的接口！然后vue又怎么做~~太多不明白很想知道哈哈

524360073 回复 q8961152

8年前

是啊，登录是一大块，现在vuejs都是做前台展示的，需要登录的案例很少

liudong0763

8年前

老师，官网上说多个中间件是这样声明的：

Route::get('/', function () {
    //
})->middleware('first', 'second')

1 分享

JellyBool 回复 liudong0763

8年前

OK,Good…这是正确的用法。

leec

8年前

非常期待深入讲解！

JellyBool 回复 leec

8年前

哈哈哈，这个打算新开一个系列，写个实际一点的项目

leec 回复 JellyBool

8年前

期待期待！！！

lookfeel

8年前

为什么不是介绍vue官方配套的 vue-resource？出于什么考虑？

JellyBool 回复 lookfeel

8年前

现在是推荐使用这个 axios 了吧。记得 vuejs 作者就有发文章说明的。

lookfeel 回复 JellyBool

8年前

是吗。但感觉axios的文档好少

lookfeel 回复 JellyBool

8年前

哦，明白了，vue axios只是axios的一个封装。

524360073 回复 lookfeel

8年前

据说vue-resource作者已经停止更新了。

youl

8年前

请问教主，这种访问方式是怎么弄的：
laravel-package.dev/api/todos

JellyBool 回复 youl

8年前

什么意思？你是说这样的环境？还是路由？你是用 mac 的话，可以直接使用 laravel 的 valet 作为开发环境

只会烧个开水不也挺好的

8年前

我之前项目也曾用过这种API前后端分离开发，特点就是开发快，分工明细。我写我的前端，后台写后台api，然后大家一起编写api文档。但发现有两个问题。一个是微信授权问题，授权后跳转，后台api是无状态的，要控制前端跳转有难度。第二就是速度问题，不知道是不是我服务器问题，我们后台是java，考虑到微信要用80端口，就只用了一个tomcat跑后台api跟前端，但发现非常慢。不知道作者有没有试过，怎么解决？

JellyBool 回复只会烧个开水不也挺好的

8年前

我觉得你可以看看知加 http://zhijia.io/?#/home/best

这是典型的 Vuejs SPA，我觉得慢的话，本身的原因较多，你看知加也不算慢吧，体验还是不错的

墨生人

8年前

我安装vue-axios的时候，报了这个依赖错误UNMET PEER DEPENDENCY eslint-plugin-promise@2.0.1。
如果我按照说明升级到
npm WARN eslint-config-standard@6.2.1 requires a peer of eslint-plugin-promise@>=3.3.0 but none was installed.
这个，会对整体vue-cli产生bug吗

JellyBool 回复墨生人

8年前

说实话，不敢保证。本身 npm 其实就是一堆坑，我遇到过很多问题都是通过删除 node_modules 目录之后重装来解决问题的。

墨生人回复 JellyBool

8年前

管它呢，现在清楚坑在哪就够了，学习过程，真正上线使用时再拿出来讨论

zcdll

8年前

请问 jelly 大神，这个视频中说的 laravel-package 这个项目，是本站其它视频中讲解的一个项目吗？如果是的话，是哪个呢？

JellyBool 回复 zcdll

8年前

没记错的话是这个：https://www.laravist.com/series/awesome-laravel-packages

zcdll 回复 JellyBool

8年前

我看到这个视频了。不过我的需求应该是找一个 API 吧，所以貌似更像是这个教程 Laravel 5 开发 API 教程。
想问 Jelly 大神，不知道方不方便共享一下你在 Vue 2.0 系列教程中用到的这个 Laravel 项目，我觉得这个教程的目的应该是学 Vue2.0，但是没有这套 API 不爽。。。我不知道大家是怎么学的。。

JellyBool 回复 zcdll

8年前

你对 laravel 熟悉不？或者你是一个纯粹的前端？

zcdll 回复 JellyBool

8年前

我会基本的 PHP 和 Nodejs，API 还没写过。基于 Nodejs 写过一些 demo。

zcdll 回复 JellyBool

8年前

Nodejs 的 demo 是说，一个前端，一个后端，加一个 mysql 数据库，可以配合在本地实现基本的增删改查。

妖靥的单纯

8年前

老师，我想问问，在前后端交互时候，需要对dev-server.js进行配置什么吗？

程言方

8年前

请问大神在chrome中请求api地址后直接显示出格式化的json报文用的是什么插件？

JellyBool 回复程言方

8年前

我用的是 JSON Formatter

程言方回复 JellyBool

8年前

Thanks

JellyBool 回复程言方

8年前

哈哈哈哈，不要客气

假如_丶

8年前

根据API加载出来的数据，computed不好使 - -
没有效果，然而新添加的todos ， computed是可以的，这个怎么弄 - -

JellyBool 回复假如_丶

8年前

并不知道你的不好使是什么意思。具体的代码呢？

beaplat-61f

8年前

视频很赞，市面上vue视频里算是技术比较新的，解答了很多困惑，对laravel还算得心应手，尝试了一把5.3，效果很好

JellyBool 回复 beaplat-61f

8年前

感谢感谢，你可以去看看开发知乎的系列呗

Arun

7年前

如果是laravel-cors 0.9.*的话，需要在kernel中加别名就可以使用，不然提示不存在

pengjianwei

7年前

弱弱的问一句，楼主的梯子是哪里的？好快呀，我的npm大半天就转不过来，配了国内镜像才够快

JellyBool 回复 pengjianwei

7年前

我目前用的是云墙的，net-fits.net

Jerda

7年前

npm run dev 每次都是打开的safari，怎样才能它打开chrome，系统和浏览器都设置了默认chrome

JellyBool 回复 Jerda

7年前

纳尼，我这里没出现过这个。。。。。

这个基本就是设置的问题吧，搜一波

洋葱叨游戏

7年前

无法播放该视频，请更换一个支持HTML5视频功能的浏览器？？？
我用的是Chrome啊！

JellyBool 回复洋葱叨游戏

7年前

现在试试刷新一下

HsuChihYung

7年前

无法播放该视频，请更换一个支持HTML5视频功能的浏览器，无论是Safari还是Chrome都是同样的提示，时有发生~

flxxyz

7年前

现在使用laravel-cors基本都会报错不存在cors，就需要下面这样类似的方法添加了

protected $middlewareGroups = [
‘cors’ =>[
\Barryvdh\Cors\HandleCors::class,
]
]

1 分享

zhangbao1992

7年前

@JellyBool 我在 App.vue 中给 mounted 方法中给 this.initialTodos 赋值并没起作用。

下面这样可以给组件初始化 todo 列表。

export default {
  name: 'app',
  components: {
    Todos
  },
  data() {
    return {
      initialTodos: [
        {title: '123', completed: true},
      ],
    }
  },
  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      //this.initialTodos = response.data
    })
  }
}
</script>

但这样的话，todo 列表为空。

export default {
  name: 'app',
  components: {
    Todos
  },
  data() {
    return {
      initialTodos: [
        // {title: '123', completed: true},
      ],
    }
  },
  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.initialTodos = response.data
    })
  }
}
</script>

并且后台数据能正常拿到。这是后台 API。

Route::get('/todos', function (Request $request) {
    return [
    	[ 'title' => '吃早饭', 'completed' => false ],
        [ 'title' => '吃午饭', 'completed' => false ],
        [ 'title' => '吃晚饭', 'completed' => false ],
    ];
});

JellyBool 回复 zhangbao1992

7年前

看了一下貌似没有问题，你使用 vue-devtool 看看

7年前

我看下我没安装这个

7年前

我在 npm run dev 过程中将 Todos.vue 组件里的

export default {
  props: ['initialTodos'],
  data() {
    return {
      todos: this.initialTodos ? [].concat(this.initialTodos) : [],
      newTodo: { title: '', completed: false }
    }
  },

// 改为
export default {
  props: ['initialTodos'],
  data() {
    return {
      todos: this.initialTodos,
      newTodo: { title: '', completed: false }
    }
  },

就可以了。

但是重新 npm run dev 的时候还是看不到 todo 列表。

7年前

我这样试了一下：

App.vue：

export default {
  name: 'app',
  components: {
    Todos
  },
  data() {
    return {
      initialTodos: [
        {title: '123', completed: true},
      ],
    }
  },
  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.initialTodos = response.data
    })
  }
}

Todos.vue

export default {
  props: ['initialTodos'],
  data() {
    return {
      todos: this.initialTodos ? [].concat(this.initialTodos) : [],
      newTodo: { title: '', completed: false }
    }
  },

Todos.vue 组件显示的是 {title: '123', completed: true}。

好像 axios 请求回调里的赋值

  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.initialTodos = response.data
    })
  }

并没导致 Todos 组件的重绘。

7年前

@JellyBool 我已经修改好了。

Todos.vue 组件直接接收来自父组件的变量 todos 进行使用

export default {
  props: ['todos'],
  data() {
    return {
      newTodo: { title: '', completed: false }
    }
  },

父组件 App.vue 安排如下：

分别为子组件定义传递的变量 todayTodos 和 tomorrowTodos

export default {
  name: 'app',
  components: {
    Todos
  },
  data() {
    return {
      todayTodos: [],
      tomorrowTodos: [],
    }
  },
  mounted() {
    this.axios.get('http://homestead.app/api/todos').then((response) => {
      console.log(response.data)  
      this.todayTodos = response.data
      this.tomorrowTodos = [].concat(response.data)
    })
  }
}

传递给 Todos.vue 组件

<div class="col-md-6">
  <todos v-bind:todos="todayTodos"></todos> 
</div>
<div class="col-md-6">
  <todos v-bind:todos="tomorrowTodos"></todos> 
</div>

young2

7年前

有人遇见这个问题么？
ReflectionException in Container.php line 681:
Class Barryvdh\Cors\Middleware\HandleCors does not exist

JellyBool 回复 young2

7年前

这种我总感觉是文件没有下载完整。。。

young2 回复 JellyBool

7年前

☁ mylaravel [master] ⚡ composer require barryvdh/laravel-cors
Using version ^0.9.2 for barryvdh/laravel-cors
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Writing lock file
Generating autoload files

Illuminate\Foundation\ComposerScripts::postUpdate
php artisan optimize
Generating optimized class loader
The compiled services file has been removed.

重新安装了一遍，然后google了一下午都没找到解决方案

JellyBool 回复 young2

7年前

你的 Laravel 版本是多少，配置的时候是怎么配置的？

确认下面的配置对么：

Barryvdh\Cors\Middleware\HandleCors

或者试试这个：

\Barryvdh\Cors\Middleware\HandleCors

biggerdong

7年前

在实战知乎那个视频里面，做到api前后端分离的时候，比如点赞、评论什么的为什么没有出现跨域这种问题啊？

JellyBool 回复 biggerdong

7年前

因为本来就是在一个域里面的吧

liunanmp3

7年前

老师有没有遇到过这个问题，laravel 5.4里，前端post数据到laravel的api路由时，数据库插入数据时报500内部错误，但是后端同样的代码只是把post改成get的话就正常了，这是为什么？

liunanmp3

7年前

问题解决了，不过我现在有点云里雾中的，应该是debug时不小心写错字了，不能怎么能出现上面这么奇怪的结论…

xiaoshen

7年前

视频里面没看到定义Route::prefix(‘api’), 为什么可以访问 /api/todos/ ？ middleware应该只有过滤功能，没有路由功能吧？

xiaoshen

7年前

还有cosr这个包安装不仅仅在provider里面声明，还要在http/Kernel.php 里面$routeMiddleware 去声明cors；
JB这个视频用了laravel-dingo API的包，所以可以省略写prefix，包里面默认自带

RJustice

7年前

<template>
    <div id="userInfo">
        <p>{ user.nickname }</p>
        <p>{ user.uuid }</p>
        <p>{ user.token }</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                user: {}
            }
        },
        mounted() {
            this.axios.get('user.aplan.com/users/info', {headers: {'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vdXNlci5hcGxhbi5jb20vYXBpL2F1dGhvcml6YXRpb25zL3Rva2VuIiwiaWF0IjoxNTAyMzUzNzE4LCJleHAiOjE1MDI0NDAxMTgsIm5iZiI6MTUwMjM1MzcxOCwianRpIjoiazdDdHhKS3pBYXcwelZBWiIsInN1YiI6Ijg4ZjAwYTAxLTc4YzMtNDRiMi1iNWZmLWY2ZjUxYjEyYTEwNiIsIm5pY2tuYW1lIjoidGVzdCJ9.B8qcxt7ioZKC_2yZ0dwQKVRuzgXtwCw4ghTacqNl3go'})
                .then(response => {
                    console.log(response.data);
                    this.user = response.data.data;
                }).catch(error => {
                console.log(error)
            })
        },
    }
</script>

然后会提示

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘get’ of undefined”

这是为什么… 我已经在main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(ElementUI, VueAxios, axios);

new Vue({
    el: '#app',
    render: h => h(App)
});

也已经安装成功了

RJustice

7年前

提示错误
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘get’ of undefined”

RJustice

7年前

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"

JellyBool 回复 RJustice

7年前

感觉是 this.axios.get 的问题，Vue.use(ElementUI, VueAxios, axios); 这个有对么？或者你直接像 laravel 那样：

window.axios = require('axios');
这样就直接 axios.get 了

young2

7年前

[2017-08-14 15:21:03] local.ERROR: ReflectionException: Class Barryvdh\Cors\HandleCors does not exist in /Users/young/code/vue-laravel/vendor/laravel/framework/src/Illuminate/Container/Container.php:749
Stack trace:
#0 /Users/young/code/vue-laravel/vendor/laravel/framework/src/Illuminate/Container/Container.php(749): ReflectionClass->__construct(‘Barryvdh\Cors\H…’)
#1 /Users/young/code/vue-laravel/vendor/laravel/framework/src/Illuminate/Container/Container.php(644): Illuminate\Container\Container->build(‘Barryvdh\Cors\H…’, Array)
#2 /Users/young/code/vue-laravel/vendor/laravel/framework/src/Illuminate/Foundation/Application.php(709): Illuminate\Container\Container->make(‘Barryvdh\Cors\H…’, Array)
#3 /Users/young/code/vue-laravel/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(174): Illuminate\Foundation\Application->make(‘Barryvdh\Cors\H…’)
#4 /Users/young/code/vue-laravel/public/index.php(58): Illuminate\Foundation\Http\Kernel->terminate(Object(Illuminate\Http\Request), Object(Illuminate\Http\Response))
#5 /Users/young/code/vue-laravel/server.php(21): require_once(’/Users/young/co…’)
#6 {main}

Ericxie 回复 young2

6年前

在kernel.php 的 $routeMiddleware 里添加 ‘cors’ => \Barryvdh\Cors\HandleCors::class 可以解决问题我的版本是5.4

young2

7年前

有人遇到这个问题么

JellyBool 回复 young2

7年前

你看这个新的 readme 配置 https://github.com/barryvdh/laravel-cors

ronChenron

7年前

Class cors does not exist middleware要声明什么吗？路由定义的middleware（“api”）从何而来的呢？

JellyBool 回复 ronChenron

7年前

cors 是要下载 laravel-cors 这个package 的

7年前

我不是很清楚laravel后台额，现在目前就是用composer 下载一个blog的laravel项目的列子然后也在laravel 中下载了laravel-cors 和声明了Barryvdh\Cors\ServiceProvider::class 。视频中是在routes/api.php 中写的数据，但是我在那个里面写了完全访问不到。只有在web.php 中写了才能访问到数据的结果。而且middleware(‘cors:api’)，引用的话就报错：Class cors does not exist。不清楚是哪里有问题了呢完全卡在这里没有办法进行下一步~

JellyBool 回复 ronChenron

7年前

你是完全的前端开发者么？

你可以试试这个 https://github.com/barryvdh/laravel-cors ，照着这个配置

7年前

是的作为一个完全的前端开发者，不是很明白这些但是也想知道后台是怎么传数据给前台的~

7年前

3Q Jelly 按照下面的配置已经解决的跨域的问题一脸懵逼的解决了！^.请问下Jelly 像我这样的没有接触过PHP的应该如何去学习PHP，然后去进阶laravel呢？

JellyBool 回复 ronChenron

7年前

先看 PHP 的文档 http://php.net/
再看看这个 https://www.codecasts.com/learn/laravel

7年前

好的谢谢我先把前端VUE的看完！

7年前

还希望jelly，给指引一下是不是要去学习一下laravel 在来接着学习这里后面的视频

zhangwei

7年前

今天看了下中间件的文档 role:editor 这种冒号后的是中间件的参数然后用route:list命令看到了auth:api 那么这个api就是传入auth中间件的参数这个感觉不好理解这个api是guards么

JellyBool 回复 zhangwei

7年前

对的，就是 config/auth.php 里面的 guards 配置

不管你是laravel什么的版本看这篇文章仔细阅读应该可以完美解决你的问题

liujun

7年前

laravel5.6,vue2.5:
1,cors插件直接在app/http/kernel的api中间件组里面添加

'api' => [
        'throttle:60,1',
        'bindings',
        \Barryvdh\Cors\HandleCors::class,
    ],

这样就不用再api那边每次都写个middleware了

2，laravel返回的数据不需要写response()->json(…)，直接返回二维数组或eloquent集合，laravel会自动转成json格式
3，api路由直接写在routes/api.php里面即可，不需要再加api中间件了，默认laravel自带了

2 分享

Flourishing

6年前

Jasper

6年前

老师我想知道，vue构建好项目后如何上线部署，还有就是前端后台都是需要服务器吗？这样是不是反向代理的原理