REACT 前端界面提交

在react项目中安装代理中间件

 

 setupProxy.js文件

const { createProxyMiddleware: proxy } = require('http-proxy-middleware')

module.exports = app => {
  app.use('/v1', proxy({
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {}
  }))
}

App.jsx文件

import React, { Component } from 'react'
import Adduser from './pages/Adduser'


export default class App extends Component {

  render() {
    return (
      <div>
        <Adduser />
      </div>
    )
  }

}

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Adduser.jsx文件

import React, { Component } from 'react'
import '../assets/css/bootstrap.min.css'
import axios from 'axios'

export default class Adduser extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // 用户数据源
      userinfo: {
        username: '',
        password: '',
        sex: '男',
        hobbies: [],
        intro: ''
      }
    }

    // 建议以后写在这样，性能更好一次
    this.setValue = this.setValue.bind(this)
    this.dopost = this.dopost.bind(this)
  }

  // 默认处理的string类型  checkbox数组
  setValue(evt) {
    let value = evt.target.value
    let name = evt.target.name
    let type = evt.target.type
    if ('checkbox' === type) {
      // hobbies 数组
      let tmpValue = this.state.userinfo[name]
      tmpValue.push(value)
      this.setState(state => state.userinfo[name] = tmpValue)
    } else {
      this.setState(state => state.userinfo[name] = value)
    }
  }

  // 表单提交
  async dopost() {
    let userinfo = this.state.userinfo
    let data = await axios.post('/v1/api/users',userinfo)
    console.log(data)
  }


  render() {
    let { userinfo } = this.state
    return (
      <div className="container">
        <form>
          <div className="form-group">
            <label>账号：
              <input type="text" name="username" className="form-control" value={userinfo.username} onChange={this.setValue} />
            </label>
          </div>
          <div className="form-group">
            <label>密码：
              <input type="text" name="password" className="form-control" value={userinfo.password} onChange={this.setValue} />
            </label>
          </div>
          <div className="form-group">
            <div>性别：</div>
            <div className="radio">
              <label>
                <input type="radio" name="sex" value='男' checked={userinfo.sex === '男' ? true : false} onChange={this.setValue} />
              男
            </label>
            </div>
            <div className="radio">
              <label>
                <input type="radio" name="sex" value='女' checked={userinfo.sex === '女' ? true : false} onChange={this.setValue} />
              女
            </label>
            </div>
          </div>
          <div className="form-group">
            <div>爱好：</div>
            <div className="checkbox">
              <label>
                <input type="checkbox" name="hobbies" value="写代码" onChange={this.setValue} />写代码
              </label>
            </div>
            <div className="checkbox">
              <label>
                <input type="checkbox" name="hobbies" value="看书" onChange={this.setValue} />看书
              </label>
            </div>
            <div className="checkbox">
              <label>
                <input type="checkbox" name="hobbies" value="交友" onChange={this.setValue} />交友
              </label>
            </div>
          </div>
          <div className="form-group">
            <div>简介</div>
            <textarea className="form-control" name="intro" rows="3" value={userinfo.intro} onChange={this.setValue}></textarea>
          </div>

          <button type="button" onClick={this.dopost} className="btn btn-success">添加用户</button>
        </form>

      </div>
    )
  }
}