news 2026/5/21 23:17:34

从零搭建Node.js后台系统:连接MySQL、Express与CORS配置详解

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
从零搭建Node.js后台系统:连接MySQL、Express与CORS配置详解

在 Node.js 中,我们想要连接我们建立的数据库的话,可以查阅 文档 这个网站GitHub - mysqljs/mysql: A pure node.js JavaScript Client implementing the MySQL protocol.实现 MySQL 协议的纯node.js JavaScript 客户端。左边这个是旧的文档。

1、连接数据库:

1.1、安装mysql2:

首先我们可以使用这个指令进行安装,npm install --save mysql2 ,在这里我们选择安装 MySQL2 是因为它有更快、更好的性能。

1.2、连接数据库:

// Get the client import mysql from 'mysql2/promise'; // Create the connection to database const connection = await mysql.createConnection({ host: 'localhost', user: 'root', database: 'test', });

这里的代码是 MySQL2 的文档里面的例子。

我们可以使用,mysql.createConnection() ,这个函数去连接数据库,其中 host 后面写数据库的 Ip地址, user 后面写登录数据库的账号,password 后面写登录数据库的密码,database 后面写你要连接的数据库。

但在这里我们使用 mysql.createPool() 。

const mysql = require('mysql2') const Mock = require('mockjs') const db = mysql.createPool({ host:'127.0.0.1',//数据库的IP地址 user:'user',//登录数据库的账号 password:'password',//登录数据库的密码 database:'lists'//要操作的数据库 })

二者区别:如果说 createConnection() 是单个连接,把它比作公路,那么createConnection()这个函数就时只有一条车道的公路,每一个后端的请求就是一辆车,通过这条公路就需要排队(请求需要排队),车多了就容易堵车(不能及时请求),单个连接在每一次用完就要关闭,就像你租借东西一样,用完就要归还,所以在多个请求下,我们需要建立长连接来满足需求,无法处理并非请求,因此 createConnection() 适合简单的脚本。

而 createPool() 是连接池,它则是一条拥有多条车道的公路,多条车辆可以通过(多个请求可以同时并非进行处理),车道数量固定,但一直在那里(也就是连接一直保持),在整个应用关闭时才需要关闭,就像一个公司,倒闭时才解散,适合做Web服务器。

图1 是我的后端连接数据库的代码,图2 则是我的后端代码连接的数据库的结构,其中 lists 是我的数据库名称,而 Tables 下面则是我的 lists 数据库管理的表,可以看到里面只有一个 users,这一个表,萌新刚接触的话,先从一个表慢慢来,慢慢过渡。

1.3、执行函数:

我们可以在官方文档中查到,我们想要在 Node.js 中执行代码,就需要使用 .query() ,(注意 query前面是有一个小数点的)。

下图是官方文档的原话。

只不过我们这里只使用,第二种方法。

const sqlStr = 'select * from users' db.query(sqlStr,(err,results)=>{ if(err) return console.log(err.message) console.log(results) })

这是一个简单的例子,其中我们讲 SQL 指令赋值给了 sqlStr 这个变量,这样方便我们之后的更改,如果执行错误,就会调用 if(err) 如果执行成功就会执行下面的语句。

1.4、占位符:

占位符是在SQL语句中使用特殊标记来代替实际值的位置,真实的值在执行时单独传入。这类似于函数参数 - 你先定义函数结构,调用时才传入具体参数值,使用占位符而不是字符串拼接,是防止SQL注入攻击的最有效措施。

这里常用的是 ? 这个占位符。

const sqlStr = 'insert into person (id,username,password) values (?,?,?)' db.query(sqlStr,[1,'admin','123456'],(err,results)=>{ if(err) return if(results){ console.log('插入成功',results) } })

2、安装mock.js:

首先我们通过这个指令来安装 mock.js,npm install mockjs;

这是官网:Mock.js , 我们为什么需要安装这个 mock.js 呢?因为 mock.js 可以模拟大部分我们所需要的数据类型,在后端还没有写出前端开发需要的接口时,前端可以使用 mock.js 去模拟自己需要的数据类型(需要提前和后端沟通,避免使用模拟数据去渲染页面,但达不到预期的效果),使用模拟的数据去进行页面渲染,因此 mock.js 适合在开发阶段进行使用。

同时,在这次的项目里面(其实算是通过这个简单的东西,入门而已),没有真实的数据,但项目不能因此停滞不前,所以在后端代码中安装 mock.js 去模拟数据,并将其插入到数据库中,达到我们需要的预期效果。

3、安装 express:

1、安装express:

使用这个指令 npm install express 。

这是中文官网:Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网

我们在这里使用 express 来搭建一个简单的服务器,在这个服务器里面我们可以使用,get、post、put、delete 来对前端的请求进行回应,下面以 GET 请求为例,其他请求方式如 POST、PUT等模式类似。

上图是官网的一个例子,其中 app.get() 后面的 .get 就是对应着前端的对应请求,函数里面的第一个参数是请求路径,第二个参数是回调函数, 里面的 req 是请求对象, res 是响应对象。 req包含了请求的全部信息,res用于向客户端(前端)返回数据。

2、中间件:

中间件指业务流程的中间处理环节。 中间件是 express 框架中的一个核心机制,你可以把他想象成一个流水线或安检流程,当一个请求达到服务器后,在到达最终的路由处理函数之前,它需要经过这一系列中间件函数的处理,而中间件就是这个流水线。

每一个中间件都是一个函数,接收三个参数:

(1)req: 请求对象

(2)res: 响应对象

(3)next: 下一个中间件函数

中间件可以执行一下任务:

(1)执行任何代码(例如记录日志、解析数据)

(2)修改请求和响应对象

(3)结束请求-响应周期(例如,验证失败直接返回错误)

(4)调用栈中的下一个中间件(通过调用 next() )

注:如果某个中间件没有结束请求(如 res.send() ),也没有调用 next() ,请求将会被挂起,永远不会到达路由。

3.1、全局中间件:

客户端发起的任何请求,到达服务器之后,都会触发的中间件,叫做全局生效的中间件,通过调用 app.use(中间件函数),即可定义一个全局生效的中间件。

例如:

const mw = function(req,res,next){ console.log('这是一个最简单的中间件函数') next() } app.use(mw)

中间件的作用:

多个中间件之间,共享同一份 req 和 res 。 基于这样的特性,我们可以在上游的中间件中,统一为 req 或 res 对象添加自定义的属性或方法,供下游的中间件或路由进行使用。

定义多个全局中间件:

可以使用 app.use()连续定义多个全局中间件,客户端请求到达服务器之后,会按照中间件定义的先后顺序依次进行调用。

3.2、局部生效的中间件:

不使用 app.use() 定义的中间件,叫做局部生效的中间件。

定义多个局部中间件:

可以在路由中,通过如下两种等价的方式,使用多个局部中间件:

4、安装 cors:

1、安装cors:

我们在上面的 express 编写的 GET 接口,其实是存在一个严重的问题,那就是他不支持跨域请求。

举一个例子:

我们电脑里面有很多的端口。

图1 这个 3002 就是我的后端端口,而 127.0.0.1则是电脑本地地址,而图2 这个 5173 就是前端的端口,而 2 个不同的端口就是 2 个不同的地址,我们无法获取不同地址的数据,所以我们如果只使用 express 的话是获得不了前端的请求,因此我们需要使用 cors 来解决这个问题。

而 cors 则是 express 的一个第三方中间件,通过安装和配置 cors 中间件,可以很方便的解决跨域问题,使用步骤分为如下3步:

(1)运行 npm install cors 安装中间件。

(2)使用 const cors = require('cors') 导入中间件。

(3)在路由之前调用 app.use(cors()) 配置中间件。

上面的图片就是上面的具体解释,跨域资源共享 (CORS) 配置 - 网络安全 | MDN - MDN 文档,上面的是 MDN 文档对 cors 的描述。

2、cors 响应头部:

2.1 -- Access-Control-Allow-Origin:

响应头部中可以携带一个 Access-Control-Allow-Origin字段,语法如下:

Access-Control-Allow-Origin: <origin> | *

res.setHeader('Access-Control-Allow-Origin','http://itcast.cn'),

'http://itcast.cn'这个是例子,如果指定了 Access-Control-Allow-Origin 字段的值为通配符 ' * ' ,表示允许来自任何域的请求。

其中,origin 参数的值指定了允许访问该资源的外域 URL,这也是我们跨域请求的关键。

2.2、-- Access-Control-Allow-Methods:

默认情况下, cors 仅支持客户端发起 GET、POST、HEAD请求。

如果客户端希望通过 PUT、DELETE等方式请求服务器的资源,则需要在服务器,通过 Access-Control-Allow-Methods来指明实际请求所允许使用的HTTP方法。

例如:

res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')

这个代码只允许 POST、GET、 DELETE、HEAD请求方法。

res.setHeader('Access-Control-Allow-Methods','*')

而这个代码则允许所有的 HTTP 请求方法。

2.3 Access-Control-Allow-Credentials:

当客户端跨域请求需要携带凭证信息(如 Cookie、HTTP 认证数据等)时,服务器需要通过该响应头明确允许携带凭证。

Access-Control-Allow-Credentials: true

例如:

res.setHeader('Access-Control-Allow-Credentials','true')

该字段的值只能是 true ,表示允许跨域请求携带凭证。

注:当设置该字段为 true 时, Access-Control-Allow-Origin 不能使用通配符 '*',必须指定具体的源地址。

2.4 Access-Control-Allow-Headers:

当客户端请求中包含自定义请求头(非简单请求头)时,服务器需要通过该响应头部指明允许的请求头字段。

格式:

Access-Control-Allow-Headers: <header-name>[, <header-name>]*

可以通过 res.setHeader('Access-Control-Allow-Headers','<header-name>,<header-name>')来设置。

例如:

res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization,X-Requested-With')

其中,<header-name> 为允许的请求头名称,多个请求头之间用逗号分隔。该配置用于告知浏览器,服务器允许客户端在请求中使用这些头部字段。

"对于大多数情况,直接使用 app .use(cors()) 的默认配置就足够了,无需手动设置这些头部。"

上一篇引流:

在上一篇 《SQL完整入门指南:基础语法+实战技巧+安全规范》 中,我们系统讲解了SQL语法基础、数据操作、模糊查询与安全规范。本篇所有关于数据库的操作,都是建立在这些扎实的SQL基础之上的。如果你对文中的SQL语句还感到陌生,强烈建议先阅读上一篇,让你的学习之路更加顺畅!"

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/21 23:16:14

【大模型12步学习路线 · 第12步 · ③IC验证实战篇】Veri-Copilot v1.0 大结局:多模态 RAG 让 LLM “看懂“ Spec 时序图

【大模型12步学习路线 第12步 ③IC验证实战篇】Veri-Copilot v1.0 大结局:多模态 RAG 让 LLM “看懂” Spec 时序图,DATE 2027 投稿前 checklist + 12 步系列收官 系列定位:「大模型正确学习顺序」12 步系列 第 12 步 多模态 的 ③IC 验证实战篇,也是整个 36 篇系列的最后一…

作者头像 李华
网站建设 2026/5/21 23:13:26

Twemoji跨平台表情统一渲染方案:构建一致性用户体验的核心技术

Twemoji跨平台表情统一渲染方案&#xff1a;构建一致性用户体验的核心技术 【免费下载链接】twemoji Emoji for everyone. 项目地址: https://gitcode.com/gh_mirrors/twe/twemoji Twemoji作为一款基于Unicode标准的开源表情解决方案&#xff0c;为开发者和产品经理提供…

作者头像 李华
网站建设 2026/5/21 23:13:02

Memcached未授权访问漏洞实战解析与七层加固指南

1. 这个“空门”比你想象中更常见&#xff1a;Memcached未授权访问不是理论漏洞&#xff0c;而是真实存在的生产级风险Memcached未授权访问漏洞&#xff08;CVE-2013-7239&#xff09;——这个名字听起来像教科书里的一个编号&#xff0c;但在我过去三年参与的27次红蓝对抗和41…

作者头像 李华
网站建设 2026/5/21 23:12:44

Python实现动态Token签名机制:时间戳+密钥+设备指纹三重鉴权

1. 这不是“加个headers就能过”的时代了你肯定试过&#xff1a;requests.get()配好User-Agent、Referer、Cookie&#xff0c;跑两轮就403&#xff1b;换上selenium&#xff0c;刚打开页面就被检测出自动化特征&#xff1b;甚至用Playwright模拟真实鼠标轨迹&#xff0c;请求发…

作者头像 李华
网站建设 2026/5/21 23:12:36

05-21 · LLM 最新论文速览

今日候选池 89 篇&#xff0c;硬过滤 LLM 打分后通过评估 18 篇&#xff0c;精选 Top-10&#xff0c;另列 8 篇速览。 关注方向&#xff1a;多 Agent 系统 / LLM 后训练&#xff08;RL/SFT&#xff09; / 扩散语言模型 / 推理加速 / 长上下文 / 量化交易 &#x1f31f; 精选 …

作者头像 李华
网站建设 2026/5/21 23:11:18

Angular-dragdrop项目贡献指南:从克隆到测试的完整流程

Angular-dragdrop项目贡献指南&#xff1a;从克隆到测试的完整流程 【免费下载链接】angular-dragdrop Implementing jQueryUI Drag and Drop functionality in AngularJS (with Animation) is easier than ever 项目地址: https://gitcode.com/gh_mirrors/an/angular-dragdr…

作者头像 李华