新一代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
123 |
"scripts": { "start": "nodemon app.js" }
|
5.在文件夹中新建文件app.js
1234 |
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
1234567 |
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
123456 |
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
123456789101112131415161718 |
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' })})
|
123456789101112131415161718 |
//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> |
1234 |
//index.html<h1> <%- title %></h1> |
11.数据传递和渲染
123456789 |
//模拟数据const things = [{name:'friends'}, {name:'family'}]
router.get('/', async ctx => { await ctx.render('index', { title: 'I love node', things: things })})
|
12345678910 |
<h1> <%- title %></h1><ul class="list-group"> <% things.forEach(thing =>{ %> <li class="list-group-item"> <%= thing %> </li> <% }) %></ul>
|
12.导航和添加内容
12345 |
router.get('/add', showAdd)
async function (ctx) { await ctx.render('add')}
|
新建文件夹partialsnavBar.html
123456789101112 |
//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> |
12345678910111213141516 |
//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样式
还会有下一篇文章，等我先学一下下，新手入门，高手轻喷。
原文地址：https://www.cnblogs.com/dajunjun/p/11657771.html