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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
处理canvas绘制图片模糊问题
May 11 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
初探PHP5
2006/10/09 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Django实现表单验证
2018/09/08 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python Xpath语法的使用
2020/11/26 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
交通事故检查书范文
2014/01/30 职场文书
3的组成教学反思
2014/04/30 职场文书
工作年限证明模板
2014/11/01 职场文书
团委工作总结2015
2015/04/02 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android