express之模板布局

    xiaoxiao2021-12-14  18

    假设我们现在布局后台登录页面 在views建立如下文件

    |--a --layout.hbs --login.hbs

    我们使用前端框架bootstrap-flat

    layout.hbs 代码如下

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{{title}}}</title> <link rel="stylesheet" href="/css/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/flat-ui.min.css"> </head> <body> {{{body}}} </body> <script type="text/javascript" src="/js/vendor/jquery.min.js"></script> <script type="text/javascript" src="/js/flat-ui.min.js"></script> </html>

    login.hbs代码如下

    <link rel="stylesheet" href="/css/login.css"> <div class="container"> <form class="form-signin" method="post" role="form"> <h2 class="form-signin-heading">Please sign in</h2> <input type="text" name="username" class="form-control" placeholder="username" required autofocus> <input type="password" class="form-control" name="password" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <!-- /container -->

    然后我们分配一个路由文件 现在routes文件夹建立一个admin.js,然后在app.js里装载这个文件var admin = require(“./routes/admin”) 然后使用路由分组app.use(“/a”,admin) admin.js 代码如下

    var express = require("express"), router = express.Router(); router.get("/login",function(req,res,next){ res.render('a/login',{ title:"login", layout:"a/layout" }); }); router.post("/login",function(req,res,next){ res.send(req.body); }); module.exports = router;

    现在我们就可以访问 localhost:3000/a/login

    转载请注明原文地址: https://ju.6miu.com/read-968695.html

    最新回复(0)