关于http
客户端和服务端交互示意图
http过程示意图2
1.网站的访问流程
网站访问第一步
2.node创建一个服务
let http = require('http')
let port = 8000
http.createServer((req, res) => { // 监听函数，当请求到来时，会执行回调函数
// req代表客户端，是一个可读流
// res代表服务端，是一个可写流
res.setHeader('Content-type', 'text/plain;charset=utf8')
res.write('hello')
// 调用end方法，结束响应
res.end('你好') // node是utf8写入，这样直接写在浏览器会乱码,所以需要在上面声明请求头
}).listen(port, () => {
console.log(`服务开启成功,端口为${port}`)
}) // 如果不写端口号，就是默认本机，，注意尽量使用3000以上
3.在本地服务读写文件
let http = require('http')
let fs = require('fs')
let port = 8000
http.createServer((req, res) => {
//不写编码类型buffer类型会自动转换为字符串
res.setHeader('Content-type', 'text/plain;charset=utf8')
// 如果读的文件是html且html上也有utf8的话，不需要设置请求头也会正常解析中文
fs.readFile('./1.txt', 'utf8', function(err, data) {
res.end(data)
})
}).listen(port, () => {
console.log(`服务开启成功,端口为${port}`)
})
也可以通过流的方式，（pipe）对象简写
let http = require('http')
let fs = require('fs')
let port = 8000
http.createServer((req, res) => {
res.setHeader('Content-type', 'text/plain;charset=utf8')
fs.createReadStream('1.txt').pipe(res)
}).listen(port, () => {
console.log(`服务开启成功,端口为${port}`)
})
查看请求路径
let http = require('http')
let fs = require('fs')
let url = require('url') // 把一个路径解析成一个对象
let port = 8000
http.createServer((req, res) => {
res.setHeader('Content-type', 'text/plain;charset=utf8')
fs.createReadStream('1.txt').pipe(res)
// 查看请求路径
console.log(req.url) // 这个包括了?号前和？号后的内容，如：/index.html?a=1
// 查看真正的请求路由（url）
let urlData = url.parse(req.url)
// 解析出来的对象的query就是连接上的参数，一对象的形式呈现; pathname就是真正的路由
console.log(urlData.pathname)
}).listen(port, () => {
console.log(`服务开启成功,端口为${port}`)
})
如下：如果访问的是'/'，显示主页html，如果访问的是文件，将文件内容读取返回，如果访问的是文件夹，默认去找html文件，如果文件不存在，返回404
let http = require('http')
let fs = require('fs')
let url = require('url') // 把一个路径解析成一个对象
let path = require('path')
let port = 8000
http.createServer((req, res) => {
// 如下：如果访问的是'/'，显示主页html，如果访问的是文件，将文件内容读取返回，如果访问的是文件夹，默认去找html文件，如果文件不存在，返回404
let {pathname, query} = url.parse(req.url, true) // true的作用是将query转换成一个对象,pathname是带'/'
fs.stat('.' + pathname, function(err, stats) {
if(err) {
res.statusCode = 404 // 找不到就是404
res.end(`${pathname} not found`)
} else if (stats.isFile) {
// 是文件的情况(这里没写头)
fs.createReadStream('.' + pathname).pipe()
} else if (stats.isDirectory()) {
// 如果是文件夹，默认查找index.html，'./'也是文件夹，获取到当前的路径和我的index.html进行拼接
let p = path.join('.' + pathname, 'index.html') // 拼出来读写的内容
fs.createWriteStream(p).pipe(res)
}
})
}).listen(port, () => {
console.log(`服务开启成功,端口为${port}`)
})
上面还有一个问题，头文件没偶遇设置，如下设置：
let http = require('http')
let fs = require('fs')
let url = require('url') // 把一个路径解析成一个对象
let path = require('path')
let port = 8000
// 获取后缀
let mine = {
'.js': 'application/javascript',
'.css': 'text/css',
'./html': 'text/html'
}
http.createServer((req, res) => {
// 如下：如果访问的是'/'，显示主页html，如果访问的是文件，将文件内容读取返回，如果访问的是文件夹，默认去找html文件，如果文件不存在，返回404
let {pathname, query} = url.parse(req.url, true)
fs.stat('.' + pathname, function(err, stats) {
if(err) {
res.statusCode = 404 // 找不到就是404
res.end(`${pathname} not found`)
} else if (stats.isFile) {
// 这里可还能是js,css，html等，可以获取后缀，来确定类型
let extName = pathname.match(/\.\w+$/)[0] // 正则匹配后缀
res.setHeader('Content-type', mine[extName] + ';charset=utf8')
fs.createReadStream('.' + pathname).pipe()
} else if (stats.isDirectory()) {
// 这里头文件是html
res.setHeader('Content-type', 'text/html;charset=utf8')
let p = path.join('.' + pathname, 'index.html')
fs.createWriteStream(p).pipe(res)
}
})
}).listen(port, () => {
console.log(`服务开启成功,端口为${port}`)
})
node中间件mime，也能实现类型转化:(替换上面setHeader部分)
let mime = require('mime')
mime.getType(pathname) + '
4.fetch方法(代替ajax,用法更灵活)
fetch('/lock', {
method: 'GET'
}).then(function(res) {
// 第一个回调是promise
console.log(res.json())
}).then(function(data) {
// 第一个回调是promise的结果
console.log(data)
})
express初步学习
有了express之前手写的node能简化很多,下面简单实现
let express = require('express')
// 引用express模块，express是一个函数
let app = express() // express函数执行后，返回的是一个http的监听函数,就是http.createdServer函数
// 并在此函数上扩展了一个listen可以监听得端口
app.listen(8000, function() {
console.log(123)
})
express的路由
let express = require('express')
let app = express()
app.listen(8000)
// app监听函数上扩展了很多方法，包括get，post,delete,put等
// app.方法名('路径名'，fn)
// 从上到下匹配，如果匹配到了并且结束响应，就不会往下走了
//路径指的是pathname，没有？后面的内容
// express重点就是扩展req和res的属性
app.get('/signin', function(req, res) {
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end('登录')
})
app.get('/signup', function(req, res) {
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end('注册')
})
// 上面都不匹配，all表示所有的方法，'*'表示所有路径
app.all('*', function(req, res) {
res.end('404')
})
exress扩展的一些req的属性
let express = require('express')
let app = express()
app.listen(8000)
// 想区分是查询一个用户还是查询所有用户
app.get('/user', function(req, res) {
console.log(req.query.id) // (express扩展的方法)
console.log(req.url) // 获取整个路径，包括？
console.log(req.path) // 路径没有？号 --(express扩展的方法)
console.log(req.headers) // 请求头,所有都是小写
console.log(req.method) // 请求的方法，所有的方法都是大写
})
上面例子优化,，将差一个和所有的方法分开，？号的路径无法区分
let express = require('express')
let app = express()
app.listen(8000)
// 如果访问/user?id=1 查一个， /user查所有，但这样路径都是/user，还是拆分
// user/1表示差一个， /user查所有，这样写就能区分差多个还是查一个
app.get('/user', function(req, res) {
res.end('select all')
})
// 表示id是占位符，必须要有，但是可以随机
// /user/1/wc => {id:1, name:wc} = params 一一对应的关系
app.get('/user/:id/:name', function(req, res) {
res.end('select one: ' + req.params.id + req.params.name)
})
分别处理参数的方法
let express = require('express')
let app = express()
app.listen(8000)
// app.pram()有拦截功能,可实现参数操作和路由分离开
// 处理id
app.pram('id', function(req, res, next) {
res.prams.id = `你的id是${req.prams.id}`
next() // 调用next()就可以向下匹配,如果在这里借宿了请求,就结束
})
// 处理name
app.pram('name', function(req, res, next) {
res.prams.name = `你的name是${req.prams.name}`
next()
})
app.get('/user/:id/:name', function(req, res) {
// express设置头文件
res.Header('Content-type','text/plain;charset=utf8')
res.end(`${res.prams.id}${res.prams.name}`)
})
中间件（middleWare）当我们访问到最终目标之前执行的内容
中间件的第一个功能， 可以进行权限判断
// 第一个参数是路径，如果不写，会对所以请求路径都回执行
let express = require('express')
let app = express()
app.listen(8000)
app.use(function(req,res, next) { // 不调用next不往下走
console.log('步骤一')
next()
})
app.use(function(req,res, next) { // 不调用next不往下走，一旦在上面调用res.end(),下面就执行结果就白搭了
console.log('步骤二')
next()
})
app.get('/user, function(req, res) {
res.Header('Content-type','text/plain;charset=utf8')
res.end('结束')
})
中间件的第二个功能就是可以对res和req属性扩充
let express = require('express')
let app = express()
app.listen(8000)
// 中间件的第一个功能， 可以进行权限判断
// 对执行路径“/user”有效
app.use("/user",function(req,res, next) { // 不调用next不往下走
console.log('步骤一')
req.a = 'aaaa'
next()
})
// 虽所有执行路径都有效
app.use(function(req,res, next) { // 不调用next不往下走，一旦在上面调用res.end(),下面就执行结果就白搭了
console.log('步骤二')
res.b = 'bbbb'
next()
})
app.get('/user, function(req, res) {
res.Header('Content-type','text/plain;charset=utf8')
console.log(req.a + res.b)
res.end('结束')
})
总结下中间件特点：
1.可以进行权限判断
2.可以对res和req属性扩充
3.第一个参数是路径，如果不写，会对所以请求路径都回执行
4.中间件要放在执行路径之前才会生效
有了中间间，我们就可以统一设置头文件了
// 通过中间件设置头文件（利用中间件不设第一个参数就是默认全部的特点）
app.get(function(req, res) {
res.Header('Content-type','text/plain;charset=utf8')
next()
})
app.get('/user', function(req, res) {
console.log(req.a + res.b)
res.end('结束')
})
app.get('/pssword', function(req, res) {
console.log(req.a + res.b)
res.end('结束')
})
错误中间件：
错误中间件放在最后面，接受4个参数，比正常中间件多一个err，err位next()中的参数
let express = require('express')
let app = express()
app.listen(8000)
// 中间件的第一个功能， 可以进行权限判断
// 第一个参数是路径，如果不写，会对所以请求路径都回执行
app.use('/pssword',function(req,res, next) {
console.log('步骤二')
res.b = 'bbbb'
next('错误')
})
app.get('/user', function(req, res) {
console.log(req.a + res.b)
res.end('结束')
})
// 错误中间件
app.get(function(err, req, res, next) {
console.log(err)
})
网友评论