初识KOA（上）

时间：2019-10-12 01:24:15 阅读：137 评论：0 收藏：0 [点我收藏+]

标签：mongodb views 搭建 edm ade 开发 mfc viewport button

新一代node框架入门，前置知识：node基础,数据库基础，了解Koa怎么搭建服务器的,不适合通读，推荐跟文章实际操作（手把手教学）

如果有知识点未知请看：

ejs
koa文档
 前端er，你真的会用 async 吗？
async/await 应知应会
 如何避开 async/await 地狱

之前对JS异步,这一块有点生疏，多看点博客

简介

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

1.新建文件夹

初始化package.json，终端输入

npm init --yes

2.下载KOA

终端输入cnpm install koa

当前文件夹下会出来node_moudules，模块依赖包

3.安装nodemon

它会监测项目中的所有文件，一旦发现文件有改动，Nodemon 会自动重启应用

cnpm install nodemon -D -g 安装全局

4.在package.json中配置nodemon

1
2
3

"scripts": {
      "start": "nodemon app.js"
  }

5.在文件夹中新建文件app.js

const Koa = require('koa')
const app = new Koa()

app.listen(3000, () => console.log('Server started...'))

6.终端输入nodemon app.js测试启动

搭建服务器成功

技术图片

7.测试导入一个koa 模块 koa-json

终端下载cnpm install koa-json

const Koa = require('koa')
const json = require('koa-json')
const app = new Koa()

app.use(json())
app.use(async ctx => (ctx.body = { msg: 'Hello world!' }))
app.listen(3000, () => console.log('Server started...'))

在浏览器查看，出现json

技术图片

8. app.context

技术图片

9.路由模块 Koa-router

终端输入cnpm install koa-router

   
const KoaRouter = require('koa-router')
   const router = new KoaRouter()
   router.get('/test', ctx => (ctx.body = 'hello Router!'))
       //配置路由模块
   app.use(router.routes()).use(router.allowedMethods())

技术图片

10.如果引入HTML的话，需要模板引擎ejs

终端输入cnpm install koa-ejs

const path = require('path')
const render = require('koa-ejs')
//配置模板引擎
render(app, {
    //当前路径的views文件夹
    root: path.join(__dirname, 'views'),
    layout: 'layout',
    viewExt: 'html',
    cache: false,
    debug: false
})

//路由跳转
router.get('/', async ctx => {
    await ctx.render('index', {
        title: 'I love node'
    })
})

//layout.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <%- body %>
    </div>
</body>

</html>

//index.html
<h1>
    <%- title %>
</h1>

技术图片

11.数据传递和渲染

//模拟数据
const things = [{name:'friends'}, {name:'family'}]

router.get('/', async ctx => {
    await ctx.render('index', {
        title: 'I love node',
        things: things
    })
})

<h1>
    <%- title %>
</h1>
<ul class="list-group">
    <% things.forEach(thing =>{ %>
        <li class="list-group-item">
            <%= thing %>
        </li>
        <% }) %>
</ul>

技术图片

12.导航和添加内容

router.get('/add', showAdd)

async function (ctx) {
    await ctx.render('add')
}

新建文件夹partialsnavBar.html

技术图片

//add
<h1 class="display-4 mb-4">
    添加
</h1>

<form action="/add" method="POST">
    <div class="form-group">
        <input type="text" name="thing" class="form-control form-control-lg" placeholder="随便。。。">
    </div>
    <input type="submit" value="添加" class="btn btn-dark btn-lg">
    <a href="/" class="btn btn-danger btn-lg">取消</a>
</form>

//navBar
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
    <div class="container">
        <a class="navbar-brand" href="#">Jason`s App</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/add">添加</a>
                </li>
            </ul>
        </div>
    </div>
</nav>