大事件后台API项目01

已于 2023-01-01 21:33:08 修改
阅读量433 收藏 2
点赞数 3
分类专栏： 项目实战 文章标签： 前端 中间件 后端 开发语言
于 2022-12-31 22:15:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43599321/article/details/128498631
版权

这篇博客记一下编写大事件项目的后台API的基本步骤，其中很多都是属于后端的知识，提前了解一下，为以后工作打基础。
这个项目跟的课程是黑马刘龙彬老师的Node.js入门教程
这篇博客参考了刘龙彬老师的大事件项目api_server文档

一、 初始化

1.1 创建项目

1.新建 api_server 文件夹作为项目根目录，并在项目根目录中运行如下的命令，初始化包管理配置文件：

npm init -y

2.运行如下的命令，安装特定版本的 express：

npm i express@4.17.1

3.在项目根目录中新建 app.js 作为整个项目的入口文件，并初始化如下的代码：

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// write your code here...

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(3007, function () {
  console.log('api server running at http://127.0.0.1:3007')
})

1.2 配置cors跨域

1.运行如下的命令，安装 cors 中间件：

npm i cors@2.8.5

2.在 app.js 中导入并配置 cors 中间件

// 导入 cors 中间件
const cors = require('cors')
// 将 cors 注册为全局中间件
app.use(cors())

1.3 配置解析表单数据的中间件

1.通过如下的代码，配置解析 application/x-www-form-urlencoded 格式的表单数据的中间件：

app.use(express.urlencoded({ extended: false }))

注意：这个中间件，只能解析application/x-www-form-urlencoded格式的表单数据。
最需要注意的是：配置解析表单数据的中间件必须在使用路由模块之前，否则会报错误！！！
在这里插入图片描述

1.4 初始化路由相关的文件

1.在项目根目录中，新建 router 文件夹，用来存放所有的路由模块
路由模块中，只存放客户端的请求与处理函数之间的映射关系

2.在项目根目录中，新建 router_handler 文件夹，用来存放所有的 路由处理函数模块
路由处理函数模块中，专门负责存放每个路由对应的处理函数

1.5 初始化用户路由模块

1.在 router 文件夹中，新建 user.js 文件，作为用户的路由模块，并初始化代码如下：

const express = require('express')
// 创建路由对象
const router = express.Router()

// 注册新用户
router.post('/reguser', (req, res) => {
  res.send('reguser OK')
})

// 登录
router.post('/login', (req, res) => {
  res.send('login OK')
})

// 将路由对象共享出去
module.exports = router

2.在 app.js 中，导入并使用 用户路由模块 ：

// 导入并注册用户路由模块
const userRouter = require('./router/user')
app.use('/api', userRouter)

1.6 抽离用户路由模块中的处理函数

目的：为了保证 路由模块 的纯粹性，所有的 路由处理函数，必须抽离到对应的 路由处理函数模块 中
1.在 /router_handler/user.js 中，使用 exports 对象，分别向外共享如下两个 路由处理函数 ：

/**
 * 在这里定义和用户相关的路由处理函数，供 /router/user.js 模块进行调用
 */

// 注册用户的处理函数
exports.regUser = (req, res) => {
  res.send('reguser OK')
}

// 登录的处理函数
exports.login = (req, res) => {
  res.send('login OK')
}

2.将 /router/user.js 中的代码修改为如下结构：

const express = require('express')
const router = express.Router()

// 导入用户路由处理函数模块
const userHandler = require('../router_handler/user')

// 注册新用户
router.post('/reguser', userHandler.regUser)
// 登录
router.post('/login', userHandler.login)

module.exports = router

二、登录注册

2.1 新建ev_users表

1.在 my_db_01 数据库中，新建 ev_users 表如下：
在这里插入图片描述
其中id属性必须自动递增、非null、为主键、唯一。
username必须非null、唯一。
password必须非null。
设置属性唯一的方法如下：
在这里插入图片描述
在这里插入图片描述
索引方法默认为BTREE。

2.2 安装并配置mysql模块

在 API 接口项目中，需要安装并配置 mysql 这个第三方模块，来连接和操作 MySQL 数据库。
1.运行如下命令，安装 mysql 模块：

npm i mysql@2.18.1

2.在项目根目录中新建 /db/index.js 文件，在此自定义模块中创建数据库的连接对象：

// 导入 mysql 模块
const mysql = require('mysql')

// 创建数据库连接对象
const db = mysql.createPool({
  host: '127.0.0.1',
  user: 'root',
  password: '123456',
  database: 'my_db_01',
})

// 向外共享 db 数据库连接对象
module.exports = db

2.3 注册

2.3.0 注册实现步骤
  1. 检测表单数据是否合法
  2. 检测用户名是否被占用
  3. 对密码进行加密处理
  4. 插入新用户
2.3.1 检测表单数据是否合法

1.判断用户名和密码是否为空

// 接收表单数据
const userinfo = req.body
// 判断数据是否合法
if (!userinfo.username || !userinfo.password) {
  return res.send({ status: 1, message: '用户名或密码不能为空！' })
}

在这里插入图片描述

2.3.2 检测用户名是否被占用

1.导入数据库操作模块：

const db = require('../db/index')

2.定义 SQL 语句：

const sql = `select * from ev_users where username=?`

3.执行 SQL 语句并根据结果判断用户名是否被占用：

db.query(sql, [userinfo.username], function (err, results) {
  // 执行 SQL 语句失败
  if (err) {
    return res.send({ status: 1, message: err.message })
  }
  // 用户名被占用
  if (results.length > 0) {
    return res.send({ status: 1, message: '用户名被占用，请更换其他用户名！' })
  }
  // TODO: 用户名可用，继续后续流程...
})

在这里插入图片描述
当表中已存在username为zhangsan的数据时，客户端再向服务器发送username为zhangsan的数据即会返回数据重复的信息。
在这里插入图片描述

2.3.3 对密码进行加密处理

为了保证密码的安全性，不建议在数据库以 明文 的形式保存用户密码，推荐对密码进行 加密存储
在当前项目中，使用 bcryptjs 对用户密码进行加密，优点：

  • 加密之后的密码，无法被逆向破解
  • 同一明文密码多次加密，得到的加密结果各不相同，保证了安全性
    1.运行如下命令，安装指定版本的 bcryptjs ：
npm i bcryptjs@2.4.3

2.在 /router_handler/user.js 中，导入 bcryptjs ：

const bcrypt = require('bcryptjs')

3.在注册用户的处理函数中，确认用户名可用之后，调用 bcrypt.hashSync(明文密码, 随机盐的长度) 方法，对用户的密码进行加密处理：

// 对用户的密码,进行 bcrype 加密，返回值是加密之后的密码字符串
userinfo.password = bcrypt.hashSync(userinfo.password, 10)

这里我们可以在加密前后输出userinfo进行结果对比。
在这里插入图片描述

2.3.4 插入新用户

1.定义插入用户的 SQL 语句：

const sql = 'insert into ev_users set ?'

2.调用 db.query() 执行 SQL 语句，插入新用户：

db.query(sql, { username: userinfo.username, password: userinfo.password }, function (err, results) {
  // 执行 SQL 语句失败
  if (err) return res.send({ status: 1, message: err.message })
  // SQL 语句执行成功，但影响行数不为 1
  if (results.affectedRows !== 1) {
    return res.send({ status: 1, message: '注册用户失败，请稍后再试！' })
  }
  // 注册成功
  res.send({ status: 0, message: '注册成功！' })
})

在这里插入图片描述
在这里插入图片描述

2.4 优化res.send代码

在处理函数中，需要多次调用 res.send() 向客户端响应 处理失败 的结果，为了简化代码，可以手动封装一个 res.cc() 函数

1.在 app.js 中，所有路由之前，声明一个全局中间件，为 res 对象挂载一个 res.cc() 函数 ：

// 响应数据的中间件
app.use(function (req, res, next) {
  // status = 0 为成功； status = 1 为失败； 默认将 status 的值设置为 1，方便处理失败的情况
  res.cc = function (err, status = 1) {
    res.send({
      // 状态
      status,
      // 状态描述，判断 err 是 错误对象 还是 字符串
      message: err instanceof Error ? err.message : err,
    })
  }
  next()
})

将所有传统响应处理失败/成功的方式替换为封装好的res.cc()函数，也能得到一样的效果。
在这里插入图片描述
在这里插入图片描述

2.5 优化表单数据验证

表单验证的原则：前端验证为辅，后端验证为主，后端永远不要相信前端提交过来的任何内容。
在实际开发中，前后端都需要对表单的数据进行合法性的验证，而且，后端做为数据合法性验证的最后一个关口，在拦截非法数据方面，起到了至关重要的作用。
单纯的使用 if…else… 的形式对数据合法性进行验证，效率低下、出错率高、维护性差。因此，推荐使用第三方数据验证模块，来降低出错率、提高验证的效率与可维护性，让后端程序员把更多的精力放在核心业务逻辑的处理上。
1.安装 joi 包，为表单中携带的每个数据项，定义验证规则：

npm install joi

2.安装 @escook/express-joi 中间件，来实现自动对表单数据进行验证的功能：

npm i @escook/express-joi

3.新建 /schema/user.js 用户信息验证规则模块，并初始化代码如下：

const joi = require('joi')

/**
 * string() 值必须是字符串
 * alphanum() 值只能是包含 a-zA-Z0-9 的字符串
 * min(length) 最小长度
 * max(length) 最大长度
 * required() 值是必填项，不能为 undefined
 * pattern(正则表达式) 值必须符合正则表达式的规则
 */

// 用户名的验证规则
const username = joi.string().alphanum().min(1).max(10).required()
// 密码的验证规则
const password = joi
  .string()
  .pattern(/^[\S]{6,12}$/)
  .required()

// 注册和登录表单的验证规则对象
exports.reg_login_schema = {
  // 表示需要对 req.body 中的数据进行验证
  body: {
    username,
    password,
  },
}

4.修改 /router/user.js 中的代码如下：

const express = require('express')
const router = express.Router()

// 导入用户路由处理函数模块
const userHandler = require('../router_handler/user')

// 1. 导入验证表单数据的中间件
const expressJoi = require('@escook/express-joi')
// 2. 导入需要的验证规则对象
const { reg_login_schema } = require('../schema/user')

// 注册新用户
// 3. 在注册新用户的路由中，声明局部中间件，对当前请求中携带的数据进行验证
// 3.1 数据验证通过后，会把这次请求流转给后面的路由处理函数
// 3.2 数据验证失败后，终止后续代码的执行，并抛出一个全局的 Error 错误，进入全局错误级别中间件中进行处理
router.post('/reguser', expressJoi(reg_login_schema), userHandler.regUser)
// 登录
router.post('/login', userHandler.login)

module.exports = router

5.在 app.js 的全局错误级别中间件中，捕获验证失败的错误，并把验证失败的结果响应给客户端：

const joi = require('@hapi/joi')

// 错误中间件
app.use(function (err, req, res, next) {
  // 数据验证失败
  if (err instanceof joi.ValidationError) return res.cc(err)
  // 未知错误
  res.cc(err)
})

2.6 登录

2.6.0 登录实现步骤
  1. 检测表单数据是否合法
  2. 检测用户名是否被占用
  3. 对密码进行加密处理
  4. 插入新用户
2.6.1 检测表单数据是否合法

1.将 /router/user.js 中 登录 的路由代码修改如下：

// 登录的路由
router.post('/login', expressJoi(reg_login_schema), userHandler.login)
2.6.2 根据用户名查询用户的数据

1.接收表单数据

const userinfo = req.body

2.定义 SQL 语句：

const sql = `select * from ev_users where username=?`

3.执行 SQL 语句，查询用户的数据：

db.query(sql, userinfo.username, (err, results) => {
    if (err) {
      return res.cc(err);
    }
    if (results.length !== 1) {
      return res.cc("账号不存在！登录失败！");
    }
    res.send("login OK");
  });

数据库中不存在此账号时就会返回登录失败的提示信息
在这里插入图片描述

2.6.3 判断用户输入的密码是否正确

核心实现思路：调用 bcrypt.compareSync(用户提交的密码, 数据库中的密码) 方法比较密码是否一致
返回值是布尔值（true 一致、false 不一致）
具体的实现代码如下：

// 拿着用户输入的密码,和数据库中存储的密码进行对比
const compareResult = bcrypt.compareSync(userinfo.password, results[0].password)

// 如果对比的结果等于 false, 则证明用户输入的密码错误
if (!compareResult) {
  return res.cc('密码错误！登录失败！')
}

// TODO：登录成功，生成 Token 字符串

注意：db.query()方法根据sql语句从数据库中筛选出来的返回的结果results是一个数组，因为数据库中username是唯一的，所以如果账号正确，则匹配成功返回的一定是长度为1的数组。
当向服务器发送的密码与数据库所存储的账号对应的密码不一致时，会给客户端返回密码错误的提示消息。
在这里插入图片描述

2.6.4 生成JWT的Token字符串

对于JWT认证机制的更详细讲解可以查看往期博客。
JWT认证机制
核心注意点：在生成 Token 字符串的时候，一定要剔除 密码 和 头像 的值
1.通过 ES6 的高级语法，快速剔除 密码 和 头像 的值：

// 剔除完毕之后，user 中只保留了用户的 id, username, nickname, email 这四个属性的值
const user = { ...results[0], password: '', user_pic: '' }

此处可以先输出一下匹配的账号密码等信息，便于与剔除密码和头像的值后的数据进行比较。
在这里插入图片描述
请求详情如下：username与password都与数据库中的匹配
在这里插入图片描述
剔除password和user_pic的结果
在这里插入图片描述
2.运行如下的命令，安装生成 Token 字符串的包：

npm i jsonwebtoken@8.5.1

3.在 /router_handler/user.js 模块的头部区域，导入 jsonwebtoken 包：

// 用这个包来生成 Token 字符串
const jwt = require('jsonwebtoken')

4.创建 config.js 文件，并向外共享 加密 和 还原 Token 的 jwtSecretKey 字符串：

module.exports = {
  jwtSecretKey: 'wjr No1. ^_^',  // Token密钥
  expiresIn: '10h'  // Token有效期
}

5.将用户信息对象加密成 Token 字符串：

// 导入配置文件
const config = require('../config')

// 生成 Token 字符串
const tokenStr = jwt.sign(user, config.jwtSecretKey, {
  expiresIn: config.expiresIn, // token 有效期为 10 个小时
})

6.将生成的 Token 字符串响应给客户端：

res.send({
  status: 0,
  message: '登录成功！',
  // 为了方便客户端使用 Token，在服务器端直接拼接上 Bearer 的前缀
  token: 'Bearer ' + tokenStr,
})

在这里插入图片描述

2.7 配置解析Token的中间件

1.运行如下的命令，安装解析 Token 的中间件：

npm i express-jwt@5.3.3

2.在 app.js 中注册路由之前，配置解析 Token 的中间件：

// 导入配置文件
const config = require('./config')

// 解析 token 的中间件
const expressJWT = require('express-jwt')

// 使用 .unless({ path: [/^\/api\//] }) 指定哪些接口不需要进行 Token 的身份认证
app.use(expressJWT({ secret: config.jwtSecretKey }).unless({ path: [/^\/api\//] }))

3.在 app.js 中的 错误级别中间件 里面，捕获并处理 Token 认证失败后的错误：

// 定义错误级别的中间件
app.use((err, req, res, next) => {
  // 验证失败导致的结果
  if (err instanceof joi.ValidationError) return res.cc(err);
  // 身份认证失败后的错误
  if (err.name === "UnauthorizedError") return res.cc("身份认证失败！");
  // 未知的错误
  res.cc(err);
});

这里值得注意的是：错误级别的中间件一定要在配置引用解析Token的中间件之前定义，不然会报TypeError：res.cc is not a function的错误。
在这里插入图片描述
具体原因可能与异步执行顺序有关，暂时未理解。
当运行需要进行Token的身份认证的接口(代码中写的是不是/api/开头的接口)，并且没有把Token字符串放在HTTP请求头的Authorization字段中，会请求失败，并返回客户端身份认证失败的信息。
在这里插入图片描述
当把Token字符串添加进HTTP请求头的Authorization字段中，即可身份验证成功。
由于此处测试的接口不存在，所有即使身份验证成功返回的也是错误信息。
在这里插入图片描述
最后再测试一下不用进行身份验证的接口(/api/开头的)，可以看到不用将Token字符串添加进HTTP请求头的Authorization字段中也能访问成功。
在这里插入图片描述

三、个人中心

3.1 获取用户的基本信息

3.1.0 实现步骤
  1. 初始化路由模块
  2. 初始化路由处理函数模块
  3. 获取用户的基本信息
3.1.1 初始化路由模块

1.创建 /router/userinfo.js 路由模块，并初始化如下的代码结构：

// 导入 express
const express = require('express')
// 创建路由对象
const router = express.Router()

// 获取用户的基本信息
router.get('/userinfo', (req, res) => {
  res.send('ok')
})

// 向外共享路由对象
module.exports = router

2.在 app.js 中导入并使用个人中心的路由模块：

// 导入并使用用户信息路由模块
const userinfoRouter = require('./router/userinfo')
// 注意：以 /my 开头的接口，都是有权限的接口，需要进行 Token 身份认证
app.use('/my', userinfoRouter)
3.1.2 初始化路由处理函数模块

1.创建 /router_handler/userinfo.js 路由处理函数模块，并初始化如下的代码结构：

// 获取用户基本信息的处理函数
exports.getUserInfo = (req, res) => {
  res.send('ok')
}

2.修改 /router/userinfo.js 中的代码如下：

const express = require('express')
const router = express.Router()

// 导入用户信息的处理函数模块
const userinfo_handler = require('../router_handler/userinfo')

// 获取用户的基本信息
router.get('/userinfo', userinfo_handler.getUserInfo)

module.exports = router
3.1.3 获取用户的基本信息

1.在 /router_handler/userinfo.js 头部导入数据库操作模块：

// 导入数据库操作模块
const db = require('../db/index')

2.定义SQL语句:

// 根据用户的 id，查询用户的基本信息
// 注意：为了防止用户的密码泄露，需要排除 password 字段
const sql = `select id, username, nickname, email, user_pic from ev_users where id=?`

3.调用 db.query() 执行 SQL 语句：

// 注意：req 对象上的 user 属性，是 Token 解析成功，express-jwt 中间件帮我们挂载上去的
db.query(sql, req.user.id, (err, results) => {
  // 1. 执行 SQL 语句失败
  if (err) return res.cc(err)

  // 2. 执行 SQL 语句成功，但是查询到的数据条数不等于 1
  if (results.length !== 1) return res.cc('获取用户信息失败！')

  // 3. 将用户信息响应给客户端
  res.send({
    status: 0,
    message: '获取用户基本信息成功！',
    data: results[0],
  })
})

在这里插入图片描述

3.2 更新用户的基本信息

3.2.0 实现步骤
  1. 定义路由和处理函数
  2. 验证表单数据
  3. 实现更新用户基本信息的功能
3.2.1 定义路由和处理函数

1.在 /router/userinfo.js 模块中，新增 更新用户基本信息 的路由：

// 更新用户的基本信息
router.post('/userinfo', userinfo_handler.updateUserInfo)

在这里插入图片描述

2.在 /router_handler/userinfo.js 模块中，定义并向外共享 更新用户基本信息 的路由处理函数：

// 更新用户基本信息的处理函数
exports.updateUserInfo = (req, res) => {
  res.send('ok')
}
3.2.2 验证表单数据

1.在 /schema/user.js 验证规则模块中，定义 id，nickname，email 的验证规则如下：

// 定义 id, nickname, emial 的验证规则
const id = joi.number().integer().min(1).required()
const nickname = joi.string().required()
const email = joi.string().email().required()

2.并使用 exports 向外共享如下的 验证规则对象：

// 验证规则对象 - 更新用户基本信息
exports.update_userinfo_schema = {
  body: {
    id,
    nickname,
    email,
  },
}

3.在 /router/userinfo.js 模块中，导入验证数据合法性的中间件：

// 导入验证数据合法性的中间件
const expressJoi = require('@escook/express-joi')

4.在 /router/userinfo.js 模块中，导入需要的验证规则对象：

// 导入需要的验证规则对象
const { update_userinfo_schema } = require('../schema/user')

5.在 /router/userinfo.js 模块中，修改 更新用户的基本信息 的路由如下：

// 更新用户的基本信息
router.post('/userinfo', expressJoi(update_userinfo_schema), userinfo_handler.updateUserInfo)
3.2.3 实现更新用户基本信息的功能

1.定义待执行的 SQL 语句：

const sql = `update ev_users set ? where id=?`

2.调用 db.query() 执行 SQL 语句并传参：

db.query(sql, [req.body, req.body.id], (err, results) => {
  // 执行 SQL 语句失败
  if (err) return res.cc(err)

  // 执行 SQL 语句成功，但影响行数不为 1
  if (results.affectedRows !== 1) return res.cc('修改用户基本信息失败！')

  // 修改用户信息成功
  return res.cc('修改用户基本信息成功！', 0)
})

在这里插入图片描述

3.3 重置密码

3.3.0 实现步骤
  1. 定义路由和处理函数
  2. 验证表单数据
  3. 实现重置密码的功能
3.3.1 定义路由和处理函数

1.在 /router/userinfo.js 模块中，新增 重置密码 的路由：

// 重置密码的路由
router.post('/updatepwd', userinfo_handler.updatePassword)

2.在 /router_handler/userinfo.js 模块中，定义并向外共享 重置密码 的路由处理函数：

// 重置密码的处理函数
exports.updatePassword = (req, res) => {
  res.send('ok')
}

在这里插入图片描述

3.3.2 验证表单数据

核心验证思路：旧密码与新密码，必须符合密码的验证规则，并且新密码不能与旧密码一致！
1.在 /schema/user.js 模块中，使用 exports 向外共享如下的 验证规则对象：

// 验证规则对象 - 重置密码
exports.update_password_schema = {
  body: {
    // 使用 password 这个规则，验证 req.body.oldPwd 的值
    oldPwd: password,
    // 使用 joi.not(joi.ref('oldPwd')).concat(password) 规则，验证 req.body.newPwd 的值
    // 解读：
    // 1. joi.ref('oldPwd') 表示 newPwd 的值必须和 oldPwd 的值保持一致
    // 2. joi.not(joi.ref('oldPwd')) 表示 newPwd 的值不能等于 oldPwd 的值
    // 3. .concat() 用于合并 joi.not(joi.ref('oldPwd')) 和 password 这两条验证规则
    newPwd: joi.not(joi.ref('oldPwd')).concat(password),
  },
}

2.在 /router/userinfo.js 模块中，导入需要的验证规则对象：

// 导入需要的验证规则对象
const { update_userinfo_schema, update_password_schema } = require('../schema/user')

3.并在 重置密码的路由 中，使用 update_password_schema 规则验证表单的数据，示例代码如下：

router.post('/updatepwd', expressJoi(update_password_schema), userinfo_handler.updatePassword)
3.3.3 实现重置密码的功能

1.根据 id 查询用户是否存在：

// 定义根据 id 查询用户数据的 SQL 语句
const sql = `select * from ev_users where id=?`

// 执行 SQL 语句查询用户是否存在
db.query(sql, req.user.id, (err, results) => {
  // 执行 SQL 语句失败
  if (err) return res.cc(err)

  // 检查指定 id 的用户是否存在
  if (results.length !== 1) return res.cc('用户不存在！')

  // TODO：判断提交的旧密码是否正确
})

2.判断提交的 旧密码 是否正确：

// 在头部区域导入 bcryptjs 后，
// 即可使用 bcrypt.compareSync(提交的密码，数据库中的密码) 方法验证密码是否正确
// compareSync() 函数的返回值为布尔值，true 表示密码正确，false 表示密码错误
const bcrypt = require('bcryptjs')

// 判断提交的旧密码是否正确
const compareResult = bcrypt.compareSync(req.body.oldPwd, results[0].password)
if (!compareResult) return res.cc('原密码错误！')

3.对新密码进行 bcrypt 加密之后，更新到数据库中：

// 定义更新用户密码的 SQL 语句
const sql = `update ev_users set password=? where id=?`

// 对新密码进行 bcrypt 加密处理
const newPwd = bcrypt.hashSync(req.body.newPwd, 10)

// 执行 SQL 语句，根据 id 更新用户的密码
db.query(sql, [newPwd, req.user.id], (err, results) => {
  // SQL 语句执行失败
  if (err) return res.cc(err)

  // SQL 语句执行成功，但是影响行数不等于 1
  if (results.affectedRows !== 1) return res.cc('更新密码失败！')

  // 更新密码成功
  res.cc('更新密码成功！', 0)
})

在这里插入图片描述

3.4 更新用户头像

3.4.0 实现步骤
  1. 定义路由和处理函数
  2. 验证表单数据
  3. 实现更新用户头像的功能
3.4.1 定义路由和处理函数

1.在 /router/userinfo.js 模块中，新增 更新用户头像 的路由：

// 更新用户头像的路由
router.post('/update/avatar', userinfo_handler.updateAvatar)

2.在 /router_handler/userinfo.js 模块中，定义并向外共享 更新用户头像 的路由处理函数：

// 更新用户头像的处理函数
exports.updateAvatar = (req, res) => {
  res.send('ok')
}

在这里插入图片描述

3.4.2 验证表单数据

1.在 /schema/user.js 验证规则模块中，定义 avatar 的验证规则如下：

// dataUri() 指的是如下格式的字符串数据：
// data:image/png;base64,VE9PTUFOWVNFQ1JFVFM=
const avatar = joi.string().dataUri().required()

2.并使用 exports 向外共享如下的 验证规则对象：

// 验证规则对象 - 更新头像
exports.update_avatar_schema = {
  body: {
    avatar,
  },
}

3.在 /router/userinfo.js 模块中，导入需要的验证规则对象：

const { update_avatar_schema } = require('../schema/user')

4.在 /router/userinfo.js 模块中，修改 更新用户头像 的路由如下：

router.post('/update/avatar', expressJoi(update_avatar_schema), userinfo_handler.updateAvatar)
3.4.3 实现更新用户头像的功能

1.定义更新用户头像的 SQL 语句：

const sql = 'update ev_users set user_pic=? where id=?'

2.调用 db.query() 执行 SQL 语句，更新对应用户的头像：

db.query(sql, [req.body.avatar, req.user.id], (err, results) => {
  // 执行 SQL 语句失败
  if (err) return res.cc(err)

  // 执行 SQL 语句成功，但是影响行数不等于 1
  if (results.affectedRows !== 1) return res.cc('更新头像失败！')

  // 更新用户头像成功
  return res.cc('更新头像成功！', 0)
})

在这里插入图片描述

搜捕鸟了
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大事件后台API项目笔记
Hxmang的博客
08-29 375
表单验证规则：前端验证为辅，后端验证为主，在实际开发中，前后端都需要对表单的数据进行合法性验证，使用第三方数据模块joi包，为表单中携带的每个数据项，定义验证规则。所有的路由处理函数写到user.js中。为简化res.send(),手动封装一个res.cc函数,在 app.js 中，所有路由之前，声明一个全局中间件，为 res 对象挂载一个 res.cc() 函数。在根目录中新建db文件夹，db文件夹内新建index.js文件，用于连接数据库对象，在/db/index.js中创建数据库的连接对象。...
Nodejs服务端开发实战——大事件后台API项目（获取文章的列表数据功能待完善...）
SongD1114的博客
04-03 2577
Nodejs服务端开发实战之大事件后台API项目
大事件项目api_server源代码
08-14
大事件项目api_server源代码
大事件后台系统（一个完整的后台系统，实现部分ajax请求）
07-28
该后台系统实现了登录、修改相应用户信息，文章类别管理（增删改）等功能，该后台功能比较全面，还没完全实现，后续会做相应改善
移动端Vue项目：后台API服务器搭建和自适应REM布局
weixin_42204713的博客
02-11 433
网易云音乐后台API服务器搭建 后端使用GitHub中某大神通过代理（爬虫）形式 获取的网易云音乐NodeJS 版的API 点击此处跳转到网易云音乐NodeJS 版的API文档 安装 从GitHub获取后端服务器node.js文件夹到本地 $ git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git $ npm install 运行 $ node app.js 创建项目 $ vue create musicapp $ cd musicap
开源Api后台服务/管理系统 HoServer
04-17 4978
开源Api后台服务/管理系统 HoServer简介功能特性HoServer Pro 特性 :gem:支持开源版使用须知快速开始系统功能截图 简介 HoServer 是基于Node.js开发开箱即用的后台服务和管理平台脚手架，可视化对象定义，一行代码实现增删改查所有接口，内置用户、权限等基本功能。基于 HoServer 可在短时间内开发出高质量的 RESTfull API 服务和管理平台，助您大幅缩...
vue大型电商项目尚品汇（后台篇）day01.doc
07-09
本文档主要关注 Vue.js 框架在大型电商项目尚品汇（后台篇）day01 中的应用，涵盖了组件通信高级、自定义事件、v-model、属性修饰符 sync、$attrs 和 $listeners、$children 和 $parent 等多个知识点。 组件通信...
Android闹铃项目开发实训项目总结报告
11-29
报告还提出了三个关键问题：通过Android Api获取位置信息、在指定地点设置闹钟提醒和实现闹钟响应事件。 第二章 需求分析中，报告分析了项目的背景，移动互联网时代的来临，直接促进了搭载智能操作系统的智能手机、...
Node.js开发Web后台服务
02-25
Node.js是一个基于GoogleChromeV8引擎的JavaScript运行环境。...官网：https://nodejs.org/en/中文：https://cnodejs.org/、http://nodejs.cn/API：http://nodeapi.ucdok.com/#/api/简单说Node.js就
jQuery 选择器项目实例分析及实现代码
12-11
在项目中遇到这么一个问题easyui的问题 如图所示，当前页面显示的是“原始报文查询”的页面，当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现联动即：左侧点击“原始报文查询”，那么...
Nodejs自定义解析表单数据的中间件案例
01-21
Nodejs自定义解析表单数据的中间件案例
解决 res.cc is not a function 和 ER_DATA_TOO_LONG: Data too long for column ‘user_pic‘ at row 1 的报错问题
mydaily_的博客
12-08 602
在前端页面上传图像时，将图像转为base64字符串传给后端，结果前端报错说后端有问题，响应500信息回来。查了下后端，发现报错’res.cc is not a function‘。网上找了原因，只找到有人说中间件的位置放错这个原因，结果我的还是报错。最后换了别的图片，发现产生其他错误，于是想到可能图片过大，base64字符串过长导致后端无法处理。
黑马程序员
qq_20533447的博客
06-03 250
-----------android培训、java培训、java学习型技术博客、期待与您交流！------------  （I）继承的定义 （1）继承就是在现有类的基础上构建亲的类。 （2）当一个类继承一个现有类后，可以对被继承类中的属性和方法进行重用。 （3）在Java中，一个类只能有一个父类，不支持多继承。 （II）继承的实现 （1）语法： class e
微信小程序 res.data.map is not a function
weixin_45121701的博客
03-20 2826
原出错代码： function findBikes(longitude, latitude, that){ wx.request({ url: 'http://localhost:8080/bike/findNear', method:"GET", data:{ longitude:longitude, latitude:latitude, ...
黑马程序员_事件
whilelie的专栏
08-05 842
事件是类在发生其关注的事情时用来通知的一种方式，例如:封装用户界面的类可以定义一个在用户单击该控件时发生的事件,控件类不关心单击按钮时发生了什么      但它需要告知派生类单击事件已经发生.然后,派生类可选择如何响应            事件发行者(Publisher):      一个事件发行者,也称作发送者(sender),其实就是一个对象,这个对象会自行维护本身的状态信息,当
第一卷：今天学了什么黑马大事件项目2022. 7.5
weixin_52375405的博客
07-05 688
1.更换头像的经验 第一步：移花接木 写一个隐藏的input其type="file" 添加上传头像的事件 onFileChange (e)第二步：给浏览图片按钮添加点击事件 内容为自动点击 input上的 onFileChange (e)事件第三步：获取用户选择的文件列表 const files = e.target.files第四步：如果拿到这个文件 还不能往后台传 需要把文件转换成base64形式第五步：创建一个FileReader对象 并用它的readAsDataURL 函数 将文件读取成b
TypeError: res.send is not a function的问题
qq_28586119的博客
04-16 8714
TypeError: res.send is not a function at C:\Users\RT-0914001\WebstormProjects\nodegeekpro\index.js:5:8 at Layer.handle [as handle_request] (C:\Users\RT-0914001\WebstormProjects\nodegeekpro\nod...
JS中常见的 “函数名 is not a function” 错误
热门推荐
weixin_40345099的博客
09-30 26万+
js中常见的错误，例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外，还有一种很奇怪的情况：函数本身没有错，但是运行时就是不能正常运行。这种情况与javascript的特性有关：变量与函数声明前置的优先级。 首先看代码： console.log(x) console.log(x()); var x=1; function x(){...
$ is not a function解决办法
Nobita
05-26 2万+
$ is not a function // $(function () { // $('.portfolio-two-item').click(function () { // var video_path = $(this).data('src'); // layer.open({ // type: 2, // t...
vue + postgresql 后台管理
最新发布
12-17
Vue和PostgreSQL可以一起用来开发后台管理系统。 Vue是一个用于构建用户界面的渐进式JavaScript框架，可以轻松地创建交互式的Web界面。它提供了一套简单易用的语法和工具，帮助开发者快速构建功能丰富且响应式的应用程序。 PostgreSQL是一个强大的开源关系型数据库管理系统，它支持大量的数据类型和功能，并具有高度可扩展性和可靠性。它可以被用于存储和管理大量的数据，适用于各种规模的项目。 在后台管理系统的开发过程中，可以使用Vue构建前端界面，并结合PostgreSQL来存储和管理数据。Vue可以通过与后台服务器进行交互，向后台发送请求并获取数据，然后通过Vue的组件和数据绑定功能来展示和操作这些数据。 具体来说，可以通过Vue的路由功能来实现不同页面之间的跳转和导航，比如登录页面、仪表盘页面、用户管理页面等。每个页面通过Vue组件来构建，并通过与后台服务器进行的API请求来获取数据。例如，可以通过发送GET请求获取用户列表，然后将数据展示在用户管理页面上。 在与PostgreSQL的集成方面，可以使用PostgreSQL提供的SQL语言和命令来创建表格和查询数据。通过Vue的后台管理系统，可以向PostgreSQL发送SQL查询语句，并将查询结果展示在前端界面上。同时，还可以通过Vue的表单和事件处理功能向PostgreSQL发送插入、更新和删除数据的请求。 总之，Vue和PostgreSQL可以配合使用来构建强大的后台管理系统。Vue提供了丰富并易用的前端开发工具，而PostgreSQL则提供了稳定可靠的数据存储和管理能力。这种组合可以帮助开发者快速构建功能完善的后台管理系统，并满足用户对于数据管理和操作的需求。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值