环境变量

.babelrc

@@ -1,33 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          // 大于相关浏览器版本无需用到 preset-env
-          "edge": 17,
-          "firefox": 60,
-          "chrome": 49,
-          "safari": 11
-        },
-        "corejs": "2", // <---
-        // 根据代码逻辑中用到的 ES6+语法进行方法的导入，而不是全部导入
-        "useBuiltIns": "usage"
-      }
-    ],
-    "@babel/preset-react",
-    "@babel/env",
-    "@babel/typescript",
-    "@babel/react"
-  ],
-  "plugins": [
-    [
-      "import",
-      {
-        "libraryName": "antd",
-        "libraryDirectory": "es",
-        "style": "css" // `style: true` 会加载 less 文件
-      }
-    ]
-  ]
-}

.browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-chrome 49
-ie 9
-

.env.development

@@ -0,0 +1,4 @@
+REACT_APP_CONFIG_BASE_URL=/api
+REACT_APP_CONFIG_BASE_ROUTER=/
+REACT_APP_CONFIG_SSO_URL=http://192.168.1.70/open/web-sso/multi-login?redirect_uri=http%3A%2F%2F192.168.1.70%3A20113%2Flogin%2FmanageLogin
+REACT_APP_CONFIG_PRINT_URL=http://192.168.5.36:8051/mes-print-service

.env.production

@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+REACT_APP_CONFIG_BASE_URL=/mes-api
+REACT_APP_CONFIG_BASE_ROUTER=/mes-web/
+REACT_APP_CONFIG_SSO_URL=https://tengnat.yiyuntong.net:40051/open/web-sso/multi-login?redirect_uri=https%3a%2f%2ftengnat.yiyuntong.net%3a40051%2fmes-login%2flogin%2fmanageLogin

.env.testonline

@@ -0,0 +1,5 @@
+NODE_ENV = 'production'
+REACT_APP_CONFIG_BASE_URL=/mes-api
+REACT_APP_CONFIG_BASE_ROUTER=/mes-web/
+REACT_APP_CONFIG_SSO_URL=https://tengnat.yiyuntong.net:40051/open/web-sso/multi-login?redirect_uri=https%3a%2f%2ftengnat.yiyuntong.net%3a40051%2fmes-login%2flogin%2fmanageLogin
+REACT_APP_CONFIG_PRINT_URL=https://tengnat.yiyuntong.net:40051/mes-print-service

README.md

@@ -4,7 +4,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
-### `npm start`
+### `yarn start`
 
 Runs the app in the development mode.<br />
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -12,12 +12,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br />
 You will also see any lint errors in the console.
 
-### `npm test`
+### `yarn test`
 
 Launches the test runner in the interactive watch mode.<br />
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
+### `yarn build`
 
 Builds the app for production to the `build` folder.<br />
 It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -27,7 +27,7 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `npm run eject`
+### `yarn eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 

antd-demo-ts/.gitignore

@@ -1,23 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

config-overrides.js

@@ -0,0 +1,9 @@
+const { override, fixBabelImports } = require('customize-cra');
+
+module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: 'css',
+  })
+);

package.json

@@ -4,21 +4,27 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^12.12.38",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "antd": "^4.2.0",
+    "axios": "^0.19.2",
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^0.9.1",
+    "http-proxy-middleware": "^1.0.3",
     "react": "^16.13.1",
+    "react-app-rewired": "^2.1.6",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
-    "typescript": "^3.7.5"
+    "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "cross-env PORT=8080 REACT_APP_ENV=development react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -28,6 +34,8 @@
     "production": [
       ">0.2%",
       "not dead",
+      "chrome 49",
+      "ie 9",
       "not op_mini all"
     ],
     "development": [
@@ -35,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.2"
   }
 }

src/app.tsx

@@ -1,10 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Affix, Button } from 'antd';
+import axios from './utils/axios';
+
 import logo from './logo.svg';
 import './App.css';
+const Demo: React.FC = () => {
+  const [top, setTop] = useState(10);
+  const [bottom, setBottom] = useState(10);
+
+  return (
+    <div>
+      <Affix offsetTop={top}>
+        <Button type="primary" onClick={() => setTop(top + 10)}>
+          Affix top
+        </Button>
+      </Affix>
+      <br />
+      <Affix offsetBottom={bottom}>
+        <Button type="primary" onClick={() => setBottom(bottom + 10)}>
+          Affix bottom
+        </Button>
+      </Affix>
+    </div>
+  );
+};
 
 function App() {
+  const proxyRequest = () => {
+    axios({
+      method: 'get',
+      url: '/mesProductType/list',
+      data: {
+        keyword: '',
+        page: 1,
+        size: 50,
+      },
+    }).then(
+      (resp) => {
+        console.log(resp);
+      },
+      (err) => {
+        console.log(err);
+      }
+    );
+  };
   return (
     <div className="App">
+      <Button type="primary" onClick={proxyRequest}>
+        proxyRequest
+      </Button>
+      <Demo />
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
@@ -14,8 +59,7 @@ function App() {
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
-          rel="noopener noreferrer"
-        >
+          rel="noopener noreferrer">
           Learn React
         </a>
       </header>

src/setupProxy.js

@@ -0,0 +1,33 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+  app.use(
+    createProxyMiddleware('/api', {
+      // target: 'http://192.168.5.30:9000',  // 向阳
+      // target: 'http://192.168.3.25:9000',  // 向阳 --
+      // target: 'http://192.168.5.36:9000', // 于涛
+      // target: 'http://192.168.5.35:8031', // 卫林
+      // target: 'http://192.168.3.30:9000', // 殷天晟
+      // target:'http://barcode.yiyuntong.com:8031',
+      // target:'http://172.17.0.101:8031',
+      target: 'http://192.168.1.70/mes-api',
+      // target:'http://192.168.1.70/mes-login',
+      // target:'http://192.168.5.6:8031',
+      // target:'http://192.168.5.6:8031',
+      // target: 'http://192.168.6.47:8031', // 达哥
+      changeOrigin: true, // 是否跨域
+      pathRewrite: {
+        '^/api': '', // 需要rewrite的,
+      },
+    })
+  );
+  app.use(
+    createProxyMiddleware('mes-api', {
+      target: 'https://tengnat.yiyuntong.net:40051/mes-api',
+      changeOrigin: true, // 是否跨域
+      pathRewrite: {
+        '^/mes-api': '', // 需要rewrite的,
+      },
+    })
+  );
+};

src/utils/axios.tsx

@@ -0,0 +1,101 @@
+/*eslint-disable*/
+import Axios from 'axios';
+import { message } from 'antd';
+import envConfig from './env.config';
+// import store from '../store/index';
+// import Router from '../router/index';
+
+const axiosInstance = Axios.create({
+  baseURL: envConfig.baseUrl,
+  timeout: 500000000,
+});
+
+// axiosInstance.defaults.retry = 4;
+// axiosInstance.defaults.retryDelay = 1000;
+
+axiosInstance.interceptors.request.use(
+  (config) => {
+    // const accessToken = store.state.login.requestHeader.mestoken;
+    const accessToken = localStorage.getItem('mestoken')
+      ? { mestoken: localStorage.getItem('mestoken') }
+      : null;
+    if (accessToken) {
+      config.headers[envConfig.requestToken] = accessToken;
+    }
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
+
+axiosInstance.interceptors.response.use(
+  (response) => {
+    if (response.data.code === 0) {
+      return response.data;
+    }
+    if (response.data.code === envConfig.noAllowCode) {
+      // 没有权限 跳转到登录页
+      // Router.push({ path: '/login' });
+    } else {
+      message.error(response.data.msg);
+      return Promise.reject(response.data);
+    }
+  },
+  //  error => {
+  //   message.error(error.response.data.message)
+  //   return Promise.reject(error)
+  // }
+  (error) => {
+    let code = 0;
+    try {
+      code = error.response.status;
+    } catch (e) {
+      if (!error.response) {
+        // 断网了
+        message.error({
+          title: '您的网络有问题，请稍后再试',
+          duration: 2500,
+        });
+        return Promise.reject(error);
+      }
+      if (error.toString().indexOf('Error: timeout') !== -1) {
+        message.error({
+          title: '网络请求超时',
+          duration: 2500,
+        });
+        return Promise.reject(error);
+      }
+      if (error.toString().indexOf('Error: Network Error') !== -1) {
+        message.error({
+          title: '网络请求错误',
+          duration: 2500,
+        });
+        return Promise.reject(error);
+      }
+    }
+
+    if (code === 504) {
+      message.error({
+        title: '服务器异常',
+        duration: 2500,
+      });
+      return Promise.reject(error);
+    }
+
+    if (code === 401) {
+      message.error('登录状态已过期');
+      // Router.push({ path: '/login' });
+    } else if (code === 403) {
+      message.error('拒绝访问');
+    } else {
+      const errorMsg = error.response.data.message;
+      if (errorMsg !== undefined) {
+        message.error(`${errorMsg}`);
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;

src/utils/env.config.js

@@ -0,0 +1,15 @@
+const config = {
+  pageSize: 10,
+  successCode: 10000,
+  failureCode: 10001,
+  importCode: 10005,
+  noAllowCode: 401,
+  storageTokenName: 'mestoken',
+  requestToken: 'X-Auth-Token',
+  baseUrl: process.env.VUE_APP_CONFIG_BASE_URL,
+  baseRouter: process.env.VUE_APP_CONFIG_BASE_ROUTER,
+  ssoUrl: process.env.VUE_APP_CONFIG_SSO_URL,
+  printUrl: process.env.VUE_APP_CONFIG_PRINT_URL,
+};
+
+export default config;

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "setupProxy.js"]
 }