1、根目录下(与src平级) 新建生产环境变量文件 .env.development
ENV = 'development'
REACT_APP_URL = 'http://localhost:8080'
2、在utils文件夹下 创建url.js
export const BASE_URL = process.env.REACT_APP_URL;
3、在utils文件夹下 创建axios.js
import axios from 'axios';
export const axiosAPI = axios.create({
baseURL: process.env.REACT_APP_URL
});
4、在需要 发送axios请求 和 拼接图片URL 的页面
const Swipers = () => {
// 设置轮播图数据和加载状态state
const [swipers, setSwipers] = useState([]);
const [swipersLoaded, setSwipersLoaded] = useState(false);
// 第一次挂载组件时获取轮播图数据
useEffect(() => {
const getSwipers = async () => {
const swipersRes = await axios.get(`/home/swiper`);
// console.log(swipersRes)
setSwipers(swipersRes.data.body);
setSwipersLoaded(true);
};
getSwipers();
// 卸载组件时取消加载状态,防止内存溢出
return () => {
setSwipersLoaded(false);
};
}, []);
// 生成轮播图
const swiperItems = swipers.map((item) => (
<Swiper.Item key={item.id}>
<div>
<img
src={`${BASE_URL}${item.imgSrc}`}
alt=""
style={{ width: '100%' }}
/>
</div>
</Swiper.Item>
));
return (
// 判断是否有加载轮播图,如已加载则显示轮播图
swipersLoaded && <Swiper autoplay loop>{swiperItems}</Swiper>
);
}
5、npm start