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 的 c++ module 链接到 OpenSSL
Aug 03 NodeJs
Nodejs学习笔记之NET模块
Jan 13 NodeJs
nodejs入门教程二:创建一个简单应用示例
Apr 24 NodeJs
理解nodejs的stream和pipe机制的原理和实现
Aug 12 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
nodeJS模块简单用法示例
Apr 21 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
解决nodejs的npm命令无反应的问题
May 17 NodeJs
nodejs中用npm初始化来创建package.json的实例讲解
Oct 10 NodeJs
关于NodeJS中的循环引用详解
Jul 23 NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
Oct 25 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
详解python中的异常捕获
2020/12/15 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
服务员岗位职责
2014/01/29 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
简历自我评价模板
2015/03/11 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
学前班教学反思
2016/02/24 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers