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


Posted in Javascript onDecember 20, 2018

搭建环境

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.js的开发框架express创建一个web应用

安装成功后输入:

node app

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

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

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

3.项目结构

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

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

  • 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,终端会输出:

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

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

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

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端口,创建成功后,终端显示如下

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

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

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

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

Javascript 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
js canvas实现橡皮擦效果
Dec 20 #Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 #Javascript
Cocos2d实现刮刮卡效果
Dec 20 #Javascript
浅谈Fetch 数据交互方式
Dec 20 #Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 #Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 #Javascript
fetch 如何实现请求数据
Dec 20 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python3 操作符重载方法示例
2017/11/23 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python binascii 进制转换实例
2019/06/12 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
容易被忽略的Python内置类型
2020/09/03 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
护士在校生自荐信
2014/02/01 职场文书
十八大标语口号
2014/10/09 职场文书
Python编写nmap扫描工具
2021/07/21 Python