当前位置:首页 > 技术分析 > 正文内容

Express.js 创建Node.js Web应用

ruisui881个月前 (03-24)技术分析5

Express.js是一个基于Node.js的Web应用框架,框架的设计目的是构建应用的架构和简化应用的开发。框架会解决一些通用的问题,在Express.js中,Express框架会处理如:中间件、代码控制、静态资源管理、HTML模块加载等问题。Express.js是非常优秀的一个Web框架,本站就是基于Express框架构建的。

1. 安装初始化

1.1 安装express项目生成器

在Expressv4.0之前,生成项目直接安装express模块即可。一般会全局安装,安装命令如下:

npm install -g express

Expressv4.+之后,Express将项目生成器分离成了单独的模块。生成项目需要安装express-generator模块:

npm install -g express-generator

1.2 初始化应用

安装Express后,我们就可以使用express命令创建一个Web应用:

express my_app

以上命令输出如下:

create : my_app

create : my_app/package.json

create : my_app/app.js

create : my_app/public

create : my_app/routes

create : my_app/routes/index.js

create : my_app/routes/users.js

create : my_app/views

create : my_app/views/index.jade

create : my_app/views/layout.jade

create : my_app/views/error.jade

create : my_app/public/javascripts

create : my_app/public/images

create : my_app/public/stylesheets

create : my_app/public/stylesheets/style.css

create : my_app/bin

create : my_app/bin/www

install dependencies:

$ cd my_app && npm install

run the app:

$ DEBUG=my-application ./bin/www

Express默认使用jade视图,如果需要使用ejs视图,可以在执行命令时添加-e参数:

express -e my_app

1.3 express命令说明

在上面我们使用express命令创建了一个my_app应用。express命令详细说明如下:

语法格式: express [选项] [文件夹名]

选项:

-h, --help 输出用法说明

-V, --version 输出版本

-e, --ejs 添加 ejs 视图引擎支持(默认是jade)

-H, --hogan 添加 hogan.js 引擎支持

-c, --css 添加样式表引擎支持(less|stylus|compass)(默认为plain css)

-f, --force 强制使用非空文件夹

2. Express应用说明

在前面我们创建my_app,是一个基于Express框架的Web应用程序。Express帮我们创建应用程序的目录,并在对应文件放到了指定的目录中。这样就简化了很多操作,接下来再扩展应用程序功能时,按规则在指定的目录中添加功能文件即可。接下来,进入my_app目录,分析下express都创建了哪些文件。

2.1 package.json文件

首先,有一个package.json文件,其内容如下:

{

"name": "application-name",

"version": "0.0.1",

"private": true,

"scripts": {

"start": "node ./bin/www"

},

"dependencies": {

"express": "~4.0.0",

"static-favicon": "~1.0.0",

"morgan": "~1.0.0",

"cookie-parser": "~1.0.1",

"body-parser": "~1.0.0",

"debug": "~0.7.4",

"ejs": "~0.8.5"

}

这个文件中是一个JSON格式的配置文件,其中包含了应用名、启动脚本、依赖包等信息:

  • name:应用名

  • version:应用版本号

  • private:是否私有项目

  • private:是否私有项目

  • scripts:应用的启动脚本。在本例中,我们可以使用node ./bin/www命令来启动应用

  • dependencies:应用所依赖的npm模块

2.2 public目录

public目录用于存放应用可能需要的静态资源,public目录中的文件不需要在路由中映射,而可以直接访问。public目录中包含以下三个子目录,分别放置了不同的静态资源:

  • images:用于存放图片文件

  • javascripts:用于JS脚本文件

  • stylesheets:用于存放样式表文件

这三个子目录是Express建议的标准目录。当然,我们可以按需要自行修改,如可以分别改写为更简短的目录名:imgjscss

2.3 app.js文件

app.js是一个服务器初始化文件,其代码结构如下:

/* 引入依赖项 */

var express = require('express');

var path = require('path');

var favicon = require('static-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');

var app = express();

// 设置视图引擎目录

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

// 配置一些通用的中间件

app.use(favicon());

app.use(logger('dev'));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded());

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));

// 引入路由

app.use('/', routes);

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

/// 处理404 并向下传递错误

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: {}

});

});

module.exports = app;

2.4 bin目录及bin/www文件

express v4.0版本之前,Express通过app.js文件启动。v4.0版本之后,Express启动文件独立为bin/www文件。文件内容如下:

#!/usr/bin/env node

var debug = require('debug')('my-application');

// 引用要启动的应用

var app = require('../app');

// 设置应用监听的端口

app.set('port', process.env.PORT || 3000);

// 启动HTTP服务器

var server = app.listen(app.get('port'), function() {

debug('Express server listening on port ' + server.address().port);

});

2.5 routes目录

routes目录用于放置应用的路由文件。路由中设置的路径会最终暴露给用户访问,路由会按用户指定的HTTP请求方式处理服务器资源,并在处理完成后返回用户所需资源。如,routes/index文件:

var express = require('express');

var router = express.Router();

/* GET 请求应用主页 */

router.get('/', function(req, res) {

res.render('index', { title: 'Express' });

});

module.exports = router;

在这个文件中,包含了一个GET请求。当用户访问/路径(即:应用主页)时,服务端会渲染index视图文件后,返回一个HTTP页面。

2.6 views目录

views目录用于存入视图文件,views目录在app.js文件中被设置为视图文件的根目录,然后就在路由文件中根据此设置加载并渲染视图。

3. 启动应用

3.1 安装依赖包

启动应用前,需要先安装项目所依赖的npm包,也就是package.json文件中dependencies节点下所引用的包。安装命令如下:

npm install

在扩展项目功能时,我们可能会引用新的npm模块。引入新的模块时,我们可以通过npm install命令安装并添加--save参数,将依赖关系自动保存到package.json文件中dependencies节点下。如,添加一个request模块:

npm install request --save

3.2 启动应用

安装完项目依赖包后,我们就可以通过node命令来启动应用了:

node bin/www

项目启动后,可以在浏览中通过http://127.0.0.1:3000http://localhost:3000来访问应用。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2973.html

标签: res.render
分享给朋友:

“Express.js 创建Node.js Web应用” 的相关文章

vue3中父子传值、defineProps用法、defineEmits用法

Vue3中新增了一个 script setup 语法糖模式,可以在单文件组件中更简洁地编写组件逻辑。使用 script setup 语法后,props、data、computed、methods 等选项不再需要独立定义,而是可以直接在 setup 函数中声明,代码结构更加清晰,并且可以更方便地使用响...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

HTML5学习笔记三:HTML5语法规则

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img input6.废除的标签font center big7.新添加的标签将在下一HTML5学习笔记中重点阐述。...

「干货」FPGA设计中深度约束技巧及调试经验总结

今天跟大家分享的内容很重要,也是我们调试FPGA经验的总结。随着FPGA对时序和性能的要求越来越高,高频率、大位宽的设计越来越多。在调试这些FPGA样机时,需要从写代码时就要小心谨慎,否则写出来的代码可能无法满足时序要求。另外,最近跟网友聊天时,有谈到公众号寿命的问题,我觉得网络交换FPGA公众号应...

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容...