多人后台管理系统 DAY01

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

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都是把公共部分的代码抽离

   
   
   
    ···
    {{block 'link'}}{{/block}}
   
   
    {{block 'main'}} {{/block}}
    ···
    {{block 'script'}} {{/block}}
   
   

   8.user.art

   • 对于layout.art的填充，类似的包括user-edit.art article.art
   • 将静态资源中的html提出来，后缀改为art

   {{extend './common/layout.art'}}
   {{block 'main'}}
    
    {{include './common/header.art'}}
    
    
   
        {{include './common/aside.art'}}
        
   
            
            
   
               ···
            
            
           ···
            
            
            ···
            
        
    
    
   {{/block}}
   {{block 'script'}}
    
   {{/block}}