[关闭]
@kexinWeb 2017-02-22T08:38:42.000000Z 字数 1903 阅读 2600

Node.js express 模板的使用(ejs + express )

ejs node express


下载安装

1.安装express模块

  1. cd <项目文件夹路径>
  2. cnpm install express --save


2.安装模板引擎

  1. cd <项目文件夹路径>
  2. cnpm install ejs --save

组织文件结构

整个项目文件夹的结构如下:

views

---home.html
---article.html

app.js

package.json

README.md

.gitignore

其中app.js是入口文件,views文件夹下面放置的是需要渲染的模板文件,package.json是整个项目的配置文件,.gitignore文件里面写明文件pull到github时不需要上传的文件或文件夹,如 node_modules文件夹

编写app.js

  1. //加载express模块
  2. const express = require('express');
  3. //加载ejs模块
  4. const ejs = require('ejs');
  5. //加载path模块,path模块中包含许多处理文件路径的工具
  6. const path = require('path');
  7. //创建一个express实例
  8. let app = express();
  9. //注册模板文件的后缀名为html,默认为ejs
  10. app.engine('html', ejs.__express);
  11. //设置模板文件存放的目录,默认是与app.js同级下views文件夹
  12. //path.join()用于路径拼接,可以根据当前的操作系统的类型正确选用文件路径拼接字符,linux是/,window是\
  13. app.set('views', path.join(__dirname, '/views'));
  14. //设置模板文件的后缀名为html,避免了res.render('home.html',...)的繁琐
  15. app.set('view engine', 'html');
  16. //路由挂载
  17. app.get('/', function(req, res) {
  18. //render函数除了用数据渲染页面之外,还有sendFile('home.html')的作用。
  19. res.render('home', {
  20. title: 'home',
  21. content: 'This is home page.'
  22. });
  23. });
  24. app.get('/article', function(req, res) {
  25. res.render('article', {
  26. title: 'article',
  27. content: 'This is acticle page.'
  28. });
  29. });
  30. //使用8080端口
  31. app.listen(8080);
  32. console.log("The server is running on 8080");

编写home.html和article.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title><%=title%></title>
  6. </head>
  7. <body>
  8. <%=content%>
  9. </body>
  10. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title><%=title%></title>
  6. </head>
  7. <body>
  8. <%=content%>
  9. </body>
  10. </html>

运行程序

node app.js

打开浏览器键入:localhost:8080 和 localhost:8080/article
此处输入图片的描述

最后

源代码地址:https://github.com/kexinWeb/node-express-ejs-demo.git
本例子只是简单阐明node,express还有ejs之间的组织结构关系,更多的ejs语法可以参见 https://segmentfault.com/a/1190000004286562

参考资料:
【1】http://www.cnblogs.com/rubylouvre/p/3421805.html
【2】http://github.com/visionmedia/ejs
【3】https://segmentfault.com/a/1190000004286562

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注