时间戳

首页 > 解决方案 > 使用 node.js express 和 reactjs 将数据插入 phpmyadmin

node.js - 使用 node.js express 和 reactjs 将数据插入 phpmyadmin

问题描述

我的数据库中有一个名为 products 的表，我正在尝试使用 node.js express 服务器作为 Web 服务并将 react.js 作为前端语言插入。

下面是我的 react.js 表单来执行插入。

function App() {
  return (
    <div className="container">
      <form onSubmit = {(e) => Add(e)}>
          <div className="form-group">
            <label htmlFor="examplePname">Name</label>
            <input type="text" className="form-control" id="examplePname" aria-describedby=""/>
          </div>
          <div className="form-group">
            <label htmlFor="examplePprice">Price</label>
            <input type="number" className="form-control" id="examplePprice"/>
          </div>
          <div className="form-group form-check">
            <input type="checkbox" className="form-check-input" id="exampleCheck1"/>
            <label className="form-check-label" htmlFor="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    </div>
  );
}
function Add(e){
  e.preventDefault();
  let request = {
    name: document.getElementById('examplePname').value,
    price: document.getElementById('examplePprice').value,
  }
  alert("returns this:"+ request)
  axios.post('http://localhost:3000/add', request)
  .then(resp => {
    alert(resp.data.message);
  })
  .catch(err => {
    console.log(err);
  })
}

下面是我的 node.js express Webservice

router.post('/add', (req, res) => {

    const {name, price} = req.query;
    console.log(name, price); ///Do this before you write the insert query
    //res.send('adding product');Do this before you write the insert query (add temp products to view in cmd)
    const INSERT_QUERY = `INSERT INTO products (name, price) VALUES('${name}', ${price})`; //after do an insert query to add to db proper
    connection.query(INSERT_QUERY, (err, results) => {
        if (err) {
            return res.send({
            message: "failed"
        })
        } else {
            return res.send({
            message: "successful"
        });
        }
    });

});

但是当我插入时，我在 console.log 中得到了名称和价格的未定义值。

标签： node.jsreactjsexpress

解决方案

在节点端的 app.js 中使用下面的代码来解析参数

const bodyparser = require('body-parser');
const multer = require('multer');

//Multer
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './Images');
    },
    filename: function (req, file, cb) {
        let fileType = file.originalname.split('.');
        cb(null, `${fileType[0]}_${Date.now()}.${fileType[1]}`);
    }
})

var upload = multer({ storage: storage });
app.use(upload.any());

// Parse
app.use(bodyparser.json({ limit: '50mb', extended: true }));
app.use(bodyparser.urlencoded({ limit: '50mb', extended: true, parameterLimit: 1000000 }));

重启服务器前请安装以上依赖

反应端发送表单数据如下

createFormData(props) {
    var formData = new FormData();
    for (var key in props) {
        if (typeof props[key] === "string" || props[key] instanceof Date) {
            formData.append(key, props[key]);
        }
        else if (typeof props[key] === "object") {
            if (Array.isArray(props[key]) && key === "file") {
                //Multiple File Upload
                props[key].length > 0 && props[key].forEach((element) => {
                    if (element.lastModifiedDate) {
                        formData.append(key, element);
                    }
                })
            }
            else if (props[key] && props[key].lastModifiedDate) {
                //Single File Upload
                formData.append(key, props[key]);
            } else {
                formData.append(key, JSON.stringify(props[key]));
            }
        } else {
            formData.append(key, JSON.stringify(props[key]));
        }
    }
    return formData;
}

// axios 请求

 axios({
            url: url here,
            method:  'POST',
            data: this.createFormData(your form data object),
            timeout:  30000
        }).then(response => {
            if (response.status === 200) {
                
            }
        })

您将在节点端获得如下数据

let data = { ...req.body, ...req.params, ...req.query }

推荐阅读