实战演练:用gulp+EJS像CMS那样生成完整新闻内容面

最新推荐文章于 2024-06-28 11:13:24 发布

原创最新推荐文章于 2024-06-28 11:13:24 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#模板引擎 #前端

nodejs+gulp+webpack+sass基础篇专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用EJS模板引擎进行前端开发，包括基本安装、结合Gulp使用及从远程获取数据并渲染到模板。

ejs
安装

npm install ejs --save-dev

官网：http://wwww.embeddedjs.com
这是一个很经典且使用非常简单的js模板引擎。如果你用过nodejs开发后端，那么ejs应该有所了解。
但我们这里只探讨在前端理的使用。

一、测试一下
1.随便新建一个ejs.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<ul>
    <% for(var i in list){ %>
    <li><%= list[i].name %></li>
    <% } %>
</ul>
</body>
</html>

2.用node内置模块fs来读取文件,然后把数据用ejs渲染到html模板上，新建test.js

var fs = require('fs');
var html = fs.readFileSync('./ejs.html','utf8');

// 导入ejs
var ejs = require('ejs');
var data = {
    list:[
        {name:'zhangsan'},
        {name:'lisi'},
        {name:'wangwu'},
    ]
};

var html = ejs.render(html,data);
console.log(html);

3.终端执行：node test.js
这里写图片描述
数据成功展示到html上，测试成功。

二、结合我们的gulp
gulp已经很贴心的帮我们准备好了插件

npm install gulp-ejs --save-dev

1.编辑gulpfile.js

var gp = require('gulp');
var gulp_ejs = require('gulp-ejs');
gp.task('taskName',function(){
    var data = {
        list:[
            {name:'zhangsan'},
            {name:'lisi'},
            {name:'wangwu'},
        ]
    };
    gp.src(['ejs.html']) 
        .pipe(gulp_ejs(data))
        .pipe(gp.dest('./build/html'));
})

2.终端执行: gulp taskName 后，./build/html 多了一个ejs.html
这里写图片描述

三、结合前一篇请求远程网站数据，然后把数据渲染到html模板
1.远程地址http://localhost/myphp/news.php

<?php

$news['id'] = 456;
$news['title'] = '今天的气温到达了38℃';
$news['content'] = '天气太热啦，天气太热啦，天气太热啦，天气太热啦';

header("Access-Control-Allow-Origin:http://localhost");
header("Content-type: application/json");

// json_encode 加JSON_UNESCAPED_UNICODE参数 中文不转码.在PHP5.4可用
die(json_encode($news,JSON_UNESCAPED_UNICODE));

2.自定义的nodejs类库，在node_modules/myLib/index.js

var request = require('request');

exports.loadNews = function(doSomething){
    request.get('http://localhost/myphp/news.php',function(error,response,body){
        if(!error && response.statusCode == 200){
            doSomething(body);
        }
    });
}

3.编辑gulpfile.js，这里使用我们自己的myLib加载远程数据

var gp = require('gulp');
var gulp_rename = require('gulp-rename');
var gulp_ejs = require('gulp-ejs');
gp.task('news',function(){
    var myLib = require('myLib');
    myLib.loadNews(function(data){
        var news = JSON.parse(data);
        gp.src(['index.html']) 
        .pipe(gulp_ejs(news))
        .pipe(gulp_rename(news.id+'.html')) 
        .pipe(gp.dest('./build/html'));
    });
})

把loadNews过来的新闻数据，渲染到index.html这个模板上，最后生成新的文件到./build/html目录下面，文件名是 新闻id.html
先看一眼index.html模板文件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<span>ID:<%=id%></span>
<h1>新闻标题：<%=title%></h1>
<hr/>
<p><%=content%></p>
</body>
</html>