Ejs构建模块网站

最新推荐文章于 2022-11-28 19:39:58 发布
最新推荐文章于 2022-11-28 19:39:58 发布
阅读量539 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/china_chen_p_l/article/details/79716719
版权

这是ejs在githup上的项目，可以通过它进行了解
https://github.com/tj/ejs

使用 npm来安装ejs模块依赖
npm install ejs –save

ejs可以用来传参，下图中用到的module.exports = 代码 是ES6中的语法
<%= 参数名 %> 是ejs的语法

module.exports = `
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Koa Server HTML</title>
            <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
        </head>
        <body>
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h1>Hi <%= you %></h1>
                        <h2>Hello <%= me %>
                    </div>
                    <div class="col-md-4">
                        <p>Koa静态页面</p>
                    </div>
                </div>
            </div>
        </body>
    </html>
`

server/tpl/index.js
pugTpl: 这句代码跟本次笔记无关

module.exports = {
    htmlTpl: require('./html'),
    ejsTpl: require('./ejs'),
    pugTpl: require('./pug')
}

pugTpl 跟本次笔记无关

server/index.js

const Koa = require('koa')
const app = new Koa()
const {htmlTpl, ejsTpl, pugTpl} = require('./tpl')
const ejs = require('ejs')
// const pug = require('pug')
app.use(async (ctx, next) => {
    ctx.type = 'text/html; charset=utf-8'
    ctx.body = ejs.render(ejsTpl, {
        you: 'chenpeilun',
        me: 'shenyuwan'
    })
})
app.listen(5566)

在ctx.body = ejs.render(pugTpl, {
you: ‘chenpeilun’,
me: ‘shenyuwan’
})

这跟的就是ejs中的render方法，将you，me这两个参数赋值并传给ejsTpl模块

然后在网站中输入localhost:5566就可以显示模板页面

China_chen_p_l
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入浅析Nodejs的Http模块
01-20
 我们知道传统的HTTP服务器是由Aphche、Nginx、IIS之类的软件来搭建的，但是Nodejs并不需要，Nodejs提供了http模块，自身就可以用来构建服务器，例如： var http = require(http); http.createServer(function(req...
php ejs,EJS模板引擎实例详解
weixin_36155267的博客
03-11 250
前面的话nodejs的模板引擎有很多， EJS是比较简单和容易上手的。本文将详细介绍EJS概述EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装【安装】ejs可以配合express框架使用，或直接在node中/浏览器中使用$ npm instal...
第三方插件-EJS
qq_60976312的博客
02-10 341
第三方插件-EJS概念 优缺点 使用 作用
EJS模板语言学习
aina0674的博客
04-01 204
一、快速安装 [gitHub地址克隆] (https://github.com/mde/ejs) [官方网址] (https://www.ejs.co/) [官方网址中文] (https://ejs.bootcss.com/) [EJS模板资源] (https://github.com/mde/ejs/releases/tag/v2.5.8) <script src="./lib/...
node.js中使用ejs渲染数据
张晓健的博客
11-28 1043
第三步 ： 判断路由 根据访问不同的路由 渲染不同的ejs模板引擎。{"pid":1,"pname":"小米1","price":2888},{"pid":2,"pname":"小米2","price":3888},{"pid":3,"pname":"小米3","price":4888},{"pid":4,"pname":"小米4","price":5888},{"pid":5,"pname":"小米5","price":6888},第一步 ： ejs的安装 npm i ejs。
node express ejs 搭建个人网站（1）
越努力越幸运
03-01 2308
首先安装完node版本后，在要建立的web目录下安装express，（这里我的node版本是4.5.0），然后输入命令 express -e ejs myweb 安装ejs项目   安装成功后，cd进入myweb目录，输入npm install 它会自动安装项目所需要的依赖项.     然后进入cd进入bin 文件夹，运行node www   运行成功后，在浏览输入，可以显
Blog:使用Koa2 + Sequelize + EJS +语义UI构建的博客
05-07
博客-通用博客系统使用Nodejs开发的博客系统主要模块：Koa2，Sequelize（ORM），EJS（前端引擎），语义UI 预览：要求Nodejs v9.0 + MySQL 5.3以上特征添加，删除，更新文章存档文章项目页面简介页安装首先安装所有...
入口：入口管理：易于使用的MVP，入口是使用Node.js和MongoDB的Mongoose数据库构建的，它使用ejs（嵌入式javascript模板），还支持使用nodemailer模块发送EMAIL和SMS和Nexmo API
02-03
指数 关于 这是入口一个易于使用的MVP入境管理，入口是使用内置和MongoDB数据库中使用，它采用 （嵌入JavaScript模板），它也支持发送使用电子邮件和短信和分别，这该项目已作为在实习挑战提交的而得以实施，它符合...
comps:HTML模板的专业模块化构建器
05-18
安装npm install comps --save启动与ejs一起使用，在ejs渲染之前进行编译和渲染。 var comps = require ( 'comps' )var ejs = require ( 'ejs' )/** * Custom method for loading component's template file by id *...
书店：vue + koa + node + ejs开发webapp书城
02-03
项目中遇到几个比较复杂的模块，如阅读器，书城首页，搜索模块等。的主页，书籍详情页，书籍列表页，个人主页，搜索功能。采用Vue数据驱动，Koa构建服务器运行环境，数据模拟 技术栈 Vue ES6 考阿 Zepto 本地存储...
创建第一个node，express，ejs网站详细介绍
前端技术教程
08-20 1837
安装过程： npm install -gd express npm install -g express-generator express -V //查看版本，现在一般都是4.x系列的 express ejs myapp //创建一个ejs模板项目 或者express myapp//这创建的是jade模板，已经成功测试，不管是jade，ejs都可以通过下面的方法来进行访问。 //进入app.js文件进行修改：
前端开发--CDN优化加载速度
weixin_51059952的博客
09-17 3154
CDN全称叫做“Content Delivery Network”，中文叫**内容分发网络**。我们用它来**提高访问速度**。把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。 前端项目中使用CDN好处： 1. 减少应用打包出来的包体积 2. 加快静态资源的访问-cdn服务器集群-就近返回 3. 利用浏览器缓存，不会变动的文件长期缓存 可以适当提高第三方插件的链接速度, 但是开发的时候我们还是可以在本地用npm下载, 但是上线后要配置cdn地址, 用户的浏览
EJS的基础使用
weixin_48864616的博客
12-16 3854
使用之前先看看之前的用法 生成相应的包结构 npm i express const express = require('express') const app = express() const port = 3001 app.get("/list",(req,res)=>{ //分页效果 let {page} = req.query; let arr = ["华为Mate40Pro","华为Mate40RS","华为P40","华为P40 pro","华为 nova9
创建ejs项目_节点和EJS项目（1）
cumt30111的博客
07-29 488
创建ejs项目Hello! In the last articles, we spoke much about EJS template engine. Let's take some time and see how it can be applicable in a small project? 你好！ 在上一篇文章中，我们谈到了EJS模板引擎。 让我们花一些时间，看看如何将其应用于小型项目...
EJS模板引擎简介及使用
归兮的博客
09-23 4081
EJS模板引擎的简介及使用、引入模块、错误处理中间件、动态路由请求的设置及获取参数
express中创建ejs项目以及引用ejs模板引擎
纸上得来终觉浅，绝知此事要躬行
06-21 4568
1.express创建ejs项目 在早期的视频还有一些Nodejs书籍中提到的以下命令创建项目结构： express -t ejs 项目名称  （测试发现ejs参数是可以自定义的，比如express -t jian bolg一样可行） 当运行这个命令后查看views目录，发现安装的模板引擎是jade，而不是ejs，查阅后发现express 3.0之后创建ejs不再用这个命令，而是： exp
ejs模板引擎的使用
weixin_34320159的博客
09-19 93
引入ejs.min.js 创建模板，以<%=jsCode%>包裹起来其余的html和html结构一样 　　focusTemplateData是模板使用的数据,使用$.each()方法遍历绑定数据 　　　 　　3.获得模板绑定数据 通过id获取模板 　　 　　4.渲染到页面 　　 转载于:https://www.cnblogs.com/Scar007/p/...
node.js 安装配置 npm ,express,ejs模板
weixin_34236497的博客
03-02 313
本人近端时间看了下node.js，学习是从菜鸟教程 http://www.runoob.com/nodejs/nodejs-tutorial.html 入门。 首先讲一下体会，首先自己是个java程序员，刚接触node.js，有点新鲜就去学了，首先是安装windows版的node.js。如果不熟悉环境配置，要选择msi格式的，因为安装的过程中会把环...
node.js使用ejs模板
04-22 7524
用模板来呈现结构不变的网页时非常方便的，下面记录一下ejs模板的简单使用。进入一个文件夹，然后安装好express和ejs即可。接着新建一个views文件夹，必须叫views，否则报错。view里面就是一个HTML文件，然后把HTML文件的后缀名改成ejs就OK，这样就是一个ejs模板了。dd.js则是写nodeJS代码的。然后去content.ejs里面设置变量，这个是ejs的模板语法，把变量放...
ejs include
最新发布
05-21
EJS（Embedded JavaScript）是一种基于JavaScript的模板引擎，可以用来生成HTML、XML等文档。EJS提供了一种简单的方式来将数据嵌入到HTML页面中。其中，include指令用于在EJS模板中引入其他模板文件。 使用include指令，需要在模板中使用以下语法： ``` <% include path/to/other/template.ejs %> ``` 其中，path/to/other/template.ejs是要引入的模板文件的路径。注意，在使用include指令时，被引入的模板文件中不应该包含任何与当前模板文件相同的变量或函数，否则可能会导致冲突。 需要注意的是，EJS并没有内置的include功能，而是通过在模板中定义一个自定义的include函数来实现的。因此，在使用include指令之前，需要在程序中定义这个函数。下面是一个例子： ``` const ejs = require('ejs'); const fs = require('fs'); ejs.filters.include = function (path) { const file = fs.readFileSync(path, 'utf8'); return ejs.render(file, this); }; const template = ` <html> <head> <title>Example</title> </head> <body> <% include path/to/other/template.ejs %> </body> </html>`; const data = { name: 'John' }; const output = ejs.render(template, data); console.log(output); ``` 在上面的例子中，我们首先定义了一个自定义的include函数，然后在模板中使用include指令来引入其他模板文件。当渲染模板时，EJS会自动调用include函数来处理这些指令，并将被引入的模板文件和当前模板文件的数据合并起来生成最终的HTML输出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值