设为首页 加入收藏

TOP

React搭建项目(全家桶)(二)
2019-09-17 19:09:48 】 浏览:46
Tags:React 搭建 项目 全家
((config)
=> { // 在这里配置请求 config
 return config; }, (err) => { console.error('请求发生了错误', err); return Promise.reject(err); }); /* 响应拦截器 */ service.interceptors.response.use((res) => { // 在这里配置响应拦截器 return res; }, (err) => { console.error('响应发生了错误', err); return Promise.reject(err); }); export default service;

配置API调用方法:

// 引入 axios 配置
import service from './service';
import qs from "qs";

// post 请求
export function apiPost(data = {}) {
  return service({
    url: "接口url",
    method: 'post',
    data: qs.stringify(data),
  });
}

// get 请求
export function apiGet(params = {}) {
  return service({
    url: "接口url",
    method: 'get',
    params: params,
  });
}

 

  • 配置跨域: Docs


    前面配置中 npm run eject 已经将配置暴露出来了
    npm install http-proxy-middleware --save
    或
    cnpm i http-proxy-middleware -S
    src 下新建 setupProxy.js
    const proxy = require('http-proxy-middleware');
    
    module.exports = function(app) {
      app.use(proxy('/api', { target: 'http://localhost:5000/' }));
    };

     

  • 安装配置路由 React-router:API Docs
    npm install react-router-dom --save
    或
    cnpm install react-router-dom --save
    cnpm i react-router-dom -S

     单独新建一个 router.js:或者在入口文件 index.js 中写路由视图)

    import React from 'react';
    import { BrowserRouter as Router, Route } from 'react-router-dom';
    import YourComponent from 'your-component-path';
    
    export default function () {
      return (
        <Router>
          <Route path='/' component={YourComponent} />
        </Router>
      );
    }

    然后引入使用这个router.js

    • 持续更新中...

     

    首页 上一页 1 2 下一页 尾页 2/2/2
    】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
    上一篇Word Cloud (词云) - JavaScript 下一篇SpringMVC+Jquery实现Ajax

    最新文章

    热门文章

    Hot 文章

    Python

    C 语言

    C++基础

    大数据基础

    linux编程基础

    C/C++面试题目