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中Buffer模块详解
Jan 07 NodeJs
PHP和NodeJs开发的应用如何共用Session
Apr 16 NodeJs
nodejs个人博客开发第三步 载入页面
Apr 12 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
nodejs aes 加解密实例
Oct 10 NodeJs
nodejs实现日志读取、日志查找及日志刷新的方法分析
May 20 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 NodeJs
用Nodejs实现在终端中炒股的实现
Oct 18 NodeJs
一文秒懂nodejs中的异步编程
Jan 28 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
php5.3 废弃函数小结
2010/05/16 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
Bootstrap表单布局
2016/07/19 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
使用python3构建文件传输的方法
2019/02/13 Python
python跳出双层for循环的解决方法
2019/06/24 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
销售顾问工作计划书
2014/08/15 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
运动会主持词大全
2015/07/02 职场文书
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python