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服务器(9):实现非阻塞操作
Dec 18 NodeJs
nodejs实现bigpipe异步加载页面方案
Jan 26 NodeJs
nodejs入门教程四:URL相关模块用法分析
Apr 24 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
Windows下快速搭建NodeJS本地服务器的步骤
Aug 09 NodeJs
详解nodeJs文件系统(fs)与流(stream)
Jan 24 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
NodeJS实现一个聊天室功能
Nov 25 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 NodeJs
NodeJs使用webpack打包项目的方法详解
Feb 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
PHP版自动生成文章摘要
2008/07/23 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
儿童python练习实例
2018/05/27 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python selenium的基本使用方法分析
2019/12/21 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
python在地图上画比例的实例详解
2020/11/13 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
暑假实习求职信范文
2013/09/22 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2014年财务科工作总结
2014/11/11 职场文书
运动会新闻稿
2015/07/17 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript