express主页书写布局
在主页(xxx.ejs)里用frameset和frame标签抒写左右路由界面。
frameset和frame标签
- 登陆成功后的路由界面主页(main.ejs)
- 需建views/main.ejs目录
- 在main.ejs书写
- 记得把/main所在目录的登陆成功,改为res.render(‘main’)
- 在 之间写标签
- 代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<frameset cols="240px,*" border="0"> //cols="左边长度,右边长度'*'是自定义"
<frame src="/left" name="left"></frame>
<frame src="/right" name="right"></frame>
</frameset>
<body>
</body>
</html> - 重启服务,页面会是两个404,因为没有添加路由页面
添加路由
- 需在views目录下建left.ejs和right.ejs文件
- 需在routers目录下建right.js和right.js文件
- 在app.js写
var indexRouter = require('./routes/index')
var left = require('./routes/left')
var right = require('./routes/right')
var app = express()
...
app.use('/admin', indexRouter)
app.use('/left', left)
app.use('/right', right)
..。
路由渲染页面
- 在left.js/right.js写
var express = require('express')
var router = express.Router()
/* GET home page. */
router.get('/', function (req, res, next) {
res.render('left')/ res.render('right')
})
module.exports = router - 重启服务,可能会出现空白,因为没有写样式
书写页面
- 在left.ejs/right.ejs写html样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
左侧/右侧
</body>
</html> - 重启服务,会出现你写的样式
/stylesheets/style.css
*{margin: 0;padding: 0;} |
以上是我的学习笔记~~
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XxiaoMin Blog!