争逐

主题

【Node.js】 封装静态 WEB 服务、 路由、EJS 模板引擎、 GET 、 POST

NodeJs 封装静态 WEB 服务、 路由、EJS 模板引擎、 GET 、 POST ​

目录 ​

  • 1 、Nodejs 静态文件托管
  • 2 、路由
  • 3 、初识 EJS 模块引擎
  • 4 、Get、Post

1 、 Nodejs 封装静态 web 服务 ​

server.js ​

JavaScript
const http = require('http'); //引入http模块
const url = require('url'); //引入path模块
const routes = require('./module/routes')
const port = 3000
const host = "localhost"
http.createServer((req, res) => {
  //一句话创建web服务
  routes.static(req, res, 'wwwroot')
  //创建路由
  let pathname = url.parse(req.url).pathname;
  if (pathname == '/login') {
    res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('执行登录')
  } else if (pathname == '/register') {
    res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('执行注册')
  } else if (pathname == '/admin') {
    res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('处理后端业务逻辑')
  } else {
    res.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('页面不存在')
  }

}).listen(port);

console.log(`Server running at http://${host}:${port}`);

./module/routes.js ​

JavaScript
/**
 * 封装静态 WEB 服务
 */
const fs = require('fs')
const path = require('path'); //引入path模块
const url = require('url'); //引入path模块
let charset = ';charset="utf-8"'

/**
 * 私有方法(不需要暴露)
 */
function getFileMime(extname) {

  let data = fs.readFileSync('./data/mime.json');//同步读取数据
  let mineObj = JSON.parse(data.toString())
  return mineObj[extname] + charset
}

exports.static = function (req, res, staticPath) {
  //1.获取地址
  let pathname = url.parse(req.url).pathname;
  pathname = pathname == '/' ? '/index.html' : pathname
  let extname = path.extname(pathname);  // path.extname();//获取后缀名
  //2.通过fs模块读取文件
  if (pathname != "/favicon.ico") {//对请求地址进行过滤
    try {
      let data = fs.readFileSync('./' + staticPath + pathname)
      if (data) {
        let mime = getFileMime(extname);
        res.writeHead(200, { 'Content-Type': mime });
        res.end(data);
      };
    } catch (error) {
      // console.log(error);
    };
  };
};

2 、 路由 ​

官方解释： 路由（Routing）是由一个 URI（或者叫路径）和一个特定的 HTTP 方法（GET、POST 等）组成 的，涉及到应用如何响应客户端对某个网站节点的访问。

通俗的说： 路由指的就是针对不同请求的 URL，处理不同的业务逻辑。

3 、 初识 EJS 模块引擎 ​

我们学的 EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 Html 页面上面。它 是一个第三方模块，需要通过 npm 安装 https://www.npmjs.com/package/ejs

安装 ​

bash
npm install ejs –-save / cnpm install ejs --save

Nodejs 中使用：

JavaScript
ejs.renderFile(filename, data, options, function(err, str){
// str => Rendered HTML string
});

EJS 常用标签 ​

  • <%%>流程控制标签

  • <%=%>输出标签（原文输出 HTML 标签）

  • <%-%>输出标签（HTML 会被浏览器解析）

html
<a href="<%= url %>"><img src="<%= imageURL %>" alt=""></a><ul>
html
<ul>
<% for(var i = 0 ; i < news.length ; i++){ %>
  <li><%= news[i] %></li>
<% } %>
</ul>

4 、 Get 、 Post ​

超文本传输协议（HTTP）的设计目的是保证客户端机器与服务器之间的通信。

在客户端和服务器之间进行请求-响应时，两种最常被用到的方法是：GET和 POST。

  • GET - 从指定的资源请求数据。（一般用于获取数据）

  • POST - 向指定的资源提交要被处理的数据。（一般用于提交数据）

获取 GET 传值 ​

JavaScript
const url = require('url');
const port = 3000
const host = "localhost"
http.createServer((req, res) => {
   // 获取请求类型
  console.log(req.method);//GET
  //获取 GET 传值  true-把String变成对象
  var urlinfo=url.parse(req.url,true);
  console.log(urlinfo.query;)
  res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
  res.end()
}).listen(port);
console.log(`Server running at http://${host}:${port}`);

获取 POST 传值 ​

JavaScript
var postData='';
//数据块接收中
req.on('data',function(postDataChunk){
postData+=postDataChunk;
});
//数据接收完毕，执行回调函数
req.on('end',function(){
try{
postData=JSON.parse(postData);
}catch(e){}
req.query=postData;
console.log(querystring.parse(postData));
});

完整代码 ​

JavaScript
/**
 * GET、POST
 */
const http = require('http'); //引入http模块
const url = require('url'); //引入path模块
const ejs = require('ejs')//引入ejs
const routes = require('./module/routes')
const port = 3000
const host = "localhost"
http.createServer((req, res) => {
  //创建静态Web服务
  routes.static(req, res, 'wwwroot')
  //路由
  let pathname = url.parse(req.url).pathname;
  //http://localhost:3000/news?page=2&id=1
  // 获取请求类型
  if (pathname == '/news') {
    //获取 GET 传值  true-把String变成对象
    let query = url.parse(req.url, true).query
    res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
    // res.end(query);//throw new ERR_INVALID_ARG_TYPE('chunk', ['string', 'Buffer'], chunk);
    res.end("get传值获取成功");
    console.log(query.page);//
    console.log(req.method);//GET
  } else if (pathname == '/login') {
    //POST 演示
    ejs.renderFile('./views/form.ejs', {}, (err, data) => {
      res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
      res.end(data);
    });
  } else if (pathname == '/doLogin') {
    console.log(req.method);//POST
    //获取POST传值
    let postData = ''
    //数据块接收中
    req.on('data', (chunk) => {
      postData += chunk
    })
    //数据接收完毕，执行回调函数
    req.on('end', (chunk) => {
      try {
        console.log(postData);
        res.end(postData)
      } catch (error) {
        // req.query = postData;
        // console.log(querystring.parse(postData));
      }
    })
  } else if (pathname == '/register') {
    res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('执行注册')
  } else if (pathname == '/admin') {
    res.writeHead(200, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('处理后端业务逻辑')
  } else {
    res.writeHead(404, { 'Content-Type': 'text/html;charset="utf-8"' });
    res.end('页面不存在')
  }

}).listen(port);

console.log(`Server running at http://${host}:${port}`);