隨機產生一組密碼

AC 課程教材，講解在 RESTful 中的 POST 與 GET 差異，以及產生密碼邏輯。

GET 與 POST 差異

<form> 表單元素中有 action、method。

<form action="/" method="POST">
</form>

action 表示資料傳送到哪個路由的路徑，/表示根目錄，傳到根目錄。

method 表示傳送表單使用 HTTP method，在沒有寫 method 之下，預設屬性 GET，而使用 POST 好處是傳輸了之後，在網址列的部分看不到資料，這樣可以將重要資料隱藏起來。

使用 GET 搜尋或送出表單會發現，在原本網址後面出現了 ?， ? 稱為查詢字串(queryString)，queryString 讓伺服器知道我們從哪個管道進入網站或分享資訊，使用 GET 查詢的資訊則都會出現在 ? 之後。

所以在原本的渲染設定中，要在設定一個 POST 的方法

app.post('/', (req, res) => {
  res.render('index')
})

使用了 POST 請求之後，在送出表單時會有資料傳送過來，稱為req.body，要解析這個資料，需要安裝 body-parser。

安裝 body-parser

npm install body-parser

在 express 載入

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: true }))

app.use 表示路由不管哪裡近來先經過它來處理。
bodyParser.urlencoded({ extended: true }) 是 body-parser 提供的方法，用以處理 URL-encoded 格式的請求。

產生密碼

在送出表單後，? 後面出現的 length=5&lowercase=on 等資訊，而length、lowercase是怎麼來的呢? 它是對應到 input 當中 name 屬性，當在 checkbox 有勾選時，就會呈現 on，長度就會出現需要的數字

<form>
  <input type="number" name="length" id="length" min="4" max="16"> //type是數字，最短4 最長16
  <input type="checkbox" name="lowercase" id="lowercase">
  <input type="text" neme="excludeCharacters" id="exclude-characters">
  <button type="submit">Submit</button>
</form>

邏輯

與抽獎問題類似

將分門別類需要的東西放入箱子
將不需要的東西從箱子挑出來
設定要抽幾次

function generate() {
  // 定義可以使用的所有元素

  // 放入選擇的元素

  // 移除不需要的元素

  // 產生密碼

  // 返回密碼
}

所有這裡讓元素皆為字串，讓整個 code 看起來更精簡，所以可以看成 string ，使用 string 方法 split() ，將字串變成 array，當 split() 不放入參數的時候，會將 string 直接放入 array，如果放入參數便以參數為分割

創造陣列、放入元素

const str = 'ab.cd'

// ex1
str.split() // ['ab.cd']
// ex2
str.split('') // ['a', 'b', '.', 'c', 'd']
// ex3
str.split(.) // ['ab','cd']

課程提出了一個在 ES6 所發表的發法更為簡單，使用 spread syntax

const collection = [...str] // ['a', 'b', '.', 'c', 'd']

由於有多個不同的 string 轉成 array 也是分開的，要將其合併使用 concat()，是屬於 array method 只能針對 array 使用

const arr1 = ['abc']
const arr2 = ['def']
const arr3 = arr1.concat(arr2) // ['abc','def']

合起來就是

const lowerCase = 'abcdef'
let collection = []
collection = collection.concat(lowerCase.split(''))

越多不同的元素放進去東西就會越多

移除不想要的元素

string.prototype.includes() : 檢查是否有不想要元素，會回傳 true or false。
array.prototype.filter() : 過濾不想要的元素，會保留符合條件，也就是為 ture 的 value，如果要相反資料要告訴他 return false。

箱子.includes(要剔除的元素) //比對

如果兩個有 string 比對成功會是 true ，表示有資料要處理就得使用 filter 去將 array 中的 value 剃除，true會保存資料所以也就是讓他回傳 false。

collection = collection.filter( arr => {
  return !箱子.includes(要剃除的元素) // 回傳不相符合 false 的資料，也就是要的元素。
})

如果只是要回傳 true 或 false 不做其他資料處理可以改寫成

collection = collection.filter(
  arr => !箱子.includes(要剃除的元素)
)

抽出元素符合需要的長度

先不考慮長度，思考如何隨機抽出，使用 Math.random 產生隨機數、Math.floor 無條件捨去小數點，將它放入函式。

function sample(arr) {
  let index = Math.floor( Math.random() * arr.length)
  return arr[index]
}

接著要考慮到密碼長度，可以使用 for 迴圈，以及將字串連結起來。

let password = ''
for (let i = 0; i < arr.length; i++){
  password += sample(collention)
}

保留選項

使用 handlebars 語法，在 template <input>加入判斷放在標籤尾部:

{{#if}}checked{{/if}}

記得要把在 app.js 將 req.body 需要判斷的值傳入。

處理錯誤

如果漏填在送出表單後還是會出現東西，可是卻是 undefine，是因為 collection 是為空陣列導致，用 if 判斷式解決這個問題。

if (collection === 0) '是空的'

這樣即使使用排除的元素將原本的需要元素陣列通通排除了之後，還是可以正常顯示我們需要傳達的資訊。

最後再將這份資料回傳到 app.js 讓它匯入

module.exports = function名稱