NodeJs学习笔记(二)

最新推荐文章于 2023-01-10 20:53:07 发布

hkjyuyu

最新推荐文章于 2023-01-10 20:53:07 发布

阅读量298

点赞数

分类专栏： NodeJS 文章标签： NodeJs Node

NodeJS 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解Koa框架的使用，包括中间件机制、路由处理、请求解析及模板引擎的应用。通过实例演示如何搭建一个简单的登录系统，以及如何利用Nunjucks模板引擎生成动态HTML页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟着廖雪峰学NodeJS

WEB开发

Koa入门

每收到一个http请求，koa就会调用通过app.use()注册的async函数，并传入ctx和next参数。

我们可以对ctx操作，并设置返回内容。但是为什么要调用await next()？

原因是koa把很多async函数组成一个处理链，每个async函数都可以做一些自己的事情，然后用await
next()来调用下一个async函数。我们把每个async函数称为middleware，这些middleware可以组合起来，完成很多有用的功能。

middleware的顺序很重要，也就是调用app.use()的顺序决定了middleware的顺序。

此外，如果一个middleware没有调用await next()，会怎么办？答案是后续的middleware将不再执行了。这种情况也很常见，例如，一个检测用户权限的middleware可以决定是否继续处理请求，还是直接返回403错误：

处理url 需要引入koa-router这个middleware，让它负责处理URL映射

用router.get(’/path’, async fn)处理的是get请求

1.处理Get 请求

1.处理Post 请求、
类似的，put、delete、head请求也可以由router处理。
需要安装koa-bodyparser 用来解析原始request请求，然后，把解析后的参数，绑定到ctx.request.body中
登录表单：

// 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示:
const Koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');
// 创建一个Koa对象表示web app本身:
const app = new Koa();
app.use(bodyParser());
app.use(router.routes());

// add router middleware:
router.get('/',async function(ctx,next) {
    ctx.response.body=`
    <form action="/login" method="post">
        <p>用户名：<input value = "" name="name"/></p>
        <p>密码：<input value = "" name="password" type="password"/></p>
        <p><input type="submit" value = "登录"/></p>
    </form>`
})


router.post('/login', async (ctx, next) => {
    var
        name = ctx.request.body.name || '',
        password = ctx.request.body.password || '';
    if (name === 'admin' && password === '12345') {
        ctx.response.body = `<h1>Welcome, ${name}!</h1>`;
    } else {
        ctx.response.body = `<h1>Login failed!</h1>
        <p><a href="/">返回登录界面</a></p>`;
    }
});
app.listen(3000);
console.log('app started at port 3000...')

敲完这个看感觉要写的也好是很多啊肯定也该要封装一下吧不然每个请求都要写个router.post…

那又可以继续封装写成模块那样去导出不同文件去引用就ok了

代码链接

Nunjucks模板引擎：
模板引擎就是基于模板配合数据构造出字符串输出的一个组件
模板引擎最常见的输出就是输出网页，也就是HTML文本。

举个栗子：

Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎，既可以用在Node环境下，又可以运行在浏览器端。但是，主要还是运行在Node环境下，因为浏览器端有更好的模板解决方案，例如MVVM框架。
在package.json中引入依赖：“nunjucks”: “2.4.2”

在view文件加下新建hello.html

<!DOCTYPE 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">
    <title>Document</title>
</head>
<body>
    <h1>Hello {{ name }}</h1>
</body>
</html>


const  fs = require('fs');
const Koa = require('koa');
const app = new Koa();
const router = require('koa-router')();
const nunjucks = require('nunjucks');
app.use(router.routes());
 

function createEnv(path, opts) {
    var
        autoescape = opts.autoescape === undefined ? true : opts.autoescape,
        noCache = opts.noCache || false,
        watch = opts.watch || false,
        throwOnUndefined = opts.throwOnUndefined || false,
        env = new nunjucks.Environment(
            new nunjucks.FileSystemLoader('views', {
                noCache: noCache,
                watch: watch,
            }), {
                autoescape: autoescape,
                throwOnUndefined: throwOnUndefined
            });
    if (opts.filters) {
        for (var f in opts.filters) {
            env.addFilter(f, opts.filters[f]);
        }
    }
    return env;
}

var env = createEnv('views', {
    watch: true,
    filters: {
        hex: function (n) {
            return '0x' + n.toString(16);
        }
    }
});
var s = env.render('hello.html', { name: '<script>alert("小明")</script>' });
console.log(s);