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 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 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的命名空间(二)
2018/02/21 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python中防止sql注入的方法详解
2017/02/25 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
办公室文员工作职责
2014/01/31 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
预备党员承诺书
2014/03/25 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
工地安全标语
2014/06/07 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
高二数学教学反思
2016/02/18 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS