Node连接MySql数据库创建Api接口

最新推荐文章于 2024-07-26 09:40:31 发布

小航冲冲冲

最新推荐文章于 2024-07-26 09:40:31 发布

阅读量1.2k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_45932821/article/details/127811518

版权

html 专栏收录该内容

6 篇文章 4 订阅

订阅专栏

一个很简单的评论网页，实现的功能是筛选数据和添加数据，一共三个api接口

app.js


// 1. 导入 mysql 模块
const mysql = require('mysql')
var bodyParser = require('body-parser');
// 2. 建立与 MySQL 数据库的连接关系
const db = mysql.createPool({
  host: 'localhost', // 数据库的 IP 地址
  user: 'root', // 登录数据库的账号
  password: 'root', // 登录数据库的密码
  database: 'movies', // 指定要操作哪个数据库
})

// 引入express
const express = require('express')
//创建一个app实例对象
const app = express()

// 中间件定义post传递的格式
app.use(express.json())
app.use(bodyParser.urlencoded({extended:true}));//Context-Type 为application/x-www-form-urlencoded 时 返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
app.use(bodyParser.json());//用于解析json 会自动选择最为适宜的解析方式
 

app.get('/getlist',(req,res)=>{
    const sqlStr = 'select * from liaotian'
    db.query(sqlStr, (err, results) => {
    // 失败
    if (err) {
        return console.log(err.message)
    } 
    // /配置请求的域名，*代表任意
    res.header("Access-Control-Allow-Origin", "*");   
    // 支持跨域请求类型
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    //配置请求头信息，包含字符集等等 
    res.header("Content-Type", "application/json;charset=utf-8");  
    res.send({
        code: 200,
        msg: '获取数据成功',
        data: results
    })
})
}) 

app.post('/search', (req, res) => {
    // /配置请求的域名，*代表任意
    res.header("Access-Control-Allow-Origin", "*");   
    // 支持跨域请求类型
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    //配置请求头信息，包含字符集等等 
    res.header("Content-Type", "application/json;charset=utf-8");  
    // 获取到客户端通过查询字符串，发送到服务器的数据
    const body = req.body
    const sqlStr2 = `select * from liaotian where text like '%${body.text}%';`
    db.query(sqlStr2, (err, results) => {
    // 失败
    if (err) {
        return console.log(err.message)
    } 
    res.send({
        status: 200,
        msg: '查询数据成功',
        data: results
    })
    })
})


app.post('/add', (req, res) => {
    // /配置请求的域名，*代表任意
    res.header("Access-Control-Allow-Origin", "*");   
    // 支持跨域请求类型
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    //配置请求头信息，包含字符集等等 
    res.header("Content-Type", "application/json;charset=utf-8");  
    // 获取到客户端通过查询字符串，发送到服务器的数据
    const body = req.body
    const sqlStr3 = `INSERT INTO liaotian VALUES ('${body.text}');`
    db.query(sqlStr3, (err, results) => {
    // 失败
    if (err) {
        return console.log(err.message)
    } 
    res.send({
        status: 200,
        msg: '添加数据成功',
        data: results
    })
    })
})
 
// listen()端口监听
app.listen(80,(err)=>{
    if(!err){
        console.log('服务器启动成功了')
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <input type="text">
    <button class="search">搜索</button>
    <button class="add">增加</button>
    <ul>
        
    </ul>
    <script>
        
        // 数据渲染
        function render() {
            $('ul').empty('')
            $.get(
            'http://127.0.0.1/getlist',
            function(res) {
                console.log(res);
                res.data.forEach(item => {
                    console.log(item.text);
                    let li = `
                    <li>${item.text}</li>`
                    $('ul').append(li)
                })
            }
            )
        }

        render()


        // 查找数据
        $('.search').click(function() {
            $('ul').empty('')
            $.post(
            'http://127.0.0.1/search',
            {text: $('input').val()},
            function(res) {
                console.log(res);
                res.data.forEach(item => {
                    console.log(item.text);
                    let li = `
                    <li>${item.text}</li>`
                    $('ul').append(li)
                })
            }
        )
        })

        // 添加数据
        $('.add').click(function() {
            $('ul').empty('')
            $.post(
            'http://127.0.0.1/add',
            {text: $('input').val()},
            function(res) {
                console.log(res);
                render()
            }
        )
        })

    </script>
</body>
</html>