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中启用ECMAScript 6小结(windos以及Linux)
Jul 15 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 NodeJs
NodeJS实现微信公众号关注后自动回复功能
May 31 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
Sep 26 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
nodejs中实现用户注册路由功能
May 20 NodeJs
nodejs dgram模块广播+组播的实现示例
Nov 04 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
在Django的上下文中设置变量的方法
2015/07/20 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
财政局长自荐信范文
2013/12/22 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python