nodejs Koa入門之URL路徑處理與參數轉碼

在上一期中，我們處理http請求一律返回相同的HTML，這很明顯不合理，如果我做個登錄總不可能一直是一個界面吧。所以我們應該對不同的URL調用不同的處理函數，然后讓他返回不同的結果。

const fs = require('fs'); // 文件模塊
const Koa = require('koa');
const router = require('koa-router')(); // 處理url與express一樣 都需要引入相關的處理模塊
const bodyParser = require('koa-bodyparser'); // 處理原始請求json字符串解析模塊
const app = new Koa(); // 實例化koa，K大寫代表引入的是koa2
app.use(bodyParser()); // 注意中間件的加載先后順序 否則當表單上傳的時候會導致獲取不到body的json數據 以及其他各種問題
app.use(router.routes()); // URL處理模塊

app.use(async (ctx, next) => { // ctx 你可以理解為客戶端 存儲着所有的信息 username path 等信息
  console.log(ctx.request.path, 'asdsad'); // 獲取瀏覽器地址信息 判斷是否路徑為/index
  if (ctx.request.path === '/index') {
    ctx.response.body = 'index page';  // 向客戶端發送數據Index page
  } else {
    await next();
  }
});

// 其實上面的一行本身不是特別必須的 但是如哦參照app.use的方法又太蠢了，所以基於這個才出來了router這個東西
// 也不過是上面app.use的語法糖而已

app.use(async (ctx, next) => {
  // 獲取客戶端的請求方式與請求地址
  console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
  await next();
});

// router.get('/', async (ctx, next) => {
//   ctx.response.body = '<h1>Inde2額2額大蘇打是的大蘇打x</h1>';
// });
// 然后我們可以引入bodyParser 來對發送的數據進行解析編碼
// 以下是一個簡單地登錄
router.get('/', async (ctx, next) => {

  // enctype 定義表單上傳發送到服務器之前應該如何對表單數據進行編碼 一共又三種 
  // application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
//   multipart/form-dat 不對字符編碼 在使用包含文件上傳控件的表單時，必須使用該值大半部分用於文件上傳。
//   ext/plain	空格轉換為 "+" 加號，但不對特殊字符編碼。

  ctx.response.body = `<h1>Index</h1>
        <form action="/signin" method="post" enctype="application/x-www-form-urlencoded"> 
            <p>Name: <input name="name" value="koa"></p>
            <p>Password: <input name="password" type="password" value="123"></p>
            <p><input type="submit" value="Submit" name="submit"></p>
        </form>`;
});

// POst請求
router.post('/signin', async (ctx, next) => {
  // ctx.request.body的數據包含一整個由koa-bodyparser轉化過來的對象 { name : koa,password: 1234}
  var
    name = ctx.request.body.name || '',
    password = ctx.request.body.password || '';
  console.log(`signin with name: ${name}, password: ${password}`);
  if (name === 'koa' && password == '1234') {
    ctx.response.body = `<h1>Welcome, ${name}!</h1>`;
  } else {
    ctx.response.body = `<h1>Login failed!</h1>
        <p><a href="/">Try again</a></p>`;
  }
});
// 用router.get('/path', async fn)處理的是get請求。
// 如果要處理post請求，可以用router.post('/path', async fn)。
app.listen(2222);

以后的后續更新都會以注釋加代碼的形式進行更新~~~...