Node.js使用Express创建Web项目详细教程


Posted in Javascript onMarch 31, 2017

序:如果你还不知道Node.js是什么,那么你可以先看看这篇:Node.js 究竟是什么?或者任何关于它的介绍。

一、安装Node.js

1.进入Node.js官网下载并安装

Node.js使用Express创建Web项目详细教程

2.启动cmd输入命令查看node及npm版本

node -vnpm -v

Node.js使用Express创建Web项目详细教程

npm是node完成安装后自带的包管理器

二、安装Express

express是node平台下最常用的web应用开发框架

1.全局安装express

npm install -g express

Win7环境全局安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules文件夹下

2.全局安装express命令行工具

npm install -g express-generator

在最新的4.x版本中,命令行工具已经被独立出来

3.查看express版本

express -V

Node.js使用Express创建Web项目详细教程 

4.更新已安装的express

npm update -g express

三、使用Express创建项目

1.创建项目

express APP_NAME

express默认以jade作为模板引擎,模板文件为.jade类型;jade的语法与html有较大差异,对缩进也是要求严格的

Node.js使用Express创建Web项目详细教程

2.以ejs作为模板引擎创建项目

express APP_NAME -e

在项目名称的后面添加 -e 那么创建出来的模板文件就是.ejs类型,语法是与html相同的

Node.js使用Express创建Web项目详细教程

3.将ejs文件改为html

若希望模板文件的后缀为.html(通常只是为了看着更舒服),那么在手动将.ejs换成.html后,还需要对app.js文件进行设置

var ejs = require('ejs');

app.engine('.html', ejs.__express);
app.set('view engine', 'html');  //app.set('view engine', 'ejs');

原文件:

Node.js使用Express创建Web项目详细教程

修改后:

Node.js使用Express创建Web项目详细教程

4.安装依赖包

进入项目文件夹,执行:

npm install

下载package.json中记录的所有依赖包到node_modules文件夹

注意:更多npm命令,请查看npm常用命令集合

四、启动服务

1.启动

npm start

监听bin/www文件,默认端口为3000,可在www文件中更改

Node.js使用Express创建Web项目详细教程

2.打开浏览器,输入localhost:3000

Node.js使用Express创建Web项目详细教程

3.自动重启服务

打开package.json可以看见,监听bin/www文件的命令是node

Node.js使用Express创建Web项目详细教程

使用node监听将会导致:每次修改代码后,需要手动重启服务,可以使用nodemon进行自动重启

npm install -g nodemon

同样可以使用下面的命令查看其版本

nodemon -v

将package.json文件中的代码修改为:

"start": "nodemon ./bin/www"

重新执行:

npm start

Node.js使用Express创建Web项目详细教程

接下来,就可以随心所欲的编码了...

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
js自定义回调函数
Dec 13 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 #Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 #Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 #Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 #Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 #Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 #Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 #Javascript
You might like
详细介绍PHP应用提速面面观
2006/10/09 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php中使用GD库做验证码
2016/03/31 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
python处理cookie详解
2014/02/07 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
工程造价自荐信
2013/10/09 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
单位授权委托书范本
2014/09/26 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
vue实现列表垂直无缝滚动
2022/04/08 Vue.js