2.项目功能实现

1. 登录

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

//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,
     },
     role: {
         type: String,
         required: true,
     },
     //0为启用状态,1为禁用状态
     state: {
         type: Number,
         default: 0
     }
 });
 //初始化一个joy用户,默认为admin权限
 //  User.create({
//          username: 'joy',
//          email: 'joy@163.com',
//          password: '123456',
//          //admin 超级管理员  normal用户
//          role: 'admin',
//          state: 0,
//      }).then(() => console.log('创建admin成功'))
//      .catch(() => console.log('创建admin失败'))
//将用户集合作为模块成员进行导出
 module.exports = {
     User
 }
1.连接数据库
//引入mongoose第三方模块
const mongoose = require('mongoose');
//连接数据库
mongoose.connect('mongodb://localhost/blog', {
        useNewUrlParser: true,
        useUnifiedTopology: true
    })
    .then(() => console.log('数据库连接成功'))
    .catch(() => console.log('数据库连接失败'))
2.创建用户集合
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,
     },
     role: {
         type: String,
         required: true,
     },
     //0为启用状态,1为禁用状态
     state: {
         type: Number,
         default: 0
     }
 });
3.初始化用户
/初始化一个joy用户,默认为admin权限
 //  User.create({
//          username: 'joy',
//          email: 'joy@163.com',
//          password: '123456',
//          //admin 超级管理员  normal用户
//          role: 'admin',
//          state: 0,
//      }).then(() => console.log('创建admin成功'))
//      .catch(() => console.log('创建admin失败'))

2.未登录表单项设置请求地址,请求方式以及表单项属性

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

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

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

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

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

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

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

10.比对成功 用户登录

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

2.新增用户

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

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

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

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

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

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

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

8. 对密码进行加密

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

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

3. 数据分页

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

分页功能核心要素:

1. 当前页,用户通过点击上一页或者下页或者页面产生,客户端通过get参数方式传递到服务器端;
2. 总页数,根据页数判断当前页是否为最后一页,根据判断结果响应操作
总数据条数 每页显示数据条数 总页数
50 5 10
52 5 11
总页数:Math.ceil(总数据条数/每页数据条数)
数据开始查询位置=(当前页-1)* 每页显示的数据条数

4. 用户信息修改

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

5. 用户信息删除

1. 在确认删除框中添加隐藏域用于存储要删除用户的ID值
2.为删除按钮添加自定义属性用以存储要删除用户的ID值
3.为删除按钮添加点击事件,在点击事件处理函数中获取自定义属性中存储的ID值并将ID值存储在表单中的隐藏域中
4.为删除表单添加提交地址以及提交方式
5.在服务器端建立删除功能路由
6.接收客户端传递过来的id参数
7.根据id删除用户
blog项目
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。