koa2入门系列（三）
koa页面渲染
上一节我们通过koa的路由中间件，在上下文的body属性中渲染页面内容，但那这是基本的少量字符串内容，而我们前台所用的页面，或者者浏览器所渲染的页面，基本都是html标签的页面，假如想在koa路由中渲染标签内容，又如何做呢，接下来看代码
1、渲染html内容
const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router = new Router();app.use(async (ctx, next) => { await next();});router.get('/', async ctx => { ctx.type = `text/html;charset=utf-8`; ctx.body = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <h2>test</h2> </body> </html> `;});//启动路由app.use(router.routes());app.use(router.allowedMethods());app.listen(3000);重启服务，刷新浏览器，就会看到浏览器显示加粗的test字样。
众所周知，日常开发中，页面需要展现的标签内容有时候是很庞大的，而这时候body又不可能去填写那么多的内容，这时候就得益于编程中的模块化思想了：就是把想要的内容当成一个模块引入。
2、渲染js标签文件
接下来新建一个html.js文件，把上面要展现的html内容复制过去
module.exports = `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <h2>test</h2> </body> </html>`;而后在app.js中引入
const Koa = require('koa');const Router = require('koa-router');const testTpl = require('./html.js');console.log(testTpl);const app = new Koa();const router = new Router();app.use(async (ctx, next) => { await next();});router.get('/', async ctx => { ctx.type = `text/html;charset=utf-8`; ctx.body = testTpl;});//启动路由app.use(router.routes());app.use(router.allowedMethods());app.listen(3000);重启服务器，刷新浏览器，这样页面就能展现同样的内容。
3、模版渲染
尽管当作模块引入也能达到我们想要的效果，但html.js毕竟只是一个js文件，跟我们正常使用的html文件还是不一样，假如想要使用html文件，就要使用本节需要用到的koa-views中间件了。
- 首先下载
yarn add koa-views ejs，其中ejs是模版库，用来渲染模版文件的，具体用法参考官网。 - 而后在项目根目录新建
views文件夹，并在该目录下新建index.ejs和news.ejs、blocks/header.ejs文件，文件内的内容如下
<!DOCTYPE html><html lang="en"> <!-- index.ejs --> <head> <meta charset="UTF-8" /> <title>首页</title> </head> <body> <!-- 模版语法，include包含的路径是以views配置的文件夹为准的 --> <%- include('blocks/header.ejs') %> <p><%= commonData %></p> <p><%= title %></p> <ul> <% for(var i = 0;i < list.length;i++){ %> <li><%= list[i] %></li> <% } %> </ul> </body></html><!DOCTYPE html><html lang="en"> <!-- news.ejs --> <head> <meta charset="UTF-8" /> <title>首页</title> </head> <body> <!-- 模版语法，include包含的路径是以views配置的文件夹为准的 --> <%- include('blocks/header.ejs') %> <p><%= commonData %></p> <p><%= title %></p> <ul> <% for(var i = 0;i < list.length;i++){ %> <li><%= list[i] %></li> <% } %> </ul> </body></html><!-- header.ejs --><h1>这是一个头部模块</h1>最后配置app.js文件，使用模版文件
const Koa = require('koa');const Router = require('koa-router');const Views = require('koa-views');const testTpl = require('./html.js');const app = new Koa();const router = new Router();// 配置模版引擎中间件，.html和.ejs配置取其一// 匹配.html后缀模版文件// app.use(// Views('views', {// map: { html: 'ejs' }// })// );// 匹配.ejs后缀模版文件app.use( Views('views', { extension: 'ejs' }));app.use(async (ctx, next) => { await next();});// 配置公共信息的中间件app.use(async (ctx, next) => { ctx.state.commonData = '中间件：公共信息配置，其中commonData是随便起的名字'; ctx.state.commonData2 = '中间件2：公共信息配置，其中commonData2是随便起的名字'; // 要显式向下继续执行 await next();});// 配置首页模版信息router.get('/', async ctx => { const title = 'Hello world !'; const list = ['Charles', 'Jack', 'Black', 'Lusy']; /** * 利用上下文的render函数渲染匹配到的文件 * index：匹配的中间件views文件夹下的文件名，后缀是.html或者.ejs * {title,list}：匹配的文件中使用的变量 */ await ctx.render('index', { title, list });});router.get('/news', async ctx => { await ctx.render('news', {});});router.get('/html', async ctx => { ctx.type = `text/html;charset=utf-8`; ctx.body = testTpl;});//启动路由app.use(router.routes());app.use(router.allowedMethods());app.listen(3000);重启node，刷新浏览器
输入对应的/news和/html也能看到对应的内容。
到这里，koa模版渲染中间件的基本使用就完成了。
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » koa2入门系列（三）
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » koa2入门系列（三）
