express 路由笔记

文章参考

  1. http://www.cnblogs.com/sword-successful/p/4956461.html

问题描述

开发一个web工程,有不同的功能模块,如果路由全部写在一个js文件中,那么这个文件将会特别巨大,查找起来也相当困难

解决办法

因此根据不同的功能模块,把路由文件分隔为几个小的路由文件,方便快速的定位代码,降低代码的复杂度
我采用的策略是用文件目录来作为模块划分。

案例

app.js启动文件

var express = require("express");
var http = require("http");
// 加载hbs模块
var hbs = require('hbs');

var app = express();
var router = express.Router();
//引入不同的路由文件
var router1 =  require('./routes/router1');
var router2 =  require('./routes/router2');
var router3 =  require('./routes/router3');
var testRouter =  require('./routes/test/test');

//指定不同路由对应的模块
app.use('/router1', router1);
app.use('/router2', router2);
app.use('/router3', router3);
app.use('/test', testRouter);
//启动webapp,监听3000端口
http.createServer(app).listen(3000);

.routes/test/test.js 路由文件

var express = require('express');
var router = express.Router();

/* res.render 是服务器端渲染 */
router.get('/', function(req, res, next) {
  res.render('index', { name: 'Express 路由1' });
});

/* res.render 是服务器端渲染 */
router.get('/cors', function(req, res, next) {
  res.render('test/index', { name: 'Express 路由1' });
});

module.exports = router;

expressStudy\routes\router1.js 路由文件

var express = require('express');
var router = express.Router();

/* 服务器渲染 */
router.get('/', function(req, res, next) {
  global.console.log("/router/a : " + process.argv);
  res.render('router1/index', { name: 'Express 路由1' });
});

/*
 * 测试发送ajax请求,返回JSON给前台
 * res.json 直接返回JSON数据
  * */
router.get('/ajax', function(req, res, next) {
  res.json(200,{
    "username":"黄彪",
    "pwd":"123456"
  });
});

/*
 * form表单提交,使用的是post方法
 * 该方法用来测试获取用户提交的表单
  * */
router.get('/getParams', function(request, response, next) {
  //request.query.pwd 与 request.param("pwd") 这两种方式一致
  //只能针对get方法,如果form表单是post提交方式,则无效
  var username = request.param(username);
  var pwd = request.param(pwd);

  console.log("request.param(username) : "  + username);
  console.log("request.param(pwd) : "  + pwd);

  //向前端发送数据
  response.json(200,{
    "username":username,
    "pwd":pwd
  })
});

/*
 * form表单提交,使用的是post方法
 * 该方法用来测试获取用户提交的表单
 * 记录路径是使用“根”的相对路径
 * */
router.post('/getParams', function(request, response, next) {
  var username = request.param(username);
  var pwd = request.param(pwd);

  console.log("request.param(username) : "  + username);
  console.log("request.param(pwd) : "  + pwd);

  //向前端发送数据
  response.json(200,{
    "username":username,
    "pwd":pwd
  })
});


/*
 * form表单提交,使用的是post方法
 * 该方法用来测试获取用户提交的表单
 * 记录路径是使用“根”的相对路径
 * */
router.post('/postParams', function(request, response, next) {
  var userName = request.body.username,
      userPwd = request.body.pwd,
      userName2 = request.param('pwd'),
      userPwd2 = request.param('username');

  console.log("req.body.username : "  + request.body.username);
  console.log("req.param('pwd') : "  + request.param('pwd'));
  console.log("req.body.pwd : "  + request.body.pwd);
  console.log(" req.param('txtUserPwd') : "  +  request.param('username'));

  //向前端发送数据
  //向前端发送数据
  response.json(200,{
    "username":userName,
    "pwd":userPwd
  })
});

module.exports = router;

views/test/index.html模板内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="../public/js/jquery.min.js"></script>
    <script src="../public/js/hb_common.js"></script>
    <link rel="stylesheet" href="../public/css/bootstrap.min.css">
    <link rel="stylesheet" href="../public/css/hb_wap.css">
    <title>test</title>
</head>

<body >

<button class="btn btn-primary" id="btn" onclick="corsGetData()">cors跨域获取数据</button>
<br>

</body>
<script>
    function corsGetData(){
        alert("dsafdsafdsafsda");
    }
</script>
</html>

阅读更多

没有更多推荐了,返回首页