初识KOA(上)

新一代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

1
2
3
4
const Koa = require('koa')
const app = new Koa()

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

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

搭建服务器成功

1565091025993

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

1565097503676

8. app.context

1565097690435

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())

1565098676663

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, {
//当前路径的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'
})
})
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>

1565101335597

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>

1565161017644

12.导航和添加内容

1
2
3
4
5
router.get('/add', showAdd)

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

新建文件夹partialsnavBar.html

1565184485779

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 %>

最终效果

1565184216539

结语

这篇刚好入门,下一步将要解决如何完善功能和路由参数,本地服务器与刚学的MongoDB,创建测试接口等

由于不是写网页内容,侧重了解node后端就引用了Bootstrap的CSS样式

还会有下一篇文章,等我先学一下下,新手入门,高手轻喷。

原文:大专栏  初识KOA(上)


猜你喜欢

转载自www.cnblogs.com/wangziqiang123/p/11657613.html