koa学习

koa

hello world

复制代码
const Koa = require('koa')

const app = new Koa()


app.listen(8000,()=>{
  console.log('koa server success')
})

中间件:只能通过use来注册中间件

复制代码
// 中间件
app.use((ctx,next)=>{
  console.log('koa 普通中间件')
  ctx.response.body = 'hello koa middleware'

  next()
})

路由使用 koa-router

安装 npm install koa-router

创建路由文件 routers/users.js

复制代码
//routers/users.js
const Router = require('koa-router')
const router = new Router({prefix:'/users'})

// 用户列表接口 /users/lists

router.get('/lists',  (ctx, next) => {
  ctx.response.body = 'user lists'
})

module.exports = router

引入路由,注册路由

复制代码
const Koa = require('koa')

const userRouter = require('./routers/user')

const app = new Koa()

//  使用路由
app.use(userRouter.routes())
// 处理405和501错误
app.use(userRouter.allowedMethods()) 


app.listen(8000,()=>{
  console.log('koa server success')
})

参数解析

params 和 query

复制代码
const router = require('koa-router')

const userRouter = new router({prefix:'/users'})

userRouter.get('/:id', (ctx,next)=>{
  console.log('获取params参数', ctx.params)
  console.log('获取query参数', ctx.query)
  ctx.response.body = 'user id:'+ctx.params.id
})

app.use(userRouter.routes())

//请求路径 /users/yyy?username=yyy&password=123456Aa
//打印内容
//获取params参数 { id: 'yyy' }
//获取query参数 { username: 'yyy', password: '123456Aa' }

json 和 urlencoded

安装第三方插件 koa-bodyparser'

npm install koa-bodyparser'

引入插件,自动解析json和urlencoded参数
复制代码
const bodyParser = require('koa-bodyparser')

app.use(bodyParser())

app.use((ctx,next)=>{
    
    console.log('请求体参数', ctx.request.body)
    ctx.response.body = 'requset body parser'

})

form-data 参数解析

安装koa-multer插件

npm install koa-multer

引入,注册插件

`

const multer = require('koa-multer')

const upload = multer()

loginRouter.post('/', upload.any(), (ctx,next)=>{

console.log('form-data 数据', ctx.req.body) // 注意是在ctx.req.body中获取解析数据

ctx.response.body = 'login success'

})

`

文件上传

复制代码
const multer = require('koa-multer')


const storage = multer.diskStorage({
    // 文件保存路径
    destination: function (req, file, cb) {
        cb(null, './uploads/')
    },
    // 修改文件名称
    filename: function (req, file, cb) {  
      console.log('file', file)
      // 使用更安全的方式生成文件名
      const filename = Date.now() + '-' + Math.round(Math.random() * 1E9) + file.originalname
      cb(null, filename)
    }
})

const upload = multer({storage: storage})

uploadRouter.post('/image', upload.single('file'), (ctx,next)=>{

    ctx.response.body = 'upload success'
})

部署静态资源

安装插件 npm install koa-static

部署

复制代码
const staticAssets= require('koa-static')
app.use(staticAssets(__dirname + '/public')) // 接收静态资源目录
相关推荐
我命由我123452 天前
在 React 项目中,配置了 setupProxy.js 文件,无法正常访问 http://localhost:3000
开发语言·前端·javascript·react.js·前端框架·ecmascript·js
CyrusCJA2 天前
Nodejs自定义脚手架
javascript·node.js·js
可问春风_ren5 天前
HTML零基础进阶教程:解锁表单、多媒体与语义化实战
前端·git·html·ecmascript·reactjs·js
我命由我123457 天前
HTML 开发 - HTML 描述列表标签(<dl>、<dt>、<dd>)
前端·javascript·css·html·css3·html5·js
我命由我123457 天前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
酉鬼女又兒8 天前
零基础快速入门前端深入掌握箭头函数、Promise 与 Fetch API —— 蓝桥杯 Web 考点全解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·css·职场和发展·蓝桥杯·es6·js
我命由我123458 天前
React - useEffect、useRef、Fragment
开发语言·前端·javascript·react.js·前端框架·ecmascript·js
酉鬼女又兒8 天前
零基础快速入门前端蓝桥杯 Web 备考:AJAX 与 XMLHttpRequest 核心知识点及实战(可用于备赛蓝桥杯Web应用开发)
前端·ajax·职场和发展·蓝桥杯·css3·js
我命由我123459 天前
React - React Redux 数据共享、Redux DevTools、React Redux 最终优化
前端·javascript·react.js·前端框架·ecmascript·html5·js
李子焱10 天前
第四节:理解 JSON 结构与 Item 概念
json·js·工作流