import Harold.澂冰

@Copyright("Harold Chengbing")

新建文件夹，然后使用

npx create-react-app appName

use react icons:

npm i react-icons

use react router:

npm i react-router-dom

启动NPM Server:

npm start

build the project:

npm run build

serve the build folder at port 8000:

serve -s build -p 8000

use sudo backend:

npm i json-server

启动:

npm run server

VS Code: ES7 React

rafce

安装axios:

npm install axios

安装qs来实现对象封装：

npm i qs

axios使用例:

useEffect(() => {
        const getRegion = async () => {
            const res = 
            await axios.get(`http://localhost:8082/region/queryAllRegion`, {
                params:{
                    page: page,
                    rowsPerPage: rowsPerPage
            }
         });
         setRow(res.data.t);
         setTotalPage(res.data.info);
        };
    
        getRegion()
      }, [page, rowsPerPage])

axios post添加使用例

const addNewCountryFunction = (e) => {
        e.preventDefault();
        if(!addCountryName || !addCountryShortname) {
            alert('Please add all fields!')
            return
        }
        axios.post(`http://localhost:8082/region/addNewRegion`, qs.stringify({
                regionName: addCountryName,
                regionShortname: addCountryShortname
            })).then(function (response) { 
                if(response.data === 1)
                {
                    setSuccessInsert(true);
                    setTimeout( () => {setSuccessInsert(false)}, 5000);
                    setAddOpen(false);
                }
            });

        
         
        setAddCountryName('')
        setAddCountryShortname('')
    }