小贝子编程

我如何避免使用ReactJ中的表单返回零数据?还请检查后端代码，专家给我答案



当我尝试通过API将数据键入 reactjs 形式时，控制台返回 null 。

当我在后端上刷新页面 codeigniter 时，它以 null 。

如何修复问题数据，以使控制台在通过a reachjs 表单输入时不会返回 null 。

例如，当我输入浏览器http：//localhost/api/usercontroller/用户时，它会在 reactjs 表单上返回 null ，如下所示：

{"user_id":"119","UserName":null,"user_email":null,"Password":null,"CreatedDate":"0000-00-00 00:00:00","Status":null,"Role":null,"VendorId":null}

当我检查代码时 http：//localhost/api/usercontroller/interertusers ，仅iNsertuser Controller Controller returns returns returns null 。。

关于问题的任何输入将不胜感激。
我的数据库代码是：

CREATE TABLE `users`(
    `user_id` int(11) NOT NULL,
    `UserName` varchar(255) DEFAULT NULL,
    `user_email` varchar(40) DEFAULT NULL,
    `Password` varchar(1000) DEFAULT NULL,
    `CreatedDate` datetime DEFAULT NULL,
    `Status` int(11) DEFAULT NULL
    `Role` varchar(255) DEFAULT NULL,
    `VendorId` int(11) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

我的 usermodel 在 codeigniter is：

class Usermodel extends CI_Model
{
public function get_users(){
    $query = $this->db->select("*")
              ->from("users")
              ->get();
    return $query;      
}
public function insert_users($data){
    $this->UserName = $data['UserName'];
    $this->user_email=$data['user_email'];
    $this->Password =$data['Password'];
    $this->CreatedDate=$data['CreatedDate'];
    $this->Status=$data['Status'];
    $this->Role = $data['Role'];
    $this->VendorId=$data['VendorId'];
    $this->db->insert("users",$this);
}
}

我的 usercontroller 插入器方法中的控制器是：

<?php 
defined('BASEPATH') OR exit('No direct script access allowed');
header('Access-Control-Allow-Origin: *');
if($_SERVER['REQUEST_METHOD']==='OPTIONS'){
    header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS');
    header('Access-Control-Allow-Headers:Content-Type');
    exit;
}
class UserController extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model("usermodel","us");
    }
    public function users(){
        $query = $this->us->get_users();
        header("Content_Type:application/json");
        echo json_encode($query->result());
    }
    public function insertUsers(){
        $data = array(
            'UserName'      =>$this->input->post('UserName') ,
            'user_email'    =>$this->input->post('user_email'),
            'Password'      =>$this->input->post('Password'),
            'CreatedDate'   =>date("l jS of F Y h:i:s A"),
            'Status'        =>$this->input->post('Status'),
            'Role'          => $this->input->post('Role'),
            'VendorId'      => $this->input->post('VendorId'), 
        );
        $query =$this->us->insert_users($data);
        header("Content_Type:application/json");
        echo json_encode($query);
    }
}

此外，我使用 reactjs 获取API，当用户写入表单中的任何数据时，它将在响应 register.js 中返回NULL，如下：

import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Register extends Component {
  constructor(props){
    super(props);
    this.state = {
      user_id:'',  Username:'', Password:'', user_email:'',CreatedDate:'',Status:'',Role:'',VendorId:'',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    handleChange(event){
    const state = this.state;
    state[event.target.name] = event.target.value;
    this.setState(state, () => console.log(state));
    // console.log(state); state get undefined
    }  
handleSubmit(event){
    event.preventDefault();
    fetch('http://localhost/API/UserController/insertUsers',{
      method:'POST',
      headers:{
        'Content-Type':'application/json',
        'Accept':'application/json'
      },
      body:JSON.stringify({
        user_id :this.state.user_id,
        Username:this.state.Username,
        Password:this.state.Password,
        user_email:this.state.user_email,
        CreatedDate:this.state.CreatedDate,
        Status:this.state.Status,
        Role: this.state.Role,
        VendorId:this.state.VendorId,
      })
    })
      .then(res =>res.json() )
      .then(data => console.log(data))
      .catch(err => console.log("show me error that cannot be specify",err))
  }
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="9" lg="7" xl="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <Form action="http://localhost/API/UserController/users" method="post" onSubmit={this.handleSubmit}>
                    <h1>Register</h1>
                    <p className="text-muted">Create your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="text" name="UserName" value={this.state.UserName} onChange={this.handleChange} placeholder="Username" autoComplete="username" name="Username"  />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>@</InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="text" placeholder="User email" name="user_email" value={this.state.user_email} onChange={this.handleChange} autoComplete="email" />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="password" placeholder="Password" value={this.state.Password} onChange={this.handleChange} name="Password" autoComplete="new-password" />
                    </InputGroup>
                    <Button color="success" block>Create Account</Button>
                  </Form>
                </CardBody>
                <CardFooter className="p-4">
                  <Row>
                    <Col xs="12" sm="6">
                      <Button className="btn-facebook mb-1" block><span>facebook</span></Button>
                    </Col>
                    <Col xs="12" sm="6">
                      <Button className="btn-twitter mb-1" block><span>twitter</span></Button>
                    </Col>
                  </Row>
                </CardFooter>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}
export default Register;

codeigniter不会返回数据或结果集当您执行写入操作（例如插入或更新数据库）时，它会返回布尔值（true/false）。因此，为什么您要获得零，$ QUERY的值

$query = $this->us->insert_users($data);

如果操作成功，否则将是错误的。

使用if语句检查是否为true，然后返回$ data 

echo json_encode($data);

您可以在此处查看有关查询的CI（Codeigniter）的文档https://www.codeigniter.com/user_guide/database/queries.html

我还建议您使用加密算法来加密密码。

usermodel 

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Usermodel extends CI_model {
  public function get_users()
  {
    $this->db->where('is_active', 1);
    $query = $this->db->get('users');
    return $query->result();
  }
  public function insert_users($formData)
  {
    $this->db->insert('users', $formData);
    return $this->db->insert_id();
  }
}

插入器方法中的我的USerControllloll控制器是：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class UserController extends CI_Controller {
  public function __construct()
  {
    parent::__construct();
    $this->load->model('Usermodel');
  }
  public function users()
  { 
    header("Access-Control-Allow-Origin: *");
    $users = $this->Usermodel->get_users();
    $this->output
      ->set_content_type('application/json')
      ->set_output(json_encode($users));
  }

  public function insertUsers()
  { 
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Request-Headers: GET,POST,OPTIONS,DELETE,PUT");
    $formdata = json_decode(file_get_contents('php://input'), true);
    if( ! empty($formdata)) {
      $UserName = $formdata['UserName'];
      $user_email = $formdata['user_email'];
      $Password = $formdata['Password'];
      $userData = array(
        'UserName' => $UserName,
        'user_email' => $user_email,
        'Password' => password_hash($Password,PASSWORD_DEFAULT),
         'is_active' => 1,
        'created_at' => date('Y-m-d H', time())
      );
      $id = $this->Usermodel->insert_users($userData);
      $response = array(
        'status' => 'success',
        'message' => 'User Register successfully'
      );
    }
    else {
      $response = array(
        'status' => 'error'
      );
    }
    $this->output
      ->set_content_type('application/json')
      ->set_output(json_encode($response));
  }
}

register.js代码现在在数据库中存储数据

import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container,Alert, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Register extends Component {
  constructor(props){
    super(props);
    this.state = {
      Username:'',
      user_email:'',
      Password:'',
      error:null,
      response:{},
    }
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    handleChange(event){
    const name  = event.target.name;
    const value = event.target.value;
    this.setState({
      [name]: value
    });
    } 
    handleSubmit=(event)=>{
     event.preventDefault();
     this.onFormSubmit(this.state);
     this.setState(this.state);
    }
    onFormSubmit(data){
      const apiUrl = "http://localhost/API/UserController/insertUsers";
      const myHeaders = new Headers();
      myHeaders.append('Content-Type','application/json');
      const options = {
        method:'POST',
        body:JSON.stringify(data),
        myHeaders
      };
      fetch(apiUrl,options)
        .then(res => res.json() )
        .then(result =>{
          this.setState({
           response:result,
         });
        })
        .then(error=>{
          this.setState({
            error
          });
        });
        this.setState({
        Username:'',
        user_email:'',
        Password:''
        });
    }
  render() {
    return (
        <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="9" lg="7" xl="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <Form onSubmit={this.handleSubmit}>
                    <h1>Register</h1>
                    <p className="text-muted">Create your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input   type="text" name="UserName" value={this.state.UserName} onChange={this.handleChange} placeholder="Username" autoComplete="username"   />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>@</InputGroupText>
                      </InputGroupAddon>
                      <Input   type="text" placeholder="User email" name="user_email" value={this.state.user_email} onChange={this.handleChange} autoComplete="email" />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input   type="password" placeholder="Password" value={this.state.Password} onChange={this.handleChange} name="Password" autoComplete="new-password" />
                    </InputGroup>
                    <Button color="success" block>Create Account</Button>
                  </Form>
                </CardBody>
                <CardFooter className="p-4">
                  <Row>
                    <Col xs="12" sm="6">
                      <Button className="btn-facebook mb-1" block><span>facebook</span></Button>
                    </Col>
                    <Col xs="12" sm="6">
                      <Button className="btn-twitter mb-1" block><span>twitter</span></Button>
                    </Col>
                  </Row>
                </CardFooter>
              </Card>
            </Col>
          </Row>
        </Container>
                  {this.state.response.status === 'success' && <div><br /><Alert variant="info">{this.state.response.message}</Alert></div>}
                            {this.state.error && <div>Error: {this.state.error.message}</div>}
      </div>
    );
  }
}
export default Register;

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium