git remote - 遠端數據庫

這小節要教導如何推送其他的branch上去遠端數據庫。
step1.
若今天你在分支的支線上，直接使用git push，是會失敗的。
原因是Github不確定你是要推送到哪一個遠端數據庫上，是推到正式主機上 或是 推送到github上呢?

step2.
先用git remote 查詢遠端數據庫

git remote - 查詢遠端數據庫

你輸入完這個指令之後，git Bash應該會出現origin，這個origin就代表
你用git clone 拉下來的數據庫的名稱，預設叫origin，所以，
如果你有很多數據庫的話，你用git remote就會出現很多數據庫的名稱囉。

分支簡介

首先，網站上面的正式版本，都是在master的這條線底下。
但是，當你想要修改網站上的bug或者想要新增功能的時候，一定會在修改完後，
進行很多次的重新整理，這個時候，如果你用master底下的正式版的程式碼的話，
會影響到使用者在使用網站。
所以，這時候，我們需要多開其他的分支，也就是所謂的branch。
那我們在branch底下，可以盡情的修改或新增內容，等到全部的變更都確定之後，
才將最終定稿的程式碼，丟到master中，更新網頁的正式版程式碼。

範例分支圖網址

增加使用者體驗 - 讀取中效果製作

製作局部和全部的loading效果。
step1.

全域loading效果 - Vue Loading Overlay

在這邊我們會直接安裝Vue Loading Overlay套件，來達成全域的loading效果。
輸入指令 npm install vue-loading-overlay ，來為你的編譯器安裝這個套件。

step2.
在main.js檔案中，加入overlay的套件，也要加入啟用的程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

---main.js---
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Loading from 'vue-loading-overlay';          // 引入overlay元件
import 'vue-loading-overlay/dist/vue-loading.css';  // 引入overlay元件
import 'bootstrap'
import App from './App'
import router from './router'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
Vue.component('Loading', Loading);  // 將overlay元件宣告成全域的元件

axios.defaults.withCredentials = true;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

套用 Bootstrap Dashboard 版型

step1.
首先，你可以先去Bootstrap的公版的網站 中，選取Dashboard的主題，來當作我們的Dashboard的版型。

step2.
接著，你點開Dashboard的主題，然後對這個網頁點擊右鍵查看原始碼，為的是要將這個Dashboard的html程式碼抓下來。

step3.
去你的專案檔中的assets資料夾目錄底下，新增一個_Dashboard.scss檔案，
接著，去你剛剛在察看Dashboard原始碼的頁面中，找尋dashboard.css這個關鍵字，
並把這個超連結打開，裡面的內容就是這個Dashboard所用到的css樣式。

step4.
將你剛剛開的dashboard.css裡面的內容，複製起來貼到你的_Dashboard.scss檔案中。
接著，在all.scss檔案中將這個_Dashboard.scss檔案給import進來。

step5.
去components資料夾底下，新增一個DashBoard.vue的元件檔
並將dashboard公版內的html內容加入到你的DashBoard.vue的元件檔中。
記得，在公版的script部分的內容是不需要複製的喔，因為，我們只有要用html的內容部份。

下載github到電腦中

首先，先上網下載github到你的電腦中。
git下載官網

接著，下載完並安裝完後，在你的我的開始列表中，
會出現一個Git資料夾，裡面會有一個Git Bash，點擊它。
接著，輸入git version如果有出現相對應的git版本號的話，就代表安裝成功囉。

Windows - 命令提示字元教學

移動路徑 cd

移動到上一層 cd ..

展開列表 ls

開新資料夾 mkdir

你就在目標目錄下，輸入mkdir 資料夾名稱，就可以在這個目錄底下新增這個資料夾囉。

新增檔案 touch

你就在目標目錄下，輸入touch 資料名稱，就可以在這個目錄底下新增這個檔案囉。

Git 環境設定

輸入user.name和user.email

接著輸入作者的email和名稱
你直接在git bash中輸入以下兩段，

1
2

git config --global user.eamil "xxx@gmail.com"
git config --global user.name "xxxx"

引用路徑指令

import ‘./‘ - 同一層目錄開始找

import ‘../‘ - 上一層目錄開始找

import ‘@/‘ - src目錄開始找 (這個是用在vue中的)

import ‘’ - 直接打名稱是node_modules

課程架構及流程說明

前端負責的部分有
前台和後台
前台: 使用者使用的介面
後台: 管理者使用的介面

那前端和後端之間的溝通是透過Ajax的方式，
前端丟Request，然後，後端丟Response。

登入 Vue 課程 API 就會出現無法登入的問題

我是利用課程裡面只允許六角Cookie的方式，來解決以上的問題。

註冊課程專屬練習 API

step1.
要先申請屬於自己的API路徑，避免自己的內容跟其他的學員的API內容互相干預到。
六角申請api的頁面

step2.
你要在登入的狀態，才能申請你的API路徑喔

製作登入介面

step1.
我們在components資料夾中新增一個pages資料夾，並將我們要新增的元件檔都塞在這裡。
接著，在裡面新增一個login.vue元件檔。

step2.
在router資料夾中的index.js中，引入login元件檔,並為這個login元件新增一些屬性和路徑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---index.js檔案---
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/pages/login'      // 引入login元件檔

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:/login,
      name: 'Login',
      component: Login
    }
  ]
})

attr() - 動態增加 HTML 標籤屬性

attr()語法，可以用來修改HTML標籤的參數。

你有看到，我利用attr去取得p段落的class這個HTML屬性，並切換這個屬性值內容，藉此來切換字體大小。

attr() v.s css() 用法差異

這邊你要特別注意這兩個方法使用上的差異。
attr(): 適用的是修改 HTML 的屬性，而非 CSS style 的屬性
css(): 直接修改css style的樣式

如果，你直接用attr()的方式去修改以上範例中p段落的font-size的css style屬性是改不動的喔。
必須先得到該目標算的html屬性，接著，才能對這個html屬性作修正喔，
如果，該屬性不是html屬性的話，你是無法透過attr()直接修改它，但是你硬要用attr來修的話，就必須要像上面那個例子一樣，
用不同的className切換，藉此，間接的來切換不同的css style的設定。
不然的話，直接用css()直接修改目標元素的css style樣式比較快啦。

使用 fontAwesome 動態加入連結 icon

引入fontawesome的方式

首先，官方網站，有說明要怎麼引入這個fontawesome的檔案

第二，
依據官方網站說的，你要引入fontAwesome資料夾中的css資料夾中的all.css檔案。
接著，你要將整個webfont資料夾引入你的專案中。
而且，all.css和webfont資料夾要放在同一個目錄中喔。

第三，
加入jQ語法

1
2
3
4
5
6
7
8
9
10
11

---HTML---
<a href="doc/word.doc">文件</a>
<a href="doc/word.zip">文件</a>


---JavaScript---
$(document).ready(function () {
    $("a[href$='.doc']").addClass('fab fa-adversal');
    $("a[href$='.zip']").addClass('far fa-address-card'); 
});

以上這個範例，用了jQ中，[name$="value"]的語法，
它的功用是它你的name裡面，有包含value裡面的關鍵字時，就觸發後方的事件。
所以，當a連結的href屬性中，含有.doc的關鍵字時，我們就為它的class加上fab fa-adversal，
若a連結的href屬性中，含有.zip的關鍵字時，我們就為它的class加上far fa-address-card。
以此，來達到呈現不同fontawesome的樣式，在不一樣的a連結中。