从零开始到完整的React后台管理项目开发路程(第三节)

完整的项目地址

一、启动服务

如何启动mongdb server进行接口测试请看上一篇专门介绍

同时启动后端项目

二、搭建ajax请求

1、下载ajax依赖包

yarn add axios

2、配置ajax请求文件(api/axios.js)

import axios from 'axios'
export default function ajax(url, data={}, type='GET') {
    if(type === 'GET' || type === 'get') {
        return axios.get(url,{  // 配置对象
            params:data // 指定参数
        })
    }else {
        return axios.post(url,data)
    }

}

3、配置接口函数请求文件(api/index.js)

//登录
import ajax from './ajax'
export const reqLogin = (username, password) => ajax('/login',{username,password},'POST')
export const reqAddUser = (user) =>ajax('/mannge/user/add',user, 'POST')

4、登录页发出请求(login/login.js)

import {reqLogin} from '../../api'
 onFinish = values =>{ // 登录按钮请求发出
        console.log(values)
        reqLogin(values.user_name, values.user_password)
    }

此处需要配置一下代理(packge.json)

// 此处是后端服务起来后的端口号，做本地接口调试
// 解决跨域问题
"proxy":"http://localhost:4000"

5.登陆成功后