详解如何使用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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
原生js+css实现tab切换功能
Sep 17 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
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
浅谈PHP的反射机制
2016/12/15 PHP
jquery 常用操作方法
2010/01/28 Javascript
一些mootools的学习资源
2010/02/07 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
python中的装饰器详解
2015/04/13 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python中四舍五入的正确打开方式
2021/01/18 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
七年级数学教学反思
2014/01/22 职场文书
考试不及格的检讨书
2014/01/22 职场文书
员工保密协议书
2014/09/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
中标通知书格式
2015/04/17 职场文书
学困生转化工作总结
2015/08/13 职场文书