国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Ant Desing Pro2.0(四)與服務端交互

zhunjiee / 521人閱讀

摘要:創建在新建文件填入以下代碼導入接口文件,并采用解構的方式,將的文件里面的賦值給這里的是儲存數據的地方,收到以后,會更新數據。我的理解其實是支付寶的框架傳送門

1.參考資料

參考ant design pro

參考DvaJs

2.目錄地址

Ant Desing Pro2.0(一)項目初始化

Ant Desing Pro2.0(二)新增頁面

Ant Desing Pro2.0(三)設置代理

Ant Desing Pro2.0(四)與服務端交互

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 (
      
        
姓名:{data.userName}
學號:{data.studentNo}
年齡:{data.age}
性別:{data.sex}
); } } 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, // es6三點運算符合,有點模糊解釋不清楚
        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 user(String a, String b) {

        Map 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框架

dva傳送門

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102502.html

相關文章

  • Ant Desing Pro2.0(三)設置代理

    摘要:參考資料參考參考目錄地址一項目初始化二新增頁面三設置代理四與服務端交互修改文件在將行和行的注釋打開代理前綴,請求格式資源地址將所有以開頭的所有路由都代理到目標地址代理目標地址是否跨域訪問最終請求時候忽略掉舉個例子吧有個接口請求之后會返回 1.參考資料 參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant D...

    Lycheeee 評論0 收藏0
  • Ant Desing Pro2.0(一)項目初始化

    摘要:寫在前面最近做畢設的時候發現網絡上關于版本的基礎入門資料太少,我一個后端開發人員當時入門也是跌跌撞撞,現在我將我所學的分享出來,避免大家少走一些彎路。 1.寫在前面 最近做畢設的時候發現網絡上關于ant designpro2.0版本的基礎入門資料太少,我一個后端開發人員當時入門也是跌跌撞撞,現在我將我所學的分享出來,避免大家少走一些彎路。 2.開發環境 你的本地環境需要安裝 node ...

    BigNerdCoding 評論0 收藏0
  • Ant Desing Pro2.0(二)新增頁面

    摘要:配置路由在行新增如下內容這行是新增的內容做完如上步驟其實功能是完成了,但是版本中加入了菜單國際化中。所以你剛剛的頁面如下這不是我們想要的效果,讓我在進行修改修改在行新增如下內容新增菜單新增頁面查看效果運行效果讓我做一道連線題把 1.參考資料 參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant Desing...

    vboy1010 評論0 收藏0
  • ant design pro 新增頁面

    摘要:新增頁面參考資料由于版本升級到所以重新做了一個分享,下面是目錄地址一項目初始化二新增頁面三設置代理四與服務端交互在下面的任意一個文件夾下面創建一個頁面填寫如下內容內容這是新頁面內容將剛剛寫的組件注冊到路由里面,修改文件內容內容新頁面添加后的 ant design pro 新增頁面 ps:參考資料 1.ant design pro 2.由于pro版本升級到2.0,所以重新做了一個分享...

    asoren 評論0 收藏0
  • Ant Design Pro用小烏龜版的git提交時報錯

    摘要:提交報錯描述剛下載好的修改后,準備提交發現報如下錯誤,原因是引用做和腳本做和的語法糾正。 1.Ant Desing Pro git提交報錯 1.1. 描述:剛下載好的ant design pro修改后,準備提交發現報如下錯誤, 1.2. 原因:是Ant Desing Pro 引用eslint做和stylelintrc腳本做js和css的語法糾正。而在每次git提交的時候觸發這個腳本...

    source 評論0 收藏0

發表評論

0條評論

zhunjiee

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<