Question

我正在尝试连接mysql表以通过axios响应表单。 React应用程序在8081端口和mysql服务器8080端口上运行。在邮递员中进行api测试时，数据正在添加到mysql表中，但是每当我通过react表单尝试它时都会失败。我假设我的React应用程序中存在一些错误，因此请发布其代码，如果您需要任何内容，请告诉我。

反应形式


import React, { Component } from 'react'
import devicedataservice from "../services/services"

class CreateProject extends Component{
    constructor(props){
        super(props);
            this.state={
                serialno:'',
                brand:'',
                modelname:'',
                submitted:false
            };
        this.onChangeSerialno=this.onChangeSerialno.bind(this);
        this.onChangeBrand=this.onChangeBrand.bind(this);
        this.onChangeModelName=this.onChangeModelName.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }
    
   onChangeSerialno(e){
       this.setState({
           serialno:e.target.value
       });
   }
   onChangeBrand(e){
       this.setState({
           brand:e.target.value
       });
   }
   onChangeModelName(e){
       this.setState({
           modelname:e.target.value
       });
   }
   handleSubmit(e){
      
       var data={
           serialno:this.state.serialno,
           brand:this.state.brand,
           modelname:this.state.modelname
       };
      
  
      devicedataservice.create(data)
        .then(response => {
          this.setState({
            
            serialno:response.data.serialno,
            brand:response.data.brand,
            modelname:response.data.modelname,
  
            submitted: true
          });
        
        })
        .catch(e => {
         
        });
    }
  
    render(){
        return(
            <div>
                <div className="container ">
                    <form className="white">
                        <h1>
                            <h5 className="grey-text text-darken-3">Create Project</h5>
                           
                            <div className="input-field">
                                <label htmlFor="serialno">Serial Number</label>
                                <input  id="serialno" value={this.state.serialno} type ="text" name="serialno" onChange={this.onChangeSerialno}></input>
                            </div>
                            <div className="input-field">
                                <label htmlFor="brand">Brand</label>
                                <input  id="brand" value={this.state.brand} type ="text" name="brand" onChange={this.onChangeBrand}></input>
                            </div>
                            <div className="input-field">
                                <label htmlFor="modelname">Model Name</label>
                                <input  id="modelname" value={this.state.modelname} type ="text" name="modelname" onChange={this.onChangeModelName}></input>
                            </div>
                            <div className="input-field">
                                <button onSubmit={this.handleSubmit} className="btn blue lighten-1 z-depth-0">Add Project</button>
                            </div>  
                        </h1>
                    </form>
                </div>
            </div>
        )
    }
}
export default CreateProject

services.js

import http from "../http-common";

class DeviceDataService {
  create(data) {
    return http.post(`/devices`, data);
  }
  
  getAll() {
    return http.get("/devices");
  }

  get(serialno) {
    return http.get(`/devices/${serialno}`);
  }

 

  update(serialno, data) {
    return http.put(`/devices/${serialno}`, data);
  }

  delete(serialno) {
    return http.delete(`/devices/${serialno}`);
  }

  deleteAll() {
    return http.delete(`/devices`);
  }

}

export default new DeviceDataService();

axios（http-common.js）

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json"
  }
});

未将应用程序表单数据插入MySQL表

0 个答案: