【Node.js实战】一文带你开发博客项目（API 对接 MySQL）

news2025/2/24 14:13:46

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，也会涉及到服务端
📃个人状态： 在校大学生一枚，已拿多个前端 offer（秋招）
🚀未来打算： 为中国的工业软件事业效力n年
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

Node.js系列文章目录

内容参考链接
Node.js（一）初识 Node.js
Node.js（二）Node.js——开发博客项目之接口
Node.js（三）Node.js——一文带你开发博客项目（使用假数据处理）
Node.js（四）Node.js——开发博客项目之MySQL基础

文章目录

  • Node.js系列文章目录
    • 一、前言
    • 二、Node.js 连接 MySQL
    • 三、API 对接 MySQL
      • 1、文件目录
      • 2、控制器_controller
      • 3、路由_router
    • 四、各个接口的测试
    • 四、写在最后（附源码）

一、前言

前面我们已经使用了 假数据去处理路由接口，并学习了开发博客路由相关 MySQL的基础知识。

下面我们就可以 整合改进 这两部分，实现 API 和 MySQL 的对接 工作。

二、Node.js 连接 MySQL

安装 MySQL

npm install mysql

在这里插入图片描述

在 src 目录下创建 ./conf/db.js 文件，用于连接数据库的配置

在这里插入图片描述

db.js 文件

  • 线上环境与开发环境的配置是不一样的
  • 这里写的是一样的，因为项目没有上线
// 获取环境参数， process 为 node.js 进程的一些信息
const env = process.env.NODE_ENV

// 配置
let MYSQL_CONF

// 开发环境下
if (env === 'dev') {
    MYSQL_CONF = {
        host: 'localhost',
        user: 'root',
        password: '1234abcd',
        port: '3306',
        database: 'myblog'
    }
}

// 线上环境下
if (env === 'production') {
    MYSQL_CONF = {
        host: 'localhost',
        user: 'root',
        password: '1234abcd',
        port: '3306',
        database: 'myblog'
    }
}

// 导出共享
module.exports = {
    MYSQL_CONF
}

在 src 目录下创建 ./db/mysql.js 文件，用于存放一些数据

在这里插入图片描述

mysql.js 文件

  • 引入 mysql 和连接数据库
  • 封装 sql 函数，用于统一执行
// 引入 MySQL
const mysql = require('mysql')
// 引入数据库连接配置
const { MYSQL_CONF } = require('../conf/db')

// 创建连接对象
const con = mysql.createConnection(MYSQL_CONF)

// 开始连接
con.connect()

// 统一执行 sql 的函数
function exec(sql) {
    const promise = new Promise((resolve, reject) => {
        con.query(sql, (err, result) => {
            if (err) {
                reject(err)
                return
            }
            resolve(result)
        })
    })
    return promise
}

// 导出共享
module.exports = {
    exec
}

三、API 对接 MySQL

1、文件目录

在这里插入图片描述

2、控制器_controller

blog.js 文件

  • blog 相关 sql 逻辑
  • 返回的是 promise 实例
// 导入执行 sql 的相关内容
const { exec } = require('../db/mysql')

// 获取博客列表（通过作者和关键字）
const getList = (author, keyword) => {
    // 1=1 是为了语法的绝对正确，注意以下 sql 拼接时的空格
    let sql = `select * from blogs where 1=1 `
    if (author) {
        sql += `and author='${author}' `
    }
    if (keyword) {
        sql += `and title like '%${keyword}%' `
    }
    // 以时间的倒序
    sql += `order by createtime desc;`

    // 返回 promise
    return exec(sql)
}

// 获取博客详情（通过 id）
const getDetail = (id) => {
    const sql = `select * from blogs where id='${id}'`
    return exec(sql).then(rows => {
        // 返回数组的对象
        return rows[0]
    })
}

// 新建博客 newBlog 若没有，就给它一个空对象
const newBlog = (blogData = {}) => {
    // blogData 是一个博客对象，包含 title content author 属性
    const title = blogData.title
    const content = blogData.content
    const author = blogData.author
    const createTime = Date.now()
    // sql 插入语句
    const sql = `
        insert into blogs (title, content, createtime, author)
        values ('${title}', '${content}', '${createTime}', '${author}');
    `
    return exec(sql).then(insertData => {
        console.log('insertData is ', insertData)
        return {
            id: insertData.insertId
        }
    })
}

// 更新博客（通过 id 更新）
const updateBlog = (id, blogData = {}) => {
    // id 就是要更新博客的 id
    // blogData 是一个博客对象 包含 title content 属性
    const title = blogData.title
    const content = blogData.content

    const sql = `
        update blogs set title='${title}', content='${content}' where id=${id}
    `
    return exec(sql).then(updateData => {
        // console.log('updateData is ', updateData)
        // 更新的影响行数大于 0，则返回 true
        if (updateData.affectedRows > 0) {
            return true
        }
        return false
    })
}

// 删除博客（通过 id 删除）
const delBlog = (id, author) => {
    const sql = `delete from blogs where id='${id}' and author='${author}'`
    return exec(sql).then(delData => {
        if (delData.affectedRows > 0) {
            return true
        }
        return false
    })
}

// 导出共享
module.exports = {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    delBlog
}

user.js 文件

  • 登录相关 sql 逻辑
  • 返回的是 promise 实例
const { exec } = require('../db/mysql')
// 登录（通过用户名和密码）
const loginCheck = (username, password) => {
    const sql = `
    	select username, realname from users where username='${username}' and password='${password}'
    `
    return exec(sql).then(rows => {
        return rows[0] || {}
    })
}

// 导出共享
module.exports = {
    loginCheck
}

3、路由_router

blog.js 文件

  • 博客相关路由
  • 调用控制器中的方法
// 导入博客和用户控制器相关内容
const { getList, getDetail, newBlog, updateBlog, delBlog } = require('../controller/blog') 
// 导入成功和失败的模型
const { SuccessModel, ErrorModel } = require('../model/resModel')

// blog 相关路由
const handleBlogRouter = (req, res) => {
    const method = req.method // GET/POST
    const id = req.query.id // 获取 id

    // 获取博客列表 GET 请求
    if (method === 'GET' && req.path === '/api/blog/list') {
        // 博客的作者，req.query 用在 GET 请求中
        const author = req.query.author || ''
        // 博客的关键字
        const keyword = req.query.keyword || ''
        // 查询的结果
        const result = getList(author, keyword)
        return result.then(listData => {
            return new SuccessModel(listData)
        })
    }

    // 获取博客详情 GET 请求
    if (method === 'GET' && req.path === '/api/blog/detail') {
        // 获取博客详情数据
        const result = getDetail(id)
        // 创建并返回成功模型的 promise 实例对象
        return result.then(data => {
            return new SuccessModel(data)
        })
    }

    // 新建一篇博客 POST 请求
    if (method === 'POST' && req.path === '/api/blog/new') {
        // 假数据，待开发登录时再改成真实数据
        req.body.author = 'zhangsan'
        // req.body 用于获取请求中的数据（用在 POST 请求中）
        const result = newBlog(req.body)
        // 创建并返回成功模型的 promise 实例对象
        return result.then(data => {
            return new SuccessModel(data)
        })
    }

    // 更新一篇博客
    if (method === 'POST' && req.path === '/api/blog/update') {
        // 传递两个参数 id 和 req.body
        const result = updateBlog(id, req.body)
        return result.then(val => {
            if (val) {
                return new SuccessModel()
            } else {
                return new ErrorModel('更新博客失败')
            }
        })
    }

    // 删除一篇博客
    if (method === 'POST' && req.path === '/api/blog/del') {
        // 假数据，待开发登录时再改成真实数据
        const author = 'zhangsan' 
        const result = delBlog(id, author)
        
        return result.then(val => {
            if (val) {
                return new SuccessModel()
            } else {
                return new ErrorModel('删除博客失败')
            }
        })
    }
}

// 导出
module.exports = handleBlogRouter

user.js 文件

  • 用户登录相关路由
  • 调用控制器中的方法
// 导入用户登录内容
const { loginCheck } = require('../controller/user')
// 导入成功和失败的模板
const { SuccessModel, ErrorModel } = require('../model/resModel')

// user 路由
const handleUserRouter = (req, res) => {
    const method = req.method

    // 登录
    if (method === 'POST' && req.path === '/api/user/login') {
        const { username, password } = req.body
        // 传入两个参数 用户名 密码
        const result = loginCheck(username, password)

        return result.then(data => {
            if (data.username) {
                return new SuccessModel()
            }
            return new ErrorModel('登录失败')
        }) 
    }
}

// 导出共享
module.exports = handleUserRouter

四、各个接口的测试

查询博客列表

在这里插入图片描述

通过关键字查询博客（模糊查询）

在这里插入图片描述

通过关键字查询博客（精准查询）

在这里插入图片描述

通过id获取博客详情

在这里插入图片描述

通过 ApiPost/Postman 工具测试 新建博客

在这里插入图片描述

在这里插入图片描述

通过 ApiPost/Postman 工具测试 更新博客

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

通过 ApiPost/Postman 工具测试 删除博客

在这里插入图片描述

在这里插入图片描述

通过 ApiPost/Postman 工具测试 登录

在这里插入图片描述

四、写在最后（附源码）

至此，开发博客的项目（API 对接 MySQL）就完成了。

后续会对该项目进行多次重构【多种框架（express，koa）和数据库（mysql，sequelize，mongodb）】

如果你需要该项目的 源码，请通过本篇文章最下面的方式 加入 进来~~

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405761.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

事件循环（Event Loop）

事件循环（Event Loop）

文章目录单线程事件循环机制（Event Loop）1、同步任务与异步任务同步任务异步任务宏任务微任务2、执行过程3、执行顺序4、举例：实例1实例2单线程 JavaScript是一种单线程的编程语言，同一时间只能做一件事，所有任务都需…
阅读更多...
【Node.js实战】一文带你开发博客项目（MySQL基础）

【Node.js实战】一文带你开发博客项目（MySQL基础）

个人简介 👀个人主页： 前端杂货铺 🙋‍♂️学习方向： 主攻前端方向，也会涉及到服务端 📃个人状态： 在校大学生一枚，已拿 offer（秋招） 🥇推荐学习&…
阅读更多...
简单易懂 关于nextTick()的理解

简单易懂 关于nextTick()的理解

前言 学习Vue的过程中，大家肯定都使用过nextTick()，关于nextTick()的使用时机，大家肯定都知道，那么它的工作原理是怎样的呢，本文就简单说一下它的nextTick()的工作原理。 nextTick的使用时机 首先记住：n…
阅读更多...
vue中 router.beforeEach() 的用法

vue中 router.beforeEach() 的用法

导航守卫 主要是通过跳转或取消得方式守卫导航 在前端路由跳转中，路由跳转前都是会经过beforeEach，而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。 常见的使用场景有&#xff1…
阅读更多...
WordPress 中的常规设置

WordPress 中的常规设置

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】💬 免费且…
阅读更多...
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter

CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter

💭💭 ✨： CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter   💟：东非不开森的主页   💜: 因为很多东西来不及去做去看可是时间很快总是赶不上，所以要去成长呀&…
阅读更多...
01-Node-Express系统框架搭建（express-generator）

01-Node-Express系统框架搭建（express-generator）

文章目录一、使用express-generator创建项目1.1 安装express-generator模块1.2 生成express项目结构1.3 启动项目1.4 设置nodemon自启项目二、手动创建一个Express项目2.1 创建项目文件夹并初始化2.2 安装express模块2.3 创建项目主文件2.4 编辑app.js文件2.5 启动项目2.6 使用…
阅读更多...
【CSS应用篇】——CSS如何实现渐变背景

【CSS应用篇】——CSS如何实现渐变背景

目录 CSS 定义了两种渐变类型： 格式： 如何使用： ​编辑使用透明度： CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线）；径向渐变（有中心向周围展开&am…
阅读更多...
Vue--》MVVM模型在Vue中的使用

Vue--》MVVM模型在Vue中的使用

目录 理解MVVM模型 什么是 MVVM 模型 MVVM的组成部分 Vue中的实现 MVVM模型在 Vue 中的应用 理解MVVM模型 我们知道每一个 Vue 应用都是从创建一个新的实例开始的，根据 Vue2 的官方文档我们可以得知 Vue 的设计是得到了 MVVM 模型 的启发，所以就有…
阅读更多...
Vue动态样式方法总结

Vue动态样式方法总结

Vue动态样式实现方式 前言 本文主要针对 Vue2.x 来展开vue的动态css样式方法归纳。 如果亲爱的读者们需要，后续会更新Vue3的动态样式方法或者使用TypeScript来实现。 CSS动态样式 一般用于设置某个字段根据状态显示不同的样式。 比如 字段A，平时返回0&am…
阅读更多...
富文本编辑器介绍

富文本编辑器介绍

1、富文本编辑器的意义 普通的文本框（如input, text）只能输入纯文本以及 Emoji（只不过是特殊编码的文本），如果只是简简单单写些纯文本的内容（比如表单，简单的评论等），这…
阅读更多...
包管理工具Yarn的使用和命令总结

包管理工具Yarn的使用和命令总结

大家好，今天总结了一下Yarn这个包管理工具的使用，虽然Npm 已经奠定了前端工程基础，但是追求完美的前端程序员们又基于 Npm 不足的地方，提供了新的完善思路，针对如 Npm 安装包的速度问题，包的版本问题加以改…
阅读更多...
css 实现虚线效果的3种方式详解

css 实现虚线效果的3种方式详解

一、效果 首先可以看一下下图显示的实现效果： 用三种方式实现了虚线效果： 点击查看demo代码 二、实现 1、border 属性 查看 mdn 的 border，我们知道 border 可以用于设置一个或多个以下属性的值：border-width、border-style、…
阅读更多...
【微信小程序开发】自定义tabBar案例（定制消息99+小红心）

【微信小程序开发】自定义tabBar案例（定制消息99+小红心）

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介：CSDN内容合伙人，全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…
阅读更多...
vue系列（三）——手把手教你搭建一个vue3管理后台基础模板

vue系列（三）——手把手教你搭建一个vue3管理后台基础模板

目录 一、前言： 二、网站页面分析 三、开发步骤 （一）、安装element （二）、安装使用svg插件 （三）、编写主界面框架代码 （四）、编写菜单栏 （五&#xff0…
阅读更多...
如何使用wireshark抓取HTTPS数据包？

如何使用wireshark抓取HTTPS数据包？

1、wireshark 抓包为什么不显示出来？ wireshark 是基于网络层的抓包工具，通过捕获通信双方的TCP/IP包实现内容提取。对于应用层的数据，如果应用层协议是公开的，就可以直接显示数据。处理HTTPS 协议时，因为不知道客户端…
阅读更多...
前端知识——css之flex布局

前端知识——css之flex布局

1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定…
阅读更多...
Vite代理解决跨域问题

Vite代理解决跨域问题

Vite代理解决跨域问题 我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会…
阅读更多...
小程序真机调试提示系统错误

小程序真机调试提示系统错误

Error: 系统错误，错误码：80051,source size 7935KB exceed max limit 2MB [20220929 16:18:58][wxfc8aa5984cac7f72] [1.06.2208010][win32-x64]// 说明你源文件大小为7985kb 超过了2M 所以编译失败解决方法 1. 压缩项目中的图或转为base64格式 …
阅读更多...
【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目

【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目

文章目录🏴‍☠️SpringMVC简介SpringMVC是什么SpringMVC的基础架构SpringMVC的优点🏳️‍🌈SpringMVC接管Web说明三层框架SpringMVC的简单开发🚩Spring搭建🚩Mybatis搭建🏁 Spring整合Mybatis✅结语&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023