React 本地调用后端接口实现数据交互

系统环境: mac +react+flask

问题说明,前端使用axios 本地调用python的数据接口. 在网上查询了各种资料,有很多解决办法,但是很遗憾,都没有解决我的问题.(可能是自己太小白,没有配置正确).现使用以下方案进行解决.

在flask端使用 “Flask-CORS”代理插件.(官网:https://flask-cors.readthedocs.io/en/latest/),安装成功后.编写代码:

后端flask 端执行的pyhon文件代码如下: 文件命名为 hello.py

import flask
from flask import request  #获取参数
from flask_cors import CORS



server = flask.Flask(__name__) #创建一个flask对象
CORS(server)
@server.route('/login', methods=['get','post'])
def login():
    username = request.values.get('username') #获取参数
    password = request.values.get('password')
    if username and password:
        #sql = 'select User from user where User="%s"'%username
        #data = conn_mysql(sql)     
            return '{msg:"无数据"}'


server.run(port=8000,debug=True)

编写完成后,在终端执行命令(必须先激活并进入到flask环境中,可参考flask环境搭建并激活): 执行以下命令启动服务:

python hello.py

服务启动后,在浏览器中输入以下网址:http://127.0.0.1:8000/login?username=xxx&password=123456,回车查看,将会看到以下界面:说明后端接口开发成功.

前端React 中app.js代码如下:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios' ;

import { Layout, Menu, Button,Breadcrumb, Icon } from 'antd';

class App extends Component {


    constructor(props) {
        super(props)
        this.state = {
         list:[] }
         this.handleClick=this.handleClick.bind(this)

        }

handleClick(){
  let  url="http://127.0.0.1:8000/login?username=xxx&password=123456"
axios.get(url)
  .then(function (response) {
    let data =response.data
    alert(data);
  })
  .catch(function (error) {
    console.log(error);
  });
}


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Button onClick={this.handleClick}>测试调用接口</Button>
      </div>
    );
  }
}

export default App;

编辑完成后,启动React 服务:看到以下界面

点击“测试调用接口按钮后”弹出如下页面,则说明调用成功:

React 本地调用后端接口实现数据交互

猜你喜欢