1. 命令行生成express基本框架
下载好基本模块后看到的项目目录如下
bin下的www是项目入口
node_moduls 项目所需模块
public 静态资源,如图片,js,css
routes 路由文件
views 页面模板
app.js 项目需要的中间件等基本配置
package.json 定义项目的基本信息等,包括项目所需要的模块名和版本号
npm start 运行后,浏览器输入 http://localhost:3000/
看到效果如图:
-------------------
--------------------
2.如何设计路由
个人理解路由有两种设计方式: 串行和并行.两种方式可以交叉使用
(1)并行路由:
在routes文件夹下分别创建router1.js,router2.js,router3.js文件
在 app.js 的 var users = require('./routes/users'); 后面插入代码
var router1 = require('./routes/router1');
var router2 = require('./routes/router2');
var router3 = require('./routes/router3');
在 app.js 的 app.use('/users', users); 后面插入代码
app.use('/router1', router1);
app.use('/router2', router2);
app.use('/router3', router3);
router1.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/a', function(req, res, next) {
res.render('index', { title: 'Express 路由1' });
});
module.exports = router;
router2.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/a', function(req, res, next) {
res.render('index', { title: 'Express 路由2' });
});
module.exports = router;
router3.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/a', function(req, res, next) {
res.render('index', { title: 'Express 路由3' });
});
module.exports = router;
3个路由下都有一个处理 路径为 '/a' 的方法
页面访问效果如下:
-------------------------------------
-------------------------------------
-------------------------------------
-------------------------------------
总结:看到这里应该都明白并行路由的使用了. 访问路径为router1下的所有的方法都由router1.js这个路由文件处理,同理 router2,router3,
这种方式适合项目中不同的模块或者不同的系统使用.
(2)串行路由
-------------------------------------router1.js加了一个.use方法表示所有满足的url都必须先经过这个方法才能往下走.在后面加入了2个路由
router1.js
var express = require('express');
var router = express.Router();
router.use(function (req, res, next) {
console.log('经过路由1');
next();
})
/* GET home page. */
router.get('/a', function(req, res, next) {
res.render('index', { title: 'Express 路由1' });
});
var router11 = require('./router11.js');
router.use(router11);
var router12 = require('./router12.js');
router.use(router12);
module.exports = router;
-------------------------------------
router11.js
var express = require('express');
var router = express.Router();
router.use(function (req, res, next) {
console.log('经过路由11');
if (req.query.data == 11) {
next();
} else {
res.render('index', { title: '路由11提醒 : 你没有权限访问!' });
}
})
/* GET home page. */
router.get('/b', function(req, res, next) {
res.render('index', { title: '路由11提醒 : 访问成功!' });
});
module.exports = router;
-------------------------------------
router12.js
var express = require('express');
var router = express.Router();
router.use(function (req, res, next) {
console.log('经过路由12');
if (req.query.title == 12 ) {
next();
} else {
res.render('index', { title: '路由12提醒 : 你没有权限访问!' });
}
})
/* GET home page. */
router.get('/c', function(req, res, next) {
res.render('index', { title: '路由12提醒 : 访问成功!' });
});
module.exports = router;
---几种不同的url访问截图:
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
http://localhost:3000/router1/a 此url和之前一样会进入router1.js的 '/a'方法
后台打印:
页面截图:
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
http://localhost:3000/router1/b
后台打印 :
页面截图 :
此url访问先经过router1.js,
然后经过router11.js被router11.js的use方法拦截了,因为没带data=11参数
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
http://localhost:3000/router1/b?data=11
后台打印:
页面截图:
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
http://localhost:3000/router1/c
后台打印:
页面截图:
此url被router11.js拦截,无法进入router12路由
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
http://localhost:3000/router1/c?data=11
后台打印:
页面截图:
-----------------------
此url首先经过router1,
然后经过router11,判断data=11为true,通过,
然后经过router12的ues方法判断title=12为false,被拦截.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
http://localhost:3000/router1/c?data=11&title=12
后台打印:
页面截图:
此url首先经过router1,
然后经过router11,判断data=11为true,通过,
然后经过router12的ues方法判断title=12为true,通过
最后进入'/c' 方法 返回页面
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
为什么先经过router11再经过router12,而不是相反的呢,或者随机的呢,
因为 router1.js 定义路由的时候 router11先引用,router12后引用,如果把位置调换下,访问的顺序就是 router1 --rouger12-- router11
var express = require('express');
var router = express.Router();
router.use(function (req, res, next) {
console.log('经过路由1');
next();
})
/* GET home page. */
router.get('/a', function(req, res, next) {
res.render('index', { title: 'Express 路由1' });
});
var router12 = require('./router12.js');
router.use(router12);
var router11 = require('./router11.js');
router.use(router11);
module.exports = router;
调换位置效果:
http://localhost:3000/router1/b?data=11&title=12
后台打印:
页面截图:
总结:串行路由适合做权限控制,在use方法里写判断.越后面的路由权限要求越高,必须满足前面所有路由的条件才能访问