1.Docker-compose怎樣包web給後端

Docker目的
1.簡化部署流程-程式部署包
2.跨平台部置-DockerHub
3.建立乾淨測試環境-DB部署包, K8S,規模部署上千台

問題:
卡在用echo$(docker ip)查不到ip, 也連不進己運行中的container

Javascrip的call by value

var james = 1;
var bill;
bill = james;
james = 2;
console.log(bill);// call by value , 雖然James改成2, 但bill還是1 , var james = { age : 1 }; // 因為James是物件型別!所以call by reference
var bill;
bill = james;
james.age = 2;
console.log(bill.age);// call by reference, bill.age = 2

Call by value的型別
Boolean:布林
Null:空值
Undefined:未定義
Number:數字
String:字串
Symbol(於 ECMAScript 6 新定義):符號

Call by reference的型別
Object
Array
Function

Undefined和Null的差異

Undefine:
1.變數沒給初始值,就是undefined
2.若原本function需要傳入參數,但你沒傳入,則回傳值為undefined
3.使用void運動符,後面的變數不管是什麼,都回傳undefined


1.var num;
console.log(num);
2.function myfun(x){ console.log(x);}
myfun();
3.console.log(void 123);
console.log(void 'string');
console.log(void null);
console.log(void undefined);

null:
1.null是代表空值,沒東西
2.若DOM回傳元素不存在,回傳null

1.var value = null;
console.log(“value = “ + value);
2.console.log( document.querySelect('h1'));

NaN: Not a Number
發生在把非數字傳到數字型別時。

null:這地方會有一個值,但這個值目前還沒準備好的意思,所以先填入 null
undefined:這地方沒有這個東西,所以你無法使用

NaN:要轉型成數字時傳入參數非數字的時候

Ref
1.https://medium.com/itsems-frontend/javascript-pass-by-value-reference-sharing-5d6095ae030b

2.
https://snh90100.medium.com/javascript%E4%B8%ADundefined%E5%92%8Cnull%E7%9A%84%E5%B7%AE%E5%88%A5-1f48e9be5e02

3.
https://sweeteason.pixnet.net/blog/post/43007183-javascript-%E5%9F%BA%E7%A4%8E%E6%89%93%E5%BA%95%E7%B3%BB%E5%88%97-(%E4%BA%8C)---%E9%97%9C%E6%96%BC-null%E3%80%81undefine

傳統var
作用域:function scope
也就是在function內宣告的var變數,要在function中才有用。
若是在function外用var宣告變數,則作用域為全域global。

//var的問題function myfun(){建議改用let number = 1
var number = 1;
console.log(number); //ok
}
console.log(number); // error, number is not defined,

//var汙染全域變數, 建議改用let index = 0
for(var index = 0 ; index < 10 ; index++){
console.log(index);
}
console.log(index); //居然會出現10

var 可以重複宣告,不會報錯。

var james =1 ;
var james =2;
console.log(james);

let:
1.不會產生全域變數,也禁止在同一層Block重複宣告let變數。

let james =1;
let James =2;
console.log(james); //Uncaught SyntaxError: Identifier 'james' has already been declared
var james =1;
let James =2;
console.log(james); //Uncaught SyntaxError: Identifier 'james' has already been declared

但如果var 和let 在不同層,就不會出錯。

var james = 1;
for ( let james = 10 ; james <=11; james++){
console.log(“james = “ + james);
}
console.log(“james Out of function = “ + james);

Const:
一旦宣告變數後,就不可改動。

const james =1 ;
james =2; // error. Assignment to constant variable.
console.log(james);

Ref
1. https://www.youtube.com/watch?v=Y50_RSWpWkA&t=258s
在2 hours: 23mins 開始

2.https://realdennis.medium.com/%E9%96%92%E8%81%8A-var%E8%88%87let%E7%9A%84%E6%87%B6%E4%BA%BA%E5%8C%85-javascript-b5a3f40ee28d

前端網頁登入的驗證機制目前有三類
1.Cookie
2.Session
3. JWT(Json web token)

Cookie
1.以key-value的方式儲在瀏覽器
2.屬於無狀態協議,每個請求都是獨立的,無法分辨這次的請求和上次請求是否同一人
3.存在client端,可能會被竄改
4.不可誇域

Session:紀錄Server和Cli …

gulp-jade

// type package name with npm installnpm install gulp-jade —-savenpm install gulp@3.9.1 —-save

- HTML 樣板語言

https://www.npmjs.com/package/gulp-jade

gulp-sass

- 強大的 CSS 預處理器

https://www.npmjs.com/package/gulp-sass

gulp-plumber

- 讓 Gulp 在運行的過程中遇錯不會中斷

https://www.npmjs.com/package/gulp-plumber

gulp-postcss

- 強大的 CSS 後處理器

https://www.npmjs.com/package/gulp-postcss

autoprefixer

- 自動為你的 CSS 補上前綴詞

https://www.npmjs.com/package/autoprefixer

gulp-load-plugins

- 簡化 gulp 載入流程

https://www.npmjs.com/package/gulp-load-plugins

install:

  1. node.js
  2. npm
// cd to your project sudo npm install gulp -g
npm init //create package json
npm install gulp --save // save gulp in package json

create source folder and index.html
create gulpfile.js in root folder

// create in gulpfile.jsvar gulp = require('gulp');
gulp.task( 'copyHtml' , function(){
return gulp.src('./source/**/*.html').pipe(gulp.dest('./public/'))
})

Run gulp

//Now type in terminal
gulp copyHtml

先前用Vue開發時,有遇過用axios呼叫API時,發生 xxx has been blocked by CORS poicy: No Access-Control-Allow-Origin header is present on the requested resource.

解決方案

1.後端去改回傳的header
加上以下內容(不過有時後端不會想理你,主管又不夠力時此法無效XD)

header(‘Access-Control-Allow-Origin’, ‘*’) 
header(‘Access-Control-Allow-Methods’, ‘*’)
header(‘Access-Control-Allow-Headers’, ‘Origin, Methods, Content-Type, Authorization’)
header(‘Access-Control-Allow-Credentials’, true);

2.前端自己改
用vue-cli,建立項目,找到config/index.js檔案加上以下內容

module.exports = {
dev:{
ProxyTable: {
'/data': { // 自訂 local 端的位置
target: 'http://data.taipei/', // 遠端 URL Domain
changeOrigin: true,
pathRewrite: {
'^/data': ''
}
}
}
}

Ref:
https://blog.csdn.net/weixin_44623040/article/details/94987738
https://ithelp.ithome.com.tw/questions/10199222

https://kuro.tw/posts/2017/06/07/%E5%A6%82%E4%BD%95%E5%9C%A8-Vue-CLI-%E5%BB%BA%E7%AB%8B%E7%9A%84%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%91%BC%E5%8F%AB%E8%B7%A8%E5%9F%9F%E9%81%A0%E7%AB%AF-RESTful-APIs/

Jameskrauser Lee

For the last few years. i was involved mostly in the development of Automatic Fare collection system for the Chennai Metro. Familiar with C++ and iOS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store