{"id":2382,"date":"2020-02-01T18:40:18","date_gmt":"2020-02-01T10:40:18","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2382"},"modified":"2021-06-25T20:18:27","modified_gmt":"2021-06-25T12:18:27","slug":"koa2-%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e8%bf%9b%e9%98%b6%e5%9b%9b-ejs%e6%a8%a1%e6%9d%bf","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2382","title":{"rendered":"koa2 \u4ece\u5165\u95e8\u5230\u8fdb\u9636(\u56db)-ejs\u6a21\u677f"},"content":{"rendered":"

\u4e4b\u524d\u7684\u6587\u7ae0\u6211\u4eec\u4ecb\u7ecd\u4e86\u4e00\u4e0b koa \u4e2d\u95f4\u4ef6 \u4ee5\u53ca koa \u4e2d\u95f4\u4ef6\u7684\u6d0b\u8471\u56fe\u6267\u884c\u6d41\u7a0b\uff0c\u672c\u7bc7\u6587\u7ae0\u6211\u4eec\u6765\u770b\u4e00\u4e0b koa \u4e2d\u4f7f\u7528 ejs \u6a21\u677f\u53ca\u9875\u9762\u6e32\u67d3\u3002<\/p>\n

\u5728 Express \u4e2d\uff0c\u6211\u4eec\u7ecf\u5e38\u4f1a\u7528 ejs \u6a21\u677f\u6765\u6e32\u67d3\u524d\u7aef\u9875\u9762\uff0c\u5728 koa \u4e2d\u540c\u6837\u53ef\u4ee5\u4f7f\u7528 ejs \u6a21\u677f\u5f15\u64ce\uff0c\u5173\u4e8e ejs \u6a21\u677f\u5f15\u64ce\u7684\u7528\u6cd5\u8fd9\u91cc\u5c31\u4e0d\u505a\u8fc7\u591a\u8bf4\u660e\u4e86\uff0chttps:\/\/ejs.bootcss.com\/<\/a>\uff0c\u8fd9\u662f\u5b98\u7f51\uff0c\u4e3a\u6211\u4eec\u505a\u4e86\u8be6\u7ec6\u7684\u6559\u7a0b\u3002<\/p>\n

\u5728 koa \u4e2d\u4f7f\u7528 ejs \u6211\u4eec\u9700\u8981\u5b89\u88c5 koa-views \u548c ejs \u4e24\u4e2a\u6a21\u5757\uff1a<\/p>\n

\u5b89\u88c5 koa-views npm installkoa-views\u00a0–save\u00a0\u00a0\/ cnpm install koa-views\u00a0–save<\/p>\n

\n
\u5b89\u88c5 ejs npm install ejs –save \/ cnpm install ejs –save<\/div>\n<\/div>\n<\/blockquote>\n

\u7136\u540e\u5c31\u53ef\u4ee5\u5728\u6211\u4eec\u7684\u9879\u76ee\u4e2d\u914d\u7f6e\u548c\u4f7f\u7528\u4e86\uff0c\u6211\u4eec\u5728\u4e4b\u524d\u7684\u9879\u76ee\u4e2d\u5c06 app.js \u6539\u4e3a\u5982\u4e0b\uff1a<\/p>\n

[java]
\n\/\/\u5f15\u5165 koa\u6a21\u5757
\nconst Koa = require(‘koa’);
\nconst Router = require(‘koa-router’);
\nconst views = require(‘koa-views’);<\/p>\n

\/\/\u5b9e\u4f8b\u5316
\nconst app = new Koa();
\nconst router = new Router();<\/p>\n

\/\/\u914d\u7f6e\u6a21\u677f\u5f15\u64ce\u4e2d\u95f4\u4ef6<\/p>\n

\/\/ \u6a21\u677f\u7684\u540e\u7f00\u540d\u662f.html
\n\/\/ app.use(views(‘views’, {
\n\/\/ map: {html: ‘ejs’}
\n\/\/ }));
\n\/\/ \u6a21\u677f\u7684\u540e\u7f00\u540d\u662f.html
\napp.use(views(‘views’, {
\n extension: ‘ejs’
\n}));<\/p>\n

\/\/\u5199\u4e00\u4e2a\u4e2d\u95f4\u4ef6\u914d\u7f6e\u516c\u5171\u7684\u4fe1\u606f
\napp.use(async (ctx, next) => {
\n ctx.state.commonData = "\u8fd9\u662f\u4e00\u4e2a\u516c\u6709\u6570\u636e\uff0c\u6bcf\u4e2a\u9875\u9762\u90fd\u80fd\u5f15\u7528";
\n \/\/ \u7ee7\u7eed\u5411\u4e0b\u5339\u914d\u8def\u7531
\n await next();
\n});<\/p>\n

router.get(‘\/’, async (ctx) => {
\n let title = "hello world";
\n let list = ["aaa", "bbb", "ccc"];<\/p>\n

await ctx.render(‘index’, {
\n title,
\n list,
\n });
\n});<\/p>\n

router.get(‘\/news’, async (ctx) => {
\n await ctx.render(‘news’, {});
\n});<\/p>\n

\/\/\u542f\u52a8\u8def\u7531
\napp.use(router.routes());
\napp.use(router.allowedMethods());<\/p>\n

app.listen(3000);
\n[\/java]<\/p>\n

\u9996\u5148\u5728\u6a21\u5757\u4e2d\u5f15\u5165 koa-views\uff1b\u7136\u540e\u6211\u4eec\u7528\u4e2d\u95f4\u4ef6 app.use(“views”,{ }) \u7684\u5f62\u5f0f\u5f15\u5165 ejs \u6a21\u677f\u5f15\u64ce\uff0c\u5176\u4e2d\u6ce8\u91ca\u6389\u7684\u4e3a\u7b2c\u4e00\u79cd\uff0c\u662f\u4ee5 .html \u7ed3\u5c3e\uff0c\u7b2c\u4e8c\u79cd\u662f\u4ee5 .ejs \u7ed3\u5c3e\u3002<\/p>\n

“views” \u662f\u6211\u4eec\u8981\u6307\u5b9a\u7684\u76ee\u5f55\uff0c\u6211\u4eec\u5199\u6210 “views”\uff0c\u5c31\u9700\u8981\u5728\u9879\u76ee\u76ee\u5f55\u4e2d\u521b\u5efa\u4e00\u4e2a views \u76ee\u5f55\u6765\u5b58\u653e\u6211\u4eec\u7684 ejs \u6587\u4ef6\u3002<\/p>\n

\u4e4b\u540e\u6211\u4eec\u5199\u4e86\u4e00\u4e2a\u5e94\u7528\u7ea7\u4e2d\u95f4\u4ef6\u6765\u5b58\u653e\u4e00\u4e2a\u5171\u6709\u7684\u6570\u636e\uff0c\u8fd9\u4e2a\u4e2d\u95f4\u4ef6\u53ef\u4ee5\u53bb\u4e0a\u4e00\u7bc7\u6587\u7ae0\u770b\u4e00\u4e0b\u5177\u4f53\u4f5c\u7528\uff0c\u8fd9\u91cc\u4e0d\u8fc7\u591a\u89e3\u91ca\u3002<\/p>\n

\u7136\u540e\u6211\u4eec\u5728 router.get(“\/”, ) \u8def\u7531\u4e2d\u5b58\u653e\u4e86\u4e24\u6761\u6570\u636e\uff0c\u4e00\u6761\u5b57\u7b26\u4e32\uff0c\u4e00\u6761\u6570\u7ec4\u3002<\/p>\n

\u6211\u4eec\u4e0d\u518d\u4f7f\u7528 stx.body=”” \u7684\u65b9\u5f0f\u5411\u524d\u7aef\u8f93\u51fa\u5185\u5bb9\uff0c\u800c\u662f\u4f7f\u7528 ctx.render(“index”,{ }) \u5f62\u5f0f\u5411\u524d\u7aef\u8f93\u51fa\u5185\u5bb9\uff0c\u5176\u4e2d “idenx” \u4e3a\u6211\u4eec\u5728 “views” \u76ee\u5f55\u4e2d\u5b9a\u4e49\u7684 index.ejs \u7684\u6587\u4ef6\u540d\u79f0\uff0c{ } \u5185\u4e3a\u6211\u4eec\u8981\u4f20\u5165\u7684\u6570\u636e\u3002<\/p>\n

\u5269\u4e0b\u7684\u5185\u5bb9\u5c31\u548c\u6211\u4eec\u4e4b\u524d\u9879\u76ee\u7684\u4e00\u6837\u5373\u53ef\uff0c\u6211\u4eec\u518d\u6765\u770b\u4e00\u4e0b\u73b0\u5728\u7684\u9879\u76ee\u76ee\u5f55\uff1a<\/p>\n

 <\/p>\n

\u5982\u679c\u6211\u4eec\u5728 views \u76ee\u5f55\u4e2d\u5b9a\u4e49\u7684\u4ee5 .html \u7ed3\u5c3e\uff0c\u5c06\u4e0a\u9762\u4ee3\u7801\u7684 html \u6ce8\u91ca\u89e3\u5f00\uff0c\u5c06 ejs \u6ce8\u91ca\u6389\u5373\u53ef\u3002<\/p>\n

\u7136\u540e\u6211\u4eec\u6765\u770b\u4e00\u4e0b index.ejs \u4e2d\u7684\u4ee3\u7801\uff1a<\/p>\n

[java]
\n<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n <meta charset="UTF-8">
\n <title><\/title>
\n<\/head>
\n<body>
\n <% include blocks\/header.ejs %>
\n <p><%= commenData %><\/p>
\n <p><%= title %><\/p>
\n <ul>
\n <% for(var i = 0;i < list.length;i++){ %>
\n <li><%= list[i] %><\/li>
\n <% } %>
\n <\/ul>
\n<\/body>
\n<\/html>
\n[\/java]<\/p>\n

new.ejs<\/p>\n

[java]
\n<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n <meta charset="UTF-8">
\n <title><\/title>
\n<\/head>
\n<body>
\n<% include blocks\/header.ejs %>
\n<h2><%= commonData %><\/h2>
\n<\/body>
\n<\/html>
\n[\/java]<\/p>\n

\u5173\u4e8e ejs \u6587\u4ef6\u5185\u7684\u8fd0\u7b97\u7b26\u53f7 <%%> \u5728\u8fd9\u91cc\u5c31\u4e0d\u505a\u8fc7\u591a\u89e3\u91ca\u4e86\uff0c\u5927\u5bb6\u53ef\u4ee5\u53bb ejs \u5b98\u7f51\u5b66\u4e60\uff0c\u4e0d\u662f\u5f88\u96be\u3002<\/p>\n

\u6700\u7ec8\u7ed3\u679c\u5982\u4e0b\uff1a<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u53ef\u4ee5\u770b\u51fa\u6211\u4eec\u7684 ejs \u6a21\u677f\u5f15\u64ce\u8fd0\u884c\u7684\u6ca1\u6709\u95ee\u9898\uff0c\u6570\u636e\u4e5f\u90fd\u6b63\u5e38\u663e\u793a\u5728\u4e86\u9875\u9762\u4e2d\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

\u4e4b\u524d\u7684\u6587\u7ae0\u6211\u4eec\u4ecb\u7ecd\u4e86\u4e00\u4e0b koa \u4e2d\u95f4\u4ef6 \u4ee5\u53ca koa \u4e2d\u95f4\u4ef6\u7684\u6d0b\u8471\u56fe\u6267\u884c\u6d41\u7a0b\uff0c\u672c\u7bc7\u6587\u7ae0\u6211\u4eec\u6765\u770b\u4e00\u4e0b koa […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[107,105],"tags":[],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2382"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2382"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2382\/revisions"}],"predecessor-version":[{"id":3267,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2382\/revisions\/3267"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}