main content
<% include ./footer %>
nodejs项目目录作用
新建的项目结构应该是这样
bin：项目的启动文件，也可以放其他脚本。
node_modules：用来存放项目的依赖库。
public：用来存放静态文件(css,js,img)。
routes：路由控制器。
views：视图目录(相当于MVC中的V)。
app.js：项目入口及程序启动文件。
package.json：包描述文件及开发者信息。
-----------------------------------------------其他，自己创建使用------------------------------
models：数据模型(相当于MVC中的M)。
controllers：控制器,对请求的操作(相当于MVC中的C)。
tools：工具库。
config：配置目录。
test：测试目录。
README.md：项目说明文件。
app.js文件简单说明及设置app.js文件为启动文件。
//模块依赖
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
//添加,导入http模块
var http=require('http');
var app = express();
//设置端口号
app.set('port', process.env.PORT || 3000);
//视图引擎设置
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//加载环境变量
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//加载路由
app.use('/', routes);
app.use('/users', users);
//启动及端口
http.createServer(app).listen(app.get('port'),function(){
console.log('Express server listening on port ' + app.get('port'));
});
//加载错误处理解决办法
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
//导出app对象
module.exports = app;
package.json 介绍
"name"：包名。
"description"：包简介。
"author"：包作者。
"version"：版本号。
"repository"：源码托管地址。
"maintainers"：包维护者列表，一般由name,email,web三个属性组成。
"contributors"：贡献者列表。
"dependencies"：当前包使用时所需要依赖包的列表。
devDependencies：当前包开发时所需要依赖包的列表。
keywords：关键词数组。
main：模块引入入口。
scripts：脚本说明对象。主要被包管理器用来安装、编译、测试和卸载包。
示例：
1.package.json之dependencies
关于package.json的详细信息，可以搜索”package.json 字段全解析”看一下。dependencies就是列出了包名和版本号，
“dependencies”: {
“body-parser”: “~1.13.2”,
“cookie-parser”: “~1.3.5”,
“debug”: “~2.2.0”,
“express”: “~4.13.1”,
“jade”: “~1.11.0”,
“morgan”: “~1.6.1”,
“serve-favicon”: “~2.3.0”,
“ejs”:”*”
}
例如，需要ejs模块的话，就加入ejs，不知道版本的话，可以用”*”代替，表示任何版本都可以。
如果该版本不存在，则会安装错误 ****
2.npm安装package.json
- 在nodejs命令窗口下安装
切换目录到package.json所在的目录下，执行 npm install ejs 或 npm install - 在IDE中安装
在IntelliJ IDEA中，找到package.json，右键–Run ‘npm update’
4、npm install 报proxy错误，解决方法，之后在update。
Nodejs之模板ejs
- 循环遍历数据显示
- 实现数据与试图分离（即html结构与数据分离）ejs是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。
- 在web项目中渲染页面，我们很多时候，会用json或者拼接字符串的方式，不够美观，破坏原有html结构，大量的html拼接会使代码难以阅读。
1.创建ejs项目
express -e test //创建模板为ejs的项目,默认为jade。
2.使用
app.js中添加
var ejs = require('ejs');
//app.set('view engine', 'ejs');
//设置如下，可修改后缀名为html。
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
//res.render()第二个参数为json对象
app.get('/', function (req, res, next) {
res.render('index',{
title:"ejs简单测试",
name:"admin",
"sex":"男"
});
});
ejs模板语法
EJS是一个javascript模板库，用来从json数据中生成HTML字符串
- 功能：缓存功能，能够缓存好的HTML模板；
- <% code %>用来执行javascript代码
(1)、 ejs模板文件后缀名 .ejs
(2)、编译ejs模板文件命令
- 参数输入形式
- ejs-cli -f(--f) 模板文件路径 -o(--out) 输出文件路径 -O(--options) 输入模板参数
-
ejs-cli -f "index.ejs" -o "../dist" -O '{"title":"Hello wrold"}'
$ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'
(3)、模板中输出变量
- 声明变量<% title="EJS Template engine" %>
- 输出变量
-
<%= username %> 特殊字符将进行转义
-
<%- myHtml %> 变量直接输出，不做转义处理
4.变量定义标签属性
-
5.循环
-
<% for(var i in users){ %>
- <%= users[i].username %>--<%= users[i].age %> <% } %>
.ejs
<% users=["Jack","Rose","Alice","Ave"] %>
<% for(var item in users){ %>
-
<%= users[item] %>
<% } %>
6.if语句
<% if(isLogin){ %>
<% }else{ %>
<% } %>.ejs
<% if(isLogin){ %>
<% }else{ %>
<% } %>7.模板嵌套
- <% include 嵌套模板路径 %>
- <% include ./header %>
例
新建文件
head.ejs
<%= title %>
header.ejs
footer.ejs
powered by Node.js Author:Jessco [email protected]
index.ejs
<% include ./head %>
<% include ./header %>
这里有两个页面，index和login页面，这两个页面的头部与脚部是一样的内容，只有中间不一样。所以用一个模板做好头部与脚部，中间部分引入就可以了。
layout.ejs
//layout.ejs 模板页面
<%=title%>
<%- include("./include/header.ejs") %>//引入头部部分
<% var page ="./page/"+pagename+".ejs"%>//定义一个变量，用来动态引入
<%- include(page)%>
<%- include("./include/footer.ejs") %>//引入脚部部分
header.ejs
//header.ejs 头部部分
login.ejs
//login.ejs login页面
展示台
希望通过下面这个表格，你能够简单地认识我^.^
姓名:肖承华
出生年月：1996.01.09
专业：软件工程
毕业院校：聊城大学东昌学院
学历：本科
联系电话：13734472101
邮箱：[email protected]/
博客
github
HTML/HTML5
CSS/CSS3
Javascript
jquery
bootstrap
node.js
更多信息点这里
网站作品 更多>>
插件展示更多>>
博客列表 更多>>
app.js页面
//app.js
//supervisor app.js 自动重启服务器
var express= require('express');
var path =require('path');
var _=require('underscore');
var mongoose=require('mongoose');
// var Movie=require('./models/mongodb');
var port =process.env.PORT||3000;
var bodyParser = require('body-parser');
var app =express();
app.set('views','./view');
app.set("view cache",true);
app.set('view engine','ejs');
app.use(bodyParser.json() );// 格式化表单提交
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('./public',{
maxAge:'0',//no cache
etag:true
}));
app.locals.moment=require('moment');
app.listen(port);
console.log('server start on port'+port);
app.get("/",function(req,res){//index页面
res.render('layout',{title:'我的首页',pagename:"index"});//传入参数index，表示在模板页面引入index.ejs文件
});
app.get("/login",function(req,res){//login页面
res.render('layout',{title:'登录页面',pagename:"login"});//传入参数login，表示在模板页面引入login.ejs文件
});