react前后端对接

时间：2021-06-19 17:54:44

全局配置

1 安装axios包 yarn add axios
2 src文件目录下新建文件夹api
3 api 下新建statecode.js
export default  {
    "-1": "系统繁忙",
    "0": "请求成功",
    "1001": "超级管理员只能有一个",
    "1002": "用户已存在",
    "1003": "两次密码不一致",
    "1004": "手机号错误",
    "1005": "邮箱格式错误",
}
3 api下新建config.js 
module.exports = {
    base: "http://demo.port.net:8000"
};
4 api下新建index.js 
import codes from './statecode.js';
import login from './login.js';
import list from './list.js';

export default {
    stateCode: codes,
    ...login,
    ...list,
}
5 api下新建login.js,list.js等每个页面的接口文件
import axios from 'axios';
import { base } from "./config.js";
import cookie from 'react-cookies'

export default {
    //创建密码
    async codeCreate(params) {
        return axios.post(`${base}/api/wechat/code/${localStorage.getItem('listid')}`, params, {
        headers: {
            "token": cookie.load('usertoken')
        }
        }).then((res) => {
            return res.data;
        }).catch((error)=>{
            message.error('服务器出错')
        });
    },
}

6 在相关页面对接口

读懂接口文档


/api/wechat/qrcode/:officialId/:qrcodeId  带冒号，动态数据：`${base}/api/wechat/qrcode/${localStorage.getItem("listid")}/${params.id}`  //这列的:qrcodeId需要使用${params.id}动态写入，params即数组
/api/wechat/statistics/:officialId/qrcode  不带冒号，静态的：`${base}/api/wechat/statistics/${localStorage.getItem("listid")}/qrcode`  //这里的qrcode直接写上去就可以

参数问题

  request<T = any>(config: AxiosRequestConfig): AxiosPromise<T>;   //request 一个参数  config
  get<T = any>(url: string, config?: AxiosRequestConfig): AxiosPromise<T>;  //get  两个参数 url config
  delete(url: string, config?: AxiosRequestConfig): AxiosPromise;  //delete  两个参数  url config
  head(url: string, config?: AxiosRequestConfig): AxiosPromise;   //head  两个参数 url config
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>;  //post 三个参数 url data config
  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>; // put 三个参数 url data config
  patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise<T>; // patch 三个参数 url data config

参数解释 ：url —— 请求地址
                   data——发送给服务器的请求数据
                   config——配置，一般都是固定格式

举个栗子：
  export default{
        async codeDeisgn(params){                                                 
                return await axios.put(`${base}/api/wechat/code/${localStorage.getItem("listid")}/${params.id}`, params,{  //url data
                          headers:{                         //config  一般都是固定格式
                               "token":cookie.load("usertoken")
                          }
                }).then((res)=>{
                      return res.data;
                });
       },
        async qrcodeExtend(params){
        return axios.post(`${base}/api/wechat/code/${localStorage.getItem('listid')}/${params.id}/extend`,{},{   ////这里data就没有传参，而是用{}表示
            headers:{
                "token":cookie.load("usertoken")
            }
        }).then((res)=>{
            return res.data;
        });
    },
  }
注意：需要的参数，一个都不少，data如果不需要传，设置为{}都行，也不能不传

受控组件和不受控组件

在HTML中，<textarea> 的值是通过子属性设置的。在React中，需要通过value设置。我们可以通过添加事件属性onChange监听内容的变化，onChange会在下列情况下被触发：
input或者textarea的内容改变
input的checked状态改变
select的状态改变

【受控组件】
设定了value的input就是一个受控组件。input里会一直展现这个值，用户的任何输入都是无效的。如果你想随着用户的输入改变，使用onChange事件，或者将value改为defaultValue

【非受控组件】
value没有值或者值设为null的input是一个不受控组件。用户的任何输入都会反映到输入框中
这个时候也可以监听onChange事件，内容的改变也会触发事件。
可以通过defaultValue给input设置默认值
标签：

相关文章