一个简单的前后端分离案例

一、IDEA 建一个spring boot 工程，只要spring web依赖即可

二、写一个测试接口

package com.example.demo;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
public class TestController {

    @CrossOrigin //允许跨域请求
    @GetMapping("test")
    public Map test(String word){
        Map<String,String> resData = new HashMap<>();
        resData.put("msg",word);
        return resData;
    }
}

三、webstorm 新建一个react app

alt+F121进入控制台，装axios
npm install --save axios

写一个组件main.jsx

/* 用 户 登陆 的 路 由 组 件 */
import React, {Component} from 'react'
import axios from 'axios'

export default class Main extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            msg: 'original sentence',
        };
    }

    render() {
        return (
            <div>
                <button onClick = {() => {
                    let params = {
                        params:{  //这个是发送给后端的参数，需要有params作为key值
                            word:'Hello,World!',
                        }
                    }
                    axios.get('http://localhost:8080/test',params).then((response)=>{
                            console.log(response.data);
                            let {msg} = response.data;
                            console.log(msg)
                            this.setState({msg: response.data.msg})
                        }).catch((error)=>{
                            console.log(error)
                        })
                    // this.setState({msg: 'button onclick'})
                }}
                >调用接口</button>
                {this.state.msg}
            </div>
        );
    }
}

index.js

/* 入 口 JS */
import React from 'react'
import ReactDOM from 'react-dom'

import Main from './containers/main/main'

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

四、演示效果

当点击按钮时触发接口调用改变状态机的值