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

news2025/2/24 16:14:28

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,也会涉及到服务端
📃个人状态: 在校大学生一枚,已拿 offer(秋招)
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

Node.js系列文章目录

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

文章目录

  • Node.js系列文章目录
    • 一、前言
    • 二、创建表
      • 1、创建 users 表
      • 2、创建 blogs 表
      • 3、查询语句
      • 4、更新和删除语句
      • 5、增加语句
    • 三、Node.js 操作 MySQL
      • 1、环境配置
      • 2、连接数据库
    • 四、写在最后(优秀的你)


一、前言

什么是数据库?【以下内容摘自百度百科】

数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个 长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。

二、创建表

备注:此处使用的是 MySQL + Navicat,大家可以去网上找相关的教程进行下载安装。

1、创建 users 表

id 为键值,注意设置自增

在这里插入图片描述

2、创建 blogs 表

在这里插入图片描述

3、查询语句

查询表格:输入如下命令,查询出来表格

在这里插入图片描述

向 users 表中插入数据

在这里插入图片描述

从 users 数据库中查询

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

4、更新和删除语句

更新 username=‘zahuopu’ 的人员的 realname=‘前端杂货铺’

在这里插入图片描述


在这里插入图片描述

软删除:控制 state 的值是 0/1(好处是可以恢复)

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

5、增加语句

向 blog 表里插入数据

在这里插入图片描述

三、Node.js 操作 MySQL

1、环境配置

先创建 mysql-test 文件夹,定位到当前目录

cd mysql-test

安装node_modules,配置 package.json 文件

npm init -y

安装 mysql

npm i mysql

文件结构如下:

在这里插入图片描述

2、连接数据库

index.js 文件

  • 连接数据库的相关配置如下
// 导入 mysql
const mysql = require('mysql')

// 创建链接对象
const con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '1234abcd', // 自己的密码
    port: '3306',
    database: 'myblog' // 自己创建数据库的名字
})

// 开始连接
con.connect()

// 执行 sql 语句
const sql = 'select * from users'
con.query(sql, (err, result) => {
    if (err) {
        console.error(err)
        return
    }
    console.log(result)
})

// 关闭连接
con.end()

在这里插入图片描述

更改 sql 语句如下

const sql = `update users set realname='张三丰' where username='zhangsan'`

在这里插入图片描述

更改 sql 语句如下

const sql = `insert into blogs (title, content, createtime, author) values ('标题C', '内容C', 1666791883356, 'zhangsan')`

在这里插入图片描述


在这里插入图片描述

四、写在最后(优秀的你)

至此,开发博客的项目的MySQL基础教程就到此结束了。

优秀的你肯定是 收获满满的,接下来 继续跟进 开发我们的博客项目吧。

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


在这里插入图片描述


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

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

相关文章

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

前言 学习Vue的过程中,大家肯定都使用过nextTick(),关于nextTick()的使用时机,大家肯定都知道,那么它的工作原理是怎样的呢,本文就简单说一下它的nextTick()的工作原理。 nextTick的使用时机 首先记住:n…

vue中 router.beforeEach() 的用法

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

WordPress 中的常规设置

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且…

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

💭💭 ✨: CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter   💟:东非不开森的主页   💜: 因为很多东西来不及去做去看可是时间很快总是赶不上,所以要去成长呀&…

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 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线);径向渐变(有中心向周围展开&am…

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

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

Vue动态样式方法总结

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

富文本编辑器介绍

1、富文本编辑器的意义 普通的文本框(如input, text)只能输入纯文本以及 Emoji(只不过是特殊编码的文本),如果只是简简单单写些纯文本的内容(比如表单,简单的评论等),这…

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

大家好,今天总结了一下Yarn这个包管理工具的使用,虽然Npm 已经奠定了前端工程基础,但是追求完美的前端程序员们又基于 Npm 不足的地方,提供了新的完善思路,针对如 Npm 安装包的速度问题,包的版本问题加以改…

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

一、效果 首先可以看一下下图显示的实现效果: 用三种方式实现了虚线效果: 点击查看demo代码 二、实现 1、border 属性 查看 mdn 的 border,我们知道 border 可以用于设置一个或多个以下属性的值:border-width、border-style、…

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

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

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

目录 一、前言: 二、网站页面分析 三、开发步骤 (一)、安装element (二)、安装使用svg插件 (三)、编写主界面框架代码 (四)、编写菜单栏 (五&#xff0…

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

1、wireshark 抓包为什么不显示出来? wireshark 是基于网络层的抓包工具,通过捕获通信双方的TCP/IP包实现内容提取。对于应用层的数据,如果应用层协议是公开的,就可以直接显示数据。处理HTTPS 协议时,因为不知道客户端…

前端知识——css之flex布局

1.基本概念 flex布局是一种布局模型,经常被称之为flexbox,使用flex布局之后,他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前,常用布局有:流式布局,浮动布局,定…

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实现前端到后台完整项目

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

(element-ui)取消el-table的hover状态,取消高亮显示

文章目录前言方法一 ------覆盖css样式方法二------卸载掉背景颜色(类似于方法一)方法三------使用函数方法方法四------禁用鼠标悬浮怎么办?究极解决------将错就错前言 在使用element-ui的el-table表格的过程中,会发现&#xf…

VsCode配置JavaWeb(最新)

我个人是很喜欢VsCode的,开源免费、功能全面。所以为了方便,我把我几乎所有的运行都集成到了VsCode上来,JavaWeb也不例外。 前言 之前也在CSDN上看到有些博主写了配置方法,但是很不幸的是,插件Tomcat for java已经不可…