使用node serve-static快速搭建测试请求服务器

做了好多次项目，一直都是自己前端把请求和渲染都写好了，但是后端要等到很久才能写好，所以自己搭了个node服务器来测试自己的请求渲染是否有问题，每次vue打包完就把打包后的文件扔到这个服务器下
因为只是测试用的，所以我做的很简单，只是匹配前端发送来的数据然后返回一些静态数据以供看渲染效果
看完整代码请直接滑到底部

使用serve-static搭建静态服务器

serve-static可以快速搭建静态服务器，代码在其npmjs上和淘宝镜像上都有，我这里就直接写了

const finalhandler = require('finalhandler')
const http = require('http')
const serveStatic = require('serve-static')

// 将test文件夹下的内容放到服务器中
var serve = serveStatic('test', { 'index': ['index.html', 'index.htm'] })
var server = http.createServer(function onRequest (req, res) {
	serve(req, res, finalhandler(req, res))
})
server.listen(3000)

获取请求的内容

要对前端发起的请求做处理，首先我们需要拿到前端请求的url，根据请求url不同做不同的处理，此外，由于还有参数，所以我们需要获取参数
使用url.parse(req.url)来获取请求内容，打印一下下面这个地址的请求内容
‘/request1?a=1’

const url = require('url')
var server = http.createServer(function onRequest (req, res) {
  	console.log('url', url.parse(req.url))
	serve(req, res, finalhandler(req, res))
})

打印出来可以看到下图

所以我们需要的就是query和pathname
因为query还需要做一些处理，我习惯将其处理成对象，所以写了一个方法来将这个字符串转换成对象

// 将传递过来的参数字符串转为对象
function turnObj(query){
  if(query===null)
    return {}
  let arr=query.split('&')
  let obj={}
  arr.forEach(el => {
    let para = el.split('=')
    obj[para[0]]=para[1]
  })
  return obj
}

处理请求

接下来就是处理各个请求了，我这里写了三个请求处理，分别返回字符串，返回对象，以及对带参数的请求进行判断后返回
因为res.end只能返回字符串，所以我这里使用JSON.stringify将其转为字符串再返回

var server = http.createServer(function onRequest (req, res) {
  // 获取用户的请求路径
  let pathname = url.parse(req.url).pathname
  // 获取用户的参数
  let query = turnObj(url.parse(req.url).query)
  // 请求路径为/request时返回data1数据
  if(pathname==='/request1'){
    res.end('data1')
  // 请求路径为/request2时返回data2数据
  }else if(pathname==='/request2'){
    let data2={
      a:1,
      b:2
    }
    res.end(JSON.stringify(data2))
  // 请求路径为/request3且带参数的数据
  }else if(pathname==='/request3'){
      if(query.num>0){
        res.end('the num is bigger than 0')
      }else{
        res.end('the num is smaller than 0')
      }
  }
  // 其他请求交给finalhandler处理
  serve(req, res, finalhandler(req, res))
})

发起请求

接下来就是测试我们前端发起的请求了，这里我是用jquery简单地测试一下

<div class="reqContainer">
    <button id="req1">请求1</button>
    <button id="req2">请求2</button>
    <button id="req3">请求3</button>
</div>
<div class="resContainer">

</div>
<script src="./js/jquery.js"></script>
<script src="./js/index.js"></script>

$('#req1').click(()=>{
    $.ajax({
        type: "GET",
        url: "/request1",
        success: function(res) {
            $('.resContainer').html(res)
        }
    })
})

$('#req2').click(()=>{
    $.ajax({
        type: "GET",
        url: "/request2",
        success: function(res) {
            res=JSON.parse(res)
            $('.resContainer').html(`a:${res.a}  b:${res.b}`)
        }
    })
})

$('#req3').click(()=>{
    $.ajax({
        type: "POST",
        url: "/request3",
        data:{
            num:1
        },
        success: function(res) {
            $('.resContainer').html(res)
        }
    })
})

完整代码

const finalhandler = require('finalhandler')
const http = require('http')
const serveStatic = require('serve-static')
const url = require('url')

// 将test文件夹下的内容放到服务器中
var serve = serveStatic('test', { 'index': ['index.html', 'index.htm'] })

var server = http.createServer(function onRequest (req, res) {
  // 获取用户的请求路径
  let pathname = url.parse(req.url).pathname
  // 获取用户的参数
  let query = turnObj(url.parse(req.url).query)
  // 请求路径为/request时返回data1数据
  if(pathname==='/request1'){
    res.end('data1')
  // 请求路径为/request2时返回data2数据
  }else if(pathname==='/request2'){
    let data2={
      a:1,
      b:2
    }
    res.end(JSON.stringify(data2))
  // 请求路径为/request3且带参数的数据
  }else if(pathname==='/request3'){
      if(query.num>0){
        res.end('the num is bigger than 0')
      }else{
        res.end('the num is smaller than 0')
      }
  }
  // 其他请求交给finalhandler处理
  serve(req, res, finalhandler(req, res))
})
 
// 将传递过来的参数字符串转为对象
function turnObj(query){
  if(query===null)
    return {}
  let arr=query.split('&')
  let obj={}
  arr.forEach(el => {
    let para = el.split('=')
    obj[para[0]]=para[1]
  })
  return obj
}

server.listen(3000)