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服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
NodeJS学习笔记之Connect中间件应用实例
Jan 27 NodeJs
nodejs redis 发布订阅机制封装实现方法及实例代码
Dec 15 NodeJs
详解nodejs中exports和module.exports的区别
Feb 17 NodeJs
nodejs个人博客开发第六步 数据分页
Apr 12 NodeJs
mac下的nodejs环境安装的步骤
May 24 NodeJs
nodejs后台集成ueditor富文本编辑器的实例
Jul 11 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
NodeJS实现视频转码的示例代码
Nov 18 NodeJs
Nodejs封装类似express框架的路由实例详解
Jan 05 NodeJs
Nodejs实现WebSocket代码实例
May 19 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
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js导出txt示例代码
2014/01/14 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
简单使用Python自动生成文章
2014/12/25 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
职业生涯规划怎么写
2013/12/29 职场文书
关于逃课的检讨书
2014/01/23 职场文书
完美的中文自荐信
2014/05/24 职场文书
贫困证明怎么写
2015/06/16 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS