antd pro2.0 使用記錄六：與服務端交互（使用原有mock）

1 新建頁面

1.1 在 src -> pages ->『新建文件夾』NewPage -> 『新建js文件』NewPage.js 和 『新建less文件』NewPage.

1.2 在 NewPage.js 填入以下代碼

/*
* @Description: 新添加頁面，pages/NewPage/NewPage.js
*/
// 必須引入
import React, { PureComponent } from "react";
// 引入阿里dva框架，否則不能和服務端交互,必須引入
import { connect } from "dva";
import { List, Avatar, Card } from 'antd';
// 麪包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";

// 這個註解解釋起來有點麻煩，但要注意如下幾點
// 1.@connect必須放在export default class前面
// 2.這個不寫，你在這個頁面裏面獲取不到服務器返回給你的數據
// 3.採用解構賦值的方式，第一個參數 newPage 是命名空間，咱們數據就是從這裏拿到的
@connect(({ newPage, loading }) => ({
  data: newPage.data,  // 將data賦值給
  loading
}))

class NewPage extends PureComponent {
  // componentWillMount 渲染以前調用，通常處理 ajax 異步回來的數據，
  // 等下面 render 渲染的時候好綁定
  componentWillMount() {
    console.log("渲染以前調用");
    console.log("之調用一次");
  }

  // 每次調用 render 以前渲染
  componentDidMount(){
    // 分發器,用 dispatch 必定要寫 @connect 註解
    const { dispatch } = this.props;
    // 分發器調用 models 發起請求，具體流程是 dispatch => models => services
    dispatch({
      // newPage 命名空間，fetch 是該文件中的方法，對應 src/models/newPage.js，由於 newPage 的 namespace 的值 newPage
      type: "NewPage/fetch",  
      // 參數，通常採用json格式, 無參，不須要 payload,
    });
  }

  render() {
    const { data } = this.props;
    return (
      <PageHeaderWrapper
        title="新加頁面"
        content="新家頁面常見於系統用戶維護和系統功能受權。"
      >
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <Card>
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.logo} />}
                  title={<a href="https://ant.design">{item.title}</a>}
                  description={item.description}
                />
              </List.Item>
            </Card>
          )}
        />
      </PageHeaderWrapper>
    );
  }
}

export default UserManagement;

1.3 在 NewPage.less 填入以下代碼

//樣式文件默認使用 CSS Modules，若是須要，你能夠在樣式文件的頭部引入 antd 樣式變量文件：
//這樣能夠很方便地獲取 antd 樣式變量並在你的文件裏使用，有利於保持頁面的一致性，也方便實現定製主題。
@import "~antd/lib/style/themes/default.less";

2 建立Models

2.1 在 src -> models ->『新建js文件』NewPage.js 

 

 

  新建該文件，啥都不寫的時候，會看到頁面上出現以下報錯：

  

         不要慌，緣由以下：

每一個傳入 combineReducers 的 reducer 都需知足如下規則：

全部未匹配到的 action，必須把它接收到的第一個參數也就是那個 state 原封不動返回。

永遠不能返回 undefined。當過早 return 時很是容易犯這個錯誤，爲了不錯誤擴散，遇到這種狀況時 combineReducers 會拋異常。

若是傳入的 state 就是 undefined，必定要返回對應 reducer 的初始 state。根據上一條規則，初始 state 禁止使用 undefined。使用 ES6 的默認參數值語法來設置初始 state 很容易，但你也能夠手動檢查第一個參數是否爲 undefined。

雖然 combineReducers 自動幫你檢查 reducer 是否符合以上規則，但你也應該牢記，並儘可能遵照。

 

2.2 填入如下代碼

/*
* @Description:新添加頁面的 models， src/models/NewPage.js
*/
// 導入接口文件，並採用解構的方式，
// 聲明取用 services/api 服務的 queryProjectNotice 方法，用原有 mock 接口進行測試
import { queryProjectNotice } from '@/services/api';

export default {
  namespace: "newPage",
  //  State 是儲存數據的地方，收到 Action 之後，會更新數據。
  state: {
    data: []
  },
  effects: {
    /**
     * @param payload 參數，通常在
     * @param call 執行異步函數調用接口
     * @param put 發出一個 Action，相似於 dispatch 將服務端返回的數據傳遞給上面的state
     * @returns {IterableIterator<*>}
     */
    *fetch(_, { call, put }){
      // 訪問以前能夠作一些操做
      const response = yield call(queryProjectNotice);
      // 拿到數據以後能夠作一些操做
      yield put({
        // 這行對應下面的 reducers 處理函數名字
        type: "save",
        // 這是將最後的處理數據傳遞給下面的 reducers 函數
        payload: response
      })

      // * fetch2({ payload }, { call, put }) {
      //   const response = yield call(queryCurrent, payload);
      //   yield put({
      //     type: "saveCurrentUser",
      //     payload: response
      //   });
      // }
    }
  },
  reducers: {
    /**
     * @param state
     * @param action
     * @returns {{[ p: string ]: *}}
     */
    save(state, action){
      // 結果：將 state 中的數據有更新的，將更新後的結果返回，沒有更新的直接返回
      // action = yield put() 傳過來的對象
      console.log(action);
      return {
        ...state, // es6三點運算符合,對象解析
        data: action.payload // 上面與服務器交互完的數據賦值給data,這裏的data 對應最上面 state 裏面的 data
      };
    }
  }
}

3 建立services (使用已有的services可略過此步驟)

3.1 在 src -> services ->『新建js文件』NewPage.js

3.2 填入如下代碼

// json序列化的工具
import { stringify } from "qs";
// ant 本身封裝好的發送ajax請求的工具
import request from "@/utils/request";


// get請求 注意 ` 這個符號 不是這種 ’號
export async function queryUser1(params) {
  // stringify這個將json序列化 好比 {"a"：1，"b":2} 轉換成 a=1&b=2
  return request(`/server/api/test/user?${stringify(params)}`);
}

// post請求 注意 ` 這個符號 不是這種 ’號
export async function queryUser2(params) {
  return request(`/server/api//test/user?${params}`, {
    method: "POST"
  });
}

4 修改代理文件（使用已有接口，可略過此步驟）

4.1 因爲前面有介紹，這裏詳細介紹，只貼出代碼

     

4.2 具體代碼

  proxy: {
    // 代理以訪問 /server/api 開頭的全部路由
    '/server/api/': {
      // 代理的目標地址
      target: 'http://localhost:8080',
      // 開啓跨域訪問
      changeOrigin: true,
      // 發送請求的時候，去掉server
      pathRewrite: { '^/server': '' },
    },
  },

5 建立後端應用（使用已有接口，可略過此步驟）

5.1 我這裏採用springboot建立的一個簡單應用,因爲怕跑題建立步驟不在詳細，貼出關鍵代碼

5.2 具體代碼

package com.example.demo.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("api/test")
public class TestController {

    @RequestMapping("user")
    public Map<String, Object> user(String a, String b) {

        Map<String, Object> map = new HashMap<>();
        map.put("userName", "張三");
        map.put("age", 18);
        map.put("studentNo", "02563575178158");
        map.put("sex", "男");
        return map;
    }
}

// 其生成結果(即 返回的 map)：
{
 "userName": "張三",
 "age": 18,
 "studentNo": "02563575178158",
 "sex": "男",
}

6 訪問效果

7 大概流程

7.1 引用pro官網的話

1.UI 組件交互操做；
2.調用 model 的 effect；
3.調用統一管理的 service 請求函數；
4.使用封裝的 request.js 發送請求；
5.獲取服務端返回；
6.而後調用 reducer 改變 state；
7.更新 model。

7.2 個人理解

      

7.3 實際上是支付寶的 Dva 框架



上篇：antd pro2.0 使用記錄五：設置代理

自建服務：antd pro2.0 使用記錄六：與服務端交互（自建服務）