Node.js和Express简单入门介绍

仅仅入门如何用Node.js和Express搭建一个web服务器,没有说明太多概念性的东西。

一、 Nodejs简介

​ ==Node是JavaScript语言的服务器运行环境。==

​ 所谓“运行环境”有两层意思:首先,JavaScript语言通过Node在服务器运行,在这个意义上,Node有点像JavaScript虚拟机;其次,Node提供大量工具库,使得JavaScript语言与操作系统互动(比如读写文件、新建子进程),在这个意义上,Node又是JavaScript的工具库。

​ Node内部采用Google公司的V8引擎,作为JavaScript语言解释器;通过自行开发的libuv库,调用操作系统资源。

二、Node.js的下载和安装

2.1 Node.js下载

node.js官网下载:http://www.jb51.net/softs/504128.html

官网会根据你当前的操作系统,提供给你最合适的版本去下载。

2.2 安装

​ 下载成功之后是一个msi文件,双击安装即可。安装成功后,相应的环境变量都会自动配置,不需要我们再去手动配置。

​ 一路next就可以安装成功。

2.3 测试Node.js是否安装成功

安装成功之后,可以在window控制台查看是否安装成功。

输入下面的命令查看node的版本。

node -v

直接输入node然后回车,就可以让node去执行我们的js代码了。

node

2.4 使用Node.js运行JavaScript代码

新建一个nodeproject目录,新建一个js文件。01_hello.js

var num1 = 10;
var num2 = 20;
console.log(num1 + num2);

在windows控制台中,切换目录到js文件所在目录。然后输入

node 01_hello.js

三、Node.js中的一些基本概念澄清

3.1 Node.js不是JS应用、而是JS运行平台

​ 看到Node.js这个名字,初学者可能会误以为这是一个Javascript应用,事实上,Node.js采用C++语言编写而成,是一个Javascript的运行环境。

​ 既然不是Javascript应用,为何叫.js呢?因为Node.js是一个Javascript的运行环境。提到Javascript,大家首先想到的是日常使用的浏览器,现代浏览器包含了各种组件,包括渲染引擎、JavaScript引擎等,其中Javascript引擎负责解释执行网页中的Javascript代码。作为Web前端最重要的语言之一,Javascript一直是前端工程师的专利。不过,Node.js是一个后端的Javascript运行环境(支持的系统包括Linux、Windows),这意味着你可以编写系统级或者服务器端的Javascript代码,交给Node.js来解释执行,

3.2 Node.js与JavaScript的关系

​ JavaScript包括3个部分:ECMAScript-262、BOM、DOM。BOM与浏览器相关,DOM和HTML页面相关。Node.js中只是包括了ECMAScript-262。所以我们以前的一些关于BOM的操作和DOM的操作都是基于浏览器端运行的,在Node.js中是无法使用的。

3.3 Node.js中几个全局变量

  1. global:表示Node所在的全局环境,类似于浏览器的window对象。需要注意的是,如果在浏览器中声明一个全局变量,实际上是声明了一个全局对象的属性,比如var x = 1等同于设置window.x = 1,但是Node不是这样,至少在模块中不是这样(REPL环境的行为与浏览器一致)。在模块文件中,声明var x = 1,该变量不是global对象的属性,global.x等于undefined。这是因为模块的全局变量都是该模块私有的,其他模块无法取到。
  2. process:该对象表示Node所处的当前进程,允许开发者与该进程互动。
  3. console:指向Node内置的console模块,提供命令行环境中的标准输入、标准输出功能。

3.4 Node.js中的几个全局函数

  1. setTimeout():用于在指定毫秒之后,运行回调函数。实际的调用间隔,还取决于系统因素。间隔的毫秒数在1毫秒到2,147,483,647毫秒(约24.8天)之间。如果超过这个范围,会被自动改为1毫秒。该方法返回一个整数,代表这个新建定时器的编号。
  2. clearTimeout():用于终止一个setTimeout方法新建的定时器。
  3. setInterval():用于每隔一定毫秒调用回调函数。由于系统因素,可能无法保证每次调用之间正好间隔指定的毫秒数,但只会多于这个间隔,而不会少于它。指定的毫秒数必须是1到2,147,483,647(大约24.8天)之间的整数,如果超过这个范围,会被自动改为1毫秒。该方法返回一个整数,代表这个新建定时器的编号。
  4. clearInterval():终止一个用setInterval方法新建的定时器。
  5. require():用于加载模块。
  6. Buffer():用于操作二进制数据。

3.5 Node.js的核心模块

如果只是在服务器运行JavaScript代码,用处并不大,因为服务器脚本语言已经有很多种了。Node.js的用处在于,它**本身**还提供了一系列功能模块,与操作系统互动。这些核心的功能模块,不用安装就可以使用,下面是它们的清单。

  1. http:提供HTTP服务器功能。
  2. url:解析URL。
  3. fs:与文件系统交互。
  4. querystring:解析URL的查询字符串。
  5. child_process:新建子进程。
  6. util:提供一系列实用小工具。
  7. path:处理文件路径。
  8. 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网站了。

http://127.0.0.1:8080

四、使用Webstorm搭建Node.js web应用

​ 使用webstorm搭建Node.js应用更加方便。

4.1 下载WebStorm,并安装

下载Webstorm:http://www.jb51.net/softs/507325.html

下载完成后,直接安装即可。

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 的标签系统非常简单,它只有以下三种标签:

  1. <% code %>:JavaScript 代码。
  2. <%= code %>:显示替换过 HTML 特殊字符的内容。(也就是说如果code中有标签,则会原样输出,不会让浏览器解析)
  3. <%- code %>:显示原始 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Node.js的Express框架使用上手指南

    Express介绍 npm提供了大量的第三方模块,其中不乏许多Web框架,比如我们本章节要讲述的一个轻量级的Web框架 --- Express. Express是一个简洁.灵活的node.js Web应用开发框架, 它提供一系列强大的功能,比如:模板解析.静态文件服务.中间件.路由控制等等,并且还可以使用插件或整合其他模块来帮助你创建各种 Web和移动设备应用,是目前最流行的基于Node.js的Web开发框架,并且支持Ejs.jade等多种模板,可以快速地搭建一个具有完整功能的网站. 好,下面我

  • node.js express中app.param的用法详解

    前言 大家应该都知道,express中app.param方法用于验证参数,我个人把它理解成类似对参数过滤的一个中间件.在这里我来结合几个demo,加深大家对app.param方法的理解.下面话不多说,来一起通过示例代码看看详细的介绍吧. demo1: var express = require('express'); var app = express(); app.param(function(param, option) { return function (req, res, next,

  • Node.js+Express配置入门教程详解

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型

  • node.js Web应用框架Express入门指南

    一.安装 复制代码 代码如下: $ npm install express 或者在任何地方使用可执行的 express(1) 安装: 复制代码 代码如下: \# 译注:强烈建议这种方式$ npm install -g express 二.快速上手 最快上手 express 的方法是利用可执行的 express(1) 来生成一个应用,如下所示: 创建一个 app: 复制代码 代码如下: $ npm install -g express$ express /tmp/foo && cd /tmp

  • 从零学习node.js之express入门(六)

    一. 介绍 什么是express,为什么要使用express?根据官方网站的说法,express是一个基于 Node.js 平台的极简.灵活的web应用开发框架,它提供一系列强大的特性.丰富的API接口,对web应用的接口进行了二次的封装,提供了MVC模式,方便我们可以快速地创建各种web和移动应用. Express 框架核心特性: 可以设置中间件来响应 HTTP 请求. 定义了路由表用于执行不同的 HTTP 请求动作. 可以通过向模板传递参数来动态渲染 HTML 页面. 本文也只是简单的了解下

  • Node.js和Express简单入门介绍

    仅仅入门如何用Node.js和Express搭建一个web服务器,没有说明太多概念性的东西. 一. Nodejs简介 ​ ==Node是JavaScript语言的服务器运行环境.== ​ 所谓"运行环境"有两层意思:首先,JavaScript语言通过Node在服务器运行,在这个意义上,Node有点像JavaScript虚拟机:其次,Node提供大量工具库,使得JavaScript语言与操作系统互动(比如读写文件.新建子进程),在这个意义上,Node又是JavaScript的工具库. ​

  • node.js(express)中使用Jcrop进行图片剪切上传功能

    需求说明 简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程 说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64

  • node.js使用express框架进行文件上传详解

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究. 目前的研究算是取得的比较好的进展. Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口. 于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api). 话不多说,直接代码贴起讲解: 1.创建一个node.js项目(这里我以ex

  • 搞懂什么是Node.js原来这么简单

    Node.js 的官方介绍 在 Node.js 的官方网站的首页中,有这样一句话来描述 Node.js: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 翻译过来的意思就是: Node.js 是基于 Chrome

  • Node.js中Express框架的使用教程详解

    目录 Express简介 Express生成器 1. 什么是Express生成器 2. 安装Express生成器 创建Express项目 安装项目依赖 运行Express项目 Express目录结构说明 创建一个新路由模块 1. 创建ejs模块文件 2. 创建路由文件 3. 在app.js中引入路由 4. 运行项目 经过前面几天对Node.js的学习,基本的开发知识已经逐渐掌握,所谓工欲善其事必先利其器,今天进一步学习Node.js的开发框架Express.利用Express框架可以快速的进行W

  • 教你用Node.js与Express建立一个GraphQL服务器

    目录 前言 GraphQL服务器配置设置 定义模式 嘲弄我们的数据 定义解析器 定义突变 总结 前言 在这篇文章中,我们将对使用Node.js和Express建立GraphQL服务器的整个过程进行演练.我们将使用 Express 的中间件库express-graphql 来协助我们完成这一过程. 如果你还不熟悉GraphQL以及我们使用它的目的,请务必查看这篇文章,我们将深入了解GraphQL是什么以及为什么我们应该在我们的应用程序中使用它. 如果你已经熟悉它了,你可能想看看这篇文章,在这篇文章

  • Node.js实战 建立简单的Web服务器

    前面一章,我们介绍了Node.js这个面向互联网服务的JavaScript服务器平台,同时Node.js的运行环境已经搭建起来,并通过两段HelloWorld程序验证了Node.js的基本功能.本章我们同样通过实战的演练,利用Node.js建立一个简单的Web服务器. 如果你熟悉.NET或其他类似平台的Web开发,你可能会像,建立一个Web服务器有什么,在Visual Studio中建立一个Web工程,点击运行即可.事实的确是这样,但请不要忘记,这样的代价是,比如果说,你是用.NET开发Web应

  • 详解用Node.js写一个简单的命令行工具

    本文介绍了用Node.js写一个简单的命令行工具,分享给大家,具体如下: 操作系统需要为Linux 1. 目标 在命令行输入自己写的命令,完成目标任务 命令行要求全局有效 命令行要求可以删除 命令行作用,生成一个文件,显示当前的日期 2. 代码部分 新建一个文件,命名为sherryFile 文件sherryFile的内容 介绍: 生成一个文件,文件内容为当前日期和创建者 #! /usr/bin/env node console.log('command start'); const fs = r

  • Node.js使用Express.Router的方法

    在实际开发中通常有几十甚至上百的路由,都写在 index.js 既臃肿又不好维护,这时可以使用 express.Router 实现更优雅的路由解决方案. 目录结构如下: routes的index.js代码如下: const express = require('express') const router = express.Router() router.get('/', function (req, res) { res.send('hello, express') }) module.ex

  • Node.js利用Express实现用户注册登陆功能(推荐)

    要求 了解Express框架 了解node.js常用模块:express,body-parser,mysql 了解express Router 了解HTML form表单 了解MySQL Server 及安装使用 了解SQLyog使用 环境 OS: Win10 Node.js: v12.19.0 Express: v4.17.1 Yarn: v1.22.10 使用VScode IDE body-parser:1.19.0 mysql: 2.18.1 MySQL Server:5.7 SQLyog

随机推荐