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实现的所谓的滑动门
May 23 Javascript
List the Codec Files on a Computer
Jun 18 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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中用数组的方法设置cookies
2011/04/21 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Django框架模板用法入门教程
2019/11/04 Python
Python线程指南分享
2019/11/19 Python
python 读取、写入txt文件的示例
2020/09/27 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
物理学专业自荐信
2014/06/11 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书