web开发概述（10）：初步实现动态-模板引擎

使用模板引擎：art-template

安装 npm install art-template --save

myserver.js

/*
    动态网站开发示例 
    mini版成绩查询功能
    使用模板引擎
 */

const http = require('http');
const path = require('path');
const fs = require('fs');
const querystring = require('querystring');
const scoreData = require('./scores.json');
var template = require('art-template');

http.createServer((req,res) =>{
    //查询成绩入口  /query
    if(req.url.startsWith('/query') && req.method === 'GET'){
        fs.readFile(path.join(__dirname,'view','index.tpl'),'utf-8',(err,content)=>{
            if(err){
                res.writeHead(500,{
                    'Content-type':'text/plan;charset=utf8'
                });
                res.end('服务器错误，请与管理员联系！' + err);
            }

            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];
            var content = template(__dirname + '/view/result.art', result);
            res.end(content);
        });

    }

}).listen(3000,()=>{
    console.log("服务启动…… ฅʕ•̫͡•ʔฅ");
})

/view/index.tpl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询成绩</title>
</head>
<body>
    <form action="http://localhost:3000/score" method="post">
        请输入卡号：<input type="text" name="code">
        <input type="submit" value="查询">
    </form>
</body>
</html>

/view/result.art

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

scores.json

{
  "no123": {
    "chinese": "100",
    "math": "140",
    "english": "140",
    "summary": "220"
  },
  "no124": {
    "chinese": "140",
    "math": "143",
    "english": "142",
    "summary": "250"
  },
  "no125": {
    "chinese": "110",
    "math": "113",
    "english": "112",
    "summary": "210"
  }
}
posted @ 2020-10-14 15:40  mrtransition  阅读(126)  评论(0)    收藏  举报