koa中间件、art-template模板引擎、cookie与session的使用。

最新推荐文章于 2021-11-20 16:37:38 发布

阿牛大牛中

最新推荐文章于 2021-11-20 16:37:38 发布

阅读量289

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/weixin_46351593/article/details/108414711

版权

nodejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

koa post提交数据

原生Nodejs获取post提交数据

var Koa = require('koa'),
    router = require('koa-router')(),
    views = require('koa-views'),
    common = require('./module/common');
var app = new Koa();

app.use(views('views', {
    extension: 'ejs' //应用ejs模板引擎
}))

router.get('/', async(ctx) => {
    await ctx.render('index');
});

// 接收post提交的数据
router.post('/doAdd', async(ctx) => {
    // 原生nodejs在koa中获取表单提交的数据
    var data = await common.getPostData(ctx);

    console.log(data);

    ctx.body = data;
})

// 启动路由
app
    .use(router.routes()) //启动路由
    .use(router.allowedMethods()); //可以配置也可以不配置，建议配置
app.listen(3000);

Koa 中koa-bodyparser中间件的使用

1、安装 koa-bodyparser

npm install koa-bodyparser --save

2、安装引入配置中间件

var Koa = require('koa');
var bodyParser = require('koa-bodyparder');
var app = new Koa();
app.use(bodyParser());

app.use(async ctx => {
	ctx.body = ctx.request.body;
});

3、使用

var Koa = require('koa'),
    router = require('koa-router')(),
    views = require('koa-views'),
    bodyParser = require('koa-bodyparser');
var app = new Koa();

app.use(views('views', {
    extension: 'ejs'
}))

app.use(bodyParser());

router.get('/', async(ctx) => {
    await ctx.render('index');
});


// 接收post提交的数据
router.post('/doAdd', async(ctx) => {
    console.log(ctx.request.body);
    ctx.body = ctx.request.body; // 获取表单提交的数据
})

// 启动路由
app
    .use(router.routes()) //启动路由
    .use(router.allowedMethods()); //可以配置也可以不配置，建议配置
app.listen(3000);

koa-static静态资源中间件

1、安装koa-static

npm install koa-static --save

2、引入配置中间件

const static = require('koa-static');

app.use(static(
	path.join(_dirname,'public')	
));

3、使用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dyfeXbc-1599263626834)(/Users/mac/Desktop/MarkDown /nodejs笔记/koa/koa笔记二/1.jpg)]

app.js:

var Koa = require('koa'),
    router = require('koa-router')(),
    views = require('koa-views'),
    bodyParser = require('koa-bodyparser'),
    static = require('koa-static');
var app = new Koa();

app.use(views('views', {
    extension: 'ejs'
}))

// 配置静态web服务中间件
// app.use(static('static')); // 首先去static目录找，如果能找到返回对应的文件，找不到next()
app.use(static(__dirname + '/static'));


app.use(bodyParser());

router.get('/', async(ctx) => {
    await ctx.render('index');
});


// 接收post提交的数据
router.post('/doAdd', async(ctx) => {
    console.log(ctx.request.body);
    ctx.body = ctx.request.body; // 获取表单提交的数据
})

// 启动路由
app
    .use(router.routes()) //启动路由
    .use(router.allowedMethods()); //可以配置也可以不配置，建议配置
app.listen(3000);

Index.ejs:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/basic.css">
</head>

<body>

    <h2 class="title">这是一个h2标签</h2>

    <form action="/doAdd" method='POST'>
        用户名:
        <input type="text" name="username">
        <br>
        <br> 密 码 :
        <input type="password" name='password'>
        <br>
        <br>
        <button type="submit">提交</button>
    </form>
</body>

</html>

basic.css:

.title {
    color: red;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OaPZ7gl-1599263626836)(/Users/mac/Desktop/MarkDown /nodejs笔记/koa/koa笔记二/2.jpg)]

art-template模板引擎

常见模板引擎的性能对比

使用与koa的模板引擎选择非常多，比如jade、ejs、nunjucks、art-template等。
art-template是一个简约、超快的模板引擎。
它采用作用域声明的技术来优化模板渲染速度，从而获得接近Javascript极限的运行性能，并且支持Nodejs和浏览器。
art-template支持ejs语法，也可以用自己的类似angular数据绑定的语法。
官网
中文文档

模板

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。

标准语法

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}

原始语法

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

原始语法兼容 EJS、Underscore、LoDash 模板。

渲染模板

var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
    user: {
        name: 'aui'
    }
});

核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

语法:

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

输出

标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

模板一级特殊变量可以使用 $data 加下标的方式访问：

{{$data['user list']}}

原文输出

标准语法

{{@ value }}

原始语法

<%- value %>

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

条件

标准语法

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

循环

标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

target 支持 array 与 object 的迭代，其默认值为 $data。
$value 与 $index 可以自定义：{{each target val key}}。

变量

标准语法

{{set temp = data.sub.content}}

原始语法

<% var temp = data.sub.content; %>

模板继承

标准语法

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

原始语法

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>
<!--index.art-->
{{extend './layout.art'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

渲染 index.art 后，将自动应用布局骨架。

子模板

标准语法

{{include './header.art'}}
{{include './header.art' data}}

原始语法

<% include('./header.art') %>
<% include('./header.art', data) %>

data 数默认值为 $data；标准语法不支持声明 object 与 array，只支持引用变量，而原始语法不受限制。
art-template 内建 HTML 压缩器，请避免书写 HTML 非正常闭合的子模板，否则开启压缩后标签可能会被意外“优化。

过滤器

注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};

过滤器函数第一个参数接受目标值。

标准语法

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{{value | filter}} 过滤器语法类似管道操作符，它的上一个输出作为下一个输入。

原始语法

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

如果想修改 {{ }} 与 <% %>，请参考解析规则。

cookie的使用

保存在浏览器客户端。
可以让我们在同一个浏览器访问同一个域名的时候实现数据共享。(HTTP是无状态协议。简单的说，当你浏览了一个页面，然后转到同一个网页的另一个页面，服务器无法认识到这是同一个浏览器访问同一个网站。每一次的访问，都是没有任何关系的)

cookie大概能做什么

保存用户信息。
猜你喜欢功能。
十天内免登陆功能。
浏览历史记录。
cookie实现购物车。
多页面之间的数据传递。

Koa Cookie的使用

1、Koa中设置Cookie的值

ctx.cookies.set(name,value,[options])

通过options设置cookie name的value：

options名称	options值
maxAge	一个数字表示从Date.now()得到的毫秒数
expires	cookie过期的Date
path	cookie路径，默认是’/’
domain	cookie域名
secure	安全 cookie默认false，设置成true表示只有https可以访问
httpOnly	是否只是浏览器课访问cookie，默认是true
overwrite	是一个布尔值，表示是否覆盖以前设置的同名的cookie(默认是false)，如果是true，在同一请求中设置相同名称的所有Cookie(不管路径或域)是否在设置Cookie时从Set-Cookie标头中过滤掉。

2、Koa中获取Cookie的值

ctx.cookies.get('name');

正常配置：

ctx.cookies.set('userinfo','zhansan',{
	maxAge:60*1000*60
});

汉字转换成base64编码base64编码转换成汉字

console.log(new Buffer('张三').toString('base64')); // 转换成base64字符
//5byg5LiJ
console.log(new Buffer('5byg5LiJ','base64').toString()); // 还原base
//张三

Koa Session的使用

session是另一种记录客户状态的机制，不同的是Cookie保存在浏览器客户端，而session保存在服务器上，相对来说更安全些。

Session的工作流程

当浏览器访问服务器并发送第一次请求时，服务器端会创建一个session对象，生成一个类似key，value的键值对，然后将key(cookie)返回到浏览器客户端，浏览器下次在访问时，携带key(cookie)，找到对应的session(value)。客户的信息都保存在session中。

安装

$ npm install koa-session

实例

const session = require('koa-session');
const Koa = require('koa');
const app = new Koa();
 
app.keys = ['some secret hurr'];
 
const CONFIG = {
  key: 'koa.sess', /** (string) cookie key (default is koa.sess) */
  /** (number || 'session') maxAge in ms (default is 1 days) */
  /** 'session' will result in a cookie that expires when session/browser is closed */
  /** Warning: If a session cookie is stolen, this cookie will never expire */
  maxAge: 86400000,
  autoCommit: true, /** (boolean) automatically commit headers (default true) */
  overwrite: true, /** (boolean) can overwrite or not (default true) */
  httpOnly: true, /** (boolean) httpOnly or not (default true) */
  signed: true, /** (boolean) signed or not (default true) */
  rolling: false, /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (default is false) */
  renew: false, /** (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)*/
  secure: true, /** (boolean) secure cookie*/
  sameSite: null, /** (string) session cookie sameSite options (default null, don't set it) */
};
 
app.use(session(CONFIG, app));
// or if you prefer all default config, just use => app.use(session(app));
 
app.use(ctx => {
  // ignore favicon
  if (ctx.path === '/favicon.ico') return;
 
  let n = ctx.session.views || 0;
  ctx.session.views = ++n;
  ctx.body = n + ' views';
});
 
app.listen(3000);
console.log('listening on port 3000');

阿牛大牛中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
koa中间件、art-template模板引擎、cookie与session的使用。

文章目录koa post提交数据原生Nodejs获取post提交数据Koa 中koa-bodyparser中间件的使用koa-static静态资源中间件art-template模板引擎常见模板引擎的性能对比模板渲染模板核心方法语法:输出原文输出条件循环变量模板继承子模板过滤器cookie的使用cookie大概能做什么Koa Cookie的使用汉字转换成base64编码base64编码转换成汉字Koa Session的使用Session的工作流程安装实例koa post提交数据原生Nodejs获取post
复制链接

扫一扫