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 使用記錄六：與服務端交互（自建服務）