Nodejs学习笔记（五）—Express安装入门与模版引擎ejs
前言
前面也学习了一些Node.js的基本入门知道，现在开始进入Web开发的部分；
Node.js提供了http模块，这个模块中提供了一些底层接口，可以直接使用，但是直接开发网站那还是太累了，所以http模块也不单讲了，可以去看官方API：http://nodejs.org/api/http.html
下面我们直接从Express框架着手去进行Web开发，它实现好了更高层的接口，让Web开发更简单快捷...
简介和安装
Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架，它基于Node.js原有进行了很多Web开发所需的功能封装...
https://www.npmjs.org/package/express
安装
npm install -g express-generator
https://github.com/visionmedia/express#quick-start
-g：表示全局安装
到此express就在全局环境中安装成功！
PS：用npm安装有时可能进度不动，多试几次！
运行第一个基于express框架的Web
1.创建一个testWebApp
express testWebApp
2.安装依赖项
注意上一步安装成功后的提示，需要cd到网站目录，并执行npm install命令安装项目依赖项（可以在项目的package.json文件的dependencies节点下看到需要哪些依赖）
3.修改app.js文件并运行
在testWebApp根目录下找到app.js并增加端口监听，在sublime中Ctrl+B运行
app.listen(8100,function(){
console.log("Server Start!");
});
4.通过浏览器访问，看看效果
到此成功的运行起来基本express框架的Web！
相关提示：
1.在sublime中运行过后，如果想要关闭，去任务管理器中结束node.exe进程
2.不在sublime中运行，可以在cmd中执行node app，关闭使用快捷键Ctrl+C
模版引擎 ejs
在上面创建的testWebApp中express默认使用的模版擎为jade，个人觉得jade虽然简洁但不直观，所以选择了更易上手的ejs。
ejs：Embedded JavaScript
https://github.com/visionmedia/ejs
1.创建一个express + ejs的项目
express -e testEjsWebApp
cd testEjsWebApp
npm install
express参数
Usage: express [options] [dir]
Options:
-h, --help output usage information
-V, --version output the version number
-e, --ejs add ejs engine support (defaults to jade)
-H, --hogan add hogan.js engine support
-c, --css <engine> add stylesheet <engine> support (less|stylus|compass) (d
efaults to plain css)
-f, --force force on non-empty directory
2.创建成功后，打开app.js，添加8100端口监听
3.打开routes文件夹下index.js，并修改代码如下
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: '<h1>Express</h1>'
,users:[{username: 'Wilson'},
{username: 'Wilson Zhong'},
{username: 'Zhong Wei'}]
});
});
module.exports = router;
4.打开views文件夹下index.ejs,并修改代码如下
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body> <%= title %>
<%- title %>
<% users.forEach(function(user){ %>
<h6><%= user.username %></h6>
<% }) %> </body>
</html>
5.运行页面，查看结果
在这里，我们还没有讲express的一些东西，所以大家先不要管太多细节部分，只要知道上面示例中当通过http://localhost:8100访问时，
会转到index.js，而index.js而index.ejs传递了title和users对象作为参数。
这里重点看看index.ejs
ejs结尾的文件就是模版文件，可以看到在文件中我们用了三种标签方式（这种标签方式有过其它web开发经验的应该很好看懂）
1.<%= %>
这个标签在接到收到title: '<h1>Express</h1>'时，从显示效果来看，他直接输出HTML标签到页面上，输出的是转义后的变量值
2.<%- %>
而这个标签，从显示效果上看，他没有直接输出HTML代码到页面上，输出的是没有转义后的变量值
3.<% %>
而这个标签，从显示上看，他循环了出来参数中的值，标签中是javascript逻辑代码，注意括号的开闭合
在这里，简单认识一下ejs，下面开始看看express的结构！
express项目结构
上面新建了一个叫testEjsWebApp的项目，模版引擎使用的ejs，先看看项目的结构
1.node_modules文件夹
这文件夹就是在创建完项目后，cd到项目目录执行npm install后生成的文件夹，下载了项目需要的依赖项
2.package.json文件
此文件是项目的配置文件（可定义应用程序名，版本，依赖项等等）
node_modules文件夹下的依赖项是从哪里知道的呢？原因就是项目根目录下的这个package.json文件，执行npm install时会去找此文件中的dependencies，并安装指定的依赖项
3.public文件夹(包含images、javascripts、stylesheets)
这个文件夹做过Web开发的应该一看就知道，为了存放图片、脚本、样式等文件的
4.routes文件夹
用于存放路由文件，
5.views文件夹
用于存放模版文件
express项目分析
先从app.js看起
1.app.set(name,value)
把名字为name的项的值设为value，用于设置参数
app.set('views', path.join(__dirname, 'views')); 设置了模版文件夹的路径；主要清楚__dirname的意思就可以了，它是node.js中的全局变量，表示取当前执行文件的路径
app.set('view engine', 'ejs'); 设置使用的模版引擎，我们使用的ejs
2.app.use([path], function)
用这个方法来使用中间件，因为express依赖于connect，有大量的中间件，可以通过app.use来使用；path参数可以不填，默认为'/' (项目中用到的就不分别解释了，用到的时候自已查一API的中间件部分)
app.use(express.static(path.join(__dirname, 'public'))); 这一句中可能要注意一下，express.static( )是处理静态请求的，设置了public文件，public下所有文件都会以静态资料文件形式返回（如样式、脚本、图片素材等文件）
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);
上面代码表示当用户使用/访问时，调用routes，即routes目录下的index.js文件，其中.js后缀省略，用/users访问时，调用routes目录下users.js文件
这就是为什么，我们示例中用http://localhost:8100/访问是，修改的index.js里的文件代码可以执行（当然index.js文件中也要写对应的代码，才能是我们最终看到的效果）
3.app.get(name)
获取名为name的项的值
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
表示如果是开发环境，处理error时会输出堆栈信息
4.路由文件index.js
主要看下面这段代码
router.get('/', function(req, res) {
res.render('index', { title: '<h1>Express</h1>'
,users:[{username: 'Wilson'},
{username: 'Wilson Zhong'},
{username: 'Zhong Wei'}]
});
});
这段表示，router.get表示通过get请求/时，响应后面的function处理，两个参数分别是request、response；
res.render表示调用模版引擎解析名字index的模板，传并传入了title和users两个对象做为参数；
为什么它会知道解板views目录下的index.ejs?而不是其它目录下的文件，或者后其它后缀名的文件？
原因就是app.js中的设置：
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
而这两个参数在index.ejs中可以使用，那么加上ejs的部分，就会返回最终生成的页面展现！
到此应该差不多能动手用express+ejs做了一点东西了，入门就先到这里吧！
提示：关于express，还是有必要去看看API，application、request、response、router、middleware还提供了很多方法！
此系列的源代码可到http://bijian1013.iteye.com/blog/2425085下载。
文章来源：https://www.cnblogs.com/zhongweiv/p/nodejs_express.html
Nodejs学习笔记（五）—Express安装入门与模版引擎ejs的更多相关文章
- Express安装入门与模版引擎ejs
Express安装入门与模版引擎ejs 目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set ...
- Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs
目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...
- 【11】 Express安装入门与模版引擎ejs
前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use([p ...
- nodejs学习笔记(1)--express安装问题：express不是内部也或者外部的命令解决方案
"Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具.使用 Express 可以快速地搭建一个完 ...
- nodejs学习笔记一：安装express框架并构建工程目录
偶遇node是在一个阳光明媚的上午,无意间打开博客看到一片关于nodejs的介绍,通读全篇后,心情跌宕起伏,哎呀,这么好的东西我竟然现在才知道,这是最气的,于是马上开始制定学习nodejs计划,好了, ...
- nodejs学习笔记(2)--Express下安装模版引擎ejs
成功安装完express后,输入express -help,根据提示安装ejs(如下图): 根据提示-e实现安装ejs,注意此处有坑:之前安装的时候根据教程(node.js开发指南第五章5.2.2节) ...
- nodejs学习笔记<五>npm使用
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 以下是几种常见使用场景: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ...
- NodeJS学习笔记五
Promise简介 所谓Promise,就是一个对象,用来传递异步操作的消息. Promise对象有以下两个特点. (1)对象的状态不受外界影响.Promise对象代表一个异步操作,有三种状态:Pen ...
- Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识
目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...
随机推荐
- 好用的SHELL小编程
1>判断输入为数字,字符或其他 脚本代码: 检测结果: 2>求平均数: 测试效果: 3>自减输出: 脚本代码: 测试效果: 4>在文件 ...
- REST格式
首先要明确一点:REST 实际上只是一种设计风格,它并不是标准.(所以你可以看到网上一大堆的各种最佳实践,设计指南,但是没有人说设计标准).aisuhua/restful-api-design-ref ...
- Asp.net WebForm 中无法引用App_Code文件夹下的类
在VS2013中新建asp.net webform应用程序,手动添加"APP_Code"文件夹并新建类文件,发现这些类无法在APP_Code文件夹以外被引用. 解决办法: 选中类文 ...
- WebService 工作原理及实例教程
一.WebService到底是什么? 先来看下标准的定义:Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统 ...
- C# 标准事件模式
.NET框架为事件定义了一个标准模式,它的目的是保持框架和用户代码之间的一致性. 标准事件的模式核心是SystemEventArgs——预定义的没有成员的框架类(不同于静态Empty属性) Event ...
- matlab学习笔记---（1）
Matlab学习笔记 一. Desktop Basics (Matlab 基础知识) 当你打开Matlab的时候,matlab按照以下默认的方式展示出来. 该桌面主要包括以下几部分内容: 当前文件夹: ...
- 我所理解的网络游戏<？>：战斗逻辑设计
客户端发送消息,统一在服务器端触发战斗 服务器端驱动战斗过程 客户端端接收用户输入向服务器发送消息 客户端接收服务器消息显示客户端表现 1. 服务器--客户端交互(战斗流程) 整战斗流程分为4个状 ...
- Android事件分发机制浅析（2）
本文来自网易云社区 作者:孙有军 上面的两次执行中每次都调用了onInterceptTouchEvent事件,这个到底又是啥?我们去看看他的返回值是什么? public boolean onInter ...
- Debug Dart at External Terminal
launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions ...
- bzoj2095: [Poi2010]Bridges（二分+混合图求欧拉回路）
传送门 这篇题解讲的真吼->这里 首先我们可以二分一个答案,然后把所有权值小于这个答案的都加入图中 那么问题就转化为一张混合图(既有有向边又有无向边)中是否存在欧拉回路 首先 无向图存在欧拉回路 ...