WebStorm创建Express项目如何连接MySQL执行增删改查

最新推荐文章于 2023-08-09 21:44:31 发布
最新推荐文章于 2023-08-09 21:44:31 发布
阅读量2.3k 收藏 25
点赞数 2
分类专栏： Node.js 文章标签： mysql webstorm 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46612221/article/details/123136226
版权

WebStorm创建的Express项目如何连接MySQL执行增删改查

1 安装MySQL模块

在WebStorm创建一个Express项目，首先安装mysql模块：

npm install mysql

接下来的操作以对info数据库中的stu表的操作为例，stu表如下：
在这里插入图片描述

2 配置数据库连接参数

在当前项目下新建一个文件夹config，在其中新建一个文件config.js，用来定义数据库连接池。

目录结果为：
在这里插入图片描述
在config.js中编写代码，创建数据库连接池：

const mysql = require("mysql");

const pool = mysql.createPool({
    host: "127.0.0.1", // 主机地址
    port: 3306, // 端口号
    database: "info", // 数据库名
    user: "root", // 连接数据库的用户名
    password: "123456", // 数据库密码
    connectLimit: 20 // 最大连接数
})

module.exports = pool; // 导出模块

3 连接数据库

3.1 导入模块

打开routes文件夹，新建conn.js文件
在这里插入图片描述
导入express模块和config.js文件，创建路由router，并且将其导出

const pool = require("../config/config");
const express = require("express");
const router = express.Router();

// 导出router模块
module.exports = router;

在app.js文件中引入路由模块conn.js

var connRouter = require('./routes/conn');

在这里插入图片描述
然后使用路由文件

app.use('/stu', connRouter);

在这里插入图片描述
注：如果不在app.js中使用路由文件，则无法用Postman测试链接。

3.2 查询数据

从数据库连接池中获取对象方法：

pool.getConnection(function (err, conn) {
    // err：错误对象
    // 获取到的数据库连接对象
})

数据库查询方法：

conn.query(sql, function (err, result) {
    // sql：数据库查询语句
    // err：错误对象
    // result：数据库查询结果
})

conn.js中的代码如下：

// 查询所有数据：http://localhost:3000/stu/search
// 定义二级路由
router.get("/search", (req, res) => {
    // 从数据库连接池中获取一个连接
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义sql查询语句
        let sql = "select * from stu";
        // 查询数据
        conn.query(sql, function (err, result) {
            if (err) console.log("数据库查询失败");
            // result为查询的结果
            res.send(result);
        })
    })
})

启动服务器，在Postman中测试http://localhost:3000/stu/search，选择get请求，输入链接，点击发送，可以正常显示结果，查询成功
请添加图片描述

3.3 插入数据

数据库查询方法：

conn.query(sql, params, function (err, result) {
    // sql：数据库查询语句
    // params：参数，通配符?所对应的值
    // result：数据库查询结果
})

conn.js文件中代码：

// 插入一条数据：http://localhost:3000/stu/add
router.post("/add", (req, res) => {
    // 获取客户端请求参数
    let params = {
        sid: req.body.sid,
        sname: req.body.sname,
        age: req.body.age,
        gender: req.body.gender
    }
    // 从数据库连接池中获取一个连接
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义sql插入语句
        let sql = "insert into stu set ?";
        // 插入数据
        conn.query(sql, params, function (err, result) {
            if (err) console.log("数据库查询失败");
            res.send({
                code: result.affectedRows, // 代码影响行数
                msg: "添加数据成功"
            });
        })
    })
})

启动服务器，在Postman中输入测试链接，输入参数，点击发送后数据库成功插入数据。
请添加图片描述
数据库中添加了一行，插入数据成功
在这里插入图片描述

3.4 删除数据

conn.js代码为：

// 删除数据：http://localhost:3000/stu/del
router.delete("/del", (req, res) => {
    // 获取sid
    let sid = req.body.sid;
    console.log(sid)
    // 从数据库连接池请求一个数据
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义数据库查询语句
        let sql = "delete from stu where sid = ?";
        // 删除操作
        conn.query(sql, sid, function (err, result) {
            if (err) console.log("数据库删除失败");
            res.send({
                code: result.affectedRows, // 返回数据库被影响的行数
                msg: "删除成功"
            });
        })
    })
})

启动服务器，在Postman中输入链接http://localhost:3000/stu/del进行测试
请添加图片描述
查看数据库，发现S_1011记录被删掉了，
在这里插入图片描述

3.5 更新数据

conn.js文件代码如下：

// 更新数据：http://localhost:3000/stu/update
router.put("/update", (req, res) => {
    // 获取请求参数
    let params = [
        req.body.sname,
        req.body.age,
        req.body.gender,
        req.body.sid
    ];
    // 获取数据库连接池的连接
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义数据库查询语言
        let sql = "update stu set sname = ?, age = ?, gender = ? where sid = ?";
        // 更新操作
        conn.query(sql, params, function (err, result) {
            if (err) console.log("数据库更新失败");
            res.send({
                code: result.affectedRows,
                msg: "更新成功"
            })
        })
    })
})

启动服务器，在Postman中输入测试链接http://localhost:3000/stu/update
请添加图片描述
数据库中S_1010的数据成功被修改
在这里插入图片描述

4 全部代码

本次示例的所有代码如下：

1、config.js

const mysql = require("mysql");

const pool = mysql.createPool({
    host: "127.0.0.1", // 主机地址
    port: 3306, // 端口号
    database: "info", // 数据库名
    user: "root", // 连接数据库的用户名
    password: "123456", // 数据库密码
    connectLimit: 20 // 最大连接数
})

module.exports = pool;

2、conn.js

const pool = require("../config/config");
const express = require("express");
const router = express.Router();

// 查询所有数据：http://localhost:3000/stu/search
// 定义二级路由
router.get("/search", (req, res) => {
    // 从数据库连接池中获取一个连接
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义sql查询语句
        let sql = "select * from stu";
        // 查询数据
        conn.query(sql, function (err, result) {
            if (err) console.log("数据库查询失败");
            // result为查询的结果
            res.send(result);
        })
    })
})

// 插入一条数据：http://localhost:3000/stu/add
router.post("/add", (req, res) => {
    // 获取客户端请求参数
    let params = {
        sid: req.body.sid,
        sname: req.body.sname,
        age: req.body.age,
        gender: req.body.gender
    }
    // 从数据库连接池中获取一个连接
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义sql插入语句
        let sql = "insert into stu set ?";
        // 插入数据
        conn.query(sql, params, function (err, result) {
            if (err) console.log("数据库查询失败");
            res.send({
                code: result.affectedRows, // 代码影响行数
                msg: "添加数据成功"
            });
        })
    })
})

// 删除数据：http://localhost:3000/stu/del
router.delete("/del", (req, res) => {
    // 获取sid
    let sid = req.body.sid;
    console.log(sid)
    // 从数据库连接池请求一个数据
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义数据库查询语句
        let sql = "delete from stu where sid = ?";
        // 删除操作
        conn.query(sql, sid, function (err, result) {
            if (err) console.log("数据库删除失败");
            res.send({
                code: result.affectedRows, // 返回数据库被影响的行数
                msg: "删除成功"
            });
        })
    })
})

// 更新数据：http://localhost:3000/stu/update
router.put("/update", (req, res) => {
    // 获取请求参数
    let params = [
        req.body.sname,
        req.body.age,
        req.body.gender,
        req.body.sid
    ];
    // 获取数据库连接池的连接
    pool.getConnection(function (err, conn) {
        if (err) console.log("数据库连接失败");
        // 定义数据库查询语言
        let sql = "update stu set sname = ?, age = ?, gender = ? where sid = ?";
        // 更新操作
        conn.query(sql, params, function (err, result) {
            if (err) console.log("数据库更新失败");
            res.send({
                code: result.affectedRows,
                msg: "更新成功"
            })
        })
    })
})

// 导出router模块
module.exports = router;

3、app.js，在该文件中只添加了两行代码，分别是第9行和第25行

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var connRouter = require('./routes/conn');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/stu', connRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;
橘猫吃不胖～
关注
  • 2
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
WebStorm链接mysql-Web后端上机实验
weixin_57398221的博客
04-18 2032
1.下载mysql 地址：http://www.mysql.com 安装mysql 选择 I accept 然后点击next进入下一步。
webstorm编辑器中用nodejs连接数据库
A_MangGuo的博客
06-06 1725
webstorm编辑器中用nodejs连接数据库的过程及express使用命令配置 前几天做学校的一个作业，又忘记了怎么去连接数据库，所以想写一篇博客来记住，如果能帮到大家的话就更好了 1.首先在webstorm中创建一个新项目 2.要养成在编辑器中写好目录的习惯，创建几个文件夹，分别放相应的文件（记住一定要是在public的文件夹下建） 3.搭建环境，也是最重要的一步。 1）首先你要确保自己电脑下载好了nodejs，怎么知道自己电脑里有没有呢？可以通过打开命令行（快捷键：windows+R，输入cmd）
webstorm 连接mysql
热门推荐
在路上。。。
04-20 1万+
var mysql=require('mysql'); var options={ url:'localhost', port:'3306', database:'school', user:'root', password:'123456' }; var client=mysql.createConnection(options); var age=50;
webstorm里用 DB browser 连接 mysql SQlite Oracle数据库
weixin_34409703的博客
06-12 1511
（1）插件名：DB browser preferences -> plugin -> 搜索DB browser （2）在view里勾上 Tool Buttons，左侧会显示插件快捷入口 （3）连接数据库 。里面提供了以下几种类型的数据库。选择其中一种，我选择的是mysql （5）连上以后，随意打开一张有数据的表，如以下内容 ...
webstorm添加mysql_Webstorm使用教程详解
weixin_39839478的博客
01-19 1660
Webstorm使用教程详解Webstorm垂直分栏、左右分栏Webstorm 主题、背景、颜色等设置的导入导出使用WebStorm开发web前端 网页中文乱码问题的解决方案Webstorm 主题、背景、颜色等设置的导入导出1、导出设置2、导入设置Webstorm垂直分栏，在需要分栏的文件上右击，选着垂直拆分。就可以拖动，形成左右分栏使用WebStorm开发web前端 网页中文乱码问题的解决方案试...
如何在webstorm中启动并连接mongodb数据库呢？
孤云博客
02-01 4340
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 from：https://segmentfault.com/q/1010000009240596 下载插件mongo 按两下shift搜索mongo,你会看到Mongo Explorer,...
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。 webstorm官网 自己选择要安装的...
webstorm2019版本创建VUE项目
01-20
在本文中，我们将深入探讨如何在WebStorm 2019版本中创建Vue.js项目，以及遇到问题时的解决策略。Vue.js是一个流行的前端框架，而WebStorm是一款强大的JavaScript IDE，支持多种Web开发技术，包括Vue.js。然而，有时...
webstorm创建和调试vue项目-附件资源
03-02
webstorm创建和调试vue项目-附件资源
graduation.zip 论坛 个人毕设项目 vue node express mysql 残 轻微配置即可
09-03
开发者使用SQL语句来操作数据，实现数据的增删改查功能。 4. **毕业设计**：毕业设计是高等教育中的一项重要实践环节，要求学生综合运用所学知识解决实际问题。本项目作为一个毕业设计，表明它可能包含了一整套完整...
MySQL 连接
12-16
MySQL 连接 使用mysql二进制方式连接 您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库。 实例 以下是从命令行中连接mysql服务器的简单实例： [root@host]# mysql -u root -p Enter password:****** 在登录成功后会出现 mysql> 命令提示窗口，你可以在上面执行任何 SQL 语句。 以上命令执行后，登录成功输出结果如下: Welcome to the MySQL monitor. Commands end with ; or g. Your MySQL connection id
nodejs+express+webstorm配置及安装
06-29
nodejs+express+webstorm配置及安装
AngularJS+Spring+MySQL Demo
02-13
此资源是在MyEclipse平台开发，后台使用SpringMVC，前台使用angular.js，数据库使用MySQL，开发的Demo。实现了从数据库读取数据和把前台信息写入数据库的功能。资源包括代码和数据库表格。
在WebStorm中使用nodejs快速搭建服务连接mysql数据库不太完整的教程
一只大耗子
04-16 2465
快速上手创建项目并实现查询和修改操作 先安装node.js并配置好基本开发环境（此处省略） 使用webstorm创建node.js项目 更改配置，点击create创建项目 在项目中找到app.js并注释横线上面代码，添加下面几行代码。 在routes目录下创建db.js文件并添加代码 //db.js // 连接MySQL var mysql = require('my...
angular 结合 nodejs连接数据库在webstorm服务器中启动
HeSir_的博客
03-24 3716
首先nodejs 三个重要的层     Dao持久层(数据层)  service服务层(业务层)  router表现层(路由) Dao持久层(数据层) :         mysql的配置 回调服务层的函数 database.js 这里主要是配置mysql参数   配置过后不用再改变  可以固定不变 var mysql = require('
intelJ IDEA\PHPStorm \WebStorm\PyCharm 通过ssh连接远程Mysql\Postgresql等数据库
最新发布
hhkun0120的专栏
08-09 996
具体操作步骤见下图。
mysql基于WebStorm服装购物网站的设计与实现毕业设计源码281444
m0_73244011的博客
09-23 785
服装购物网站主要是借助计算机，通过对首页、站点管理（轮播图、公告栏）用户管理（管理员、普通用户）内容管理（交流论坛、论坛分类列表、服装资讯、新闻分类列表）商城管理（服装购物、分类列表、订单列表）等信息进行管理。 本系统采用的数据库是Mysql，使用node.js的koa技术技术构建的一个管理系统，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。
WEB连接数据库实现登录注册
weixin_68250871的博客
02-20 677
WEB连接数据库实现登录注册
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】
JM1307hhh的博客
08-22 4611
Java小白,前后端开发环境搭建。win10系统，超详细步骤，全套安装过程。【idea+webstorm+maven+nodejs+vue+mysql+……】
webstorm创建express项目报错
05-04
可能是您没有安装 Express 模块。您可以尝试以下步骤： 1. 打开终端或命令行工具，进入您的项目文件夹。 2. 运行 `npm init` 命令以创建 `package.json` 文件。 3. 运行 `npm install express --save` 命令安装 Express 模块。 4. 在 WebStorm 中创建 Express 项目，确保选择正确的文件夹路径和 Node.js 可执行文件路径。 如果您已经安装了 Express 模块，也可能是您的 WebStorm 设置有误。您可以尝试清除 WebStorm 缓存并重新打开软件。如果问题仍然存在，您可以查看 WebStorm 的日志文件以获取更多信息。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值