zoukankan      html  css  js  c++  java
  • 13 ~ express ~ 后台页面的搭建

    一, 后台路由文件  /router/admin.js 

    var express = require('express')
    var router = express.Router()

    /**
    * 验证用户是否为管理员 ,防止其他用户通过 /admin 路径访问
    */
    router.use((req,res,next)=>{
      console.log( req.userInfo.isAdmin)
      if(!req.userInfo.isAdmin){
        res.send('对不起,你不是管理员,不能进入')
        return
      }
      next()
    })

    router.get('/',(req,res,next)=>{
      console.log(('admin ---- req.userInfo 数据 :'+JSON.stringify(req.userInfo)).yellow)
      res.render('admin/index',{
      userInfo:req.userInfo
    })
    })

    module.exports = router
     
    二,后台视图文件 /views/admin/index.html 
      
      运用了模块的 调用 ,嵌套,继承重写 等语法

    1,前台页面对其他页面的调用 :      {% extends 'layout.html' %}    // 调用当前目录下的 layout.html 页面 ,实现对模板的继承

    2,调用完其他页面,本页面将不能直接写代码。

    3,要先 被调用的模板里 通过定义 block 区块 进行占位  。   // 例如,定义一个main的block区块: {% block main %} {%  endblock %}

    4,在调用者的模板里 通过重新定义block区块的内容进行重写输出   (相当于面向对象中的继承和重写)

     
    {% extends 'layout.html' %}
    {% block main %}
      <div class="jumbotron">
        <h1>Hello, {{userInfo.username}}!</h1>
        <p>欢迎进入系统后台</p>
      </div>
    {% endblock %}
     
    三, 被视图主页文件  /views/admin/index.html  调用的视图文件 /views/admin/layout.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>
    <link rel="stylesheet" href="/public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/public/css/bootstrap-theme.min.css">
    <script src="/public/js/jquery.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
    </head>

    <body>
    <div class="container-fluid">
    <nav class="navbar navbar-default">
    <div class="container-fluid">
     
     
    <div class="navbar-header">  
      <a class="navbar-brand" href="/admin">后台管理</a>
      </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">用户管理</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      {{userInfo.username}}
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">退出</a></li>
    </ul>
      </li>
    </ul>
      </div><!-- /.container-fluid -->
    </nav>

    <div class="containner-fluid">
      {% block main %}123{% endblock %}
    </div>
    </div>
    </body>

    </html>
  • 相关阅读:
    Parameter HTTP 参数基类
    XMLHttpRequest对象 转载来源于:http://dev.yesky.com
    35 岁前程序员要规划好的四件事
    java 初学之二
    从零开始学wordpress 之四
    Adobe flash cs5 的Java运行时环境初始化错误 完美解决方法
    从零开始学wordpress 之三
    java 初学 之一
    java 初学之三 多态和抽象类
    简单的js优化
  • 原文地址:https://www.cnblogs.com/500m/p/11008041.html
Copyright © 2011-2022 走看看