23day / 24day
1-使用 koa 搭建服务器
const koa = require('koa')
const app = new koa()
//路由请求
//context ctx 上下文 包含req和res
app.use(async(ctx) => {
ctx.body = 'hello koa2'
})
app.listen(3000)
2-如何配置 koa 路由
const koa = require('koa');
//创建路由对象
const router = require('koa-router')()
const app = new koa()
//路由请求
router.get('/index', (ctx) => {
ctx.body = 'hello index'
})
router.get('/list', (ctx) => {
ctx.body = 'hello list'
})
//启用路由
app.use(router.routes())
.use(router.allowedMethods())
app.listen(3000)
3-静态资源如何获取
//加载
const static = require('koa-static')
const path = require('path')
//获取静态资源
app.use(static(path.join(__dirname, 'public')))
4-koa 如何使用模板引擎
const render = require('koa-art-template')
render(app, {
root: path.join(__dirname, 'views'),
extname: '.html'
})
//使用
router.get('/add', async(ctx) => {
let litter = 'hello koa'
let lis = '张三'
await ctx.render('index', {
litter,
lis
})
})
5-使用 koa 实现一个用户增删改查的案例
在app.js页面导入框架，创建服务器，创建网站服务，处理参数，配置路径，监听端口
const koa = require('koa')
const render = require('koa-art-template')
const path = require('path')
const bodyParser = require('koa-bodyparser')
// 2-创建网站服务
const app = new koa()
const router = require('./router/index')
render(app, {
root: path.join(__dirname, 'views'),
extname: '.art'
})
//处理post参数
app.use(bodyParser())
//加载路由
//为index路由对象匹配路径
app.use(router.routes())
.use(router.allowedMethods())
// 4-监听端口
app.listen(3000);
console.log('服务器运行在3000...');
--------------------------------------
在index.js页面写功能
const koa = require('koa');
//创建路由对象
const router = require('koa-router')()
require('../model/index')
//引入User，user为创建好的数据库用户聚合
const User = require('../model/user');
//创建路由
router.get('/add', async(ctx) => {
await ctx.render('add', {})
})
加载数据
router.get('/list', async(ctx) => {
// res.end('list')
//获取所有的学生信息
let users = await User.find();
await ctx.render('list', {
users: users
});
})
查
router.get('/modify/:id', async(ctx) => {
console.log(ctx.params)
let query = ctx.params.id.substring(1, ctx.params.id.length - 1)
let user = await User.findOne({ _id: query })
let hobbies = ['足球', '篮球', '橄榄球', '敲代码', '抽烟', '喝酒', '烫头']
await ctx.render('modify', {
user,
hobbies
})
})
改
router.post('/modify/:id', async(ctx) => {
let user = ctx.request.body
let id = ctx.params.id.substring(1, ctx.params.id.length - 1);
// 更新
await User.updateOne({ _id: id }, user)
// 重定向
ctx.response.redirect('/list');
})
删
router.get('/delete/:id', async(ctx) => {
let query = ctx.params.id.substring(1, ctx.params.id.length - 1)
console.log(query)
await User.findOneAndDelete({ _id: query })
ctx.response.redirect('/list');
})
增
router.post('/add', async(ctx) => {
let user = ctx.request.body
await User.create(user);
//重定向
ctx.response.redirect('/list');
})
//导出路由
module.exports = router
24day
1-说明 http express 和 koa 的路由参数分别怎么获取
http：
app.get('/add/:name/:age/:sex',function(req,res){
res.send(req.params);
});
express：
router.get('/student/:id',function(req, res, next){
var id = req.params.id;
})
koa：
ctx.request.query
ctx.query
2-简单说明动态路由
动态获取路由地址，在对特定地址经行路由
//动态路由
//index没有参数,导致路由无法匹配
//:占位符
// 接收请求
app.get('/index/:id/:name/:age', (req, res) => {
console.log(req.params)
//get请求参数
res.send(req.params)
});
3-说明 express 和 koa 的中间件的使用
express中间件一个接一个的顺序执行, 通常会将 response 响应写在最后一个中间件中
koa2的中间件是通过 async await 实现的，中间件执行顺序是“洋葱圈”模型。
中间件之间通过next函数联系,当一个中间件调用 next() 后，会将控制权交给下一个中间件, 直到下一个中间件不再执行 next() 后, 将会沿路折返,将控制权依次交换给前一个中间件。
4-简述 koa 的洋葱圈模型
//洋葱圈模型
app.use(async(ctx, next) => {
console.log('开始执行第一个中间件')
await next()
console.log('第一个中间件执行完成')
})
app.use(async(ctx, next) => {
console.log('开始执行第二个中间件')
await next()
console.log('第二个中间件执行完成')
})
app.use(async(ctx, next) => {
console.log('开始执行第三个中间件')
await next()
console.log('第三个中间件执行完成')
})
运行结果：
开始执行第一个中间件
开始执行第二个中间件
开始执行第三个中间件
第三个中间件执行完成
第二个中间件执行完成
第一个中间件执行完成
每次当有一个请求进入的时候，每个中间件都会被执行两次。
5-扩展：了解 websocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
创建 WebSocket 对象
var Socket = new WebSocket(url, [protocol] );
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 属性
Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
WebSocket 事件
Socket.onopen 连接建立时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发
WebSocket 方法
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
浙公网安备 33010602011771号