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 相关文章推荐
为原生js Array增加each方法
Apr 07 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
利用vue实现模态框组件
Dec 19 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
javascript中undefined的本质解析
Jul 31 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 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控制文件下载速度的方法
2015/03/24 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
高中团支书竞选稿
2015/11/21 职场文书
2016年少先队活动总结
2016/04/06 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python