问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在使用vue-cli和express-generator的时候，非常好奇它们到底是如何制作并运行的。google了好久都是一堆基于yo、bower和grunt的方案，但显然vue-cli之类的并非采用这套方案。所以产生了下面几个问题，希望能够得到各位的解答：
假设我的脚手架工具名为my-cli，在终端输入my-cli以后会自动为我生成文件目录，应该掌握什么知识？
如何把my-cli变成一个可以全局安装的包，并且能够在终端直接输入my-cli就生效呢？
问题可能有点小白，但真的是我非常想知道的东西，还请赐教，谢谢！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
所有包都可以全局安装，只用安装的时候用-g参数就行了。
点在于可执行文件，一般是放在node_modules/.bin/下，全局的这个文件夹是在PATH中的，所以可以直接运行。
可执行文件
所以，首先得知道怎么创建那个可执行文件。
"eslint": "./bin/eslint.js"
这样子创建一个软连接，从node_modules/.bin/eslint→node_modules/eslint/bin/eslint.js。
处理输入的参数
tj大神的commander
操作文件夹和文件
执行shell命令
更完整的教程
其实推荐看vue-cli，eslint等比较简单业务的源码。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
想一想你在执行 vue init webpack my-project 时，界面显示了什么东西。好像是先显示下载进度，然后输入一些 package.json 中的项目属性吧。那么他的实现就呼之欲出了，就是下载远程仓库的模版项目，然后替换模版项目中的一些字段。在
中可以看到 README 和 package.json 中的模版占位符。
npm 就是干这个的啊。
package.json
"name": "my-cli",
"mycli": "index.js"
console.log('my-cli start!')
执行 npm link 后，你将得到一个全局的 mycli 命令。
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：我用Express.js封装了一个服务器容器小工具 - CNode技术社区
我们都知道利用Node.js可以非常轻易的就编写一个Web Server。在没有利用集成Gulp, Webpack，Web Server等等脚手架工具前，在做一些简单的Web应用的时候，我通常的做法是：用Express.js封装好一个Server.js文件集成到项目中去，以便于开发和测试。例如通过二维码扫描Chrome的开发程序到手机端测试，例如需要跨域调用远程服务器API, 例如Ajax异步加载，等等。当然，偶尔也会用用Nginx做测试开发环境，但是Nginx这玩意还是感觉太重，并且项目组的有些同学觉得安装麻烦，配置复杂，不易上手。
由于我们经常会收到一些活动页面，或者很少页面的开发需求，移动端，PC端都有，所以如果每次都大张旗鼓的上脚手架，全家桶实在上有点杀鸡用牛刀的感觉。一堆依赖，每次重复的安装，很占用硬盘空间。正因如此，我便希望把现有的基于Express.js的server给封装成全局的程序，每次在这些小项目需要的时候，直接一个简单的命令行就可以进行开发和测试，要安装简单，轻便，配置简单。于是这个叫的工具就诞生了。
随时随地针对项目目录开启Server服务
全局安装，简单的CLI
支持自定义服务器端口
支持远程服务器代理（Proxy)
$ npm install -g mini-cup
| - styles
| - index.html
例如当你有个项目简单到只有以上一些文件和文件夹时，需要添加server容器来调试开发，你只需要在控制台切换到test项目所在目录，运行：
$ cup run test
cup默认开启的服务器端口是3000，如果端口占用，或者需要指定其他端口的情况下，则可以通过如下命令：
$ cup run test -p 8080
通过选项参数-p指定端口为8080
$ cup // 默认为命令行当前目录添加server服务
使用自定义配置文件
当我们的项目中需要跨域调用远程接口时，我们可以给项目添加一个名叫config.cup.json的简单JSON配置文件，指定服务器地址和代理地址，然后运行命令行即可，如下：
| - styles
| - index.html
| - config.cup.json
config.cup.json配置
&name&: &test&,
&listen&: 8080,
&root&: &./&,
&location&: {
&/test/*&: &./index.html&,
&/login&: &./index.html&
&proxyTable&: {
&/api&: {
&target&: &http://&,
&changeOrigin&: true
name - 项目名称
listen - 监听端口
root - 根目录
location - 指定请求路径返回到指定页面
proxyTable - 代理设置
如果你现在正在开发一个单页应用，例如使用了React.js和React-Router的browserHistory技术，发现全局刷新页面，路由无法正确解析到指定页面时，便可以通过设置location参数，指定请求路由到指定页面即可
proxyTable
&/api&: { // 代理所有api为根路径的请求地址
&target&: &http://&, // 代理目标服务器地址
&changeOrigin&: true // 是否改变origin
通过添加配置的项目，运行server只需要如下命令：
$ cup config
由于这个小工具是在我现有工作环境下的一个产物，所以使用场景肯定是有限的，我也只是想用它解决些小问题。当然我也知道Github上肯定有很多类似的工具，但是我就是不去看！！看了我就不会自己动手了~
最后，如果这个小玩意能帮你的话，欢迎交流，使用和star~
项目地址：
原文地址：
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的3.1 脚手架
创建一个通用的项目骨架，每次开始新项目时，只需复制这个骨架，或者说是模板。
Express 有可用的脚手架工具，不过只有一定的局限性。
所以接下来手动创建一个自己的脚手架。
创建一个脚手架
项目的根目录
这个也是整个项目文件结构的根目录
package.json--配置项目信息与依赖
用于管理项目的依赖项以及项目的元数据。
创建方法：
安装模块以及为项目添加依赖
npm install --save express
运行 npm install 会把指定名称的包安装到 node_modules 目录下。
如果你用了 --save 选项，它还会更新 package.json 文件。
添加依赖后就可以随时用 npm 重新生成。
.gitignore 文件--配置代码库
可以确保把不需要的代码不添加到代码库中
# ignore packages installed by npm
node_modules
# put any other files you don't want to check in here,
# such as .DS_Store (OSX), *.bak, etc.
把不许要添加的文件或者目录写入.gitignore文件中就可以阻止添加到代码库。
创建入口文件
创建 meadowlark.js 文件作为入口文件
var express = require('express'); // 加载express模块
var app = express(); // 创建服务器实例
app.set('port', process.env.PORT || 3000);// 配置全局变量 post
// 定制 404 页面
app.use(function(req, res){
res.type('text/plain');
res.status(404);
res.send('404 - Not Found');
// 定制 500 页面
app.use(function(err, req, res, next){
console.error(err.stack);
res.type('text/plain');
res.status(500);
res.send('500 - Server Error');
app.listen(app.get('port'), function(){ // 获取全局变量post并作为服务器端口
console.log( 'Express started on http://localhost:' +
app.get('port') + '; press Ctrl-C to terminate.' );
});（&a href=&/&&资质代办&/a&）
启动服务器
node meadowlark.js
通过浏览器访问 localhost:3000即可访问项目网站。
以上就配置出了基本的服务器脚手架。
项目文件放在在项目的根目录，通过package.json配置node模块的依赖，.gitignore管理代码库，入口文件用于启动服务器。网站需要的其他功能在通过这个脚手架基础上进行配置和添加
深入入口文件
app.get('/', function(req, res){
res.type('text/plain');
res.send('Meadowlark Travel');
app.get('/about', function(req, res){
res.type('text/plain');
res.send('About Meadowlark Travel');
在 Express 文档中写的是 app.VERB这并不意味着存在一个叫 VERB 的方法，它是用来指代 HTTP 动词的（最常见的是“get”和“post”）。这个方法有两个参数：一个路径和一个函数。
默认忽略了大小写或反斜杠，并且在进行匹配时也不考虑查询字符串。所以针对关于页面的路由对于 /about、/About、/about/、/about?foo=bar、/about/?foo=bar 等路径都适用。
请求和响应对象
B/S系统的基础都构建于响应与请求基础之上。浏览器发生请求到服务器，服务器处理请求并响应的形式发生数据给浏览器，这样就构成服务器与浏览器的通信基础。express的基础也就是处理请求和响应对象。
路由匹配上之后就会调用你提供的函数，并把请求和响应对象作为参数传给这个函数。这样我们就可以操作请求和响应对象。
Express深度包装了req, res对象。在Express中使用的是Express的请求和响应对象。
res.set 和 res.status 替换了 Node 的 res.writeHead。
Express 还提供了一个 res.type 方法，可以方便地设置响应头ontent-Type。
app.use是 Express 添加中间件的一种方法。
理由匹配规则
Express的路由规则是从上执行的去匹配app.VERB/app.use如果匹配到后会终止接下来的匹配。所以路由和书写顺序应该注意。
还有点需要注意路由路径支持通配符
app.get('/about*',function(req,res){
// 发送内容……
app.get('/about/contact',function(req,res){
// 发送内容……
app.get('/about/directions',function(req,res){
// 发送内容……
本例中的 /about/contact 和 /about/directions 处理器永远无法匹配到这些路径，因为第一个处理器的路径中用了通配符：/about*。
可以这样写
app.get('/about/directions',function(req,res){
// 发送内容……
app.get('/about/contact',function(req,res){
// 发送内容……
app.get('/about*',function(req,res){
// 发送内容……
把子路径写在前面。
3.3.1 视图和布局
视图本质上是要发送给用户的东西。
视图与静态资源（比如图片或 CSS 文件）的区别是它不一定是静态的：HTML 可以动态构建，为每个请求提供定制的页面。
express默认模板引擎是jade不过我还是比较喜欢Handlebars。
安装Handlebars
npm install --save express3-handlebars
加载并配置模板引擎
// 设置 handlebars 视图引擎
var handlebars = require('express3-handlebars')
// 加载handlebars
.create({ defaultLayout:'main' }); // 设置默认布局
app.engine('handlebars', handlebars.engine); //设置express模板引擎
app.set('view engine', 'handlebars');
创建视图目录
--project--views--layouts
views用于存放视图文件
layouts用于存放布局文件
创建布局文件：
views/layouts/main.handlebars 布局文件
&!doctype html&
Meadowlark Travel
{{{body}}} &!- 这里的{{{body}}}就用于套其他的视图文件-&
我们指明了默认布局（defaultLayout:'main'）。这就意味着除非你特别指明，否则所有视图用的都是这个布局。
创建视图文件：
views/home.handlebars：
Welcome to Meadowlark Travel
views/about.handlebars：
About Meadowlark Travel
views/404.handlebars：
404 - Not Found
views/500.handlebars：
500 - Server Error
app.get('/', function(req, res) {
res.render('home'); // 用模板渲染home.handlebars并套入main.handlebars
app.get('/about', function(req, res) {
res.render('about');
// 404 catch-all 处理器（中间件）
app.use(function(req, res, next){
res.status(404);
// 设置响应状态码
res.render('404');
// 500 错误处理器（中间件）
app.use(function(err, req, res, next){
console.error(err.stack);
res.status(500);
res.render('500');
handlebars会默认去访问views下的视图文件以及views/layouts布局文件。
handlebars的默认类容类型为text/html 状态码为200所以一般情况下就不需要进行配置。
3.3.2 视图和静态文件
static 中间件可以将一个或多个目录指派为包含静态资源的目录，其中的资源不经过任何特殊处理直接发送到客户端。你可以在其中放图片、CSS 文件、客户端 JavaScript 文件之类的资源。
创建静态资源目录：
一般会把图片,css,js这样的静态文件放置在public
目录结构如下：
/public/img/
/public/js/
/public/css/
配置静态支援：
app.use(express.static(__dirname + '/public'));
这段代码相当于把所有public下的文件创建一个路由。
url通过绝对路径的形式访问
localhost/img/logo.png 就相当于访问public/img/logo.png
3.3.3 视图中的动态内容
模板中的类容可以通过模板的形式动态生成，一般需要组成部分：
可以通过变量的形式存储，或者通过数据库的形式存储。
var fortunes = [
&Conquer your fears or they will conquer you.&,
&Rivers need springs.&,
&Do not fear what you don't know.&,
&You will have a pleasant surprise.&,
&Whenever possible, keep it simple.&,
];（&a href=&/&&注册公司&/a&）
把模板变量放置在需要展示的位置
About Meadowlark Travel
Your fortune for the day:
{{fortune}}
合并数据和模板
在路由里进行配置
app.get('/about', function(req, res){
var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
res.render('about', { fortune: randomFortune });
以上就构建出了一套大体的脚手架。
从项目结构部分来看：
package.json =& 管理项目依赖.gitignore =& 来控制代码库项目的根目录 =& 来构建项目目录
从业务逻辑来看：
入口文件 =& 加载模块 ，配置路由，中间件
请求和响应对象 =& 处理具体的业务逻辑
模板引擎 =& 合并数据和视图
静态资源 =& 管理静态资源文件
通过这一章学习到了大体如何去构建一个express项目。之后的章节讲继续分析如何加入其它的功能。
作者： 路北&
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：61083次
积分：1033
积分：1033
排名：千里之外
转载：242篇
(1)(28)(28)(44)(46)(34)(41)(24)(2)Yeoman-- 一个强大的前端构建工具 - 简书
Yeoman-- 一个强大的前端构建工具
上期跟大家试了试，这个让我想起了很多其他的前端工具，其中一个就是Yeoman（上次就剧透了的）,所以这期跟大家先简单介绍下这个脚手架工具，然后慢慢一步步深入下去。
先说说Yeoman是什么，它想做什么？
Yeamon帮助你快速的开展一个项目工程，提供最佳实践和工具，来让你保持高效率编码。
他们自己提供了一个构建生态系统，主要通过‘yo’这个命令来构建一个完整的项目或者项目的一部分。
通过官方的生成器，他们建立了一个Yeoman的工作流，这个流是由一个强大的,固定的客户端组建，包含工具和框架帮助开发者快速建立牛逼的web应用。他们尽量提供了开发者所需的东西。
作为良好文档和深入思考构建过程的思想者，Yeoman包含了检测（静态检测）、测试以及压缩等等一系列工具，让开发者能够更加专注于思考解决方案。
Yeoman其实是3个工具的总和：
--- 脚手架，自动生成工具
Grunt、gulp --- 构建工具 （最初只有grunt，后面gulp火了添加进来的）
Bower、npm --- 包管理工具 （原来是 bower，后面添加了npm）
上面的三个是各自独立发展和运行的，混合后效果就不一样，主要在于yo，相当于一个粘合剂一样，把grunt这些工具粘合在一起。
安装方式，一行代码
npm install -g yo //权限不够，请加上 sudo，一般来说mac都需要。
安装完成之后，你就拥有了1个命令 -- yo
Paste_Image.png
看到，使用时，官方已经在提示你了，我们选择 Install a generator，输入react，得到很多选择，我选择了 react-fullstack（如果安装需要权限，sudo yo即可，注意看安装失败的log）
Paste_Image.png
接着等待安装，进度条时间，谈谈这个命令，yo这个命令跟前面vue-cli一样，现在下载的generator其实就是相当于模板一样，来生成你需要的project的最基本架构，包括你主要使用的框架-- react、angular、polymer、backbone、ember，构建工具---grunt、gulp、webpack等，现在还包括了nodejs的模块--express、node-webkit等等一系列各种工具。
官方生成器：
如果不用yo命令来安装generator，可以自己手动安装你想要的:
npm install -g generator-react-fullstack // 记得权限，记得给包前面加上generator.
装完界面变成这个样子了，我们选择generator，run一下。
Paste_Image.png
同样，我们需要填写一个信息来配置下项目名称,又是进度条时间。
现在你可以看见你的文件夹下面已经有新的文件和文件夹建立出来，等待完成，然后
npm run start
Paste_Image.png
页面如图所示：
Paste_Image.png
这个项目挺值得研究的，他比 Tj大神的这个复杂，而且使用的东西更多。具体可以参考它的。
我们可以看到的是，几个简单的命令，Yeoman就帮助我们建立一个项目，而且项目已经填充了不少代码，我们可以选择一个自己喜欢的，来沿着别人的已经搭建好的构架来编写业务即可，这对很多新手来说是非常好的一种提高方式，所以建议大家选star多的 ---代码风格好，文件夹规划清晰，js的模块拆分细致合理。
那么我们再后面的某一期来实践下，编写一个自己的generator玩玩
参考网站：
阿里巴巴-- 前端
最近迷上了潜水和公路车
weibo：/gxiaogui?wvr=4&lf=reg用Express 框架创建草地鹨旅行社网站
来源：open开发经验库
来自： 
脚手架 
脚手架并不是一个新想法，但很多人（包括我自己）都是通过Ruby才接触到这个概念的。这个想法很简单：大多数项目都需要一定数量的“套路化”代码，谁会想每次开始新项目时都重新写一次这些代码呢？对此有个简单的方法，那就是创建一个通用的项目骨架，每次开始新项目时，只需复制这个骨架，或者说是模板。
RoR把这个概念向前推进了一步，它提供了一个可以自动生成脚手架的程序。相对于从一堆模板中作出选择，这种方式的优点是可以生成更复杂的框架。
Express借鉴了RoR的这一做法，提供了一个生成脚手架的工具，从而可以让你开始一个新的Express项目。
尽管Express有可用的脚手架工具，但它目前并不能生成我推荐使用的框架。特别是它不支持我所选择的模板语言（Handlebars），也没有遵循我所偏好的命名规则（尽管这很容易解决）。
尽管我们不用这个脚手架工具，但我还是建议你看一下它：到那时，你就能够充分了解它生成的脚手架是否对你有用了。
套路化对最终发送到客户端的真正HTML也是有用的。我推荐非常出色的HTML5 Boilerplate（
），它能生成一个很不错的空白HTML5网站。最近HTML5 Boilerplate又新增加了可定制的功能，其中一个定制选项包含Twitter Bootstrap，这个是我高度推荐的前端框架。 
草地鹨旅行社网站 
本文以一个可运行的网站为例：假想的草地鹨旅行社网站，该旅行社是一家为到俄勒冈州旅游的人提供服务的公司。如果你对创建REST应用程序更感兴趣，不用担心，因为草地鹨旅行社网站除了作为功能性网站外，也提供REST服务。
初始步骤 
先给你的项目创建一个新目录，这将作为项目的根目录。本文中，凡提到“项目目录”“程序目录”或“项目根路径”，指的都是这个目录。
提示：或许你会把Web程序文件跟项目相关的其他文件全都分开存放，比如会议纪要、文档等。因此，我建议你把项目根路径作为项目目录的子目录。比如，对于草地鹨旅行社网站而言，我会把项目放在~/projects/meadowlark，而项目根路径放在~/projects/meadowlark/site。 
npm在package.json文件中管理项目的依赖项以及项目的元数据。要创建这个文件，最简单的办法是运行 npm init ：它会问一系列的问题，然后为你生成一个package.json文件帮你起步（对于“入口点”的问题，用meadowlark.js或项目的名字作为答案）。 
提示：如果你的package.json文件中没有指定一个存储库的URL，以及一个非空的README.md文件，那么你每次运行npm时都会看到警告信息。package.json文件中的元数据只有在发布到npm存储库时才是真正必要的，但为了消除npm的警告信息，做这些工作依然是值得的。 
第一步是安装Express。运行下面这条npm命令：
npm install --save express 运行 npm install 会把指定名称的包安装到node_modules目录下。如果你用了 --save 选项，它还会更新package.json文件。因为node_modules随时都可以用npm重新生成，所以我们不会把这个目录保存在我们的代码库中。为了确保不把它添加到代码库中， 我们可以创建一个.gitignore文件： 
# ignore packages installed by npm node_modules # put any other files you don't want to check in here,
# such as .DS_Store (OSX), *.bak, etc. 接下来创建meadowlark.js文件，这是我们项目的入口。本文中将这个文件简单称为“程序文件”：
var express = require('express');
var app = express(); app.set('port', process.env.PORT || 3000);
// 定制404页面 app.use(function(req, res){ res.type('text/plain'); res.status(404); res.send('404 - Not Found');
//定制500页面 app.use(function(err, req, res, next){ console.error(err.stack); res.type('text/plain'); res.status(500); res.send('500 - Server Error');
}); app.listen(app.get('port'), function(){ console.log( 'Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.' );
提示：很多教程，甚至是Express的脚手架生成器会建议你把主文件命名为app.js（或者有时是index.js或server.js）。除非你用的托管服务或部署系统对程序主文件的名称有特定的要求，否则我认为这么做是没有道理的，我更倾向于按照项目命名主文件。凡是曾在编辑器里见过一堆index.html标签的人都会立刻明白这样做的好处。 npm init 默认是用index.js，如果要使用其他的主文件名，要记得修改package.json文件中的 main 属性。 
现在你有了一个非常精简的Express服务器。你可以启动这个服务器（node meadowlark.js），然后访问http://localhost:3000。结果可能会让你失望，因为你还没给Express任何路由信息，所以它会返回一个404页面，表示你访问的页面不存在。
注释：注意我们指定程序端口的方式： app.set(port, process.env.PORT || 3000) 。这样我们可以在启动服务器前通过设置环境变量覆盖端口。如果你在运行这个案例时发现它监听的不是3000端口，检查一下是否设置了环境变量 PORT 。 
提示：我高度推荐你安装一个能显示HTTP请求状态码和所有重定向的浏览器插件。这样在解决重定向问题或者不正确的状态码时会更加容易，它们经常被忽视。对于Chrome来说，Ayima的Redirect Path特别好用。在大多数浏览器中， 都能在开发者工具的网络部分看到状态码。 
我们来给首页和关于页面加上路由。在404处理器之前加上两个新路由：
app.get('/', function(req, res){ res.type('text/plain'); res.send('Meadowlark Travel');
}); app.get('/about', function(req, res){ res.type('text/plain'); res.send('About Meadowlark Travel');
// 定制404页面 app.use(function(req, res, next){ res.type('text/plain'); res.status(404); res.send('404 - Not Found');
}); app.get 是我们添加路由的方法。在Express文档中写的是 app.VERB 。这并不意味着存在一个叫 VERB 的方法，它是用来指代HTTP动词的（最常见的是“get” 和“post”）。这个方法有两个参数：一个路径和一个函数。 
路由就是由这个路径定义的。 app.VERB 帮我们做了很多工作：它默认忽略了大小写或反斜杠，并且在进行匹配时也不考虑查询字符串。所以针对关于页面的路由对于/about、/About、/about/、/about?foo=bar、/about/?foo=bar等路径都适用。 
路由匹配上之后就会调用你提供的函数，并把请求和响应对象作为参数传给这个函数。现在我们只是返回了状态码为200的普通文本（Express默认的状态码是200，不用显式指定）。
我们这次使用的不是Node的 res.end ，而是换成了Express的扩展 res.send 。我们还用 res.set 和 res.status 替换了Node的 res.writeHead 。Express还提供了一个 res.type 方法，可以方便地设置响应头 Content-Type 。尽管仍然可以使用 res.writeHead 和 res.end ，但没有必要也不作推荐。 
注意，我们对定制的404和500页面的处理与对普通页面的处理应有所区别：用的不是 app.get ，而是 app.use 。 app.use 是Express添加 中间件 的一种方法。你可以把它看作处理所有没有路由匹配路径的处理器。这里涉及一个非常重要的知识点：在Express中，路由和中间件的添加顺序至关重要。如果我们把404处理器放在所有路由上面，那首页和关于页面就不能用了，访问这些URL得到的都是404。现在我们的路由相当简单，但其实它们还能支持通配符，这会导致顺序上的问题。比如说，如果要给关于页面添加子页面，比如/about/contact和/about/directions会怎么样呢？下面这段代码是达不到预期效果的： 
app.get('/about*',function(req,res){
// 发送内容....
}) app.get('/about/contact',function(req,res){
// 发送内容....
}) app.get('/about/directions',function(req,res){
// 发送内容....
}) 本例中的 /about/contact 和 /about/directions 处理器永远无法匹配到这些路径，因为第一个处理器的路径中用了通配符： /about* 。 
Express能根据回调函数中参数的个数区分404和500处理器。
你可以再次启动服务器，现在首页和关于页面都可以运行了。
截至目前我们所做的事情，即使不用Express也很容易完成，但Express所提供的一些功能并非那么显而易见。还记得如何规范化 req.url 来确定所请求的资源吗？我们必须手动剥离查询字符串和反斜杠，并转化为小写。而Express的路由器会自动帮我们处理好这些细节。尽管目前看起来这并非什么大不了的事情，但这只是Express路由器能力的冰山一角。 
视图和布局 
如果你熟知“模型-视图-控制器”模式，那你对视图这个概念应该不会感到陌生。视图本质上是要发送给用户的东西。对网站而言，视图通常就是HTML，尽管也会发送PNG或PDF，或者其他任何能被客户端渲染的东西。
视图与静态资源（比如图片或CSS文件）的区别是它不一定是静态的：HTML可以动态构建，为每个请求提供定制的页面。
Express支持多种不同的视图引擎，它们有不同层次的抽象。Express比较偏好的视图引擎是Jade（因为它也是TJ Holowaychuk开发的） 。Jade所采用的方式非常精简：你写的根本不像是HTML，因为没有尖括号和结束标签，这样可以少敲好多次键盘。然后，Jade引擎会将其转换成HTML。
Jade是非常吸引人的，但这种程度的抽象也是有代价的。如果你是一名前端开发人员，即便你实际上是用Jade编写视图，也必须理解HTML，并且有足够深入的认识。我认识的大多数前端开发人员都不喜欢他们主要的标记语言被抽象化处理。因此我推荐使用另外一个抽象程度较低的模板框架Handlebars。Handlebars（基于与语言无关的流行模板语言Mustache）不会试图对HTML进行抽象：你编写的是带特殊标签的HTML，Handlebars可以借此插入内容。
为了支持Handlebars，我们要用到Eric Ferraiuolo的 express3-handlebars 包（尽管名字中是express3，但这个包在Express 4.0中也可以使用）。在你的项目目录下执行： 
npm install --save express3-handlebars 然后在创建app之后，把下面的代码加到meadowlark.js中：
var app = express();
// 设置handlebars视图引擎
var handlebars = require('express3-handlebars')
.create({ defaultLayout:'main' }); app.engine('handlebars', handlebars.engine); app.set('view engine', 'handlebars'); 这段代码创建了一个视图引擎，并对Express进行了配置，将其作为默认的视图引擎。接下来创建views目录，在其中创建一个子目录layouts。如果你是一位经验丰富的Web开发人员，可能已经熟悉 布局 的概念了（有时也被称为“母版页”）。在开发网站时，每个页面上肯定有一定数量的HTML是相同的，或者非常相近。在每个页面上重复写这些代码不仅非常繁琐，还会导致潜在的维护困境：如果你想在每个页面上做一些修改，那就要修改所有文件。布局可以解决这个问题，它为网站上的所有页面提供了一个通用的框架。 
所以我们要给网站创建一个模板。接下来我们创建一个views/layouts/main.handlebars文件：
&!doctype html&
&html&
&head&
&title&Meadowlark Travel&/title&
&/head&
&body& {{{body}}} &/body&
&/html& 以上内容你未曾见过的可能只有 {{{body}}} 。这个表达式会被每个视图自己的HTML取代。在创建Handlebars实例时，我们指明了默认布局（ defaultLayout:'main' ）。这就意味着除非你特别指明，否则所有视图用的都是这个布局。 
接下来我们给首页创建视图页面，views/home.handlebars：
&h1&Welcome to Meadowlark Travel&/h1& 关于页面，views/about.handlebars：
&h1&About Meadowlark Travel&/h1& 未找到页面，views/404.handlebars：
&h1&404 - Not Found&/h1& 最后是服务器错误页面，views/500.handlebars：
&h1&500 - Server Error&/h1& 
提示：你或许想在编辑器中把.handlebars和.hbs （另外一种常见的Handlebars文件扩展名）跟HTML相关联，以便启用语法高亮和其他编辑器特性。如果是vim，你可以在~/.vimrc文件中加上一行 au BufNewFile,BufRead *.handlebars set file type=html 。其他编辑器请参考相关文档。 
现在视图已经设置好了，接下来我们必须将使用这些视图的新路由替换旧路由：
app.get('/', function(req, res) { res.render('home');
}); app.get('/about', function(req, res) { res.render('about');
// 404 catch-all处理器（中间件） app.use(function(req, res, next){ res.status(404); res.render('404');
// 500错误处理器（中间件） app.use(function(err, req, res, next){ console.error(err.stack); res.status(500); res.render('500');
}); 需要注意，我们已经不再指定内容类型和状态码了：视图引擎默认会返回 text/html 的内容类型和200的状态码。在catch-all处理器（提供定制的404页面）以及500处理器中，我们必须明确设定状态码。 
如果你再次启动服务器检查首页和关于页面，将会看到那些视图已呈现出来。如果你检查源码，将会看到views/layouts/main.handlebars中的套路化HTML。
视图和静态文件 
Express靠中间件处理静态文件和视图。只需了解中间件是一种模块化手段，它使得请求的处理更加容易。
static 中间件可以将一个或多个目录指派为包含静态资源的目录，其中的资源不经过任何特殊处理直接发送到客户端。你可以在其中放图片、CSS文件、客户端JavaScript文件之类的资源。 
在项目目录下创建名为public的子目录 （因为这个目录中的所有文件都会直接对外开放，所以我们称这个目录为public）。接下来，你应该把 static 中间件加在所有路由之前： 
app.use(express.static(__dirname + '/public')); static 中间件相当于给你想要发送的所有静态文件创建了一个路由，渲染文件并发送给客户端。接下来我们在public下面创建一个子目录img，并把logo.png文件放在其中。 
现在我们可以直接指向/img/logo.png （注意：路径中没有public，这个目录对客户端来说是隐形的）， static 中间件会返回这个文件，并正确设定内容类型。接下来我们修改一下布局文件，以便让我们的logo出现在所有页面上： 
&body&
&header&
&img src="/img/logo.png" alt="Meadowlark Travel Logo"&
&/header& {{{body}}} &/body& 
注释：`是HTML5中引入的元素，它出现在页面顶部，提供一些与内容有关的额外语义信息，比如logo、标题文本或导航等。 
视图中的动态内容 
视图并不只是一种传递静态HTML的复杂方式（尽管它们当然能做到）。视图真正的强大之处在于它可以包含动态信息。
比如在关于页面上发送“虚拟幸运饼干”。我们在meadowlark.js中定义一个幸运饼干数组：
var fortunes = [
"Conquer your fears or they will conquer you.",
"Rivers need springs.",
"Do not fear what you don't know.",
"You will have a pleasant surprise.", "Whenever possible, keep it simple.",
]; 修改视图（/views/about.handlebars）以显示幸运饼干：
&h1&About Meadowlark Travel&/h1&
&p&Your fortune for the day:&/p&
&blockquote&{{fortune}}&/blockquote& 接下来修改路由/about，随机发送幸运饼干：
app.get('/about', function(req, res){
var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)]; res.render('about', { fortune: randomFortune });
); 重启服务器，加载/about页面，你会看到一个随机发放的幸运饼干。模板真的是非常有用。
小结 
我们刚用Express创建了一个非常基本的网站。尽管简单，但这个网站包含了功能完备的网站所需的一切。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动}