HTTP -- 簡單的案例 · 前端知識 -- 學習整理

>[success] # 成績查詢 ~~~ 1.后臺模板，利用的時前臺讀取數據，將前臺指定的關鍵標記用replace進行替換。 ~~~ >[danger] ##### 案例 ~~~ /* 動態網站開發成績查詢功能 */ const http = require('http'); const path = require('path'); const fs = require('fs'); const querystring = require('querystring'); const scoreData = require('./scores.json'); http.createServer((req,res)=>{ // 路由（請求路徑+請求方式） // 查詢成績的入口地址 /query if(req.url.startsWith('/query') && req.method == 'GET'){ fs.readFile(path.join(__dirname,'view','index.tpl'),'utf8',(err,content)=>{ if(err){ res.writeHead(500,{ 'Content-Type':'text/plain; charset=utf8' }); res.end('服務器錯誤，請與管理員聯系'); } res.end(content); }); }else if(req.url.startsWith('/score') && req.method == 'POST'){ // 獲取成績的結果 /score let pdata = ''; req.on('data',(chunk)=>{ pdata += chunk; }); req.on('end',()=>{ let obj = querystring.parse(pdata); let result = scoreData[obj.code]; fs.readFile(path.join(__dirname,'view','result.tpl'),'utf8',(err,content)=>{ if(err){ res.writeHead(500,{ 'Content-Type':'text/plain; charset=utf8' }); res.end('服務器錯誤，請與管理員聯系'); } // 返回內容之前要進行數據渲染 content = content.replace('$$chinese$$',result.chinese); content = content.replace('$$math$$',result.math); content = content.replace('$$english$$',result.english); content = content.replace('$$summary$$',result.summary); res.end(content); }); }); } }).listen(3000,()=>{ console.log('running....'); }); ~~~ * 渲染的html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>成績結果</title> </head> <body> <div> <ul> <li>語文：$$chinese$$</li> <li>數學：$$math$$</li> <li>外語：$$english$$</li> <li>綜合：$$summary$$</li> </ul> </div> </body> </html> ~~~