[js高手之路]node js系列课程-图解express+supervisor+ejs用法
上文通过node js自带的http模块搭建了一个简易的服务器，实际在开发中，一般用的是express框架，本文我们就来讲讲项目开发中必备不可少的几样东西：
- 服务器( express )
- 路由( express.Router )
- 模板引擎( ejs )
- 当然再加上数据库，就可以完成一个mvc的web应用了，数据库的用法，后期我会写一个项目
一、首先，新建一个项目文件夹( ghostwu )，在命令行下切换到该目录，用npm init --yes 初始化package.json文件
安装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
之后修改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);
通过以上的代码，就完成了路由的分离，把 / 和 /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用法，结合手册查下
[js高手之路]node js系列课程-图解express+supervisor+ejs用法的更多相关文章
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...
- [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件
这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...
- [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件
接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...
- [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist
promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...
- [js高手之路]node js系列课程-创建简易web服务器与文件读写
web服务器至少有以下几个特点: 1.24小时不停止的工作,也就是说这个进程要常驻在内存中 2.24小时在某一端口监听,如: http://localhost:8080, www服务器默认端口80 3 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义
一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...
- [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...
随机推荐
- tar命令（转）
把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个, ...
- year:2017 month:8 day:1+
2017-08-01 JAVAse 方法的重载:在同一个类中存在一个以上的同名方法,只要他们的参数数量,参数类型,参数顺序(两个相同类型的参数是不行的)这样就构成了方法的重载. 有返回值的方法有三种调 ...
- Python数据网络采集5--处理Javascript和重定向
Python数据网络采集5--处理Javascript和重定向 到目前为止,我们和网站服务器通信的唯一方式,就是发出HTTP请求获取页面.有些网页,我们不需要单独请求,就可以和网络服务器交互(收发信息 ...
- python关于list的三个内置函数filter(), map(), reduce()
''' Python --version :Python 2.7.11 Quote : https://docs.python.org/2/tutorial/datastructures.html#m ...
- 小明历险记：规则引擎drools教程一
小明是一家互联网公司的软件工程师,他们公司为了吸引新用户经常会搞活动,小明常常为了做活动加班加点很烦躁,这不今天呀又来了一个活动需求,我们大家一起帮他看看. 小明的烦恼 活动规则是根据用户购买订单的金 ...
- Spring+SpringMVC+MyBatis+easyUI整合基础篇（四）代码简化
点这里看实际效果! 账密:admin 123456 敲了一天的代码,有些烦,感觉前一篇文章写的太笼统了,哈哈哈. 本来呢,也就是刚开始写,所以很多细节都想不到,源码也放上来了,自己动动手应该也 ...
- HAUT--1262--魔法宝石（暴力）
1262: 魔法宝石 时间限制: 2 秒 内存限制: 64 MB提交: 525 解决: 157提交 状态 题目描述 小s想要创造n种魔法宝石.小s可以用ai的魔力值创造一棵第i种魔法宝石,或是使用 ...
- 前端开发工具Brackets介绍，安装及安装Emme插件时踩过的坑
对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于 ...
- 基于Dubbo的压测调优实例
不久前参与开发了一个基于dubbo分布式框架的底层账单系统,并实现了其中的一部分业务接口,目前需对这些接口进行压测,以评估生产环境所能承受的最大吞吐量.笔者以其中一个查询接口为例来回顾此次压测的整体流 ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...