做了好多次项目,一直都是自己前端把请求和渲染都写好了,但是后端要等到很久才能写好,所以自己搭了个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)