React js与springboot配合使用（基于ReactBootstrap）

前端app.js代码，

import React, {Component} from 'react';
import '../styles/App.css';
import '../config/config';
import * as bs from "react-bootstrap";
import axios from 'axios';

class App extends Component {

    url = global.constants.url
    state = {
        price: 1000,
        count: 8,
        calWay: "No Discount",
        total: 0,
        show:false
    }

    handleChange = event => {
        console.log(event.target.name)
        this.setState({[event.target.name]: event.target.value})
    }

    handleClear = event => {
        axios.get(this.url + "/clear"
        ).then(
            res => {
                this.setState({
                    total: res.data,
                    show:true})
            }
        )
    }


    handleSubmit = event => {
        event.preventDefault();
        console.log("submit")

        console.log(this.state.price)
        console.log(this.state.count)
        console.log(this.state.calWay)

        const good = {
            price: this.state.price,
            count: this.state.count,
            calWay: this.state.calWay
        };


        var data = "No response"
        axios.post(this.url + "/cal", good
        ).then(
            res => {
                data = res.data
                this.setState({total: data})
            }
        )

    }


    handleHide = event => {
        this.setState({ show: false });
    }

    handleSelect = (eventKey, event) => {
        this.setState({calWay: event.target.text})
    }

    render() {


        const handleShow = () => this.setState({ show: true });
        return (
            

                
                    Price:
                    
                    Count:
                    
                    Discount type:

                    
                        
                            {this.state.calWay}
                        

                        
                            No Discount
                            75% discount
                            500-200 discount
                            300-100 discount
                        
                    


                    

                    
                        Submit
                    
                      
                    
                        Clear
                    
                    

                    Total:{this.state.total}

                    
                        Clear data alert
                        

                            Reset total to: {this.state.total}
                        
                        

                        

                            
                                OK
                            
                        
                    

                
            
        );
    }
}

export default App;

前端config.js代码

global.constants = {
    url:'http://127.0.0.1:8080'
}

后端springboot代码，

package com.oracle.test.designpatternserver.controllers;

import com.oracle.test.designpatternserver.beans.Good;
import org.springframework.web.bind.annotation.*;


@RestController
@CrossOrigin(origins = "*")
public class GoodController {

    private  float result=0.0f;

    @PostMapping(value = "/cal")
    public String getResult(@RequestBody Good good) {
        result = result + good.getPrice()*good.getCount();
        System.out.println(good.getCalWay());
        System.out.println(result);
        return result+"";
    }


    @GetMapping(value = "clear")
    public String clearResult() {
        this.result = 0.0f;
        return result+"";
    }

}

程序运行结果，

Screen Shot 2018-11-11 at 3.18.46 PM.png