FLOWERS開發日誌（三）

ruanwenwu發表於2020-08-21

上兩篇文章中我們拆分了專案的模組，按域名劃分了路由，並大概規劃了即將使用的技術棧。這篇中我們稍具體的記錄一下幾個重要的基礎方面的構建過程。這只是一個起步的框架，後面會一步一步完善。

一、開發環境佈置

homestead真的非常方便，最重要的是還能跨平臺。我們只要同步Homesetead.ymal檔案就能同步彼此的開發環境。
這是我配置的sites和databases：

sites:
    - map: flower.test
      to: /home/vagrant/Code/flower/public
    - map: passport.flower.test
      to: /home/vagrant/Code/flower/public
    - map: bbs.flower.test
      to: /home/vagrant/Code/flower/public
    - map: class.flower.test
      to: /home/vagrant/Code/flower/public

databases:
    - homestead
    - flower
    - class
    - bbs
    - admin

所有子域名都指向同一個專案入口，然後使用RouterServiceProvider來劃分路由（部分程式碼）：

public function map()
    {
        //獲取訪問地址字首
        $sld_prefix = explode('.',$_SERVER['HTTP_HOST'])[0];

        switch ($sld_prefix) {
            case 'www':
                $this->mapWebRoutes();
                break;
            case 'passport':
                $this->mapPassportRoutes();
                break;
            case 'api':
                $this->mapApiRoutes();
                break;
            default:
                $this->mapWebRoutes();
                break;
        }
    }

二、前端工作流

前面已經說到了，前端工作流採用laravel-mix來做。laravel-mix基本上已經為我們準備了一切東西，我們要做的就是安裝好laravel-mix。

laravel/ui可以方便的為我們安裝bootstrap和vue等前端腳手架，我們先來裝它。
安裝laravel/ui：

composer require laravel/ui --dev

安裝bootstrap和vue腳手架：

php artisan ui bootstrap
php artisan ui vue
npm install

開發開始之後，執行：

npm run watch

就可以實時的將修改應用來前臺頁面了。

三、登入腳手架

對於個性化不高的登入、註冊系統，用laravel自帶的auth系統就夠用了。
安裝使用者認證腳手架：

php artisan ui:auth

安裝好之後，我們改寫了RouterServiceProvider（上面已經貼了核心程式碼），使路由支援子域名路由檔案分離。

四、前端模板框架搭建
網站的頭和尾基本每個頁面都公用。所以，我們這樣安置模板佈局：

FLOWERS開發日誌（三）
編寫app.blade.php，在其中引入頭和尾。之後的模板檔案都繼承app.blade.php。

現在，我們的passport子域已經可以訪問：

FLOWERS開發日誌（三）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章