目录
需求
通过点击按钮实现页面间的跳转
前期准备
通过express脚手架搭建express框架:
express myexpress
进入myexpress,进行初始化
npm init
然后安装依赖
npm install
最后设置日志,并启动项目
set DEBUG=express:* & npm start
在浏览器输入localhost:3000,成功显示如下:
修改入口文件
在此项目中我用的是handlebars模块,所以对入口文件app.js进行了修改:
// 引入express-handlebars模块
var exphbs = require('express-handlebars');
设置node_modules文件夹为静态资产根目录
//静态资源托管中间件
app.use(express.static('public'));
app.use(express.static('node_modules'));
设置引擎模块
app.engine('html', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.html'
}));
app.set('view engine', 'html');
引入路由文件index.js(后面创建index.js文件,并在index.js文件中设置路由)
// 路由文件
var indexRouter = require('./routes/index');
//使用路由
app.use('/', indexRouter);
在public文件夹下,放入jquery.js文件
功能实现
在views文件夹下删除原有的的文件,创建index.html 和main.html,代码分别为:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h1>{{indexInfo}}</h1>
<button type="button" class="btn btn-primary" id="jump">跳转</button>
<script type="text/javascript">
$(function() {
$('#jump').on('click', function() {
location.href = "/main";
})
})
</script>
</body>
</html
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<h1>{{mainInfo}}</h1>
</body>
</html>
创建路由文件index.js,代码如下:
var express = require('express');
var router = express.Router();
//GET home page.
router.get('/', function(req, res) {
res.header("Access-Control-Allow-Headers", "content-type");
var sql = 'select * from user';
connection.query(sql, function(err, result) {
if (err) {
console.log('[SELECT ERROR] - ', err.message);
return;
}
res.render('index', {
layout: false,
title: "登录页",
indexInfo: "index paper"
});
});
});
//get main paper
router.get('/main', function(req, res) {
res.render('main', {
layout: false,
title: "主页",
mainInfo: 'main paper'
});
});
module.exports = router;
注:在实现页面跳转时,去渲染界面,切勿用router.post;
重新启动服务器:
set DEBUG=express:* & npm start
即可实现页面跳转