likes
comments
collection
share

多人后台管理系统 DAY01

作者站长头像
站长
· 阅读数 29

(一)路由跳转和抽取公共部分代码

BLOG -- 源码目录
├── model -- 数据库操作
└──  public -- 静态资源
      ├── home --博客展示页面
      └── admin --博客管理页面
└── route -- 路由  
      ├── admin.js --博客管理页面路由
      └── home.js --博客展示页面路由
└── views -- 模板
     ├── home --博客展示页面art模板
     └── admin --博客管理页面art模板
          └──common --公共部分art模板
               ├── header --头部公共模板
               ├── aside --侧边栏公共模板
               └── layout --骨架公共模板
          ├── article-edit.art
          ├── article.art
          ├── user.art
          └── user-edit.art
└── app.js -- 创建网站服务

1.2 案例初始化

  1. 建立项目所需文件夹

    public 静态资源
    
    model 数据库操作
    
    route 路由
    
    views 模板
  2. 初始化项目描述文件

    npm init -y
    
  3. 下载项目所需第三方模块

    npm install express mongoose art-template express-art-template

  4. app.js

    • 创建网站服务器,引用expess框架
    • 构建模块化路由,引入路由模块,为路由匹配请求路径
    • 构建博客管理页面模板:引入路径,开放静态资源文件
    • 渲染后缀为art的模板:app.set确认路径,引入express-art-template(一种作用域预声明的技术来优化模板渲染速度)模板引擎进行渲染

      // 引用expess框架
      const express = require('express');
      // 处理路径
      const path = require('path');
      // 创建网站服务器
      const app = express();
      // 告诉express框架模板所在的位置
      app.set('views', path.join(__dirname, 'views'));
      // 告诉express框架模板的默认后缀是什么
      app.set('view engine', 'art');
      // 当渲染后缀为art的模板时 所使用的模板引擎是什么
      app.engine('art', require('express-art-template'));
      // 开放静态资源文件
      app.use(express.static(path.join(__dirname, 'public')));
      // 引入路由模块
      const home = require('./route/home');
      const admin = require('./route/admin');
      // 为路由匹配请求路径
      app.use('/home', home);
      app.use('/admin', admin);
      // 监听端口
      app.listen(80);
      console.log('网站服务器启动成功, 请访问localhost')
      
  5. admin.js

    • 创建模块化路由:引入express框架,创建页面展示页面路由,将路由对象作为模块成员导出
    • home.js与admin.js类似不做赘述

      // 引用expess框架
      const express = require('express');
      // 创建博客展示页面路由
      const admin = express.Router();
      // 测试登录页面
      admin.get('/', (req,res)=>{res.send('欢迎登录博客展示页面')});
      // 将路由对象做为模块成员进行导出
      module.exports = admin;

    6.layout.js

    • 优化模板(抽离公共部分),建立骨架模板,精简代码
    • 类似的还有aside.js header.js都是把公共部分的代码抽离
    <!DOCTYPE html>
    <html lang="en">
    <head>
     ···
     {{block 'link'}}{{/block}}
    </head>
    <body>
     {{block 'main'}} {{/block}}
     ···
     {{block 'script'}} {{/block}}
    </body>
    </html>

    8.user.art

    • 对于layout.art的填充,类似的包括user-edit.art article.art
    • 将静态资源中的html提出来,后缀改为art
    {{extend './common/layout.art'}}
    {{block 'main'}}
     <!-- 子模板的相对路径相对的就是当前文件 因为它是由模板引擎解析的 而不是浏览器 -->
     {{include './common/header.art'}}
     <!-- 主体内容 -->
     <div class="content">
         {{include './common/aside.art'}}
         <div class="main">
             <!-- 分类标题 -->
             <div class="title">
                ···
             <!-- /分类标题 -->
             <!-- 内容列表 -->
            ···
             <!-- /内容列表 -->
             <!-- 分页 -->
             ···
             <!-- /分页 -->
         </div>
     </div>
     <!-- /主体内容 -->
    {{/block}}
    {{block 'script'}}
     <script type="text/javascript">
        ···
     </script>
    {{/block}}