Node.js +个人博客系统搭建设计方案

目录

 

 

          1.Node开发基础

1.1基础(服务器端开发)

         1.2模块加载及第三方包

                1.2.1 Node.js模块化开发

      1.2.2 系统模块

               1.2.3第三方模块(包)

               1.2.4模块加载机制

2.请求响应原理及HTTP协议

2.1 服务器端基础概念

2.2创建web服务器

2.3 HTTP协议

2.4 HTTP请求与响应处理

2.5Node.js异步编程

3. MongoDB数据库

3.1数据库概述及环境搭建

4.模板引擎artTemplate

5.Express框架

6.其他

6.1第三方模块config

6.2密码加密 bcrypt

6.3 Joi

6.4 formidable

6.5 文件读取 FileReader

6.6 数据分页 mongoose-sex-page

6.7 mongoDB数据库添加账号

7.个人博客项目主要部分设计

7.1项目介绍

7.2案例初始化

7.3登录

7.4 新增用户

7.5 数据分页(可直接使用第三方模块mongoose-sex-page)

7.6 用户信息修改

7.7用户信息删除

7.8文章评论

 

 


 

1.Node开发基础

1.1基础(服务器端开发)

1.学习目标:能够和后端程序员更加紧密的配合

          网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)

          扩宽知识视野,能够站在更高的角度审视整个项目

2.作用:实现网站的业务逻辑

          数据的增删改查

3.选择:使用JavaScript语法开发后端应用

          一些公司要求前端工程师掌握Node开发;生态系统活跃,有大量开源库可以使用;前端开发工具大多基于Node开发;前端开发工具大多基于Node开发

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。需要为node.js配置环境变量。在浏览器中全局对象是window,在Node中全局对象是global。

方法:console.log() 在控制台中输出;setTimeout() 设置超时定时器;clearTimeout() 清除超时时定时器;setInterval() 设置间歇定时器;clearInterval() 清除间歇定时器

1.2模块加载及第三方包

1.2.1 Node.js模块化开发

1.JavaScript在使用时存在两大问题,文件依赖和命名冲突。

2.模块内部可以使用exports对象进行成员导出, 使用require方法导入其他模块。

3.exports是module.exports的别名(地址引用关系),导出对象最终以module.exports为准

1.2.2 系统模块

Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块

 

1.读取文件内容

     .reaFile('文件路径/文件名称'[,'文件编码'], callback);

 

2.写入文件内容

     .writeFile('文件路径/文件名称', '数据', callback);

 

3.路径拼接

    .join('路径', '路径', ...)

4.

  •   // 导入path模块
  •  const path = require('path');
  •   // 路径拼接
  •  let finialPath = path.join('itcast', 'a', 'b', 'c.css')

5.使用__dirname获取当前文件所在的绝对路径

1.2.3第三方模块(包)

1.别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块

2.形式:以js文件的形式存在,提供实现项目具体功能的API接口。

以命令行工具形式存在,辅助项目开发

3.npmjs.com:第三方模块的存储和分发仓库

4.下载:npm install 模块名称

卸载:npm unintall package 模块名称

5.使用npm install nodemon –g 下载它,在命令行工具中用nodemon命令替代node命令执行文件

Gulp:将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了,用机器代替手工,提高开发效率。

作用:项目上线,HTML、CSS、JS文件压缩合并;语法转换(es6、less ...);公共文件抽离;修改文件浏览器自动刷新;使用:使用npm install gulp下载gulp库文件;在项目根目录下建立gulpfile.js文件;重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件;在gulpfile.js文件中编写任务.;在命令行工具中执行gulp任务

方法:

gulp.src():获取任务要处理的文件

gulp.dest():输出文件

gulp.task():建立gulp任务

gulp.watch():监控文件的变化

插件:gulp-htmlmin :html文件压缩

gulp-csso :压缩css

gulp-babel :JavaScript语法转化

gulp-less: less语法转化

gulp-uglify :压缩混淆JavaScript

gulp-file-include 公共文件包含

browsersync 浏览器实时同步

6.package.json文件:项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。使用npm init -y命令生成。

7.node_modules文件夹:文件夹以及文件过多过碎,当我们将项目整体拷贝给别人的时候,传输速度会很慢很慢.

复杂的模块依赖关系需要被记录,确保模块的版本和当前保持一致,否则会导致当前项目运行报错

8.项目依赖:在项目的开发阶段和线上运营阶段,都需要依赖的第三方包,称为项目依赖

使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

9. package-lock.json文件的作用:锁定包的版本,确保再次下载时不会因为包版本不同而产生问题

 加快下载速度,因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址,重新安装时只需下载即可,不需要做额外的工作

1.2.4模块加载机制

1.模块查找规则-当模块拥有路径但没有后缀时

require方法根据模块路径查找模块,如果是完整路径,直接引入模块。

如果模块后缀省略,先找同名JS文件再找同名JS文件夹

如果找到了同名文件夹,找文件夹中的index.js

如果文件夹中没有index.js就会去当前文件夹中的package.json文件中查找main选项中的入口文件

如果找指定的入口文件不存在或者没有指定入口文件就会报错,模块没有被找到

2.模块查找规则-当模块没有路径且没有后缀时

Node.js会假设它是系统模块

Node.js会去node_modules文件夹中

首先看是否有该名字的JS文件

再看是否有该名字的文件夹

如果是文件夹看里面是否有index.js

如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件

否则找不到报错

2.请求响应原理及HTTP协议

2.1 服务器端基础概念

网站、Node网站服务器、P地址、域名、端口

URL(统一资源定位符):传输协议://服务器IP或域名:端口/资源所在位置标识;http:超文本传输协议,提供了一种发布和接收HTML页面的方法。

2.2创建web服务器

  •  // 引用系统模块
  •  const http = require('http');
  •   // 创建web服务器
  •  const app = http.createServer();
  •   // 当客户端发送请求的时候
  •  app.on('request', (req, res) => {
  •         //  响应
  •        res.end('<h1>hi, user</h1>');
  •  });
  •   // 监听3000端口
  •  app.listen(3000);

2.3 HTTP协议

1.http:超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)规定了如何从网站服务器传输超文本到本地浏览器,它基于客户端服务器架构工作,是客户端(用户)和服务器端(网站)请求和应答的标准。

2.报文:在HTTP请求和响应的过程中传递的数据块就叫报文,包括要传送的数据和一些附加信息,并且要遵守规定好的格式。(get、post请求报文)

3.响应报文

HTTP状态码:200 请求成功;404 请求的资源没有被找到;500 服务器端错误;400 客户端请求有语法错误

内容类型:

text/html

text/css

application/javascript

image/jpeg

application/json

2.4 HTTP请求与响应处理

1.GET请求参数

参数被放置在浏览器地址栏中,例如:http://localhost:3000/?name=zhangsan&age=20

参数获取需要借助系统模块url,url模块用来处理url地址

2.POST请求参数

参数被放置在请求体中进行传输

获取POST参数需要使用data事件和end事件

使用querystring系统模块将参数转换为对象格式

3.路由

http://localhost:3000/index

http://localhost:3000/login

路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说,就是请求什么响应什么。

4.静态资源

服务器端不需要处理,可以直接响应给客户端的资源就是静态资源,例如CSS、JavaScript、image文件。  如http://www.itcast.cn/images/logo.png

5.动态资源

相同的请求地址不同的响应资源,这种资源就是动态资源

http://www.itcast.cn/article?id=1

http://www.itcast.cn/article?id=2

6.客户端请求途径

GET方式:浏览器地址栏

link标签的href属性

script标签的src属性

img标签的src属性

Form表单提交

POST方式:Form表单提交

2.5Node.js异步编程

1.同步API, 异步API的区别

获取返回值: 同步API可以从返回值中拿到API执行的结果, 但是异步API是不可以的

代码执行顺序:同步API从上到下依次执行,前面代码会阻塞后面代码的执行;异步API不会等待API执行完成后再向下执行代码

2.回调函数:自己定义函数让别人去调用

3.使用回调函数获取异步API执行结果

4.Promise出现的目的是解决Node.js异步编程中回调地狱的问题。

5.异步函数是异步编程语法的终极解决方案,它可以让我们将异步代码写成同步的形式,让代码不再有回调函数嵌套,使代码变得清晰明了。

6.async关键字: 1. 普通函数定义前加async关键字 普通函数变成异步函数

2. 异步函数默认返回promise对象

3. 在异步函数内部使用return关键字进行结果返回 结果会被包裹的promise对象中 return关键字代替了resolve方法

4. 在异步函数内部使用throw关键字抛出程序异常

5. 调用异步函数再链式调用then方法获取异步函数执行结果

6. 调用异步函数再链式调用catch方法获取异步函数执行的错误信息

 

3. MongoDB数据库

3.1数据库概述及环境搭建

1.动态网站中的数据都是存储在数据库中的

数据库可以用来持久存储客户端通过表单收集的用户信息

数据库软件本身可以对数据进行高效的管理

2.Mongoose第三方包

使用Node.js操作MongoDB数据库需要依赖Node.js第三方包mongoose

使用npm install mongoose命令下载

3.使用mongoose提供的connect方法即可连接数据库

  •  mongoose.connect('mongodb://localhost/playground')
  • .then(() => console.log('数据库连接成功'))

4.在MongoDB中不需要显式创建数据库,如果正在使用的数据库不存在,MongoDB会自动创建

5.创建集合分为两步,一是对对集合设定规则,二是创建集合,创建mongoose.Schema构造函数的实例即可创建集合

6.创建文档

创建文档实际上就是向集合中插入数据。

分为两步:

创建集合实例。

调用实例对象下的save方法将数据保存到数据库中。

7.mongoimport –d 数据库名称 –c 集合名称 –file 要导入的数据文件

找到mongodb数据库的安装目录,将安装目录下的bin目录放置在环境变量中。

8.查询文档

 //  匹配大于 小于

 User.find({age: {$gt: 20, $lt: 50}}).then(result => console.log(result))

//  匹配包含

 User.find({hobbies: {$in: ['敲代码']}}).then(result => console.log(result))

//  选择要查询的字段  

 User.find().select('name email').then(result => console.log(result))

// 将数据按照年龄进行排序

 User.find().sort('age').then(result => console.log(result))

/  skip 跳过多少条数据  limit 限制查询数量

 User.find().skip(2).limit(2).then(result => console.log(result))

9.删除文档

// 删除单个

Course.findOneAndDelete({}).then(result => console.log(result))

// 删除多个

User.deleteMany({}).then(result => console.log(result))

10.更新文档

/ 更新单个

User.updateOne({查询条件}, {要修改的值}).then(result => console.log(result))

// 更新多个

User.updateMany({查询条件}, {要更改的值}).then(result => console.log(result)

11. mongoose验证:在创建集合规则时,可以设置当前字段的验证规则,验证失败就则输入插入失败。

required: true 必传字段

minlength:3 字符串最小长度

maxlength: 20 字符串最大长度

min: 2 数值最小为2

max: 100 数值最大为100

enum: ['html', 'css', 'javascript', 'node.js']

trim: true 去除字符串两边的空格

validate: 自定义验证器

default: 默认值

获取错误信息:error.errors['字段名称'].message

12.集合关联

通常不同集合的数据之间是有关系的,例如文章信息和用户信息存储在不同集合中,但文章是某个用户发表的,要查询文章的所有信息包括发表用户,就需要用到集合关联。

使用id对集合进行关联

使用populate方法进行关联集合查询

 

4.模板引擎artTemplate

1.模板引擎

模板引擎是第三方模块。

让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。

2.art-template模板引擎

在命令行工具中使用 npm install art-template 命令进行下载

使用const template = require('art-template')引入模板引擎

告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);

使用模板语法告诉模板引擎,模板与数据应该如何进行拼接

3.标准语法: {{ 数据 }}

4.如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出。

标准语法:{{@ 数据 }}

5.条件判断

 {{if 条件}} ... {{/if}}

 {{if v1}} ... {{else if v2}} ... {{/if}}

6.循环

{{each 数据}} {{/each}}

7.子模版:使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中

{{include '模板'}}

8.模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。

{{extend './layout.art'}}

 {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}

 {{block 'content'}} <p>This is just an awesome page.</p> {{/block}}

9.模板配置

向模板中导入变量 template.defaults.imports.变量名 = 变量值;

设置模板根目录 template.defaults.root = 模板目录

设置模板默认后缀 template.defaults.extname = '.art'

10.第三方模块 router:

功能:实现路由

使用步骤:

获取路由对象

调用路由对象提供的方法创建路由

启用路由,使路由生效

11.第三方模块 serve-static

功能:实现静态资源访问服务

步骤:

引入serve-static模块获取创建静态资源服务功能的方法

调用方法创建静态资源服务并指定静态资源服务目录

启用静态资源服务功能

 

 

5.Express框架

1.Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。

2.Express框架特性

提供了方便简洁的路由定义方式

对获取HTTP请求参数进行了简化处理

对模板引擎支持程度高,方便渲染动态HTML页面

提供了中间件机制有效控制HTTP请求

拥有大量第三方中间件对功能进行扩展

3.路由

 // 当客户端以get方式访问/时

 app.get('/', (req, res) => {

     // 对客户端做出响应

     res.send('Hello Express');

 });

 

 // 当客户端以post方式访问/add路由时

 app.post('/add', (req, res) => {

    res.send('使用post方式请求了/add路由');

 });

4.获取请求参数

app.get('/', (req, res) => {

    // 获取GET参数

    console.log(req.query);

 });

 

 app.post('/', (req, res) => {

    // 获取POST参数

    console.log(req.body);

 })

5.创建web服务器

// 引入Express框架

 const express = require('express');

 // 使用框架创建web服务器

 const app = express();

 // 当客户端以get方式访问/路由时

 app.get('/', (req, res) => {

    // 对客户端做出响应 send方法会根据内容的类型自动设置请求头

    res.send('Hello Express'); // <h2>Hello Express</h2> {say: 'hello'}

 });

 // 程序监听3000端口

 app.listen(3000);

6.中间件

(1)中间件就是一堆方法,可以接收客户端发来的请求、可以对请求做出响应,也可以将请求继续交给下一个中间件继续处理。

(2)中间件方法:由Express提供,负责拦截请求

请求处理函数:由开发人员提供,负责处理请求

app.get('请求路径', '处理函数')   // 接收并处理get请求

app.post('请求路径', '处理函数')  // 接收并处理post请求

(3)可以针对同一个请求设置多个中间件,对同一个请求进行多次处理。

默认情况下,请求从上到下依次匹配中间件,一旦匹配成功,终止匹配。

可以调用next方法将请求的控制权交给下一个中间件,直到遇到结束请求的中间件。

 app.get('/request', (req, res, next) => {

     req.name = "张三";

     next();

 });

 app.get('/request', (req, res) => {

     res.send(req.name);

 });

 

 (4)app.use中间件用法:

app.use 匹配所有的请求方式,可以直接传入请求处理函数,代表接收所有的请求

app.use((req, res, next) => {

     console.log(req.url);

     next();

 });

app.use 第一个参数也可以传入请求地址,代表不论什么请求方式,只要是这个请求地 址就接收这个请求。

app.use('/admin', (req, res, next) => {

     console.log(req.url);

     next();

 });

(5)应用:

1.路由保护:客户端在访问需要登录的页面时,可以先使用中间件判断用户登录状态,用 户如果未登录,则拦截请求,直接响应,禁止用户进入需要登录的页面

2.网站维护公告:在所有路由的最上面定义接收所有请求的中间件,直接为客户端做出 响应,网站正在维护中

3.自定义404页面

(6)错误处理中间件

在程序执行的过程中,不可避免的会出现一些无法预料的错误,比如文件读取失败,数据库连接失败。错误处理中间件是一个集中处理错误的地方。

app.use((err, req, res, next) => {

     res.status(500).send('服务器发生未知错误');

 })

当程序出现错误时,调用next()方法,并且将错误信息通过参数的形式传递给next()方法,即可触发错误处理中间件。

 app.get("/", (req, res, next) => {

     fs.readFile("/file-does-not-exist", (err, data) => {

         if (err) {

            next(err);

         }

     });

});

(7)捕获错误

在node.js中,异步API的错误信息都是通过回调函数获取的,支持Promise对象的异步API发生错误可以通过catch方法捕获。

异步函数执行如果发生错误要如何捕获错误呢?

try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误,但是不能其他类型的API发生的错误。

app.get("/", async (req, res, next) => {

     try {

         await User.find({name: '张三'})

     }catch(ex) {

         next(ex);

     }

 });

7.Express请求处理

(1)构建模块化路由

const express = require('express')

 // 创建路由对象

 const home = express.Router();

 // 将路由和请求路径进行匹配

 app.use('/home', home);

  // 在home路由下继续创建路由

 home.get('/index', () => {

          //  /home/index

         res.send('欢迎来到博客展示页面');

 });

 

// home.js

 const home = express.Router();

 home.get('/index', () => {

     res.send('欢迎来到博客展示页面');

 });

 module.exports = home;

 

// app.js

 const home = require('./route/home.js');

 const admin = require('./route/admin.js');

 app.use('/home', home);

 app.use('/admin', admin);

(2)GET参数的获取

Express框架中使用req.query即可获取GET参数,框架内部会将GET参数转换为对象并返回。

// 接收地址栏中问号后面的参数

 // 例如: http://localhost:3000/?name=zhangsan&age=30

 app.get('/', (req, res) => {

    console.log(req.query); // {"name": "zhangsan", "age": "30"}

 });

(3)POST参数的获取

Express中接收post请求参数需要借助第三方包 body-parser。

// 引入body-parser模块

 const bodyParser = require('body-parser');

 // 配置body-parser模块

 app.use(bodyParser.urlencoded({ extended: false }));

 // 接收请求

 app.post('/add', (req, res) => {

    // 接收请求参数

    console.log(req.body);

 })

(4)Express路由参数

app.get('/find/:id', (req, res) => {

     console.log(req.params); // {id: 123}

 });

 

localhost:3000/find/123

(5)静态资源的处理

通过Express内置的express.static可以方便地托管静态文件,例如img、CSS、JavaScript 文件等。

app.use(express.static('public'));

现在,public 目录下面的文件就可以访问了。

http://localhost:3000/images/kitten.jpg

http://localhost:3000/css/style.css

http://localhost:3000/js/app.js

http://localhost:3000/images/bg.png

http://localhost:3000/hello.html

(6) express-art-template模板引擎

为了使art-template模板引擎能够更好的和Express框架配合,模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。使用npm install art-template express-art-template命令进行安装。

// 当渲染后缀为art的模板时 使用express-art-template

 app.engine('art', require('express-art-template'));

  // 设置模板存放目录

 app.set('views', path.join(__dirname, 'views'));

  // 渲染模板时不写后缀 默认拼接art后缀

 app.set('view engine', 'art');

 app.get('/', (req, res) => {

     // 渲染模板

     res.render('index');

 });

将变量设置到app.locals对象下面,这个数据在所有的模板中都可以获取到。

 app.locals.users = [{

     name: '张三',

     age: 20

 },{

     name: '李四',

     age: 20

}]

6.其他

6.1第三方模块config

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

使用步骤

2.使用npm install config命令下载模块

在项目的根目录下新建config文件夹

在config文件夹下面新建default.json、development.json、production.json文件

在项目中通过require方法,将模块进行导入

使用模块内部提供的get方法获取配置信息

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

在config文件夹中建立custom-environment-variables.json文件

配置项属性的值填写系统环境变量的名字

项目运行时config模块查找系统环境变量,并读取其值作为当前配置项属于的值

6.2密码加密 bcrypt

1.bcrypt依赖的其他环境

python 2.x

node-gyp

    npm install -g node-gyp

windows-build-tools

     npm install --global --production windows-build-tools

2. cookie

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

cookie中的数据是以域名的形式进行区分的。

cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

cookie中的数据会随着请求被自动发送到服务器端。

3.session

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

4.cookie与session

在node.js中需要借助express-session实现session功能。

const session = require('express-session');

app.use(session({ secret: 'secret key' }));

 

6.3 Joi

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

 

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

    email: Joi.string().email()

};

Joi.validate({ username: 'abc', birthyear: 1994 }, schema);

 

6.4 formidable

作用:解析表单,支持get请求参数,post请求参数、文件上传。

 

 // 引入formidable模块

 const formidable = require('formidable');

 // 创建表单解析对象

 const form = new formidable.IncomingForm();

 // 设置文件上传路径

 form.uploadDir = "/my/dir";

 // 是否保留表单上传文件的扩展名

 form.keepExtensions = false;

 // 对表单进行解析

 form.parse(req, (err, fields, files) => {

     // fields 存储普通请求参数

         // files 存储上传的文件信息

 });

6.5 文件读取 FileReader

 var reader = new FileReader();

 reader.readAsDataURL('文件');

 reader.onload = function () {

     console.log(reader.result);

 }

 

6.6 数据分页 mongoose-sex-page

const pagination = require('mongoose-sex-page');

pagination(集合构造函数).page(1) .size(20) .display(8) .exec();

 

6.7 mongoDB数据库添加账号

1. 以系统管理员的方式运行powershell

2. 连接数据库 mongo

3. 查看数据库 show dbs

4. 切换到admin数据库 use admin

5. 创建超级管理员账户 db.createUser()

6. 切换到blog数据 use blog

7. 创建普通账号 db.createUser()

8. 卸载mongodb服务

         1. 停止服务 net stop mongodb

         2. mongod --remove

9. 创建mongodb服务

   mongod --logpath="C:\Program Files\MongoDB\Server\4.1\log\mongod.log" --dbpath="C:\Program
          Files\MongoDB\Server\4.1\data" --install –-auth

10. 启动mongodb服务 net start mongodb

11. 在项目中使用账号连接数据库

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

 

7.个人博客项目主要部分设计

7.1项目介绍

多人博客管理系统:

博客内容展示

博客管理功能

7.2案例初始化

1. 建立项目所需文件夹

public 静态资源

model 数据库操作

route 路由

views 模板

2. 初始化项目描述文件

npm init -y

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

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

4. 创建网站服务器

5. 构建模块化路由

6.  构建博客管理页面模板

7.3登录

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

连接数据库

创建用户集合

初始化用户

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

3. 当用户点击登录按钮时,客户端验证用户是否填写了登录表单

4. 如果其中一项没有输入,阻止表单提交

5. 服务器端接收请求参数,验证用户是否填写了登录表单

6. 如果其中一项没有输入,为客户端做出响应,阻止程序向下执行

7. 根据邮箱地址查询用户信息

8. 如果用户不存在,为客户端做出响应,阻止程序向下执行

9. 如果用户存在,将用户名和密码进行比对

10. 比对成功,用户登录成功

11. 比对失败,用户登录失败

12. 保存登录状态

13. 密码加密处理

7.4 新增用户

1. 为用户列表页面的新增用户按钮添加链接

2. 添加一个连接对应的路由,在路由处理函数中渲染新增用户模板

3 .为新增用户表单指定请求地址、请求方式、为表单项添加name属性

4. 增加实现添加用户的功能路由

5. 接收到客户端传递过来的请求参数

6. 对请求参数的格式进行验证

7. 验证当前要注册的邮箱地址是否已经注册过

8. 对密码进行加密处理

9. 将用户信息添加到数据库中

10. 重定向页面到用户列表页面

7.5 数据分页(可直接使用第三方模块mongoose-sex-page)

当前页,用户通过点击上一页或者下一页或者页码产生,客户端通过get参数方式传递到服务器端

总页数,根据总页数判断当前页是否为最后一页,根据判断结果做响应操作

总页数:Math.ceil(总数据条数 / 每页显示数据条数)

limit(2) // limit 限制查询数量  传入每页显示的数据数量

skip(1) // skip 跳过多少条数据  传入显示数据的开始位置

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

7.6 用户信息修改

1. 将要修改的用户ID传递到服务器端

2. 建立用户信息修改功能对应的路由

3. 接收客户端表单传递过来的请求参数

4. 根据id查询用户信息,并将客户端传递过来的密码和数据库中的密码进行比对

5. 如果比对失败,对客户端做出响应

6. 如果密码对比成功,将用户信息更新到数据库中

7.7用户信息删除

1. 在确认删除框中添加隐藏域用以存储要删除用户的ID值

2. 为删除按钮添自定义属性用以存储要删除用户的ID值

3. 为删除按钮添加点击事件,在点击事件处理函数中获取自定义属性中存储的ID值并将ID值存储在表单的隐藏域中

4. 为删除表单添加提交地址以及提交方式

5. 在服务器端建立删除功能路由

6. 接收客户端传递过来的id参数

7. 根据id删除用户

7.8文章评论

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

 

 

 

 

 

 

 

 

 

 

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 1

打赏作者

huohuoit

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值