新一代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，模块依赖包
扫描二维码关注公众号，回复：
7453225 查看本文章
3.安装nodemon
它会监测项目中的所有文件，一旦发现文件有改动，Nodemon 会自动重启应用
cnpm install nodemon -D -g 安装全局
4.在package.json中配置nodemon
1
2
3
|
"scripts": {
"start": "nodemon app.js"
}
|
5.在文件夹中新建文件app.js
1
2
3
4
|
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
1
2
3
4
5
6
7
|
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
1
2
3
4
5
6
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const path = require('path')
const render = require('koa-ejs')
render(app, {
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'
})
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//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>
|
1
2
3
4
|
//index.html
<h1>
<%- title %>
</h1>
|
11.数据传递和渲染
1
2
3
4
5
6
7
8
9
|
const things = [{name:'friends'}, {name:'family'}]
router.get('/', async ctx => {
await ctx.render('index', {
title: 'I love node',
things: things
})
})
|
1
2
3
4
5
6
7
8
9
10
|
<h1>
<%- title %>
</h1>
<ul class="list-group">
<% things.forEach(thing =>{ %>
<li class="list-group-item">
<%= thing %>
</li>
<% }) %>
</ul>
|
12.导航和添加内容
1
2
3
4
5
|
router.get('/add', showAdd)
async function (ctx) {
await ctx.render('add')
}
|
新建文件夹partialsnavBar.html
1
2
3
4
5
6
7
8
9
10
11
12
|
//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>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
//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>
|
然后在layout.htmlbody中引入
<% include partials/navBar.html %>
最终效果
结语
这篇刚好入门，下一步将要解决如何完善功能和路由参数，本地服务器与刚学的MongoDB，创建测试接口等
由于不是写网页内容，侧重了解node后端就引用了Bootstrap的CSS样式
还会有下一篇文章，等我先学一下下，新手入门，高手轻喷。
原文:大专栏 初识KOA（上）