Express Generator 生成Express应用的目录结构

这是我的MDN Express Tutorial 学习摘录。在那篇教程里,Express 的主要功能都有涉及到,讲的很全面。亲自动手操练一遍,会加深对 express 的认识。

这篇文章主要介绍 express generator 的使用,以及使用它生成 express 应用的目录结构。

Node 和 Express

Node是目前最厉害、最流行的平台,可以使用JavaScript开发后端应用。

Express是2010年出来的最流行的Node应用框架。

Node (or more formally Node.js) is an open-source, cross-platform, runtime environment that allows developers to create all kinds of server-side tools and applications in JavaScript.

Express](https://expressjs.com/) is the most popular Node web framework, and is the underlying library for a number of other popular Node web frameworks.

没吃到猪肉前,先来看看猪是怎么跑的。这篇文章带你快速浏览Express应用:What does Express code look like?

使用 Express Generator

Express Application Generator 能够快速创建一个Express应用框架。

npm install express-generator -g
express myapp --view=pug
cd myapp
npm install

# Run the myapp on Windows
SET DEBUG=myapp:* & npm start

# Run myapp on Linux/Mac OS X
DEBUG=myapp:* npm start

http://localhost:3000/ 看看刚才创建的Express应用长什么样。

添加nodemon

在开发的时候,每次修改文件,都需要重启 express 服务,比较麻烦。使用nodemon,修改文件后可以自动重启 express 服务。

npm install --save-dev nodemon

修改 package.json 的 scripts 内容:

"scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  }

之后,使用 SET DEBUG=myapp:* & npm run devstart 启动 express 服务。这样在开发过程中修改文件的时候,express服务就会自动重启,非常方便。

生成的文档目录结构

/myapp
    app.js
    /bin
        www
    package.json
    /node_modules
        [about 4,500 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            style.css
    /routes
        index.js
        users.js
    /views
        error.pug
        index.pug
        layout.pug

www file

/bin/www 是应用的主入口。应用的真正入口是app.js文件,所以www文件先把app.js文件引进来,其余的内容主要就是创建了一个node HTTP server。

app.js

这个可是主要文件,得好好唠唠,在app.js里面,主要做了这些事儿:

1.引入之前使用npm install下载的包,并创建express对象:

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 app = express();

2.使用上面引入的包:

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
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')));

3.引入routes文件夹里面的文件,这些文件主要处理URL路由。

var index = require('./routes/index');
var users = require('./routes/users');

4.关联路由路径与引入的文件:

app.use('/', index);
app.use('/users', users);

5.设置模板,views 设置了模板的位置;view engine设置了要使用的模板引擎。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

6.最后处理错误的http请求:

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

routes文件夹

以users.js为例,首先加载express,通过express获取到router对象。使用router对象指定路由的方法和路径。由于在app.js已经指定 /users 到本文件,因此当浏览器请求/user时,会执行下面的回调函数。

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

回调函数有第三个参数next,主要用于中间件中,即将数据传递到下一个方法去处理。

视图模板

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

Express 应用默认使用的是 pug 模板,views文件里面是所有的视图模板。在router文件里, 使用Response.render()指定要加载的模板和传递给模板的一些参数。下面的/routes/index.js文件里的示例:

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

下面是index.pug文件,传进来的title的值将替换它:

extends layout

block content
  h1= title
  p Welcome to #{title}

好了,Express Generator生成的文件就是这样了,接下来,就开始Express应用的开发吧!

另外Express官网的文档写的不错,有问题就找它

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容