一. 项目环境搭建

1 - 项目技术

服务端使用了：模板引擎 + Node + Express + mongoDB

2 - 如何运行项目

项目代码地址：https://github.com/iamkata/blog，下载项目。

由于当前项目是在Mac上运行，没有系统环境变量，所以我删除了custom-environment-variables.json文件，然后在development.json文件里面添加"pwd": "itcast"，然后就可以运行项目了。
cd到项目目录，执行npm install下载第三方模块
执行node app.js，打印如下则表明项目运行成功

博客管理系统
当前是生产环境
网站服务器启动成功, 请访问localhost
数据库连接成功

浏览器进入http://localhost:80/admin/login即可进入登录界面
在login.js文件中添加如下isValid = true;代码，把登录校验给去掉，然后输入账号：[email protected] 密码：123456即可访问登录页面。

3 - 项目介绍

多人博客管理系统

博客内容展示
博客管理功能

4 - 案例初始化

建立项目所需文件夹
- public 静态资源
- model 数据库操作
- route 路由
- views 模板
初始化项目描述文件
- npm init -y
下载项目所需第三方模块
- npm install express mongoose art-template express-art-template
创建网站服务器
构建模块化路由
构建博客管理页面模板

二. 项目功能实现

1 - 登录

创建用户集合，初始化用户
- 连接数据库
- 创建用户集合
- 初始化用户
为登录表单项设置请求地址、请求方式以及表单项name属性
当用户点击登录按钮时，客户端验证用户是否填写了登录表单
如果其中一项没有输入，阻止表单提交
服务器端接收请求参数，验证用户是否填写了登录表单
如果其中一项没有输入，为客户端做出响应，阻止程序向下执行
根据邮箱地址查询用户信息
如果用户不存在，为客户端做出响应，阻止程序向下执行
如果用户存在，将用户名和密码进行比对
比对成功，用户登录成功
比对失败，用户登录失败
保存登录状态
密码加密处理

2 - 新增用户

为用户列表页面的新增用户按钮添加链接
添加一个连接对应的路由，在路由处理函数中渲染新增用户模板
为新增用户表单指定请求地址、请求方式、为表单项添加name属性
增加实现添加用户的功能路由
接收到客户端传递过来的请求参数
对请求参数的格式进行验证
验证当前要注册的邮箱地址是否已经注册过
对密码进行加密处理
将用户信息添加到数据库中
重定向页面到用户列表页面

3 - 数据分页

当数据库中的数据非常多是，数据需要分批次显示，这时就需要用到数据分页功能。

分页功能核心要素：

当前页，用户通过点击上一页或者下一页或者页码产生，客户端通过get参数方式传递到服务器端
总页数，根据总页数判断当前页是否为最后一页，根据判断结果做响应操作

总页数：Math.ceil（总数据条数 / 每页显示数据条数）

limit(2) // limit 限制查询数量  传入每页显示的数据数量
skip(1) // skip 跳过多少条数据  传入显示数据的开始位置

数据开始查询位置=（当前页-1）* 每页显示的数据条数

4 - 用户信息修改

将要修改的用户ID传递到服务器端
建立用户信息修改功能对应的路由
接收客户端表单传递过来的请求参数
根据id查询用户信息，并将客户端传递过来的密码和数据库中的密码进行比对
如果比对失败，对客户端做出响应
如果密码对比成功，将用户信息更新到数据库中

5 - 用户信息删除

在确认删除框中添加隐藏域用以存储要删除用户的ID值
为删除按钮添自定义属性用以存储要删除用户的ID值
为删除按钮添加点击事件，在点击事件处理函数中获取自定义属性中存储的ID值并将ID值存储在表单的隐藏域中
为删除表单添加提交地址以及提交方式
在服务器端建立删除功能路由
接收客户端传递过来的id参数
根据id删除用户

6 - 开发环境与生产环境

① 什么是开发环境与生产环境？

环境，就是指项目运行的地方，当项目处于开发阶段，项目运行在开发人员的电脑上，项目所处的环境就是开发环境。当项目开发完成以后，要将项目放到真实的网站服务器电脑中运行，项目所处的环境就是生产环境。

② 为什么要区分开发环境与生产环境？

因为在不同的环境中，项目的配置是不一样的，需要在项目代码中判断当前项目运行的环境，根据不同的环境应用不同的项目配置。

如果是windows电脑，通过电脑操作系统中的系统环境变量区分当前是开发环境还是生产环境。

③ 如何区分开发环境与生产环境？

if (process.env.NODE_ENV == 'development') {
    // 开发环境
} else {
    // 生产环境
}

7 - 第三方模块morgan

morgan模块也是express的中间件函数，morgan的作用是在开发阶段将客户端向服务器端发送的请求信息打印在控制台中，使用npm install morgan命令安装。

// 导入morgan这个第三方模块
const morgan = require('morgan');

// 获取系统环境变量 返回值是对象 
if (process.env.NODE_ENV == 'development') {
    // 当前是开发环境
    console.log('当前是开发环境')
    // 在开发环境中 将客户端发送到服务器端的请求信息打印到控制台中
    app.use(morgan('dev'))
} else {
    // 当前是生产环境
    console.log('当前是生产环境')
}

8 - 第三方模块config

① 作用：允许开发人员将不同运行环境下的应用配置信息抽离到单独的文件中，模块内部自动判断当前应用的运行环境，并读取对应的配置信息，极大提供应用配置信息的维护成本，避免了当运行环境重复的多次切换时，手动到项目代码中修改配置信息。

② 使用步骤：

使用npm install config命令下载模块
在项目的根目录下新建config文件夹
在config文件夹下面新建default.json、development.json、production.json文件
在项目中通过require方法，将模块进行导入
使用模块内部提供的get方法获取配置信息

default.json文件的内容：

{
    "title": "博客管理系统"
}

development.json文件的内容：

{
    "db": {
        "user": "itcast",
        "host": "localhost",
        "port": "27017",
        "name": "blog"
    }
}

读取title：

onsole.log(config.get('title')) //如果在development.json和production.json里面都没有title，那么它会读取default.json里面的title。

读取数据库信息：

// 连接数据库 使用模板字符串
mongoose.connect(`mongodb://${config.get('db.user')}:${config.get('db.pwd')}@${config.get('db.host')}:${config.get('db.port')}/${config.get('db.name')}`, {useNewUrlParser: true })
    .then(() => console.log('数据库连接成功'))
    .catch(() => console.log('数据库连接失败'))

上面是直接将数据库的信息添加到json文件中，这样如果我们把项目拷贝给别人的时候，敏感信息也会暴露了，为了解决这个问题，config支持将敏感配置信息存储在环境变量中。

③ 将敏感配置信息存储在环境变量中

在config文件夹中建立custom-environment-variables.json文件
配置项属性的值填写系统环境变量的名字
项目运行时config模块查找系统环境变量，并读取其值作为当前配置项属于的值

custom-environment-variables.json文件：

{
    "db": {
          "pwd": "APP_PWD"
    }
}

注意：由于当前项目是在Mac上运行，没有上面的系统环境变量，所以我删除了custom-environment-variables.json文件，然后在development.json文件里面添加"pwd": "itcast"，然后就可以正常运行项目了。

9 - 文章评论

创建评论集合
判断用户是否登录，如果用户登录，再允许用户提交评论表单
在服务器端创建文章评论功能对应的路由
在路由请求处理函数中接收客户端传递过来的评论信息
将评论信息存储在评论集合中
将页面重定向回文章详情页面
在文章详情页面路由中获取文章评论信息并展示在页面中

三. 项目包含的知识点

1 - 密码加密 bcrypt

哈希加密是单程加密方式：1234 => abcd
在加密的密码中加入随机字符串可以增加密码被破解的难度。

// 导入bcrypt模块
const bcrypt = require('bcrypt');
// 生成随机字符串 gen => generate 生成 salt 盐  传入的数字越大生成的随机字符串越复杂
let salt = await bcrypt.genSalt(10);
// 使用随机字符串对密码进行加密
let pass = await bcrypt.hash('明文密码', salt);

// 密码比对
let isEqual = await bcrypt.compare('明文密码', '加密密码');

bcrypt依赖的其他环境

python 2.x
mac系统自带python，不过版本不超过3，所以建议重新安装
检查python版本的方法：打开终端，直接输入python，就会显示python的版本
node-gyp
npm install -g node-gyp
如果是windows还需要依赖：windows-build-tools
npm install --global --production windows-build-tools
最后再安装bcrypt
npm install bcrypt

2 - cookie与session

cookie：浏览器在电脑硬盘中开辟的一块空间，主要供服务器端存储数据。

cookie中的数据是以域名的形式进行区分的。
cookie中的数据是有过期时间的，超过时间数据会被浏览器自动删除。
cookie中的数据会随着请求被自动发送到服务器端。

session：实际上就是一个对象，存储在服务器端的内存中，在session对象中也可以存储多条数据，每一条数据都有一个sessionid做为唯一标识。

在node.js中需要借助express-session实现session功能，express-session也是express官方提供的。

const session = require('express-session');
app.use(session({ secret: 'secret key' }));

3 - Joi

JavaScript对象的规则描述语言和验证器。

安装 Joi 命令：npm install Joi。

const Joi = require('joi');
const schema = { 
    username: Joi.string().alphanum().min(3).max(30).required().error(new Error(‘错误信息’)),
    password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/),
    access_token: [Joi.string(), Joi.number()],
    birthyear: Joi.number().integer().min(1900).max(2013), // integer整数的意思
    email: Joi.string().email()
};
Joi.validate({ username: 'abc', birthyear: 1994 }, schema); // 返回的是promiss对象

4 - formidable

如何获取客户端传过来的数据呢?
在用户添加界面我们是使用body-parser，然后使用req.body获取post请求参数，但是body-parser只能获取普通的请求参数。
如果客户端传递过来的是二进制的数据怎么办呢?
使用formidable第三方模块。作用：解析表单，支持get请求参数，post请求参数、文件上传。

使用npm install formidable下载第三方模块。

// 引入formidable模块
const formidable = require('formidable');
// 创建表单解析对象
const form = new formidable.IncomingForm();
// 设置文件上传路径
form.uploadDir = "/my/dir";
// 是否保留表单上传文件的扩展名 默认false
form.keepExtensions = false;
// 对表单进行解析
form.parse(req, (err, fields, files) => {
    // fields 存储普通请求参数
    // files 存储上传的文件信息
});

5 - 文件读取 FileReader

读取文件，将文件显示到页面上来。

// js中的内置构造函数
var reader = new FileReader();
// 读取文件
reader.readAsDataURL('文件');
// 文件读取完成后的事件
reader.onload = function () {
    console.log(reader.result); // 获取文件读取结果,就是下面的编码
}

// 上图读取之后的结果
// 上面的图片是给人看的，这个图片是给机器看的，直接将这个结果放到img的src属性中，显示的结果是一样的
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVE…

6 - 数据分页 mongoose-sex-page

使用npm install mongoose-sex-page下载第三方模块。

const pagination = require('mongoose-sex-page');
// page 指定当前页
// size 指定每页显示的数据条数
// display 指定客户端要显示的页码数量
// exec 向数据库中发送查询请求
pagination(集合构造函数).page(1) .size(20) .display(8) .exec();
// 查询所有文章数据
// let articles = await pagination(Article).find().page(page).size(2).display(3).populate('author').exec();

查询的结果如下：

7 - mongoDB数据库添加账号

以前我们操作mongoDB数据库的时候，是直接操作的，并没有输入账号和密码，这是因为mongoDB数据库默认不添加账号和密码也可以使用，但是其实这是不安全的，为了防止删库跑路，我们需要为mongoDB数据库添加账号。

账号分为超级管理员和普通管理员，超级管理员可以对所有数据库进行操作，普通管理员可以对某一个数据库进行操作。

对数据库进行操作我们是使用mongoose第三方模块，给数据库添加管理员我们使用命令行，如下：

以系统管理员的方式运行powershell
进入mongodb数据库操作环境 mongo
查看数据库show dbs
切换到admin数据库 use admin
创建超级管理员账户 db.createUser({user: 'root', pwd: 'root', roles: ['root']})
- 参数是一个对象，user是用户名，pwd是密码，roles是角色，是个数组
- 如果超级管理员账户已经创建，就直接登录就可以了：db.auth('root', 'root') 登录admin数据库
切换到blog数据库 use blog，为其添加普通账号
创建普通账号 db.createUser({user: 'itcast', pwd: 'itcast', roles: ['readWrite']})
输入exit退出数据库的操作环境
卸载mongodb服务
- 停止服务 net stop mongodb
- 卸载mongodb服务mongod —remove
创建mongodb服务

mongod --logpath="C:\Program Files\MongoDB\Server\4.1\log\mongod.log" --dbpath="C:\Program�       Files\MongoDB\Server\4.1\data" --install –-auth
// 解释：'--logpath='是指定日志目录x，'--dbpath'是指定数据库目录，'--install'代表我要安装mongodb服务，'–-auth'代表当前数据库必须在登录以后才能对数据库进行操作。

启动mongodb服务 net start mongodb
切换到另外一个终端使用node app.js重新启动项目，这时候网站服务器启动成功、数据库连接成功，但是这时候是无法对数据库进行操作的
这时候我们就需要修改项目，在项目中使用账号密码连接数据库，这样就能正常访问数据库了

mongoose.connect('mongodb://user:pass@localhost:port/database')

注意：添加账号之后，下次直接使用compass连接数据库需要设置如下：

Authentication：Username/Password
Username:自己的用户名
Password：自己的密码
Authentication Database：数据库名称

设置完之后点击connect就可以连接数据库了。

项目代码地址：https://github.com/iamkata/blog

前后端交互-博客项目