多人博客管理系统
目标
- 能够知道搭建项目环境的步骤
- 能够理解模板优化
- 熟悉登录功能的思路逻辑
- 知道密码为什么需要加密
- 知道cookie跟session是什么
- 能够参照笔记写出登录功能
功能需求
-
博客内容展示
-
文章列表页面
[外链图片转存失败(img-twPJASUX-1568462831538)(images/博客-01.png)] -
文章详情页面
[外链图片转存失败(img-zKIf5sXe-1568462831539)(images/博客-02.png)]
-
-
博客管理功能
-
登录页面
[外链图片转存失败(img-NcjieJDZ-1568462831544)(images/博客-03.png)]
-
管理页面
[外链图片转存失败(img-8wzKRKRq-1568462831546)(images/博客-04.png)]
-
项目环境搭建
-
建立项目所需文件夹
- public 静态资源
- model 数据库操作
- route 路由
- views 模板
-
初始化项目描述文件
- npm init -y
-
下载项目所需要的第三方模块
- npm install express mongoose art-template express-art-template
-
创建网站服务器
//引入 express第三方模块 const express = require('express'); //创建web服务器 const app = express(); //监听端口 app.listen(80);
-
构建模块化路由
-
在 route 文件夹下 创建 admin.js 和 home.js 两个模块的路由文件
-
admin.js
// 引用expess框架 const express = require('express'); // 创建博客展示页面路由 const admin = express.Router(); // 将路由对象做为模块成员进行导出 module.exports = admin;
-
home.js
// 引用expess框架 const express = require('express'); // 创建博客展示页面路由 const home = express.Router(); // 将路由对象做为模块成员进行导出 module.exports = home;
-
在入口文件 app.js文件中配置模块化路由
// 引入路由模块 const home = require('./route/home'); const admin = require('./route/admin'); // 为路由匹配请求路径 app.use('/home', home); app.use('/admin', admin);
-
-
配置静态资源文件
-
引入path文件,利用static方法来配置静态资源
// 处理路径 const path = require('path'); // 开放静态资源文件 app.use(express.static(path.join(__dirname, 'public')))
-
把静态资源的html文件,放到views目录下
-
-
构建模板
// 告诉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')))
注意 : 模板中的相对路径是相对于地址栏中的请求路径的
所以在模板中引用其他文件中的资源的时候 需要使用服务器的绝对路径 也就是在src 或者 link的路径前加上“/”
<link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/admin/css/base.css">
模板优化
抽离公共部分到单独模板中去
在common文件夹中创建头部公共模板文件
header.art
<!-- 头部 -->
<div class="header">
<!-- 网站标志 -->
<div class="logo fl">
黑马程序员 <i>ITHEIMA</i>
</div>
<!-- /网站标志 -->
<!-- 用户信息 -->
<div class="info">
<div class="profile dropdown fr">
<span class="btn dropdown-toggle" data-toggle="dropdown">
{
{userInfo && userInfo.username}}
<span class="caret"></span>
</span>
<ul class="dropdown-menu">
<li><a href="user-edit.html">个人资料</a></li>
<li><a