[JavaScript知识库]用ts+react写用户列表一

对传过来的数据进行约束

interface Iprops {     //对传过来的数据进行约束
    del: (id: number) => void
    list: Array<usertable>
}

对自己的数据进行约束

interface Istate {
    list: Array<usertable>,
    username: string,
    userpwd: string

}

写数据请求分步骤 写一个表的约束? 这个表的服务? ?实现这个表的服务

写一个表的约束

在src里面新建一个文件夹 interface? 里面写一个 Iusertable.tsx 在这个Iusertable里面进行配置

interface Iusertale {
    id?: number,   //?  表示这个参数可要可不要
    username?: string,
    userpwd?: string
}

export default Iusertale

写这个表的服务? ?src里面新建一个文件夹 model 在这个model里面 axios.tsx Iuserservice.tsx

在这个表里面进这个表的服务

import Iusertable from "../interface/Iusertable"
import { AxiosPromise } from "axios";


interface Iuserservice {
    query(params: any): AxiosPromise;
    add(data: Iusertable): AxiosPromise;
    del(id: number): AxiosPromise;
    update(id: number, data: Iusertable): AxiosPromise

}
export default Iuserservice

实现这个表的服务? 新建一个userModel.tsx

在这个userModel.tsx

import axios from "./axios"
import Iusertable from "../interface/Iusertable"
import { AxiosPromise } from "axios"
import Iuserservice from "./Iuserservice"

class userModel implements Iuserservice {  //实现表中的方法
    query(params: any): AxiosPromise {
        return axios({
            method: "get",
            url: "/userinfos",
            params
        })
    }
    add(data: Iusertable): AxiosPromise {
        return axios({
            method: "post",
            url: "/userinfos",
            data
        })
    }
    del(id: number): AxiosPromise {
        return axios({
            method: "delete",
            url: "/userinfos/" + id
        })
    }
    update(id: number, data: Iusertable): AxiosPromise {
        return axios({
            method: "patch",
            url: "/userinfos/" + id,
            data
        })
    }

}

export default new userModel()