vxiao

悟已往之不谏，知来者之可追。实迷途其未远，觉今是而昨非。

0%

NodeJs搭建简易Web服务器

发表于 更新于 分类于
  1. 适用于快速与后端开发调试单个或多个HTML项目.具有webpack-dev-server的代理功能.
  2. 支持大部分mime type

以实例介绍

业务目标

实现工作流的流程图UI，与后端提供的接口做数据对接

目录结构

1
2
3
4
5
6
7
├── WorkflowManage  // 流程管理
├── WorkflowChart   // 流程图
│   ├── js
│   ├── image
│   ├── DesignerViewJs.html
│   └── DesignerViewPng.html
└── server.js

使用说明

1.运行服务

1
node server.js

2.访问开发的页面

1
http://localhost:7777/WorkflowChart/DesignerViewPng

3.设置请求走代理

url中增加dev=proxy字符串(代码中可以用其他方式控制)

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    url: '/Workflow/v2/Processes/GetProcessPathWayById?dev=proxy&flowId=' + flowId ,
    data: '',
    async: false,
    type: 'get',
    cache: false,
    success: function (result) {
        AfterLoadDesigner(result.data)
    },
    error: function (e) { }
})

完整代码

  • 通过httpProxy模块实现代理
  • 通过http模块创建本地服务
  • 通过fs模块实现静态文件展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const http = require('http')
const fs = require('fs')
const furl = require('url')
const path = require('path')
const httpProxy = require('http-proxy')
const proxy = httpProxy.createProxyServer({
  target: 'http://192.168.115.246:8081', // 代理服务器地址
  changeOrigin: true
})
const PORT = 9977 // 服务端口
const MIME = {
  'css': 'text/css',
  'gif': 'image/gif',
  'html': 'text/html',
  'ico': 'image/x-icon',
  'jpeg': 'image/jpeg',
  'jpg': 'image/jpeg',
  'js': 'text/javascript',
  'json': 'application/json',
  'pdf': 'application/pdf',
  'png': 'image/png',
  'svg': 'image/svg+xml',
  'swf': 'application/x-shockwave-flash',
  'tiff': 'image/tiff',
  'txt': 'text/plain',
  'wav': 'audio/x-wav',
  'wma': 'audio/x-ms-wma',
  'wmv': 'video/x-ms-wmv',
  'xml': 'text/xml'
}
// 解决有时socket hang up
proxy.on('error', function (err, req, res) {
  if (err) {
    res.writeHead(500, { 'Content-Type': 'text/html' })
    res.write('An error occurred in ' + req.url)
  }
  res.end()
})
// 创建服务器
http.createServer(function (request, response) {
  let url = request.url
  // 需代理的地址
  if (isNeedProxy(url)) {
    proxy.web(request, response)
    return
  }
  // eslint-disable-next-line node/no-deprecated-api
  let pathName = furl.parse(request.url).pathname
  let filePath = path.join(__dirname, pathName)
  let extName = path.extname(filePath).replace('.', '')
  let contentType = MIME[extName]
  // 未代理的请求
  if (!contentType) {
    response.writeHead(200, { 'Content-Type': 'text/plain' })
    response.write('Not defined mime type')
    response.end()
    return
  }
  // 静态文件
  fs.readFile(filePath, function (err, data) {
    if (err) {
      response.writeHead(404, { 'Content-Type': 'text/html' })
      response.write('The request was not found on this server')
    } else {
      response.writeHead(200, { 'Content-Type': contentType })
      response.write(data, 'binary')
    }
    response.end()
  })
}).listen(PORT)

function isNeedProxy (url) {
  // 也可以自定义 代理除静态文件外的全部请求
  return url.indexOf('dev=proxy') > -1
}

console.log('Server is running in http://localhost:' + PORT)