详解如何使用node.js的开发框架express创建一个web应用

搭建环境

1.安装Express

按键:Windows+R=>输入cmd,打开命令行,输入

npm install -g express@3

我们需要用全局模式安装Express,因为只有这样,我们才能在命令行中使用它

注意:这里我只选用Express 3.x版本,要是你对Express3x版本熟悉了的话,你只需看一下Migrating from 3.x to 4.x 的文档即可过渡到Express 4.x

2.新建一个工程

继续打开命令行,输入

express -e murenziwei

注意:Express 3.x中使用ejs时不再是-t ejs,而是-e,可以输入express -h查看

继续输入:(路径切换到文件夹murenziwei)

cd murenziwei

继续输入:(安装所需模块)

npm install

如图所示

安装成功后输入:

node app

在浏览器上访问ocalhost:3000,如图以下:

3.项目结构

我们回头看看生成的项目目录里面都有什么,打开我们的murenziwei文件夹,如图

  • node_modules:存放package.json中安装的模块,当你在package.json中添加依赖的模块并安装后,该模块会存放在这个文件夹
  • public:存放图片/样式/脚本等文件
  • routes:存放路由文件
  • views:存放视图文件,或者说是模板文件
  • app.js:启动文件,或者说入口文件
  • package.json:存储项目的信息及模块依赖,当在dependencies中添加依赖的模块时,运行npm install,npm会检查当前目录下的package.json,并自动安装所有指定的模块
  • package-lock.json:记录整个node_modules文件夹的树状结构,加快安装模块的速度

让我们来看一看,打开app.js,究竟是什么代码组成?

/*

 Module dependencies.

 */

var express = require('express');

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

var user = require('./routes/user');

var http = require('http');

var path = require('path');

var app = express();

// all environments

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

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

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

app.use(express.favicon());

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

app.use(express.json());

app.use(express.urlencoded());

app.use(express.methodOverride());

app.use(app.router);

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

// development only

if ('development' == app.get('env')) {

 app.use(express.errorHandler());

}

app.get('/', routes.index);

app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){

 console.log('Express server listening on port ' + app.get('port'));

});  

这里我们通过require()加载了express,http,path模块,还有routes文件夹下的index.js和user.js

1.app.set('port', process.env.PORT || 3000):设置端口为process.env.PORT或者3000;

2.app.set('views', path.join(__dirname, 'views')):设置views文件夹为存放视图文件的目录,即存放模板文件的地方,__dirname为全局变量,存储当前正在执行的js所在的目录;

3.app.set('view engine','ejs'):设置视图模块引擎为ejs

4.app.use(express.favicon()):connect内建的中间件,使用默认的favicon图标,如果想使用自己的图标,需改为app.use(express.favicon(__dirname+"/public/images/favicon.ico")),这里我们把自定义的favicon.icon放到/public/images文件夹下

5.app.use(express.logger('dev')):connect内建的中间件,在开发环境下使用,在终端显示简单的日志,例如在启动app.js后访问localhost:3000,终端会输出:

如果没有这一行代码,不管你怎么刷新页面,终端都只有一行Express sever listening on port 3000

6.app.use(express.json());

app.use(urlencoded());

用来解析请求体,支持application/json,application/x-www-form-urlencoded

7.app.use(express.methodOverride()):connect内建的中间件,可以协助处理POST请求,伪装成 PUT,DELETE和其它HTTP方法

8.app.use(app.router):调用路由解析的规则

9.app.use(express.static(path.join(__dirname, 'public'))):connect内创建的中间件,将根目录下的public文件夹设置为存放images,css,js等静态文件的目录

if ('development' == app.get('env')) {
 app.use(express.errorHandler());
}

此段代码可理解为:配置开发环境下的错误处理,输出错误信息

10.app.get('/', routes.index):路由控制器,如果用户访问/(主页),则由routes.index来处理,routes/index.js的内容如下:

exports.index = function(req, res){
 res.render('index', { title: 'Express' });
};

通过exports.index导出index函数接口,app.get('/',routes.index)相当于:

app.get("/",function(res,rep){

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

})

解释一下上行的res.render("index",{title:"Express"}):使用ejs模板引擎解析views/index.ejs(因为我们之前通过app.set("views",__dirname+"/views")设置了模板文件默认存储在views文件夹下),并传入一个对象,这个对象只有一个title属新,它的值为字符串Express,即用字符串Express替换views/index.ejs中所有的title变量,这就是我们所说的渲染视图,或者说渲染模板。

11.

http.createServer(app).listen(app.get('port'), function(){
 console.log('Express server listening on port ' + app.get('port'));
});

这段代码可以这样理解:创建http服务器并监听3000端口,创建成功后,终端显示如下

然后我们就可以在浏览器中访问localhost:3000了

最后总结一下我所讲的知识点:如何创建一个node项目并启动它,了解了项目的大体结构。

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

(0)

相关推荐

  • nodejs使用express创建一个简单web应用

    Express 在初始化一个项目的时候需要指定模板引擎,默认支持Jade和ejs. 这里我们使用ejs模板引擎:(关于ejs的介绍可以先从百科里面了解一个大概) EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串. 在使用express创建一个网站的时候,使用ejs模板引擎,建立基本的网站结构,当前目录下使用:express -t ejs sophiehui命令就在当前目录下创建了一个sophiehui的子目录,创建信息如图片所示: 倒数第四行提示我们安装依赖,所以接

  • 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创建一个web应用

    搭建环境 1.安装Express 按键:Windows+R=>输入cmd,打开命令行,输入 npm install -g express@3 我们需要用全局模式安装Express,因为只有这样,我们才能在命令行中使用它 注意:这里我只选用Express 3.x版本,要是你对Express3x版本熟悉了的话,你只需看一下Migrating from 3.x to 4.x 的文档即可过渡到Express 4.x 2.新建一个工程 继续打开命令行,输入 express -e murenziwei 注意

  • 详解如何使用Node.js实现热重载页面

    前言 前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面. 那么,我今天就总结一下吧,以防止大家也跟我一样. 热重载 所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新. 热更新 浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面. 目的:加快开发速度,所以只适用于开发环境下使用. 思路

  • 详解两个Node.js进程是如何通信

    目录 前言 不同电脑上的两个 Node.js 进程间通信 使用 TCP 套接字 使用 HTTP 协议 同一台电脑上两个 Node.js 进程间通信 使用内置 IPC 通道 使用自定义管道 总结 前言 两个 Node.js 进程之间如何进行通信呢?这里要分两种场景: 不同电脑上的两个 Node.js 进程间通信 同一台电脑上两个 Node.js 进程间通信 对于第一种场景,通常使用 TCP 或 HTTP 进行通信,而对于第二种场景,又分为两种子场景: Node.js 进程和自己创建的 Node.j

  • 详解Wondows下Node.js使用MongoDB的环境配置

    为了保存网站的用户数据和业务数据,通常需要一个数据库.MongoDB和Node.js特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二进制格式)存储的,增删改查等管理数据库的命令和JavaScript语法很像.如果你在Node.js里访问MongoDB的数据,会有我们是一家人的感觉,特别亲切. 我也准备使用MongoDB来作为我的数据库. MongoDB使用集合(collection)和文档(document)来描述和存储数据,collection就相当

  • 详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

    最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱.借此发 我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin&q

  • 详解axios在node.js中的post使用

    前言: 最近因为做的东西需要用到网络请求库,之前接触过的只有request,很强大好用.但是这个项目中需要用到Promise,我又不想重新封装,于是选择了另一款库axios. 在node中,axios的get请求加上原生支持的Promise语法使用起来很方便,很丝滑,但是后面碰到了一个需求,就是要向另一个服务器post数据,并且这个数据是以form-data的形式post过去的,这时,问题就出现了. 问题: 当我想在node中使用axios以post的方式发送一张图片给某个server时,最先我

  • 详解如何使用Node.js编写命令工具——以vue-cli为例

    vue-cli全局安装之后,提供了vue命令和vue init.vue list.vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目.本文简单介绍一下这些命令是如何实现的. vue-cli的项目目录 如下图,由之前文章介绍,npm安装过程中,可以利用package.json中bin字段的配置,将bin目录下的命令文件软连到全局命令.也就是说在/usr/local/bin下生成了四个软连命令:vue.vue-build.vue-list.vue-init. vue命令的源码

  • 详解一些适用于Node.js的命名约定

    序言 There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton 我乔鲁诺·乔巴拿有一个梦想,便是要成为程序员巨星.但如果你看过我写的代码,便知道我还远远够不上"巨星"二字.我的代码中有许多不一致的命名: 常量的命名时而是全大写的(如WAIT_CONFIRM),时而是全小写的: 某个项目大部分命名用的是camel case(如TaskC

  • node.js三个步骤实现一个服务器及Express包使用

    目录 用http 模块写一个简单的web服务器 常见的几种文件类型及content-type Express基本介绍 Express使用 用http 模块写一个简单的web服务器 第一步:新建一个文件,名为  d:/src/http.js( 文件名及路径名可以自行设置,建议均不使用中文字符), 内容如下 // 1. 引入http模块 const http = require('http'); // 2. 创建服务 const server = http.createServer(function

  • 详解node.js创建一个web服务器(Server)的详细步骤

    前言 在 node.js 中创建一个服务器非常简单,只需要使用 node.js 为我们提供的 http 模块及相关 API 即可创建一个麻雀虽小但五脏俱全的web 服务器,相比 Java/Python/Ruby 搭建web服务器的过程简单的很. http model 要想创建一个基于 node.js 的 web 服务器,你就必须使用 node.js 提供的 http 模块,node.js 中的 http 接口旨在支持传统上难以使用的协议的许多特性, 特别是,大块的.可能块编码的消息,接口永远不会

随机推荐