EJS模板语言学习

2019/04/01 18:24
阅读数 5

一、快速安装

[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/ejs.js"></script>

1、NPM本地安装

npm install ejs

二、快速上手

这里从基础开始,因为我没有安装express,所以从创建项目开始 全局快速构建express服务器,前提是你已全局安装node和express

npm install express-generator -g

选择使用ejs模板,默认是jade,如果我们不修改,结果如下:

express myapp -e  === express myapp --view=ejs

myapp是项目名,后面一部分是设置采取哪种模块,现在来看下效果:

初始化安装依赖 这一步其实就是安装package.json文件里面的所有依赖文件,安装完成,会多出一个node_module文件夹

cd myapp => // 切换路径到myapp项目里面
npm install => // 初始化安装依赖

启动项目 执行完成之后,在浏览器输入:127.0.0.1:3000即可打开ejs项目

npm start

打开项目根目录下的app.js文件,我们会发现如下代码,如果想直接操作html文件,我们就要修改这段代码

// 引入ejs
let ejs = require('ejs')
// view engine setup
app.set('views', path.join(__dirname, 'views'));
// 设置视图引擎为ejs文件
app.set('view engine', 'ejs');

// 现在替换成html

// view engine setup

// 这个表示express将引用views这个视图文件夹下面的所有视图文件
app.set('views', path.join(__dirname, 'views'));
// 这个表示引擎模板识别后缀是.html
app.engine(".html", ejs.__express)
// 设置视图引擎为html文件
app.set('view engine', 'html');

目前还不知道怎么另外设置get路由,所以只要默认的‘/’,我们可以在views文件中创建视图文件,然后在app.js中引入并使用文件,比如我创建一个myapp.ejs,代码如图,因为是复制express的index.ejs内容

创建完成后需要在app.js文件中引入使用

// 引入路由文件
let myapp = require('./routes/myapp') => // myapp是定义的路由文件的名称

// 使用路由文件
app.use('/myapp', myapp)  => // /myapp是路由的后缀:127.0.0.1:3000/myapp,myapp是定义的路由文件的名称

Tips:重要的事情说三遍-做完这些或者每次修改了route文件内容,一定要重启express一定要重启express一定要重启express。 我就是因为搞了上面这些,没有重启express,结果半天没有效果,折腾的我欲仙欲死,网上也没有说法。

完成这几步,我们开始正式学习ejs相关操作 先按照官方demo操作一下,Node Express我在这里只操作第一个案例,后面将会用浏览器版操作,如果想要浏览器操作,可以选择上面资源文件的ejs.min.js文件。 因为官方demo渲染,我不会,所以只能求其次用express的渲染,如果有知道的,可以自己去试试 看下官方demo:

let ejs = require('ejs'),
people = ['geddy', 'neil', 'alex'],
html = ejs.render('<%= people.join(", "); %>', {people: people});

这是我修改使用express的写法,myapp.js:

var express = require('express');
var router = express.Router();
// 这个是官方的引入
let ejs = require('ejs')

/* GET home page. */
router.get('/', function (req, res) {
  let people = ['geddy', 'neil', 'alex']
  // 这个是官方的渲染,但是我不会弄,只能用express的渲染
  // let html = ejs.render('<%= people.join(", "); %>', { people: people })
  res.render('test', { people: people })
})
module.exports = router;

在myapp.ejs文件中写入下面代码:

<div>
    <h1>Express测试ejs使用</h1>
    <% for(var i=0;i<people.length;i++) { %>
    <li><%= people[i] %></li>
    <% } %>
    <div id="app"></div>
</div>

最终的输出结果:

以上就是Node Express-generator客户端使用的教程,下面开始使用浏览器端的应用,为了赶时间,懒得去来回折腾文件

浏览器端操作

下载好ejs.min.js文件,然后就可以在html文件中引入该文件,就可以直接看到效果,简直不要太爽。(早知道这么轻松,鬼才去折腾express)

好了,按照官方的教程,引入文件,操作即可,贴上代码

<!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>Document</title>
  <script src="./ejs.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
  let people = ['geddy', 'neil', 'alex']
  html = ejs.render('<%= people.join(", "); %>', {people: people});
  document.getElementById('app').innerHTML = html
</script>

运行结果展示:

做到这里,其实后面就so easy了,只要了解语法运用即可,其实用过art-template模板的,用这个应该是很轻松的。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部