基于 Laravel + Vue 构建一个类似 Twitter 的 Web 应用

1.应用场景/目的

基于 Laravel + Vue 构建练习项目.

2.学习/操作

步骤暂参见: 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 手动编译前端资源。 后续补充 ...

3.问题/补充

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 ... 后续补充 ...

4.参考

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 登录后跳转原来浏览的页面

后续补充

...