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

1. 參考資料

• 參考ant design pro
• 參考DvaJs

 

1 新建頁面

 

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

    

1.2 在 NewPage.js 填入以下代碼

// 必須引入
import React, { PureComponent } from "react";
//麪包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
// 引入阿里dva框架，否則不能和服務端交互,必須引入
import { connect } from "dva";
// 引入less
import styles from "./NewPage.less";

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

  render() {
    // 這裏也採用瞭解構賦值
    let { data } = this.props;
    return (
      <PageHeaderWrapper>
        <div>
          姓名：{data.userName}<br/>
          學號：{data.studentNo}<br/>
          年齡：{data.age}<br/>
          性別：{data.sex}<br/>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default NewPage;

1.3 在 NewPage.less 填入以下代碼

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

2 建立Models

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

   

2.2 填入如下代碼

// 導入接口文件，並採用解構的方式，
// 將 newPage.js 的文件裏面的 queryUser1 賦值給這裏的 queryUser1
import { queryUser1 } from "@/services/newPage";

export default {
  namespace: "newPage",

  //  State 是儲存數據的地方，收到 Action 之後，會更新數據。
  state: {
    data: {}
  },

  effects: {
    /**
     * @param payload 參數
     * @param call 執行異步函數調用接口
     * @param put 發出一個 Action，相似於 dispatch 將服務端返回的數據傳遞給上面的 state
     * @returns {IterableIterator<*>}
     */* fetch({ payload }, { call, put }) {
      // 訪問以前能夠作一些操做
      const response = yield call(queryUser1, payload);
      // 拿到數據以後能夠作一些操做
      yield put({
        // 這行對應下面的reducers處理函數名字
        type: "save",
        // 這是將最後的處理數據傳遞給下面的reducers函數
        payload: response
      });
    }

    // * fetch2({ payload }, { call, put }) {
    //   const response = yield call(queryCurrent);
    //   yield put({
    //     type: "saveCurrentUser",
    //     payload: response
    //   });
    // }
  },

  reducers: {
    /**
     *
     * @param state
     * @param action
     * @returns {{[p: string]: *}}
     */
    save(state, action) {
      console.log(action);
      return {
        ...state, // 語法糖
        data: action.payload // 上面與服務器交互完的數據賦值給 data, 這裏的 data 對應最上面 state 裏面的 data
      };
    }
  }
};

3 建立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", "111111111111");
        map.put("sex", "男");
        return map;
    }
}

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 使用記錄五：設置代理

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