antd pro2.0 使用记录六：与服务端交互（自建服务）

2020-01-10 11:01:24 阅读：334 来源： 互联网

标签：newPage NewPage pro2.0 js antd put import data 服务端

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）

标签：newPage,NewPage,pro2.0,js,antd,put,import,data,服务端
来源： https://www.cnblogs.com/ostrich-sunshine/p/10948247.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9