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 相关文章推荐
PHPStorm 2020.1 调试 Nodejs的多种方法详解
Sep 17 NodeJs
跟我学Nodejs(一)--- Node.js简介及安装开发环境
May 20 NodeJs
NodeJs中的VM模块详解
May 06 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
nodejs+express实现文件上传下载管理网站
Mar 15 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
Apr 11 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
监控Nodejs的性能实例代码
Jul 02 NodeJs
nodejs中各种加密算法的实现详解
Jul 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/05/21 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
CCPry JS类库 代码
2009/10/30 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
详解python并发获取snmp信息及性能测试
2017/03/27 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python面向对象之继承代码详解
2018/01/29 Python
python如何删除文件中重复的字段
2019/07/16 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python如何给函数库增加日志功能
2020/08/04 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
工作所在部门证明
2014/09/21 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
教师节倡议书2015
2015/04/27 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
Python如何使用循环结构和分支结构
2022/04/13 Python