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

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

JellyBool

前端代码就是 webpack 打包的js 吧,可以直接 build ,放到public 目录下

codedone

好的,然后,用户进行http请求的话,是根据前端的路由去做转向?

JellyBool

如果前后端分离的话,就是前端路由接管就可以

codedone

好的,非常感谢jelly大大

leec

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

JellyBool

base_api_url ? 没理解错的话,你可以设置 axios 的 baseUrl 的,只要你的 api 路由都是一致的话,就可以。

Vue前端项目 和 后端laravel api项目,分成两个不同文件夹放

这个倒是没什么要求吧,看你怎么放都可以。如果是在一个 laravel 项目里,你可以使用laravel 自带的 webpack ,也可以自己打包,build 之后,放到 public 目录

-SHERLOCK勋

可以放到webpack的env里面呀

sonics34

可以不用隐藏表单的方法获取到文章id吗

JellyBool

恩,可以的啊,直接作为路由参数就可以的。

话说怎么在这里问这个问题

liudong0763
//正确写法:
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
                })
            }
JellyBool

你具体看看你具体返回的是什么?

a119347

第一个是直接把todocompleted取反,第二个是获取response的值,要加Json.parse()

etoupcom

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

JellyBool

你看看 chrome devtool 报什么错误

etoupcom

没有任何报错,添加新数据不刷新点击completed后没有反应,但是再点上面一条的completed两条会一起改变。刷新页面就没有这个问题。

JellyBool

有可能是你添加数据的时候没有设置 completed 这个属性吧,你就打开 chrome devtool 看看整个流程

liudong0763
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按钮的时候,一般点前几次都没什么问题,但是点多几次就会在控制台报出这样的错误提示,不明白

JellyBool
Uncaught (in promise) Error: Network Error(…)

网问题?

sfabric2016

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

JellyBool

恩,我应该今天就会更新

zovlqa

Vue.js 20 后面的课程有什么计划呢(课程表),可以列出来么?

JellyBool

后面应该是录两个跟 vuex 相关的视频吧

昝浩浩就是喜欢罗大霉

我听不懂怎么办........

JellyBool

还好吧,我已经尽力说清楚了,貌似用户的评价还不错

ye0205414225

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

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

JellyBool

这个也可以的,但是接下来我打算先录制一个实战的项目先

chunyi741

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};
    },
}
JellyBool

你的 laravel 版本是多少?api 路由的定义是否是在 api.php 里面?试试这样:

->middleware('cors','api');
chunyi741

laravel版本是5.2

api 路由的定义是否是在 api.php 里面

你说的是api中间件吗,我并没有注册这个,我不知道应该怎么操作才能像你视频中说的在中间件中自动加上api/的路由前缀

JellyBool

额,你的是 5.2 的版本的话,貌似你要使用 api 这个middleware。

chunyi741

好的,下班了,回去仔细想一下,多谢Jelly

fujinshui

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.

JellyBool

这是跨域问题引起的吧。视频应该有说到

fujinshui

有用thinkphp吗 我get有值 post没值

fujinshui

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:''};
        },后台接受值为空
GOD_Nt

老师,如果前后端分离的话,像微信授权登录这种(结合overtrue/wechat)如何使用啊?

JellyBool

具体我没有实现过,你可以看看这个讨论,感觉不错

https://pvg.v2ex.com/t/287376

GOD_Nt

谢谢Jelly,这个和我理解的差不多,但是总感觉应该有更好的解决办法

墨生人

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

JellyBool

删除完成之后触发一个 modal 就可以了吧,可以看看这个

https://vuejs.org/v2/examples/modal.html

墨生人

好的,十分感谢

etoupcom

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