7.koa基礎之From表單提交get與post數據 · koa實戰

form 表單 ``` ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <h1>post提交數據</h1> <div> <form action="/postAdd" method="post"> 用戶名：<input type="text" name="username" /> <br /> 密碼: <input type="password" name="password" /> <br /> <button type="submit">提交</button> </form> </div> <h1>get提交數據</h1> <div> <form action="/getAdd" method="get"> 用戶名：<input type="text" name="username" /> <br /> 密碼: <input type="password" name="password" /> <br /> <button type="submit">提交</button> </form> </div> </body> </html> ~~~ ``` app.js ``` ~~~ // 引入模塊 const Koa = require('koa'); const router = require('koa-router')(); /*引入是實例化路由推薦*/ const views = require('koa-views'); // 實例化 let app = new Koa(); // 應用ejs模板引擎 app.use(views('views', { map: { html: 'ejs' } })); router.get('/', async (ctx) => { await ctx.render('form'); }); // 接收post提交的數據 router.post('/postAdd', async (ctx) => { // 原生node.js 在 koa 中獲取表單提交的數據 let data = await getPostData(ctx); console.log(data); ctx.body = data; }); // 接收get提交的數據 router.get('/getAdd', async (ctx) => { let data =ctx.request.querystring; console.log(ctx.query); // 獲取的是對象 console.log(ctx.querystring); // 獲取的是一個字符串 console.log(ctx.url); // 獲取url地址 // ctx里面的 request 里面獲取 get 傳值 console.log(ctx.request.url); console.log(ctx.request.query); console.log(ctx.request.querystring); console.log(data); ctx.body = data; }); //處理post請求數據方法 getPostData = function (ctx) { // 獲取數據異步 return new Promise(function (resolve, reject) { try { let str = ''; ctx.req.on('data', function (chunk) { str += chunk; }); ctx.req.on('end', function (chunk) { resolve(str) }) } catch (err) { reject(err); } }) }; app.use(router.routes()); app.use(router.allowedMethods()); app.listen(8000); ~~~ ```