React+echarts+sass/less+router+axios项目创建

React项目创建

一、创建项目

#利用React脚手架创建项目
npx create-react-app godson-react

二、导入依赖

#导入AntD
npm add antd
#导入Echarts
npm install echarts-for-react --save
#导入less
npm install less less-loader --save-dev
#导入axios
npm install axios
#导入sass
npm install sass --save-dev
#导入react-bmapgl用于显示地图
npm install react-bmapgl --save
#导入router
npm install react-router-dom

三、配置

1、less配置

/*package.json*/
"less": {
  "javascriptEnabled": true
}

先在控制台执行：

npm run eject

在多出的config文件夹中的webpack.config.js中设置

/*
找到sassRegex，
在其上方写
*/
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
/*
找到
{
	test: sassModuleRegex,
	use: getStyleLoaders(
		{
			importLoaders: 3,
			sourceMap: isEnvProduction
				? shouldUseSourceMap
				: isEnvDevelopment,
			modules: {
				mode: 'local',
				getLocalIdent: getCSSModuleLocalIdent,
			},
		},
		'sass-loader'
	),
},
在其下方写
*/
{
	test: lessRegex,
	use: [
		'style-loader',
		'css-loader',
		'less-loader'
	]
},

2、axios封装

/*request.js*/
// 引入axios
import axios from "axios";

/**
 * 配置axios
 * @type {axios.AxiosInstance}
 */
const server = axios.create({
    baseURL: 'https://45.125.46.201:16698',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
    },
});

/**
 * 封装无token的get请求
 * @param url
 * @returns {Promise<unknown>}
 */
const get = (url) => {
    return new Promise((resolve, reject) => {
        server.get(url).then((r) => {
            resolve(r)
        }).catch((e) => {
            reject(e)
        });
    });
};

/**
 * 封装含有token的get请求
 * @param url
 * @param token
 * @returns {Promise<unknown>}
 */
const getToken = (url, token) => {
    return new Promise((resolve, reject) => {
        server.get(url, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

/**
 * 封装post请求
 * @param url
 * @param token
 * @param data
 * @returns {Promise<unknown>}
 */
const post = (url, token, data) => {
    return new Promise((resolve, reject) => {
        server.post(url, data, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

/**
 * 封装login请求
 * @param url
 * @param data
 * @returns {Promise<unknown>}
 */
const login = (url, data) => {
    return new Promise((resolve, reject) => {
        server.post(url, data).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

/**
 * 封装put请求
 * @param url
 * @param token
 * @param data
 * @returns {Promise<unknown>}
 */
const put = (url, token, data) => {
    return new Promise((resolve, reject) => {
        server.put(url, data, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};


/**
 * 封装delete请求
 * @param url
 * @param token
 * @returns {Promise<unknown>}
 */
const del = (url, token) => {
    return new Promise((resolve, reject) => {
        server.delete(url, {
            headers: {Authorization: token}
        }).then((r) => {
            resolve(r);
        }).catch((e) => {
            reject(e);
        });
    });
};

// 将请求通过解构的方式抛出
export {get, getToken, post, login, put, del};

/*api.js*/
import {get, post, login, put, del} from "./request";

export const apiLogin = (username, pwd) => {
    return new Promise((resolve,reject)=>{
        login('/prod-api/api/login', {"username": username, "password": pwd}).then((r) => {
            // console.log(r);
            resolve(r.data);
        }).catch((e) => {
            // console.log(e);
            reject(e.data);
        })
    })
}

3、百度地图引入文件

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak密钥"></script>

三、使用

1、AntD的使用

/*index.js*/
import 'antd/dist/reset.css';

/*component.js*/
import { Button } from 'antd';
const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

2、Echarts的使用

1、基本使用

import ReactEcharts from 'echarts-for-react';
const Charts = () =>{
    const option = {
  		title: {
    	text: 'ECharts 入门示例'
  	},
  	tooltip: {},
  	xAxis: {
    	data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  	},
  	yAxis: {},
  	series: [{
    	name: '销量',
    	type: 'bar',
    	data: [5, 20, 36, 10, 10, 20, 5]
  	}]
	};
	return (
      <ReactEcharts option={option} />
    );
}

2、中国地图使用

在public的static文件夹中下载下方文件放入其中

https://wwuy.lanzoub.com/idwDO0x0aarg

然后再使用

/*组件中*/
let map1 = {
        title: {
            text: '💫 省份选择区域',
            left: 20,
            top: 56,
            textStyle: {
                color: '#fff',
            }
        },
        tooltip: {
            triggerOn: 'click',
            enterAble: true,
            formatter(item) {
                return '<a href="#/provincespage/' + item.name + '" style="color:#000">' + item.name + '</a>'
            }
        },
        series: [
            {
                type: 'map',
                map: 'map1',
                selectedMode: 'single',
                regionHeight: 7,
                boxDepth: 70,
            },
        ],
    };

    axios.get("http://localhost:3000/static/map/china.json").then((r) => {
        echarts.registerMap('map1', r.data, {});
        setIsLoading(true);
    })
return{
    {isLoading ? <Charts name={"map1"} option={map1}/> : <div>Loading...</div>}
}

3、less和sass的使用

.father{
    width:100px;
    height:100px;
    .son{
        width:100%;
        height:100%;
    }
}

4、axios的使用

apiLogin("test01","123456").then((r)=>{
      console.log(r);
      const token = r.token;
    })