NodeJs 创建web服务端

1.创建一个简单静态web服务器

• 用http模块+URI模块+Path模块+Fs模块创建一个静态web服务器。

• ./module/common

  const fs =require('fs')
  exports.getFileMime = function (extname) {
      return new Promise((resolve, reject)=> {
          // 读取文件 mime里面有常用类型
          // 这里也可以通过readFileSync 同步方法读取
          fs.readFile('./mime.json', (err, data)=>{
              if (err) {
                  reject(err)
                  return
              }
              // json解析对象
              let mime = JSON.parse(data.toString())
              // 返回content-type类型
              resolve(mime[extname])
          })
      })
  }
  

• app.js

  const http = require('http');
  const fs = require('fs');
  // 获取后缀名
  const path = require('path');
  const common = require('./module/common');
  const url = require('url')
  
  http.createServer(function (request, response){
      // 打印 请求url
      console.log(request.url);
      // 获取地址
      let pathName = url.parse(request.url).pathname;
      pathName = pathName === '/' ? '/index.html': pathName;
      // 通过path模块获取后缀名
      let extname = path.extname(pathName)
      // 通过fs模块读取文件
      if (pathName !== 'favicon.ico') {
          fs.readFile('./static' + pathName, async (err, data)=>{
              if (err) {
                  console.log('404')
                  response.writeHead(404, {'Content-Type': 'text/html;charset="utf-8"'})
                  response.end('这个页面不存在');
              }
              let mime = await common.getFileMime(extname)
              response.writeHead(200, {'Content-Type': `${mime};charset="utf-8"`})
              response.end(data);
          })
      }
  
      // // 设置响应头
      // response.writeHead(200, {'Content-Type': 'text/plain;charset="utf-8"'});
      // // 设置响应内容
      // response.end('Hello world');
  }).listen(8081);
  console.log('server run at http://127.0.0.1:8081/')
  

2.NodeJs封装静态web服务，路由，EJS模版引擎，GET，POST

• 路由

• 是由一个URI和一个特定HTTP方法（GET，POST）组成，涉及到应用如何响应客户端对某个网站节点的访问。

• EJS引擎

  • 可以把我们数据库和文件读取的数据显示到HTML页面上，它是一个第三方模块，需要通过npm安装。

  • 安装

    npm install ejs --save
    

  • nodejs使用

    ejs.renderFile(filename, data, options, function(err, str){
      
    })
    

3.模块化方式封装

• 目录结构

  project
  	|__module
  	|		|__router.js
    |__node_modules
    |__static
    | 	  |__img
    |     |   |__timg.jpeg
    |     |__js
    |     |   |___htmljs.js
    |     |__index.html
    |     |__login.html
    |__views
    |   |__form.ejs
    |   |__login.ejs
    |__app.js
    |__mime.json
  

• app.js

  const http = require('http');
  const routes = require('./module/router')
  const url = require('url');
  
  
  http.createServer(function (request, response){
      // 创建静态web服务
      routes.static(request,response,'static')
      // 路由
      let pathname = url.parse(request.url).pathname.replace("/","");
      // 获取请求方式
      console.log(pathname)
      try {
          routes[pathname](request,response);
      } catch (error) {
          routes['error'](request,response);
      }
  
  }).listen(8081);
  console.log('server run at http://127.0.0.1:8081/')
  

• Route.js

  const fs = require('fs');
  // 获取后缀名
  const path = require('path');
  const url = require('url');
  const ejs = require('ejs');
  
  // 同步方法
  let getFileNameSync = function (extname) {
      var data = fs.readFileSync('./mime.json');
      let mimeObj = JSON.parse(data.toString());
      return mimeObj[extname]
  }
  
  
  
  let app = {
      static: (request,response, staticpath)=> {
          // 获取地址
          let pathName = url.parse(request.url).pathname;
          pathName = pathName === '/' ? '/index.html': pathName;
          // 通过path模块获取后缀名
          let extname = path.extname(pathName)
          // 通过fs模块读取文件
          if (pathName !== 'favicon.ico') {
              try {
                  let data = fs.readFileSync('./' + staticpath + pathName);
                  if (data) {
                      let mime = getFileNameSync(extname);
                      response.writeHead(200, {'Content-Type': `${mime};charset="utf-8"`})
                      response.end(data)
                  }
              } catch (error) {
              }
          }
      },
      login: (req,res)=> {
          ejs.renderFile('./views/form.ejs',{},(err,data)=>{
              res.writeHead(200, {'Content-Type': 'text/html;charset="utf-8"'});
              res.end(data)
          })
      },
      news: (req,res)=> {
          res.end('news')
      },
      doLogin:(req,res)=> {
          // post请求获取数据
          var postData = '';
          req.on('data',(chunk => {
              // 将post请求数据拼接
              postData += chunk;
          }))
          req.on('end',()=>{
              console.log(postData);
              res.end(postData)
          })
      }, error: (req, res)=> {
          res.end('error')
      }
  }
  // 对外暴漏app
  module.exports = app
  
  

4.原生NodeJs封装类似express框架

• 项目目录

  express-demo
  	|__modules
  	|    |__routers.js
  	|__node_modules
  	|__static
  	|    |__css
  	|        |__mycss.css
  	|__views
  	|    |__form.ejs
  	|__express_router.js
  	|__mime.json
  	|__package.json
  

• module/routers.js

  const path = require('path');
  const url = require('url');
  const fs = require('fs');
  
  
  // response封装
  function changeRes(response){
      response.send=(data)=>{
          response.writeHead(200, {'Content-Type': 'text/html;charset="utf-8"'})
          response.end(data)
      }
  }
  // 根据后缀名获取文件类型
  function getFileNameSync (extname) {
      var data = fs.readFileSync('./mime.json');
      let mimeObj = JSON.parse(data.toString());
      return mimeObj[extname]
  }
  // 静态web服务的方法
  function initstatic(request,response, staticpath){
      // 获取地址
      let pathName = url.parse(request.url).pathname;
      console.log(pathName)
      pathName = pathName === '/' ? '/index.html': pathName;
      // 通过path模块获取后缀名
      let extname = path.extname(pathName)
      // 通过fs模块读取文件
      try {
          let data = fs.readFileSync('./' + staticpath + pathName);
          if (data) {
              let mime = getFileNameSync(extname);
              response.writeHead(200, {'Content-Type': `${mime};charset="utf-8"`})
              response.end(data)
          }
      } catch (error) {
      }
  }
  
  
  // 内部封装
  let server = () => {
      let G={
          _get: {},
          _post: {},
          // 静态web目录
          staticPath:'static'
      };
      // // 把get与post分开
      // G._get = {};
      // G._post = {};
      let app = function (req,res) {
          console.log('调用app方法')
          // 将response的方法扩展
          changeRes(res)
          // 配置静态web服务
          initstatic(req,res,G.staticPath)
          // 获取路径
          let pathname = url.parse(req.url).pathname;
          // 获取请求方法
          let method = req.method.toLowerCase()
          // 执行方法
          if(G['_' + method][pathname]) {
              if (method === 'get'){
                  G._get[pathname](req,res);
              }else{
                  // post方法， 获取post数据，把它绑定req.body
                  let postData = '';
                  req.on('data',(chunk)=>{
                      postData += chunk;
                  })
                  req.on("end",()=>{
                      req.body = postData;
                      G._post[pathname](req,res);
                  })
              }
          } else {
              res.writeHead(404, {'Content-Type': 'text/html;charset="utf-8"'})
              res.end("页面不存在")
          }
      }
      // 配置get
      app.get=function (str,callback) {
          console.log('get方法')
          // 注册方法
          G._get[str] = callback;
      }
      // 配置post
      app.post=function (str,callback) {
          G._post[str] = callback;
      }
  
      // 配置静态web服务目录
      app.static=function (staticPath){
          G.staticPath = staticPath;
      }
      return app
  }
  
  module.exports = server();
  
  

• express_rouuter.js

  const http = require("http");
  const app = require('./module/routers')
  const ejs = require('ejs')
  // 注册web服务
  http.createServer(app).listen(8888)
  // 修改默认静态web目录
  app.static('static')
  
  console.log("Server running at http://127.0.0.1:8888/")
  
  // 配置路由
  app.get('/login',function (request,response){
      ejs.renderFile('./views/form.ejs',{},(err,data)=>{
          response.send(data)
      })
  })
  
  
  app.get('/news',function (request,response){
      response.send("hello world, news")
  })
  
  app.get('/',function (request,response){
      response.send("hello world, 首页")
  })
  
  app.post('/login',function (request,response){
      // 获取表单数据
      response.send(request.body)
  })
  
  

• form.ejs

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>post login</title>
      <link rel="stylesheet" href="/css/mycss.css">
  </head>
  <body>
  <h2>登陆页面</h2>
  <div>
      <form action="/login" method="post">
          用户名:<input type="text" name="username">
          密码:<input type="password" name="password">
          <br>
          <input type="submit" value="提交">
      </form>
  </div>
  </body>
  </html>