express之模板布局

最新推荐文章于 2025-02-19 00:51:57 发布

DanceLynx

最新推荐文章于 2025-02-19 00:51:57 发布

阅读量713

点赞数

分类专栏：新手nodej之路文章标签：前端框架 express nodejs handlebars

本文链接：https://blog.youkuaiyun.com/sinat_36871349/article/details/53443618

版权

新手nodej之路专栏收录该内容

16 篇文章

订阅专栏

假设我们现在布局后台登录页面
在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>

<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;