前端文件 - HackMD

前端文件 === ## 規則參考 ### 資料夾結構(D)＆檔案(F)說明 * views(D) * 主畫面依照route規則命名資料夾，index.vue * components(D) * 依照畫面功能命名資料夾 * 先以垂直擴充為主，如有重複功能元件再以水平擴充 * lang(D) * i18n配著元件進行 * router(D) * 路由設定，url轉導、驗證定義 * style(D) * 共用style 以scss開發為主 * utils(D) * 可共用的 js function * .editorconfig(F) * 開發編輯規則 (IDE需下載擴充執行) 目前規則: 縮排統一兩格 * 開發coding style規則參照airbnbのeslint * *.vue * 以pug語法開發為主 ## 開發端相關 ### Vuex * 只允許在View內使用Vuex ### Router * 連結請使用<router-link></router-link> ```xml= <template> <div> <router-link :to="{ name: 'router-name' }"></router-link> </div> </template> ``` * router請記得取name ```javascript= [ { path: '/test/test', name: 'this-is-test-page', // 記得取名 component: () => import('@/views/test/test/index.vue'), hidden: true, }, ] ``` ### Loading 使用方法 ```javascript= /** * Loading example */ import WuwowLoadingMixin from '@/components/wuwowLoading/mixin/index.vue'; export default { mixins: [WuwowLoadingMixin], data() { return {}; }, async created() { // 取得標籤，啟動loading const tag = this.startLoading(); await new Promise((resolve, reject) => { setTimeout(() => { resolve('done 1'); }, 10 * 1000); }); // 關閉當前標籤程序，並關閉loading this.endLoading(tag); }, async mounted() { // 取得標籤，啟動loading const tag = this.startLoading(); await new Promise((resolve, reject) => { setTimeout(() => { resolve('done 1'); }, 5 * 1000); }) // 關閉當前標籤程序，並關閉loading this.endLoading(tag); } methods: { }, }; ``` ### 命名規則 #### Camel Case * Java script ```javascript= // thisIsATest資料夾 import '~/thisIsATest/index.vue'; // Upper camel case class ThisIsATest { } // Lower camel case let thisIsATest = 'this is a test.'; ``` #### Snake Case * Java script ```javascript= let i18n = { message: { tw: { // 內部的key this_is_a_test: 'this is a test', }, }, }; ``` * JSON ```json= { "message": { "tw": { "this_is_a_test": "this is a test" } } } ``` #### Kebab Case * pug ```pug= this-is-a-test-component inner-component ``` #### Const Case * Java script ```javascript= const THIS_IS_A_TEST = 'this is a test'; ``` #### 相關範例 * Java script ```javascript= // 開發coding style依照airbnb的eslint為主 // 請務必將每一行的分號寫出來 // 變數宣告都以CamelStyle做宣告 // 後端傳來的變數需要透過camelcase-keys套件切換過 // 要傳給後端的參數需透過 // 常數都以ConstStyle做宣告 import '~/thisIsATest/index.vue'; // 全域變數請用const以及全大寫以及下底線隔開來做命名 const GOOGLE_URL = 'https://google.com'; console.log(`The google url is: ${GOOGLE_URL}`); // 參考用的變數請用const宣告 const iAmEating = 'I am eating '; const apple = 'apple'; const banana = 'banana'; // 區域變數請都以小駝峰宣告，並且禁止使用var做宣告 let iAmEatintSomething = `${iAmEating}${apple}`; console.log(iAmEatSomething); // 請勿使用+來做字串相加，請使用``來做字串相加 iAmEatingSomething = `${iAmEating}${banana}`; console.log(iAnEatSomething); // 註解請參考 > https://jsdoc.app/ // @return > https://jsdoc.app/tags-returns.html // @param > https://jsdoc.app/tags-param.html /** * 檢查是否成年 * * @param {number} age 年紀 * * @returns {boolean} 是否成年 */ function adultOrNot(age = 0) { if (age > 18) { return true; } return false; } adultOrNot(10); // 陣列或者物件的最後一個元素後請加上逗號 // 一行即可宣告完畢的就可審略最後一個元素的逗號 const data = [ 1, 2, 3, 4, ]; // “建議”都使用箭頭函式，如有需要再使用function const isOdd = (num) => { return num % 2 === 0; }; const isEven = (num) => { return num % 2 !== 0; } const odd = data.filter(isOdd); const even = data.filter(isEven); ``` ### DNS |用途|開發端|測試機(工程師)|測試機(公司)|正式機| |-|-|-|-|-| |太極內|portal-dev.lst-taichi.wuwow.tw|it-lst-taichi.wuwow.tw||lst.wuwow.tw| |太極外(VUE)|portal-dev.lst-taichi-external-vue.wuwow.tw|it-lst-taichi-external-vue.wuwow.tw|company-lst-taichi.wuwow.tw|~~taichi.wuwow.tw~~ (暫時未上線)| |太極外|portal-dev.lst-taichi-external.wuwow.tw|it-lst-taichi-external.wuwow.tw||taichi.wuwow.tw| |API|portal-dev.taichi-api.wuwow.tw|it-taichi-api.wuwow.tw||api.wuwow.tw| |官網|portal-dev.wuwow-portal.wuwow.tw|it-wuwow-portal.wuwow.tw||www.wuwow.tw| |未知領域求大大填寫|portal-dev.media-source.wuwow.tw|it-media-source.wuwow.tw||未知領域求大大填寫| |Wuwow Junior||it-wuwow-junior-vue.wuwow.tw| ### 開發文件 * [太極外部權限](https://docs.google.com/spreadsheets/d/1-_GnluwuHm47zXdrt-WOX9sYyIzz68_fNPhxxMYB0mw/edit#gid=33769320) ### Http status code |狀態|原因|| |-|-|-| |500|後端try catch|Internal Server Error| |200|請求成功|OK| |202|此請求已經被接受但尚未處理|Accepted| |400|參數錯誤|Bad Request| |401|Token失效|Unauthorized| |403|不符權限|Forbidden| ### Docker * 開啟Docker ```shell= cd {自已的路徑}/211023_lioshutan/ docker-compose up -d php-worker laravel-echo-server nginx mysql phpmyadmin redis workspace php-fpm5.6 php-fpm7.0 php-fpm7.3 php-fpm8.0 php-fpm7.2 ``` * 關閉Docker ```shell= docker-compose down ``` * 進入Docker ```shell= docker-compose exec workspace bash ``` * 拉專案 ```shell= # 太極外部 lst-taichi-external.sh # 太極外部(VUE) lst-taichi-external-vue.sh # 太極內部 lst-taichi.sh # API專案 taichi-api.sh # 官網 wuwow-portal.sh # 未知領域求大大填寫 media-source.sh ``` ## 設定@lioshutan/api * Step.1 複製以下程式碼貼上終端機上，windows請使用[git bash](https://gitforwindows.org/)操作 ```bash= cat <<EOF >>~/.ssh/config Host lioshutan HostName gitlab.com User "git" IdentityFile "~/.ssh/lioshutan" EOF ssh-keygen -f lioshutan ``` * Step.2 複製以下程式碼貼上終端機上，windows請使用[git bash](https://gitforwindows.org/)操作 ```bash= cat ~/.ssh/lioshutan.pub ``` 將輸出的結果設定至gitlab的ssh key * Step.3 ```bash= npm i ``` ### 版本號規範詳細可以參考[版本號規範](https://semver.org/lang/zh-TW/) ``` 版本格式：主版號.次版號.修訂號，版號遞增規則如下： 1. 主版號：當你做了不相容的 API 修改， 2. 次版號：當你做了向下相容的功能性新增， 3. 修訂號：當你做了向下相容的問題修正。先行版號及版本編譯資訊可以加到「主版號.次版號.修訂號」的後面，作為延伸。 ``` ## 其他 ### 相關markdown套件用法 * Test Graphviz ```graphviz digraph graphname{ a -> b; b -> c; a -> c; } ``` ```graphviz digraph hierarchy { nodesep=1.0 // increases the separation between nodes node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Blue, style=dashed] //All the lines look like this Headteacher->{Deputy1 Deputy2 BusinessManager} Deputy1->{Teacher1 Teacher2} BusinessManager->ITManager {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level } ``` * Test UML ```sequence Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks! ``` * Test Flow ```flow st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1 ``` * 產生PEM ```shell= openssl rsa -in ~/.ssh/id_rsa -out tmp_file.pem ``` * 連線 ```shell= # (正式)太極內部 ssh -i your.pem ubuntu@lst.wuwow.tw # (正式)太極外部 ssh -i your.pem ubuntu@taichi.wuwow.tw # (正式)太極官網 ssh -i your.pem ubuntu@www.wuwow.tw # (正式)太極API ssh -i your.pem ubuntu@api.wuwow.tw # (測試)太極內部 ssh -i your.pem ubuntu@it-lst-taichi.wuwow.tw # (測試)太極外部 ssh -i your.pem ubuntu@it-lst-taichi-external.wuwow.tw # (正式)太極官網 ssh -i your.pem ubuntu@it-wuwow-portal.wuwow.tw # (測試)太極API ssh -i your.pem ubuntu@it-taichi-api.wuwow.tw ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.