前端基础文章打卡Day6 : http简易搭建服务器 | 青训营

58 阅读1分钟

学习了http的基础内容之后,下面尝试使用node搭建一个简易的服务器,通过http和express两种方法进行尝试。

使用http搭建

首先需要导入http模块const http = require('http');

createServer()

接下来使用http的createServer方法来创建一个新的服务器

listen():

再通过使用http的listen('端口号',回调)来启动一个服务器

const http = require('http');
const serve = http.createServer()

serve.listen(3000, () => {
    console.log('Web服务器后端');
})

image.png

此时我们可以把服务器正常的跑起来,但是当我们访问http://localhost:3000/ 的时候却不能正常显示,这是因为我们还没有创建响应和请求的对象,需要我们使用服务器.on方法绑定一个事件

服务器实例通过.on()方法为服务器绑定request事件,监听客户端发来的请求,触发事件处理函数

代码是这样serve.on('request', (req, res) => {}) 其中的req是请求对象,res是响应对象

req

请求对象用来访问与客户端请求相关的内容:

const http = require('http');
const serve = http.createServer()

serve.on('request', (req, res) => {
    const version = req.httpVersion;
    const url = req.url;
    const method = req.method;
    const str = `Your request url is ${url}, request method is ${method} and httpVersion is ${version}`;
    console.log(str);
})
serve.listen(3000, () => {
    console.log('Web服务器后端');
})

我们启动服务器之后再访问:

image.png 可以正常拿到客户端的信息

res

在事件处理函数中,响应对象res通过调用end()方法用于将服务器的数据或属性响应给客户端

const http = require('http');
const serve = http.createServer()

serve.on('request', (req, res) => {
    const version = req.httpVersion;
    const url = req.url;
    const method = req.method;
    const str = `Your request url is ${url}, request method is ${method} and httpVersion is ${version}`;
    console.log(str);
    res.end(str);
})
serve.listen(3000, () => {
    console.log('Web服务器后端');
})

接下来去访问3000端口的页面的时候就可以接收到字符串

image.png 有时候进行页面渲染的时候会出现乱码,我们需要设置Content-Type属性

方法是res.setHeader('Content-Type', '内容'),多个内容用分号隔开

总结

使用node进行服务器搭建可以使用我们熟悉的js环境进行编写,相较于使用另外一种语言更加轻松,这一优点值得我们去学习。