update

package.json

@@ -3,8 +3,11 @@
   "version": "2.0.0",
   "private": true,
   "dependencies": {
+    "@umijs/hooks": "^1.9.3",
     "antd-mobile": "^2.3.3",
+    "axios": "^0.19.2",
     "customize-cra": "^1.0.0",
+    "http-proxy-middleware": "^1.0.4",
     "lib-flexible": "^0.3.2",
     "postcss-px2rem": "^0.3.0",
     "react": "^16.8.4",
@@ -29,5 +32,6 @@
     "react-app-rewire-postcss": "^3.0.2",
     "react-app-rewired": "^1.2.9",
     "style-loader": "^1.2.1"
-  }
+  },
+  "proxy": "http://124.93.101.8:9988/"
 }

src/layout/CommonLayout.jsx

-import React from 'react';
+import React, {  }  from 'react';
 import Footer from './Footer'
 import {withRouter} from 'react-router-dom'
 import './index.less'

src/pages/Login/index.jsx

+import React, { useEffect }  from 'react';
+import { useRequest } from "@umijs/hooks";
+import axios from 'axios';
+import {withRouter} from 'react-router-dom'
+// import { postRequest } from '../../utils/request';
+// import './index.less'
+
+const Login = (props) => {
+
+    // axios.post('/dgbg/mobileLogin.view?userName=2012012099&password=1&clientFlag=123456')
+    //     .then(function (response) {
+    //         // handle success
+    //         console.log(response);
+    //     })
+    //     .catch(function (error) {
+    //         // handle error
+    //         console.log(error);
+    //     })
+    //     .finally(function () {
+    //         // always executed
+    //     });
+
+    const { data, error, loading } = useRequest({
+        url: '/dgbg/mobileLogin.view?userName=2012012099&password=1&clientFlag=123456',
+        method: 'post'
+    });
+
+    return (
+        <div>
+            <div className="common-layout-content">
+                <div>
+                    {props.children}
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
+export default withRouter(Login) ;

src/pages/Work/Work.jsx

-import React, {Component} from 'react';
+import React, { useState } from 'react';
+import { useRequest } from "@umijs/hooks";
 import {ActivityIndicator, WhiteSpace, WingBlank} from "antd-mobile";
 import TopSearch from '../../components/TopSearch'
 import WorkCard from '../../components/WorkCard'
 
+const Work = () => {
 
-class Work extends Component {
-    state = {
-        addStatus: false,
-         loading: false
-    };
-    commonEdit = () => {
-        const {addStatus} = this.state;
-        this.setState({addStatus: !addStatus})
+    const [addStatus, setAddStatus] = useState(false);
+
+    const { data, error, loading } = useRequest({
+        url: '/dgbg/mobileGetOperates.view?userName=2012012099&clientFlag=123456',
+        method: 'post'
+    });
+
+    const commonEdit = () => {
+        setAddStatus(!addStatus);
     };
-    workSearch = (val) => {
+    
+    const workSearch = (val) => {
         console.log(val)
     };
-    itemAdd = (id, arr, arr2) => {
+    
+    const itemAdd = (id, arr, arr2) => {
         // const item = arr2.filter(item => item.id === id);
         // arr.splice(arr.length - 1, 0, item[0]);
     };
-    itemSlice = (id, arr, arr2) => {
+    
+    const itemSlice = (id, arr, arr2) => {
         // const index = arr.findIndex(item => item.id == id);
         // index > -1 && arr.splice(index, 1);
     };
-    render() {
-        const {addStatus, loading} = this.state;
 
     //测试数据
     const data222 = Array.from(new Array(7)).map((_val, i) => ({
@@ -39,6 +43,9 @@ class Work extends Component {
         text: `name${i}`,
     }));
 
+
+    console.log(data);
+
     return (
         <WingBlank>
             <ActivityIndicator
@@ -47,28 +54,28 @@ class Work extends Component {
                 animating={loading}
             />
             <WhiteSpace/>
-                <TopSearch onSearch={this.workSearch}/>
+            <TopSearch onSearch={ workSearch }/>
             <WhiteSpace/>
             <WorkCard
                 type="edit"
                 title="常用板块"
-                    addCommon={this.commonEdit}
+                addCommon={ commonEdit }
                 addStatus={addStatus}
                 data={data222}
-                    iconAction={this.itemSlice}
+                iconAction={ itemSlice }
             />
             <WhiteSpace/>
             <WorkCard
                 title="事物管理"
-                    addCommon={this.commonEdit}
+                addCommon={ commonEdit }
                 addStatus={addStatus}
-                    data={data22222}
-                    iconAction={this.itemAdd}
+                data={data && data.operate.map(item => ({ icon: '', text: item.NODENAME })) || []}
+                iconAction={ itemAdd }
             />
         </WingBlank>
     );
-    }
 }
 
+
 export default Work;
 

src/router.js

@@ -9,6 +9,8 @@ import Notice from './pages/Notice/Notice'
 import AddressList from './pages/AddressList/AddressList';
 import Process from './pages/EventProcessing/Process'
 
+import Login from './pages/Login'
+
 import NoFound from './pages/NoFound'
 
 
@@ -17,10 +19,11 @@ const ReactRouter = () => {
     return (
         <Router>
             <Switch>
+                <Route path="/login" component={Login} />
                 <Route exact path="/" render={() => <Redirect to="/bord/backlog" />} />
                 <Route path="/bord" render={ () =>
                     <CommonLayout>
-                        <Route path="/bord/backlog" component={Backlog}/>
+                        <Route path="/bord/backlog" component={Backlog} />
                         <Route path="/bord/work" component={Work}/>
                         <Route path="/bord/addressList" component={AddressList}/>
                         <Route path="/bord/notice" component={Notice}/>

src/setupProxy.js

+// const proxy = require("http-proxy-middleware");
+ 
+// module.exports = function(app) {
+//   app.use(
+//     proxy("/api/**", {
+//       target: "http://120.79.76.162:10081/",
+//       changeOrigin: true
+//     })
+//   );
+//   app.use(
+//     proxy("/fans/**", {
+//       target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",
+//       changeOrigin: true
+//     })
+//   );
+// };
+
+
+
+
+
+const { createProxyMiddleware } = require('http-proxy-middleware');
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://124.93.101.8:9988/',
+      changeOrigin: true,
+    })
+  );
+};
\ No newline at end of file

src/utils/instance.js

+import axios from 'axios';
+import { parse, stringify } from 'qs';
+
+const instance = axios.create();
+const token = 'bearer ' + localStorage.getItem("token");
+
+let defaultHeaders = {
+    token,
+  };
+  
+  const codeMessage = {
+    200: '服务器成功返回请求的数据。',
+    201: '新建或修改数据成功。',
+    202: '一个请求已经进入后台排队（异步任务）。',
+    204: '删除数据成功。',
+    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+    401: '用户没有权限（用户名或密码错误）。',
+    403: '用户得到授权，但是访问是被禁止的。',
+    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+    406: '请求的格式不可得。',
+    410: '请求的资源被永久删除，且不会再得到的。',
+    422: '当创建一个对象时，发生一个验证错误。',
+    500: '服务器发生错误，请检查服务器。',
+    502: '网关错误。',
+    503: '服务不可用，服务器暂时过载或维护。',
+    504: '网关超时。',
+  };
+
+export const createAPI = (baseURL) => {
+    return (conf = {}) => {
+        let opts = conf.opts || {};
+        let body = conf.body || {};
+        let urlParams = '';
+
+
+        let headers = { ...defaultHeaders, ...opts.headers };
+        if (conf.queryType === 'query') {
+            urlParams = conf.body ? "?" + stringify(conf.body) : '';
+        }
+
+        return instance(Object.assign({}, {
+            url: conf.url + urlParams,
+            baseURL: baseURL,
+            method: conf.method,
+            data: body,
+            headers,
+        }, conf.opts))
+            .then(function (response) {
+                if (!response || response.data === false) { console.log('response出错！', response); return false; }
+                // 保存到本地
+                if (response && response.data && response.data.access_token) {
+                    defaultHeaders = {
+                        token: 'bearer ' + response.data.access_token,
+                    }
+                    localStorage.setItem("token", response.data.access_token);
+                }
+
+                if (response.data && response.data.success || response.data && (response.data.success === undefined && response.data.error === undefined)) {
+                    return response.data;
+                } else {
+                    message.error(response.data && (response.data.mesg || response.data.message) || '操作出现错误！')
+                    return response.data;
+                }
+
+            })
+            .catch(error => {
+                if (error.response) {
+                    const { status, statusText, url } = error.response;
+                    const errortext = codeMessage[status] || statusText;
+                    // notification.error({
+                    //   key: status,
+                    //   message: `请求错误 ${status}`,
+                    //   description: errortext,
+                    // });
+                    if (status === 401) {
+                        // @HACK
+                        /* eslint-disable no-underscore-dangle */
+
+                        history.push('/user/login');
+                        message.error('登录过期或用户名密码错误！')
+                        return false;
+                    } else if (status === 400 || status > 401) {
+                        history.push(`/exception/${status}`);
+                    }
+                }
+                return false;
+            });
+    };
+}
+
+export const convertRESTAPI = (url, opts) => {
+    if (!opts) return url;
+
+    const pathKeys = Object.keys(opts);
+
+    pathKeys.forEach((key) => {
+        const r = new RegExp('(:' + key + '|{' + key + '})', 'g');
+        url = url.replace(r, opts[key]);
+    });
+    return url;
+}
+
+

src/utils/request.js

+import { createAPI } from './instance';
+
+export const apiUrl = 'http://124.93.101.8:9988/dgbg/';
+// mobileLogin.view
+// 测试账户：2012012099
+// 密码：1
+
+
+
+const instance = createAPI(apiUrl);
+
+export function postRequest(url, params = {}) {
+    return instance({
+        method: 'post',
+        url: url,
+        opts: params,
+    });
+}
\ No newline at end of file