node Koa框架+nunjucks模版开发简易的后台

初步文件结构如下

开发所需包 package.json 如下：

{"name": "koa_","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"koa": "^2.6.1","koa-nunjucks-2": "^3.0.2","koa-router": "^7.4.0","koa-static": "^5.0.0","nunjucks": "^3.1.3"}
}
复制代码

index文件

const path = require('path');
const Koa = require('koa');
//不必引入nunjucks  直接用这个中间件就行
const koaNunjucks = require('koa-nunjucks-2');
const loadStatic = require('koa-static');
const Router = require('koa-router');//引入路由分支
const index = require('./router/index');const router = new Router();
const app = new Koa();
//加载HTML
app.use(koaNunjucks({//文件后缀ext: 'html',//文件位置path: path.resolve(__dirname, 'public'),//模版配置nunjucksConfig: {autoescape: true,trimBlocks: true,web:{async:true},lstripBlocks : true,watch:true//当模板变化时重新加载。使用前请确保已安装可选依赖 chokidar。}
}));//其他文件内接口 引入
router.use('/index', index.routes(), index.allowedMethods());
app.use(router.routes());//加载静态文件 css img js
app.use(loadStatic(path.resolve(__dirname, 'public')));
//监听3000端口
app.listen(3000);复制代码

接口

const Router = require('koa-router');
var router = new Router();
router.get('/',async (ctx, next) => {//返回的模版名字是index   data是模版传值ctx.render('html/index',{data:[1,2,3]});})
module.exports=router;复制代码

index.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>Title</title><link rel="stylesheet" href="../css/index.css">
</head>
<body>
<!--<img src="../img/aa.jpg" alt="">-->
{{ data}}{% for item in data %}<li>{{ item }}</li><li>....{{item}}....</li>
{% endfor %}<script src="../js/index.js"></script>
</body>
</html>复制代码

访问本地 localhost:3000/index/

转载于:https://juejin.im/post/5be930b06fb9a04a0e2cb7fb

node Koa框架+nunjucks模版开发简易的后台相关推荐

Vue框架入门(一)---开发简易计算器
涉及知识: HTML.CSS.JavaScript Vue(v-for.v-model.v-on.v-clock) Gitee仓库 :https://gitee.com/vgtime123/Calcu ...
Node.js框架对比：Express/Koa/Hapi
Node.js框架对比:Express/Koa/Hapi 引言 Express.js是当今使用最广泛的Node.js Web应用程序框架.它似乎是大多数Node.js Web应用程序中的基本依赖项,即 ...
基于 Koa 的微服务 Node.js 框架设计思路与简单实现
大家好,我是前端点线面,毕业于华中科技大学,非科班出身的一枚新时代农民工,现在是百度前端研发工程师,著有<前端百题斩>.数十篇学习思维导图(go.React.Redux.Vue.Vuex. ...
Koa框架教程,Koa框架开发指南,Koa框架中文使用手册,Koa框架中文文档
我的博客:CODE大全:www.codedq.net:业余草:www.xttblog.com:爱分享:www.ndislwf.com或ifxvn.com. Koa -- 基于 Node.js 平台的下 ...
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班
(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班从零到壹全栈部落产品:个人独立博客,21点见 Vue + Node + MongoDB支持服务端渲染的博客系统(5天) 开发环境技术 ...
vue如何配置服务器端跨域_客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解...
本篇博客主要说明: 前后端框架(本例中是vue和koa)如何发送请求?获取响应? 以及跨域问题如何解决? vue部分: import App from './App.vue' import Axios ...
13 款惊艳的 Node.js 框架——第1部分
2019独角兽企业重金招聘Python工程师标准>>> [编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 AP ...
Node.js 框架设计及企业 Node.js 基础建设相关讨论
大家好,我是若川.19年我写的 lodash源码文章投稿到海镜大神知乎专栏竟然通过了,后来20年海镜大神还star了我的博客,同时还转发了我的微博.时间真快啊.今天分享这篇Node.js的讨论. 2 ...
知乎：如何评价阿里开源的企业级 Node.js 框架 egg？ #18
知乎: 如何评价阿里开源的企业级 Node.js 框架 egg? #18 搬自我在知乎的问答: https://www.zhihu.com/question/50526101/answer/14495 ...
【nodeJS】从nodejs原生的博客网站搭建到 koa框架实现个人博客网站搭建
nodejs实现搭建博客网站前言:原java后端渣渣一枚,因项目需要转学了nodejs进行开发,正式进行项目开发之前,师傅安排了一些项目训练,先熟悉js语法,然后熟悉nodejs,再慢慢重构向框架的 ...

node Koa框架+nunjucks模版开发简易的后台

node Koa框架+nunjucks模版开发简易的后台相关推荐

最新文章

热门文章