多人博客管理系统&登录功能

多人博客管理系统

目标

• 能够知道搭建项目环境的步骤
• 能够理解模板优化
• 熟悉登录功能的思路逻辑
• 知道密码为什么需要加密
• 知道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