基於 Laravel + Vue 構建一個類似 Twitter 的 Web 應用

原創

ning先森

2020-02-20 22:35

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...'