【学习笔记】博客项目（一）

项目介绍-----多人博客管理系统

！最近在学习nodejs，原视频中有一些用法已经过时，该文章已经全部更新

案例初始化

1. 建立项目所需文件夹

   public 静态资源

   model 数据库操作

   route 路由

   views 模板
   

2. 初始化项目描述文件

   npm init -y

   (会生成 pakage.json 文件)

3. 下载项目所需第三方模块

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

4. 创建网站服务器
   
   注： 浏览器默认监听80端口

5. 构建模块化路由
   
   
   注：此时项目入口文件需要引入路由模块
   

6. 构建博客管理页面模板
   ① 把静态资源文件放入public文件夹下
   注： 此时需要开放静态资源文件
   
   ② 模板引擎要求文件的后缀为 .art，因此需要把静态资源.html后缀更改后放到views文件夹下

注：只有配置以下信息才能够使用res.render方法来渲染模板


③ 静态资源的外链文件是由浏览器来进行解析的， 所以它的相对路径是相对于地址栏中的请求路径

因此要以绝对路径代替相对路径 添加斜杠/ 代表服务器的绝对路径

同理，把所有.art文件里面的外链文件 路径开头都添加上/admin/

优化模板

① 把公共部分（头部、侧边栏、骨架）抽离出来单独放在一个文件夹中



② 把admin文件夹下的模板文件（除了login.art）更改为以下形式

注： {{include/extend 后面的路径不需要写绝对路径（因为是由模板引擎进行解析跟浏览器不一样）}}

③ 验证是否加载成功

登录功能

1. 创建用户集合，初始化用户

   ① 连接数据库
   
   
   ② 创建用户集合

// 创建用户集合 model\user.js

// 引入mongoose 第三方模块
const mongoose = require('mongoose');

// 创建用户集合规则
const userSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true,
        minlength: 2,
        maxlength: 20
    },
    email: {
        type: String,
        // 保证邮箱地址在插入数据的时候不重复
        unique: true,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    // admin -- 超级管理员
    // normal -- 普通用户
    role: {
        type: String,
        required: true
    },
    // 0 启用状态
    // 1 禁用状态
    state: {
        type: Number,
        default: 0
    }
});

// 创建集合
const User = mongoose.model('User',userSchema);

// 将用户集合作为模块成员进行导出
module.exports = {
    User: User
}

③ 初始化用户

注：当测试用户创建成功后把以下代码注释掉，因为一旦运行一次代码就会重新创建一次用户，又由于该用户已经被创建过一次因此会报错

// 创建用户信息
User.create({
    username: 'ithei',
    email: 'ithei@163.com',
    password: '123456',
    role: 'admin',
    state: 0
}).
then(() => console.log('用户创建成功'))
.catch(() => console.log('用户创建失败'));

2. 为登录表单项设置请求地址、请求方式以及表单项name属性

注：登录表单项请求方式统一使用post请求，因为post请求数据存放在请求体中，而get请求数据当提交表单后内容会在地址栏中显示
3. 当用户点击登录按钮时，客户端验证用户是否填写了登录表单
① 封装一个函数

注：serializeArray() 属于jQuery的内置方式，直接使用是不被允许的，需要引入jquery.js 文件

② 由于该函数很多地方都用得上，我们需要在layout.art文件里引入这个js文件

③ 开始为表单添加提交事件
（如果其中一项没有输入，阻止表单提交）

→ 【学习笔记】黑马博客项目（二）