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> ~~~