nodejs 图解express+supervisor+ejs的用法(推荐)


Posted in NodeJs onSeptember 08, 2017

通过node js自带的http模块搭建了一个简易的服务器,实际在开发中,一般用的是express框架,本文我们就来讲讲项目开发中必备不可少的几样东西:

•服务器( express )

•路由( express.Router )

•模板引擎( ejs )

•当然再加上数据库,就可以完成一个mvc的web应用了,数据库的用法,后期我会写一个项目

一、首先,新建一个项目文件夹( ghostwu ),在命令行下切换到该目录,用npm init --yes 初始化package.json文件

nodejs 图解express+supervisor+ejs的用法(推荐)

安装express: npm install express --save

二、新建index.js文件,输入以下代码

var express = require('express');
var app = express();

app.get('/', function(req, res) {
 res.send( 'welcome to study express -by ghostwu' );
}).listen( 8080 );

第一行,加载express模块

第二行,开启web服务器

第三行,web服务器监听8080端口, 当通过浏览器输入( http://localhost:8080 ) 就会看到这段信息:welcome to study express -by ghostwu

三、如果你写过node服务器,你就会发现一个问题,每次修改之后,都要重启服务器,一般来说,我们修改文件之后,保存,刷新网页就能看到修改,需要达到这样的效果,我们就要安装supervisor,这个相当于webpack的热加载,我们采用全局安装: npm install -g supervisor,安装完成之后,我们以后就这样运行服务器文件了: supervisor --harmony index

nodejs 图解express+supervisor+ejs的用法(推荐)

之后修改index.js文件,只要保存,刷新网页就能马上看到修改之后的结果了

四、增加路由处理,修改index.js文件,把代码修改成如下:

var express = require('express');
var app = express();
app.get('/', function(req, res) {
 res.send('hello, express');
});
app.get('/user/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
app.get('/user/:name/age/:age', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age );
});
app.listen( 8080 );

http://localhost:8080/ ----> 显示hello, express

http://localhost:8080/user/ghostwu ----->显示hello, ghostwu

http://localhost:8080/user/ghostwu/age/22 ---->显示info: user:ghostwu, age:22

:name占位符: 用来接收user后面的值 :age占位符用来接收age后面的值, req.params后面获取的键名就是这个占位符

如果你学过php,那么就相当于下面这种get接收参数方式

xxx.php?user=ghostwu&age=22 -----> $_REQUEST['user'] $_REQUEST['age']

五、一般在项目中,路由是需要单独分离出来的,便于维护和扩展

新建routers,然后在下面创建index.js和info.js文件

index.js代码:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
 res.send('hello, express');
});

module.exports = router;

info.js代码:

var express = require('express');
var router = express.Router();

router.get('/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
router.get('/:name/age/:age2', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age2 );
});

module.exports = router;

ghostwu这个目录下面的index.js文件代码为:

var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

app.use('/', indexRouter);
app.use('/user', infoRouter);

app.listen(8080);

nodejs 图解express+supervisor+ejs的用法(推荐)

通过以上的代码,就完成了路由的分离,把 / 和 /user分别放在index.js,info.js文件,然后导出router对象,通过app.use找到对应的路由

六、ejs模板的应用

安装: npm install ejs --save

index.js文件:

var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

//设置模板目录: views
app.set('views', path.join(__dirname, 'views'));

//设置模板引擎: ejs
app.set('view engine', 'ejs');
app.use('/', indexRouter);
app.use('/user', infoRouter);
app.listen(8080);

info.js文件

var express = require('express');
var router = express.Router();

router.get('/:name', function(req, res) {
 res.render( 'info', {
 name : 'ghostwu',
 age : 22,
 sex : 'man'
 });
});
module.exports = router;

第5行res.render渲染模板文件 info.ejs, 第二个参数就是数据

info.ejs文件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  用户信息:
  <hr>
  <ul>
   <li>用户名: <%=name%></li>
   <li>年龄: <%=age%></li>
   <li>性别: <%=sex%></li>
  </ul>
 </body>
</html>

<%=变量名%>读出数据

<% code %>:运行 JavaScript 代码,不输出
<%= code %>: 转义html标签
<%- code %>:不转义html标签

其他ejs用法,结合手册查下

nodejs 图解express+supervisor+ejs的用法(推荐)

nodejs 图解express+supervisor+ejs的用法(推荐)

以上这篇nodejs 图解express+supervisor+ejs的用法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs中的this详解
Mar 26 NodeJs
Nodejs中解决cluster模块的多进程如何共享数据问题
Nov 10 NodeJs
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
Jan 12 NodeJs
nodejs中全局变量的实例解析
Mar 07 NodeJs
nodejs连接mysql数据库简单封装示例-mysql模块
Apr 10 NodeJs
nodejs入门教程四:URL相关模块用法分析
Apr 24 NodeJs
使用nodejs爬取前程无忧前端技能排行
May 06 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
nodejs实现大文件(在线视频)的读取
Oct 16 NodeJs
nodeJS模块简单用法示例
Apr 21 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
NodeJs生成sitemap站点地图的方法示例
Jun 11 NodeJs
nodejs创建简易web服务器与文件读写的实例
Sep 07 #NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
Sep 06 #NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 #NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 #NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 #NodeJs
NodeJS收发GET和POST请求的示例代码
Aug 25 #NodeJs
Nodejs 和Session 原理及实战技巧小结
Aug 25 #NodeJs
You might like
PHP实现多文件上传的方法
2015/07/08 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
尽职尽责村干部自我鉴定
2014/01/23 职场文书
外贸专业求职信
2014/03/09 职场文书
大学生就业意向书范文
2014/04/01 职场文书
园艺师求职信
2014/04/27 职场文书
质量月口号
2014/06/20 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
python办公自动化之excel的操作
2021/05/23 Python
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
详解php中流行的rpc框架
2021/05/29 PHP