关于前端:多人后台管理系统-DAY01

45次阅读

共计 2127 个字符，预计需要花费 6 分钟才能阅读完成。

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 案例初始化

建设我的项目所需文件夹

public 动态资源

model 数据库操作

route 路由

views 模板

初始化我的项目形容文件
```
npm init -y
```
下载我的项目所需第三方模块

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

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')

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

正文完