Maison > Article > interface Web > Une brève introduction pour démarrer avec Node.js et Express (images et texte)
Une brève introduction pour démarrer avec Node.js et Express (images et texte)
- 黄舟original
- 2017-03-25 14:39:221535parcourir
Cet article présente principalement www.php.cn/wiki/1498.html" target="_blank">Une introduction simple à Node.js et Express, et détaille comment créer un serveur Web avec Node.js et Express , ceux qui sont intéressés peuvent en apprendre davantage.
Il présente simplement comment construire un serveur Web avec Node.js et Express. Il n'explique pas trop de choses conceptuelles
, Introduction. à Nodejs
==Node est l'environnement d'exploitation serveur du langageJavascript ==Le soi-disant "environnement d'exécution." "Cela a deux significations : premièrement, le langage Javascript s'exécute sur le serveur via Node. En ce sens, Node est un peu comme une machine virtuelle Javascript ; deuxièmement, Node fournit un grand nombre de bibliothèques d'outils qui permettent le Langage Javascript pour interagir avec le système d'exploitation (comme lire et écrire des fichiers, créer de nouveaux sous-processus), en ce sens, Node est également une bibliothèque d'outils pour Javascript
Node utilise en interne le moteur V8 de Google comme langage Javascript. interprète ; il appelle les ressources du système d'exploitation via la bibliothèque libuv auto-développée
2.1 Node.js 2.1 Node. Téléchargement .js
Le site officiel téléchargera et installera Node.js en fonction de votre système d'exploitation actuel et vous fournira la version la plus appropriée à télécharger
. 
2.2 Installation
Après un téléchargement réussi, il y aura un fichier msi, double-cliquez pour l'installer Oui. Une fois l'installation réussie, les
variables d'environnementcorrespondantes seront automatiquement. configuré, et nous n'avons pas besoin de configurer manuellement
pour installer avec succès
2.3 Testez si Node.js est installé avec succès
. Une fois l'installation réussie, vous pouvez vérifier si l'installation a réussi dans la console Windows
Entrez la commande suivante pour vérifier la version du nœud 🎜>
Entrez directement le nœud et appuyez sur Entrée pour laisser. node exécute notre code js
node -v
node
2.4 Utilisation de Node.js Exécutez le code Javascript 
Dans la console Windows, remplacez le répertoire par le répertoire où se trouve le fichier js et saisissez
var num1 = 10; var num2 = 20; console.log(num1 + num2);
. node 01_hello.js
3. Clarification de certains concepts de base dans Node.js
3.1 Node.js n'est pas une application JS, mais une plateforme d'exécution JS. En voyant le nom Node.js, les débutants peuvent penser à tort qu'il s'agit d'une application Javascript. En fait, Node.js est écrit en langage C++ et est un environnement d'exécution Javascript.
Puisqu'il ne s'agit pas d'une application Javascript, pourquoi s'appelle-t-elle .js ? Parce que Node.js est un environnement d'exécution Javascript. Lorsqu'il s'agit de Javascript, la première chose qui vous vient à l'esprit est le navigateur que vous utilisez quotidiennement. Les navigateurs modernes incluent divers composants, notamment des moteurs de rendu, des moteurs Javascript, etc. Le moteur Javascript est responsable de l'interprétation et de l'exécution du code Javascript sur le Web. pages. En tant que l'un des langages les plus importants du front-end Web, Javascript a toujours été le brevet des ingénieurs front-end. Cependant, Node.js est un environnement d'exécution Javascript back-end (les systèmes pris en charge incluent
Linux, Windows), ce qui signifie que vous pouvez écrire du code Javascript au niveau du système ou côté serveur et le laisser à Node.js pour le reste. Interprétation et exécution,
3.2 La relation entre Node.js et Javascript Javascript comprend 3 parties : ECMAscript-262, BOM et DOM. La nomenclature est liée au navigateur et le DOM est lié à la page HTML. ECMAscript-262 est simplement inclus dans Node.js. Par conséquent, certaines de nos précédentes opérations BOM et DOM ont été exécutées côté navigateur et ne peuvent pas être utilisées dans Node.js.
3.3 Plusieurs variables globales dans Node.js
- représente l'environnement global où se trouve Node situé , similaire à l'
- objet fenêtre
du navigateur. Il convient de noter que si vous déclarez une variable globale dans le navigateur, vous déclarez en fait un attribut d'un objet global. Par exemple, var x = 1 équivaut à définir window.x = 1, mais. ce n'est pas le cas avec Node. , du moins pas dans les modules (les environnements REPL se comportent de manière cohérente avec les navigateurs). Dans le fichier du module, déclarez var x = 1. Cette variable n'est pas une propriété de l'objet global et global.x est égal à undefined. En effet, les variables globales du module sont privées pour le module et ne sont pas accessibles aux autres modules.
processus : Cet objet représente le processus actuel dans lequel se trouve Node, permettant aux développeurs d'interagir avec le processus. console：指向Node内置的console模块，提供命令行环境中的标准输入、标准输出功能。
3.4 Node.js中的几个全局函数
setTimeout()：用于在指定毫秒之后，运行回调函数。实际的调用间隔，还取决于系统因素。间隔的毫秒数在1毫秒到2,147,483,647毫秒（约24.8天）之间。如果超过这个范围，会被自动改为1毫秒。该方法返回一个整数，代表这个新建定时器的编号。
clearTimeout()：用于终止一个setTimeout方法新建的定时器。
setInterval()：用于每隔一定毫秒调用回调函数。由于系统因素，可能无法保证每次调用之间正好间隔指定的毫秒数，但只会多于这个间隔，而不会少于它。指定的毫秒数必须是1到2,147,483,647（大约24.8天）之间的整数，如果超过这个范围，会被自动改为1毫秒。该方法返回一个整数，代表这个新建定时器的编号。
clearInterval()：终止一个用setInterval方法新建的定时器。
require()：用于加载模块。
Buffer()：用于操作二进制数据。
3.5 Node.js的核心模块
如果只是在服务器运行Javascript代码，用处并不大，因为服务器脚本语言已经有很多种了。Node.js的用处在于，它**本身**还提供了一系列功能模块，与操作系统互动。这些核心的功能模块，不用安装就可以使用，下面是它们的清单。
http：提供HTTP服务器功能。
url：解析URL。
fs：与文件系统交互。
querystring：解析URL的查询字符串。
child_process：新建子进程。
util：提供一系列实用小工具。
path：处理文件路径。
crypto：提供加密和解密功能，基本上是对OpenSSL的包装。
三、搭建web应用
使用Node.js搭建web服务器，一般使用一些框架来帮助完成。
express 是一个开源的node.js项目框架，初学者使用express可以快速的搭建一个Web项目，express中已经集成了Web的http服务器创建、请求和文件管理以及Session的处理等功能，所以express是非常适合初学者的入门学习。
3.1 安装Express框架
使用node.js自带的包管理器npm安装。
创建一个项目目录，Node_Hello。进入该目录，创建一个package.json文件，文件内容如下：
{
"name": "Node_Hello",
"description": "nodejs hello world app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "4.x"
}
}上面代码定义了项目的名称、描述、版本等，并且指定需要4.0版本以上的Express。
==从控制台首先进入刚才的项目目录==，然后输入如下命令，则会开始下载Express。
npm install
下载完成
3.2 创建启动文件
在上面的项目目录下，新建一个启动文件，名字暂叫 ==index.js== 。书写如下代码：
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('<h1>你好，这是我们的第一个nodejs项目</h1>');
});
app.listen(8080);3.3 运行index.js文件
node index.js
3.4 使用浏览器访问
在浏览器输入下面的地址就可以访问我们刚刚搭建的web网站了。
127.0.0.1:8080
四、使用Webstorm搭建Node.js web应用
使用webstorm搭建Node.js应用更加方便。
4.1 下载WebStorm，并安装
下载完成后，直接安装即可。
4.2 创建Node + Express应用
4.3 Project目录结构
app.js：启动文件，或者说入口文件
package.json：存储着工程的信息及模块依赖，当在 dependencies 中添加依赖的模块时，运行 npm install ，npm 会检查当前目录下的 package.json，并自动安装所有指定的模块
node_modules：存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下
public：存放 image、css、js 等文件
routes：存放路由文件
views：存放视图文件或者说模版文件
bin：存放可执行文件(www)
4.4 各个主要文件的说明
4.4.1 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 index = require('./routes/index');
var users = require('./routes/users');
// 生产一个express的实例
var app = express();
// view engine setup
/*
设置 views 文件夹为存放视图文件的目录,
即存放模板文件的地方,dirname 为全局变量,
存储当前正在执行的脚本所在的目录。
*/
app.set('views', path.join(dirname, 'views'));
//设置模板引擎为ejs
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(dirname, 'public', 'favicon.ico')));
//加载日志中间件
app.use(logger('dev'));
//加载解析json的中间件
app.use(bodyParser.json());
//加载解析urlencoded请求体的中间件。 post请求
app.use(bodyParser.urlencoded({extended: false}));
//加载解析cookie的中间件
app.use(cookieParser());
//设置public文件夹为放置静态文件的目录
app.use(express.static(path.join(dirname, 'public')));
// 路由控制器。
app.use('/', index); // http://localhost:3000
app.use('/users', users); //http://localhost:3000/users
// 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');
});
//把app导出。 别的地方就可以通过 require("app") 获取到这个对象
module.exports = app;4.4.2 bin/www
#!/usr/bin/env node //表明是node可执行文件
/**
* Module dependencies.
*/
//引入我们在app.js中导出的app模块
var app = require('../app');
//引入debuger模块，打印调试日志
var debug = require('debug')('hello:server');
//引入http模块
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port); //设置端口号
/**
* Create HTTP server.
*/
//创建Http服务器
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
//监听指定的端口
server.listen(port);
//监听error事件。 onError是发生错误的时候的回调函数
server.on('error', onError);
//监听listening事件
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}4.4.3 routes/index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: '育知同创' });
});
module.exports = router;
/*
生成一个路由实例用来捕获访问主页的GET请求，
导出这个路由并在app.js中通过app.use('/', routes);
加载。这样，当访问主页时，就会调用res.render('index', { title: '育知同创' });
渲染views/index.ejs模版并显示到浏览器中。
*/4.4.4 对路由写法的优化
在前面的==app.js中==，每个模板都有添加一次路由比较麻烦，其实应该把添加路由的事情专门交给index.js来做。也就是可以把多个路由放在一个路由文件中。
//加载路由文件 var index = require('./routes/index'); //去掉 var users = require('./routes/users'); //去掉 // 路由控制器。 app.use('/', index); // http://localhost:3000 //去掉 app.use('/users', users); //http://localhost:3000/users //去掉
可以改成：
var routes = require('./routes/index'); routes(app);
==index.js==文件优化成： 这样管理起来就方便很多
module.exports = function (app) {
//一个get请求的路由 http://localhost:3000
app.get("/", function (req, res) {
res.render("index", {title:"育知同创abc"})
});
//又一个请求路由：http://localhost:3000/abc
app.get("/abc", function (req, res) {
res.render("index", {title:"育知同创" + req.path})
});
}4.4.5 ejs模板
模板引擎（Template Engine）是一个将页面模板和要显示的数据结合起来生成 HTML 页面的工具。如果说上面讲到的 express 中的路由控制方法相当于 MVC 中的控制器的话，那模板引擎就相当于 MVC 中的视图。
模板引擎的功能是将页面模板和要显示的数据结合起来生成 HTML 页面。它既可以运 行在服务器端又可以运行在客户端，大多数时候它都在服务器端直接被解析为 HTML，解析完成后再传输给客户端，因此客户端甚至无法判断页面是否是模板引擎生成的。有时候模板引擎也可以运行在客户端，即浏览器中，典型的代表就是 XSLT，它以 XML 为输入，在客户端生成 HTML 页面。但是由于浏览器兼容性问题，XSLT 并不是很流行。目前的主流还是由服务器运行模板引擎。
在 MVC 架构中，模板引擎包含在服务器端。控制器得到用户请求后，从模型获取数据，调用模板引擎。模板引擎以数据和页面模板为输入，生成 HTML 页面，然后返回给控制器，由控制器交回客户端。
==ejs 是模板引擎的一种，它使用起来十分简单，而且与 express 集成良好。==
我们通过以下两行代码设置了模板文件的存储位置和使用的模板引擎：(app.js文件中进行的设置)
app.set('views', dirname + '/views'); app.set('view engine', 'ejs');
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%- title %></p> </body> </html>
说明：
ejs 的标签系统非常简单，它只有以下三种标签：
09ec39c8cf80993cee8f36d507abec3c：Javascript 代码。
b87f5fe9deb6bc8214cf0c7085055a22：显示替换过 HTML 特殊字符的内容。(也就是说如果code中有标签，则会原样输出，不会让浏览器解析)
8c0f8149cd2243ceacec364b0951d5dd：显示原始 HTML 内容。(如果有a标签，在浏览器端这则会看到一个超链接)
路由代码：
router.get('/', function(req, res, next) {
res.render('index', { title: "<a href='http://www.baidu.com'>百度 </a>"});
});
// 则会用title的值去替换ejs中的相应的代码。则生成的代码：
<!DOCTYPE html> <html> <head> <title><a href='http://www.baidu.com'>百度 </a></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><a href='http://www.baidu.com'>百度 </a></h1> <p>Welcome to <a href='http://www.baidu.com'>百度 </a></p> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!