iT邦幫忙

0

從頭開始用 Laravel 來做CRUD -14- 初始 - laravel - Hello world

https://ithelp.ithome.com.tw/upload/images/20181031/201126786Uz7z59Pnr.jpg

目前環境

  • Laravel:5.7
  • 資料庫:MariaDB

說明

  • 所謂的CRUD是指 新增(Create)、讀取(Read)、更新(Update)、刪除(Delete) 在程式動作中,基本的四個動作。
  • Laravel 是一個開源的PHP框架,它由Taylor Otwell開發,支持MVC模式。
  • Vue.js是一個用於建立使用者介面的開源JavaScript框架,也是一個建立單頁面應用的Web應用框架。

--- 本文開始 ---
終於,把一些要的套件裝完了,再來就是如何將結果顯示出來了,來吧!

1、安裝 browser-sync 套件

npm install browser-sync browser-sync-webpack-plugin --save

這個套件,可以讓你在修改文檔存檔後,瀏覽器立即重整,不必特別在 F5 ,十分方便

確認已裝上

https://ithelp.ithome.com.tw/upload/images/20181031/20112678ItdHrxpPjV.png

2、套入 browser-sync 套件

在根目錄找到 webpack.mix.js 檔案
https://ithelp.ithome.com.tw/upload/images/20181031/20112678pQmSVvK6BJ.png

3、填入程式碼

mix.browserSync({
    proxy: 'localhost:8000',
    //open: false, // 當執行時是否要開啟瀏覽器
});

https://ithelp.ithome.com.tw/upload/images/20181031/20112678pQmSVvK6BJ.png

4、開啟 cmder (要用兩個tab)

第1個 Tab 執行

php artisan serv

https://ithelp.ithome.com.tw/upload/images/20181031/20112678f0OQbIo42K.png

第2個 Tab 執行

npm run watch

https://ithelp.ithome.com.tw/upload/images/20181031/20112678hPB7OP0Nd8.png

然後就會自動開啟瀏覽器

https://ithelp.ithome.com.tw/upload/images/20181031/20112678fVZb1ueufx.png

5、把 Laravel 字改成 Hello world

找到 /resources/views/welcome.blade.php 將 Laravel 改成 Hello world

https://ithelp.ithome.com.tw/upload/images/20181031/20112678HJISoBfrQN.png

https://ithelp.ithome.com.tw/upload/images/20181031/20112678apr9EKZE2J.png

6、看結果

當你改了 Laravel 存檔後,再看 瀏覽器,你應該會發現文字已改
https://ithelp.ithome.com.tw/upload/images/20181031/20112678xaPzsBlbzX.png

7、完工

--- 相關連結 ---
上一篇:從頭開始用 Laravel 來做CRUD -13- 架設 - npm - vee-validate 套件
下一篇:從頭開始用 Laravel 來做CRUD -15- 初始 - vue.js- vue.js測試
--- 同步更新 ---
[CRUD for Laravel & Vue.js] 文章列表 - 在痞客邦
--- 更多的文章 在痞客邦 ----
痞客邦

感謝

感謝各位的觀看!
友情連結:鑽頭-瑜誠
文中如有技術不良或寫錯的部份,如您願意指出,我們也很樂意接受您的指正,但請不要惡意攻撃,我們只是為了樂趣而寫的文章。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言