步骤暂参见: https://xueyuanjun.com/post/9488 

github: https://github.com/ningxiaofa/laratwitter

后续整理, 发出文档.

TBD

过程截图记录:

.env  //很平常的配置

npm run watch  启动热编译

保存数据,更新UI

使用用户名字显示个人主页

关注功能[显示链接]

'开始关注'实现

'取消关注'实现

获取用户自身与所关注用户的所有的tweet

至此，一个基于 Laravel + Vue 实现的小型 Twitter 网站已经开发完成，你可以对其进行添砖加瓦，将其变成一个真正可用的在线产品.

Tips：

如果按照此教程在实践过程中，发现前端组件调整后不生效，可以尝试在每次更改后运行 npm run dev 手动编译前端资源。

后续补充

...

1. npm run watch 热编译未生效

原因： TBD  肯能是鼠标在cmd中点击,到时进程别中止, 应该重新启动, 在cmd点击,回车, 或者ctrl+终止, npm run watch 重新启动[然后不要再管它].

处理办法： 见上面.

后发现, 热编译有生效, 从文件修改日期可知

但是页面上并不能自动更新, 需要手动刷新, 应该如何解决  //应该是浏览器缓存的问题, 如何解决缓存的问题. 

TBD

2. 使用axios发送post请求, 后端控制器中接收不到请求?

原因: TBD

解决办法: 排查原因,步骤如下: 

先检测前端是否能正常发送post请求. 先用断点输出方式定位.

后定位后端路由,在执行的路由中断电调试, 确认是否能接收到请求.

主要查看url是否正确, 以及请求方式.
 

最后发现原因是: 后端路由web.php中加上/即可  //待确定, 加不加/的区别  TBD

Route::post('tweet/save', 'PostController@store');

重新输入信息, 点击'发送', 截图如下:

3. 当定义事件时后, 点击发送/tweet时, 期望能更新视图, 但出现报错

TypeError: Event.$emit is not a function

原因:  Event未定义. 

先创建event.js 后引入js [import Event from '../event.js';] 文件方式为生效, 原因TBD 

在resources/assets/js/components/FormComponent.vue中引入,方式不work //而且是否推荐, TBD

解决办法:

在app.js [resources/assets/js/app.js] 中加入如下代码: 

window.Event = new Vue();如下:

并且将引入event.js的代码注释或删除

再次推送消息, 界面更新.

4. IDE中显示的问题, UI没有更新, 是浏览器缓存的问题[请强制刷新, 这个问题稍后解决]

5. 补充

Laravel5.8以后 迁移表的约束必须是相同的数据类型，主键默认是bigInt类型，所以约束的外键也必须是bigInt类型

public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->bigInteger('user_id')->unsigned();
            $table->string('body', 140);
            $table->timestamps();
            $table->foreign('user_id')->references('id')->on('users');
     
         });

    }

6. 查看其他用户主页, 出现报错 'SQLSTATE[23000]: Integrity constraint violation: 1052 Column 'id' in where clause is ambiguous...'

原因可知: sql语句的问题, id未指明是属于哪个表.

7. 未登录, 访问 http://laratwitter.test/users/学院君, 出现报错.

原因: 因为调用User模型中的isNot()方法导致出错, 未登录时, $auth()->user()->isNot($user) 红色部分返回值是null, 调用isNot()方法会报错.

解决办法: 

方式一: 添加中间件(auth)进行登录认证过滤, 未登录就直接跳转到登录界面. 

路由中使用中间件, 见下方截图.

方式二: 添加判断, 分为两种情况:登录与未登录, 主要是处理未登录情况.

若未登录, 则显示'关注'. 若要关注, 需要登录,然后跳转到其他用户主页页面.

具体[重新跳转回其他用户个人页面]做法: TBD

补充:

Laravel中的Auth::routes为什么是这样写?

https://segmentfault.com/q/1010000012074248

简单说:

如果使用laravel自带注册认证功能, 在web.php路由文件中直接写Auth::routes; 即可

具体见下面两个文件:

routes/web.php

vendor/laravel/framework/src/Illuminate/Routing/Router.php

Over

...

后续补充

...

https://xueyuanjun.com/post/9488  //基于 Laravel + Vue 构建一个类似 Twitter 的 Web 应用

https://forum.vuejs.org/t/event-emit-is-not-a-function-when-trying-to-emit-within-a-component/6223  //解决报错

https://blog.csdn.net/qq_23000373/article/details/81121533  //laravel 关联关系

https://segmentfault.com/q/1010000012074248  //Laravel中的Auth::routes为什么是这样写?

https://www.cnblogs.com/M-D-Luffy/p/6899382.html  //laravel 登录后跳转原来浏览的页面