express 路由笔记
文章目录
- 文章参考
- 问题描述
- 解决办法
- 案例
- app.js启动文件
- .routes/test/test.js 路由文件
- expressStudy\routes\router1.js 路由文件
- views/test/index.html模板内容
文章参考
- http://www.cnblogs.com/sword-successful/p/4956461.html
问题描述
开发一个web工程，有不同的功能模块，如果路由全部写在一个js文件中，那么这个文件将会特别巨大，查找起来也相当困难
解决办法
因此根据不同的功能模块，把路由文件分隔为几个小的路由文件，方便快速的定位代码，降低代码的复杂度
我采用的策略是用文件目录来作为模块划分。
案例
app.js启动文件
var express = require("express");
var http = require("http");
var app = express();
var router = express.Router();
// 设置模板 /
var ejs = require("ejs");
//使用set方法，为系统变量“views”和“view engine”指定值。
app.set("views", __dirname + "/views");
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
// 运行hbs模块
app.engine('html', ejs.__express);//引入不同的路由文件
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 是服务器端渲染，页面跳转到views/test/index.html页面中 */
router.get('/cors', function(req, res, next) {res.render('test/index', { name: 'Express 路由1' });
});module.exports = router;
res.render函数就是使用后端渲染的方式生成HTML页面
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模板内容
<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>testtitle>
head><body ><button class="btn btn-primary" id="btn" onclick="corsGetData()">cors跨域获取数据button>
<br>body>
<script>function corsGetData(){alert("dsafdsafdsafsda");}
script>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！