Vuejs 2.0 教程：与后端 API 进行交互

jelly,前后端分离后，要发布到生产环境是要怎么搞，直接将前端的代码，弄到laravel里面的模板中吗？

Vue前端项目 和 后端laravel api项目，分成两个不同文件夹放？
API可以弄成相对路径么？本地开发时候一个，联调测试时一个，只要前面的 base_api_url 不同。

获取到文章ii

//正确写法：
toggleComplete(todo){
                this.axios.patch('http://laravel.dev/api/todo/'+todo.id+'/completed').then(response=>{
                    console.log(response.data)
                    todo.completed = ! todo.completed
                })
            }
//可是为什么这样写就不正确呢
toggleComplete(todo){
                this.axios.patch('http://laravel.dev/api/todo/'+todo.id+'/completed').then(response=>{
                    console.log(response.data)
                    todo = response.data
                })
            }

2laravel.dev/api/todo/8/completed:1 PATCH http://laravel.dev/api/todo/8/completed 
:8080/#/:1 XMLHttpRequest cannot load http://laravel.dev/api/todo/8/completed. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 429.
createError.js?f777:15 Uncaught (in promise) Error: Network Error(…)

老师，在我点complete按钮的时候，一般点前几次都没什么问题，但是点多几次就会在控制台报出这样的错误提示，不明白

这个系列后续还会更新吗？

我听不懂怎么办…

老师讲的非常好！赞叹呐！

是否之后会有个前后端分离（结合框架）打包放上开发环境流程详细教程呢？

axios.get 可以正常获得数据，axios.post提示跨域请求

服务端路由

Route::post('api/todo/create', function (Request $request){
    $data = ['title' => $request->get('title'),'completed' => 0];
    $todo = App\Todo::create($data);
    return $todo;
})->middleware('cors');

TodoForm组件

methods: {
    addTodo(newTodo){
        this.axios.post(
        'http://localhost:8000/api/todo/create',{title: this.newTodo.title}).then(response => {
            console.log(response.data)
        })
        this.todos.push(newTodo);
        this.newTodo = {id:39,title:'',completed:false};
    },
}

XMLHttpRequest cannot load http://192.168.0.168/tp5/public/index.php/admin/Todos/create. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

addTodo(newTodo){
this.axios.post(‘http://192.168.0.168/tp5/public/index.php/admin/Todos/create’,{title:this.newTodo.title}).then(response=>{
console.log(response.data)
//this.todos.push(response.data);
})
this.newTodo={id:null,title:’’};
},后台接受值为空

老师，如果前后端分离的话，像微信授权登录这种（结合overtrue/wechat）如何使用啊？

如果我想增删改成功以后，出现一个小弹窗，vue有没有相关的插件，或者本身自带这个功能？

为什么新创建的数据点击completed无效呢

看教程但是没有后端api 如何按照流程走呢，自己模拟数据吗？

试验了好几次，我再进行get请求的时候没有什么问题，可是post请求的时候就会发生跨域的提示，不知道这个是怎么回事啊？我看了下请求method是OPTIONS的。
catch error提示 vue Error: Network Error

群主： axios拦截器有讲没？
我想实现以下功能
统一处理所有http请求和响应
配置 http response inteceptor,当后端接口返回401 Unauthorzed(未授权),让用户重新登录

问题是我现在手工在浏览器中添加：
http://www.tb.com/api/order/type=0?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjUsImlzcyI6Imh0dHA6XC9cL3d3dy50Yi5jb21cL2FwaVwvbG9naW4iLCJpYXQiOjE0ODkyOTI4MDksImV4cCI6MTQ4OTI5NjQwOSwibmJmIjoxNDg5MjkyODA5LCJqdGkiOiI2OTNjYTY1MWU3MzVlZTQ4ODIxNWU2MzFkYzFjNTRjMSJ9.SV6yEcHkkALu07rSFdQx4ODm8zFrkNV7apxLYQg1MJc
请求返回结果是正常的。
但是我通过拦截器统一处理时，却总是提示：

GET http://www.tb.com/api/order/type=0 400 (Bad Request)
error : “token_invalid”

这里我估计是 token 没有添加上，但具体应该如何添加呢？

/**
 * 拦截器
 * 统一处理所有http请求和响应
 * 配置 http response inteceptor,当后端接口返回401 Unauthorzed(未授权),让用户重新登录
 */
import axios from 'axios'	// ajax 插件
import VueAxios from 'vue-axios' // vue请求ajax插件
import store from './vuex/store.js'//状态管理
import { USER_SIGNIN,USER_SIGNOUT,USER_REGISTER } from './vuex/types'// 引入状态定义 并解构
import router from './route-config.js'// 引入路由配置文件

// 全局 axios 默认值
// axios.defaults.baseURL = 'http://www.tb.com';

// 请求 拦截器
axios.interceptors.request.use(
	config => {
		console.log(Boolean(store.state.login.token))
		// 在请求之前做某事发送
		if (store.state.login.token) {// 判断是否存在token,如果存在,则每个http header都加上 token
			console.log(998112233)
		        // config.headers.Authorization = `token ${store.state.login.token}`;
			config.headers.Bearer = `token ${store.state.login.token}`;
		
		}
		console.log(config)
		return config;
	}, err => {// 发生错误
		return promise.reject(err);
	});

// 响应 拦截器
axios.interceptors.response.use(
	response => { // 对响应数据做某事
		console.log(123)
		return response;
	}, error => {
		if (error.response) {// 对响应错误做出反应
					console.log(789)
			switch (error.response.status) {
				case 401:
					// 401 清除token信息  并跳转到login
					store.commit(USER_SIGNOUT);
					router.replace({
						name: 'login',
						query: {redirect: router.currentRoute.fullPath}
					})
			}

			// 返回接口返回的错误信息
			return Promise.reject(error.response.data);
		}
			
	});

export default axios;

拦截器代码如上，还请指点！

Laravel 5.1，路由使用 put 方法跨域有问题，改成 patch 就可以了

jelly, api/todo/create 的认证是怎么实现的？

无法播放该视频，请换一个支持HTML5视频功能的浏览器
环境：Chrome58，win10

视频无法播放

感觉再学习下去就想转前端了 哈哈哈哈

老师问一个比较幼稚的问题，是不是靠这样就能做网站了呢，就是做全栈的话，还需要学什么

这个视频和第5个Vue和Laravel结合的视频会出现，“无法播放该视频，请换一个支持HTML5视频功能的浏览器”，用的是Chrome，有时会发生类似的情况，但有时也不会发生

我的vue里的patch无法请求到服务器，中间就403了

你说的未验证是csrf的问题吗？我设置了$except 'api/*'这样应该api里的请求都可以走吧？

老师 我看那个github上laravel-cors这个文档有变，我按照他的方法设置以后，在测试的时候，get的方式请求是ok的post还是会出现错误

XMLHttpRequest cannot load http://la51.me/api/tasks. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 500.
createError.js?8e8c:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js?8e8c:16)
    at XMLHttpRequest.handleError (xhr.js?21f6:87)

Route::group(['middleware'=>'api'],function(){
    Route::get('/api/tasks', function () {
        return \App\Task::all();
    });

    Route::get('/api/task/{id}', function ($id) {
        return \App\Task::find($id);
    });

    Route::post('/api/task/create', function () {
        return \App\Task::all();
    });
});

protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'api' => \Barryvdh\Cors\HandleCors::class,
    ];

Route::group(['middleware'=>'api'],function(){
    Route::get('/api/tasks', function () {
        return \App\Task::all();
    });

    Route::get('/api/task/{id}', function ($id) {
        return \App\Task::find($id);
    });

    Route::post('/api/task/create', function () {
        
    });
});

我用的是5.1这么写的

老师，我也按照你上面PHP的方法 写了路由配置 我不可以访问 IP/todos/create 的这个页面呢？是不是我忘记配置了什么？

这里是代码：

Route::post(’/todos/create’,function (Request $request){

 $data = ['title' => $request->get('title'),'completed'=>0];

 $todos = App\Models\Todo::create($data);

 return $todos;

})->middleware(‘cors’);

laravel 报错： MethodNotAllowedHttpException

完全前后交互不存在 俺先前说的bug了 也不知道咋回事 不过撸完了还挺有成就感

看完感觉我要是只写laravel后台的API 还不够酷！！ 还得会Vuejs ！！

create这个按照之前视频配置：
->middleware(‘api’,‘cors’);
以上这种只配置了app.php中的aliases的使用方式GET是没有问题，但是POST是会出现跨域问题的。

解决方法:在./app/Http/Kernel.php中的protected $middleware 中增加：
\Barryvdh\Cors\HandleCors::class,

就可以解决POST跨域问题了。

cors not works in laravel5.4!!!

axios的get,delete请求的uri地址里的变量也可以用反引号引起来

个人建议：
laravel路由的uri里面没必要再加‘delete’，‘completed’等，因为restful形式的patch，delete请求已经很易读了。

我的代码是这样的，但是每次我去点击路由跳转的时候总是要触发到

<ul>
            <li :class="getClass(item)" v-for="(item,index) in list" @click="completeToggle(item)">{item.body}
                <button @click.stop="del(index)">del</button>
                <button><router-link :to="{name:'TodoDetail',params:{id:item.id}">detail</router-link></button>
            </li>
        </ul>

@Jelly 你这里有个问题 当新建一个todo时 马上去点它的completed时 就出错了 刷新页面又可以 正常切换了todo的完成状态

jelly老师 这个todos的源码有吗？您的GitHub上好像找不到