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 Express框架中处理404页面一个方式
May 28 NodeJs
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
Nov 23 NodeJs
NodeJS收发GET和POST请求的示例代码
Aug 25 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
nodejs 生成和导出 word的实例代码
Jul 31 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
nodejs使用async模块同步执行的方法
Mar 02 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
详解python中的hashlib模块的使用
2019/04/22 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python 通过文件夹导入包的操作
2020/06/01 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
校园新闻稿范文
2015/07/18 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
浅析JavaScript中的变量提升
2022/06/01 Javascript