一.写一个最简单的nodejs服务器(原理)
1.重点:常见的几种文件类型及content-type
通过使用res对象中的setHeader方法,我们可以设置content-type这个响应头。这个响应头的作用是告诉浏览器,本次响应的内容是什么格式的内容,以方便浏览器进行处理。
- .html:
res.setHeader('content-type', 'text/html;charset=utf8')
- .css:
res.setHeader('content-type', 'text/css;charset=utf8')
- .js:
res.setHeader('content-type', 'application/javascript')
- .png:
res.setHeader('content-type', 'image/png')
- json数据:
res.setHeader('content-type', 'application/json;charset=utf-8')
- 其它类型,参考这里:MIME types (IANA media types) - HTTP | MDN(MDN)
2.设置statusCode(设置格式:res.statusCode = 值)
不建议随便设置http状态码(http的状态码要配合http协议使用才有意义)
if(req.url=='用户输入的url'){
例如:给req请求响应的响应头设置http状态码为301
res.statusCode = 301;
// 响应statusCode值变为301:页面才会发生跳转(设置其余http状态码无效)
//http的状态码要配合http协议使用才有意义
res.setHeader('location','http://www.qq.com')
res.end()
}
3.nodejs服务器的原理
// 1.引入http模块
const http = require('http')
// 创建服务(http模块里面有一个createServer方法 可以获取到本次请求request和本次响应response)
// 2.创建服务
const server = http.createServer((req, res) => {
// 本次请求参数中有一个req.url方法可以查看查看客户端输入的url
// req.url一定是以/开头的
// 在现代浏览器中,它会去自动请求服务器上的/favicon.ico
// console.log(req.url) 会打印出 /index.html和 /favicon.ico
if (req.url == '/index.html') {
// console.log(Date.now())
// 如果想要把汉字发出去,需要告诉服务器你想以什么文件类型发出去
// res.setHeader(请求头)
// res.setHeader('content-type', 值)
// 例如:html格式:res.setHeader('content-type', 'text/html;charset=utf8')
res.setHeader('content-type', 'text/html;charset=utf8');
// 在此设置走此if判断时,修改原本statusCode默认值为200,现在改成500
res.statusCode = 500
// 结束本次请求并设置响应体:返回给用户内容
res.end('返回给用户的内容')
} else {
res.setHeader('content-type', 'text/html;charset=utf8');
//res.end()的格式只是能是buffer或者是String
res.end('请求参数有误')
}
//Date.now()时间戳(可以不写,单纯忘记了,在此做个笔记)
})
// 3.启动服务
//格式:server.listen(端口号,[回调函数])用来监听端口。回调函数(如果监听成功,则回调函数会执行一次。)
server.listen(8001, () => { console.log(new Date()) })//在此时,我创建了一个nodejs服务器
二.处理.html文件中的二次请求
从服务器获取html文件之后,如果这个html文件中还引用了其它的外部资源(图片,样式文件等),则浏览器会重新再发请求,这个就是二次请求。
//需求:假设在index.html中还引入了 index.css, 则浏览器请求index.html之后,解析的过程中发现还有外部资源;例如css样式,所以浏览器会发出二次请求,再去请求相应的资源
// 第一步:引入const
const http = require('http')
//
const fs = require('fs')
// 第二步:创建服务
// req请求的内容,res要响应出去的内容(有返回值)
const server = http.createServer((req, res) => {
// 设置请求头,如果是汉字的话,给请求头添加如下;修改浏览器的解码方式
//res.setHeader('content-type', 'text/html;charset=utf8');
res.setHeader('content-type', 'text/css');
// 读取另一个文件的内容fs.readFileSync('输入文件路径',utf-8)(有返回值)
// 需求:当用户输入url==/index.html 或url==/跳转到index.html页面
if (req.url == '/index.html' || req.url == '/') {
res.setHeader('content-type', 'text/html;charset=utf8');
const conmon = fs.readFileSync('./idnex.html')
res.end(conmon)
} else if (req.url == '/index.css') {
const css = fs.readFileSync('./index.css')
//css样式浏览器的解码方式为以下
res.setHeader('content-type', 'text/css');
// // 若不满足条件
res.end(css)
}
})
// 第三步:格式:server.listen(端口号,[回调函数])用来监听端口。回调函数(如果监听成功,则回调函数会执行一次。)
server.listen(8002, () => { console.log(new Date()) })
三.express基础语法(get请求)
express 框架会增强req,res的功能
// 第一步:加载第三方插件
const express = require('express')
//第二步:调用express()有返回值,接收的变量为app,
const app = express()
// 第三步:设置请求对应的处理函数
app.get('/', (req, res) => {
// 当客户端以GET方式请求/(我理解为查询)的时候就会调用第二个参数:请求处理函数
// req为请求,res为响应,若想获得客户端发过来的url 只需req.query属性是express框架额外提供的属性
console.log(req.query) //打印结果为/
res.send('hello word')
})
// 第四步:监听端口号,启动 Web 服务
// [回调函数])用来监听端口。回调函数(如果监听成功,则回调函数会执行一次。)
app.listen(3000, () => console.log('哈喽,现在开始启动服务器接口3000'))