koa框架和前端框架选型

koa框架

什么是Koa？

Koa是一个全新的web框架(下一代Node.js)。轻量、更健壮

• Koa利用async函数丢弃回调函数，并增强错误处理
• Koa 没有任何预置的中间件

第一个Koa-router应用

• app.user方法 返回 this，可链式表达
• routes方法：把router类定义的方法添加到app应用中
• allowedMethods方法：拦截app应用里没有的信息请求
• prefix方法：设置路由路径前缀

const Koa = require('koa')
const Router = require('koa-router')

const app = new Koa()
const router = new Router()

router.get('/', ctx => {
    ctx.body = 'Hello world!!'
})

router.get('/api', ctx => {
    ctx.body = 'hello api!!'
})

app.use(router.routes()) 
    .use(router.allowedMethods())

app.listen(3000)

Koa工作原理

• 执行的顺序：顺序执行
• 回调的顺序：反向执行
• 先进先出

Koa零碎知识点

• 内层包含await外层必须有async，反之，外层有async内层可有可无await
• 中间件没有next()方法，koa默许本次请求终止， 后面的中间件不会执行

使用async、await异步请求

async/await关键字起到以更简洁的方式写出基于Promise的异步行为

把Promise实例结果返回给await，后赋值给result

router.get('/async', async (ctx) => {
    let result = await new Promise((resolve) => {
        setTimeout( ()=> {
            resolve('hello world 2s later')
        }, 2000)
    })
    ctx.body = result
})

Koa中间件

• 路由：Koa-router
• 协议解析：Koa-body
• 跨域处理：@Koa/cors
• koa-combine-routers：路由压缩routers合并操作
• koa-static：静态资源，绝对路径
• koa-helmet：koa安全Header处理
• koa-compose：集成koa中间件。数组传递
• koa-compress：压缩中间件

  const middleware = compose([
    koaBody(),
    cors(),
    helmet(),
    statics(path.join(__dirname, '../public')),
    json({ pretty: false, param: 'pretty' }),
  ])
  
  app.use(middleware)
  

获取GET请求中的params

• 第一种

const params = ctx.request.query

app.use(json({pretty: false, param: 'pretty'})) // json数据格式化

• JSON.parse() 将json字符串转换成对象
• JSON.stringify(obj) 将javascript值转换成JSON字符串

框架选型

• 库与框架的区别：
  • 库是功能模块的集合，主要目的是代码复用
  • 框架包含库，比库的功能更强大

UI框架选型

• 判断使用场景（PC，移动web，小程序，响应式）
• 组件丰富，成熟的模板，方便集成
• 成熟的社区，成熟的生态

---

• PC端、响应式
  • layui 和 layuiAdmin
  • iView (特定于vue)
  • Ant Design
• 移动端（移动端vue组件库）
  • Mint UI
  • Cube-UI
  • Vant

Js框架选型

• 团队的技术能力
• 应用场景（后台？性能要求？时间要求？）
• 成熟的社区，成熟的生态

三大主流框架对比

共同点：

• ES6语法
• MVVM设计模式
  • 定义：MVVM (Model-view-viewmodel) 是一种软甲架构模式
  • 组成部分：模型、视图、视图模型
• 组件思想