結合Vue.js從無到有架設一個網站

這是用laravel5.4(Back-end)以及Vue2.0(Front-end)做成的專案，為什麼選這兩個配搭？網路上有很多人寫的評論可以自行去google

需求：

PHP 7.2.9(cli)

Composer 1.7.2

Server 10.1.35-MariaDB

Laravel 5.4

Create新laravel專案

找到想安裝專案的資料夾，Ctrl+Shift+右鍵 -> 在此處開起命令視窗 ( 就是開起命令提示字元CMD )，輸入以下字串：

composer create-project --prefer-dist laravel/laravel 專案名稱 "5.4.0"

安裝專案會用到的Plugin(laravel方面的)

1. PHP-JWT

我們會需要帳號密碼登入，所以會用到jwt來增加重要資料的保密性

composer require firebase/php-jwt

清除默認安裝配置(laravel方面的)

移除app/Http/Controllers/Auth整個資料夾，我們會用jwt來做用戶認證功能

移除resources/views/welcome.blade.php文件，這個是默認的歡迎頁面，我們不需要它

新增我們需要用到的資料夾(laravel方面的)

後端部分

我為了讓MVC架構更明確，我會把Model獨立初一個資料夾，Controllers底下分API跟Web資料夾，Controller不會直接去跟Model溝通，會透過Repositories，然後主要的功能我都會放在Services資料夾

新增app/Http/Controllers/Web資料夾，放置這個專案會用到的控制器

新增app/Http/Controllers/API資料夾，放置外部專案可以call的控制器

新增app/Models資料夾，放置跟資料庫各個table溝通的檔案

新增app/Repositories資料夾，每個model基本上都會有一個專屬的repository，提供給controller呼叫用

新增app/Services資料夾，主要功能會放置在這邊，也會放一個檔案裏面的function為共用的

前端部分

View方面我會習慣把相關功能放在同一個資料夾裡，但是因為前端要用Vue基本上都用透過Vue去換頁，所以這邊會縮編一些頁面，然後還會將整個專案做出一個template框架，基本上一個專案每個頁面應該只會有內容不一樣，head的內容以及footer的內容或是所要套用的js、css基本上都大同小異

新增resources/views/login資料夾，放登入相關的頁面

新增resources/views/layouts資料夾，放template、JS、CSS、Metatag的集中匯入檔案

新增resources/views/pages資料夾，放所有頁面

新增resources/views/errors資料夾，錯誤頁面

新增我們需要用到的檔案(laravel方面的)

後端部分

新增app/Http/Controllers/Web/LoginController.php，掌管登入頁傳值，判斷帳密，是否可以登入，以及登出功能、將登入的會員資料加密存到session

新增app/Http/Middleware/AuthUserData.php，每個頁面在切換的時候，都會去判斷token有沒有過期，沒有的話會更新一次token，有的話會直接將會員登出並導向登入頁清掉所有的session，判斷JWT、判斷token是否有誤都是在這邊

新增app/Services/AuthService.php，將會員資料存到Session，存在這邊當然取也是在這邊，清除也是在這邊

新增app/Services/CommonTools.php，所有後端會用到的判斷function或是紀錄function或是通用小功能都會放在這

新增app/Services/JWTController.php，JWT功能在這邊

新增config/global.php，全域變數會放在這邊

前端部分

新增resources/views/layouts/css_list.blade.php，個別把css匯入抓出一個檔案放置

新增resources/views/layouts/js_list.blade.php，個別把js匯入抓出一個檔案放置

新增resources/views/layouts/metatag_list.blade.php，把所有的metatag以及有關seo的東西都放置在此

新增resources/views/layouts/template.blade.php，主要框架

新增或修改文字到指定的檔案(laravel方面的)

app/Http/Kernel.php裡的$routeMiddleware新增'userdata' => \App\Http\Middleware\AuthUserData::class,這樣才有辦法每次跳頁的時候要去抓這個值判斷裡面的東西，有點算是一種宣告

config/app.php裡的name可以改成你現在專案的名稱、timezone改成Asia/Taipei

config/global.php裡新增，這三個是JWT會用到的變數

// 密鑰
'secret' => env('JWT_SECRET', 'XXXXXXXXX'),
// 加密演算法
'algo' => 'XXXX',
// 專案名稱
'servername' => 'XXXX',

串接資料庫

config/database.php裡設定要連接的資料庫，然後將資料庫裡面每個資料表都新增一個model到app/Models底下，每個model再新增一個repository到app/Repositories底下

安裝Vue到專案裡

因為npm 跟composer有一樣的特性，你可以直接在composer.json檔案裡面直接新增或刪除某個元件，然後執行composer update就可以直接幫妳新增或移除整個元件了，npm一樣，直接修改package.json檔案裡面，然後再執行npm install就可以囉。

以下是我package.json裡面的設定

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "eslint": "^5.3.0",
    "foundation-sites": "^6.5.0-rc.3",
    "laravel-mix": "^0.10.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-infinite-scroll": "^2.0.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "dependencies": {
    "popper.js": "^1.14.4",
    "v-tooltip": "^2.0.0-rc.33",
    "vue-clipboard2": "^0.2.1"
  }
}
//以下是安裝的外掛的官網
//popper.js => https://github.com/FezVrasta/popper.js#installation
//v-tooltip => https://github.com/Akryum/v-tooltip
//vue-clipboard2 => https://github.com/Inndy/vue-clipboard2
//Vue CLI => https://cli.vuejs.org/
//vue-router => https://router.vuejs.org/zh/
//vuex => https://vuex.vuejs.org/zh/
//vue-infinite-scroll => https://github.com/ElemeFE/vue-infinite-scroll
//foundation-sites => https://github.com/zurb/foundation-sites

清除默認安裝配置(vue方面的)

基本上我會把resources/assets/js底下除了app.js留著其他都刪掉

基本上我會把resources/assets/sass底下除了app.scss留著其他都刪掉

移除本身自帶的bootstrap

npm remove bootstrap --save-dev
npm remove bootstrap-sass --save-dev

新增我們需要用到的資料夾(vue方面的)

我習慣分門別類放置檔案，js部分我會新增api、components、mixins、modules、pages資料夾，sass我會新增abstracts、base、components、layouts、pages、themes、vendors資料夾，每個資料夾用途跟laravel雷同這邊不贅述，其實看名稱也大概知道這資料夾該放些什麼了吧

新增我們需要用到的檔案(vue方面的)

一剛開始沒有太多的檔案要放，最主要每個頁面都會有個js檔放置在resources/assets/js底下然後這個js檔會有一個.vue檔放在resources/assets/js/pages底下，js檔主要是用來import那個.vue檔

新增或修改文字到指定的檔案(vue方面的)

修改resources/assets/js/app.js成以下這樣

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('foundation-sites');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Vue from 'vue';
import router from './routes.js';
import VTooltip from 'v-tooltip';
import VueClipboard from 'vue-clipboard2'
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(VTooltip);
Vue.use(VueClipboard);
Vue.use(infiniteScroll);


new Vue({
    router
}).$mount('#app');

修改resources/assets/sass/app.scss成以下這樣

@import "node_modules/foundation-sites/assets/foundation.scss";

--------------------------------------------才到第五步---------------------------------------------------

https://laravelacademy.org/post/9504.html

Previous常用語法 Next透過CMD新增File

Last updated 5 years ago

Was this helpful?