node+express+MySQL实现数据增删改查功能

最新推荐文章于 2024-04-30 16:13:57 发布

better_man_lxp

最新推荐文章于 2024-04-30 16:13:57 发布

阅读量460

点赞数 3

分类专栏： javascript 文章标签： mysql node.js 数据库

本文链接：https://blog.csdn.net/better_man_lxp/article/details/120360253

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

准备工作

npm下载express和mysql模块

npm init -y
npm i express
npm i mysql

目标

实现对数据库的增加与查询功能

结构

在这里插入图片描述

创建server.js文件

`使用node开启3000端口的服务器,并创建测试接口`

const express = require('express')
const app = express()

app.use('/api/test', (req, res) => {
      res.json('测试接口')
})

app.listen(3000, () => {
      console.log('3000端口就绪');
})

`测试结果`

请添加图片描述

MySQL操作

`在MySQL中创建名为stu的新表`

请添加图片描述

`在表中添加数据`

请添加图片描述

创建/my/sql.js 文件并连接MySQL以及导出模块

// 1. 加载mysql
const mysql = require('mysql');
// 2. 创建连接对象
const connection = mysql.createConnection({
      // 对象的属性名字不能改变
      host: 'localhost', //本次连接的数据库地址
      port: 3306, //端口号
      user: 'root', //数据库账号
      password: 'root', //数据库密码
      database: 'node' //数据库名
});
// 3. 连接到MySQL服务器
connection.connect((err) => {
      // 如果有错误对象，表示连接失败
      if (err) return console.log('数据库连接失败')
      // 没有错误对象提示连接成功
      console.log('mysql数据库连接成功')
});

//导出connection模块
module.exports = connection

注意host port user password database的填写正确

测试connection模块与 MySQL的交互功能

sql.js同目录下新建testsql.js

//导入模块
const connection = require('./sql')

let sql = 'select * from stu';
connection.query(sql, (err, result) => {
      if (err) {
            console.log('错误', err)
      } else {
            // 做添加，result是一个对象，其中有一个属性affectedRows
            // 表示本次操作之后，影响的行数 
            console.log(result); // result就是查询结果
      }
});

cmd运行testsql.js返回结果

mysql数据库连接成功
[
  RowDataPacket { Id: 1, name: '张三', age: '18' },        
  RowDataPacket { Id: 2, name: '李四', age: '20' },        
  RowDataPacket { Id: 3, name: '王五', age: '22' }
]

回到server.js中编写接口代码

查询

app.get('/api', (req, res) => {
      let sql = 'select * from stu';
      connection.query(sql, (err, result) => {
            if (err) {
                  console.log('错误', err)
            } else {
                  // 做添加，result是一个对象，其中有一个属性affectedRows
                  // 表示本次操作之后，影响的行数 
                  // console.log(result); // result就是查询结果
                  res.json(result)
            }
      });
})

增加

app.post('/api', (req, res) => {
      // insert into 表名(字段名1，字段名2,....)  values (值1，值2，....)
      // let sql = 'insert into stu (name , age) values("小丽" , 18)';
      let { name, age } = req.body
      let sql = `insert into stu (name , age) values('${name}' , ${age})`
      connection.query(sql, (err, result) => {
            if (err) {
                  console.log('错误', err)
            } else {
                  // 做添加，result是一个对象，其中有一个属性affectedRows
                  // 表示本次操作之后，影响的行数 
                  // console.log(result); // result就是查询结果
                  res.json(result)
            }
      });
})

修改

app.put('/api', (req, res) => {
    //通过id修改name和age属性值
      let { name, age, id } = req.body
      // update 表名 set 字段1=值1, 字段2=值2,...  where 修改条件
      let sql = `update stu set name='${name}' , age=${age} where id=${id}`
      connection.query(sql, (err, result) => {
            if (err) {
                  console.log('错误', err)
            } else {
                  // 做添加，result是一个对象，其中有一个属性affectedRows
                  // 表示本次操作之后，影响的行数 
                  // console.log(result); // result就是查询结果
                  res.json(result)
            }
      });
})

删除

app.delete('/api', (req, res) => {
      //通过id删除
      let { id } = req.body
      // delete  from 表名  where 删除条件
      let sql = `delete from stu where id=${id}`;
      connection.query(sql, (err, result) => {
            if (err) {
                  console.log('错误', err)
            } else {
                  // 做添加，result是一个对象，其中有一个属性affectedRows
                  // 表示本次操作之后，影响的行数 
                  // console.log(result); // result就是查询结果
                  res.json(result)
            }
      });
})

编写H5内容实现数据可视化

 <table>
            <thead>
                  <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                  </tr>
            </thead>
            <tbody>
                  <!-- <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                  </tr> -->
            </tbody>
      </table>
	 <div class="Get">
            <input type="button" value="GET" id="getBtn">
      </div>
      <div class="Post">
            <form action="" id="postForm" method="post">
                  <input type="text" name="name" value="">
                  <input type="number" name="age" value="">
                  <button type="submit">POST</button>
            </form>
      </div>
      <div class="Put">
            <form action="" id="putForm" method="api">
                  <input type="text" name="name">
                  <input type="text" name="age">
                  <button type="submit">PUT</button>
            </form>
      </div>

获取数据填入表格

document.getElementById('getBtn').onclick = function () {
                  dataGet()
            }
            //获取数据
            function dataGet() {
                  //1.创建 xhr 对象
                  let xhr = new XMLHttpRequest()
                  //2.设置监听事件
                  xhr.onreadystatechange = function () {
                        document.querySelector('tbody').innerHTML = ''
                        // console.log(xhr);
                        if (xhr.readyState === 4 && xhr.status === 200) {
                              // console.log(xhr.responseText)
                              // console.log(JSON.parse(xhr.response));
                              JSON.parse(xhr.responseText).forEach(item => {
                                    //创建tr元素
                                    let tr = document.createElement('tr')
                                    //设置每个tr的data-id属性,方便创建事件
                                    tr.setAttribute('data-id', item.Id)
                                    //设置tr内容
                                    tr.innerHTML =
                                          `<td>${item.Id}</td><td>${item.name}</td><td>${item.age}</td>`
                                    //添加到tbody中
                                    document.querySelector('tbody').appendChild(tr)
                              });
                        }
                  }
                  //3.open方法  设置请求方式和url
                  xhr.open('GET', '/api')
                  //4.send方法,发送请求
                  xhr.send()
            }
            dataGet()

双击删除数据

 //删除数据  双击
            document.querySelector('tbody').addEventListener('dblclick', function (e) {
                  // console.log(e.target.parentNode.parentNode.getAttribute('data-id'));
                  let id = e.target.parentNode.getAttribute('data-id')
                  //1.创建 xhr 对象
                  let xhr = new XMLHttpRequest()
                  //2.设置监听事件
                  xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                              // console.log(xhr.responseText)
                              console.log('删除成功');
                              dataGet()
                        }
                  }
                  //3.open方法  设置请求方式和url
                  xhr.open('delete', '/api?id=' + id)
                  //4.send方法,发送请求
                  xhr.send()
            })

添加数据

//添加数据
            document.getElementById('postForm').onsubmit = function (e) {
                  e.preventDefault()
                  let name = this.elements[0].value
                  let age = +this.elements[1].value
                  //1.创建 xhr 对象
                  let xhr = new XMLHttpRequest()
                  //2.设置监听事件
                  xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                              // console.log(xhr.responseText)
                              console.log('添加成功');
                              dataGet()
                        }
                  }
                  //3.open方法  设置请求方式和url
                  xhr.open('post', '/api' + '?name=' + name + '&age=' + age)
                  //4.send方法,发送请求
                  xhr.send()
                  this.elements[0].value = ''
                  this.elements[1].value = ''
            }

修改数据

略

better_man_lxp

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
node+express+MySQL实现数据增删改查功能

准备工作npm下载express和mysql模块npm init -ynpm i expressnpm i mysql目标实现对数据库的增加与查询功能结构创建server.js文件使用node开启3000端口的服务器,并创建测试接口const express = require('express')const app = express()app.use('/api/test', (req, res) => { res.json('测试接口')})ap
复制链接

扫一扫