前端如何对接接口

作为一名前端工程师，不能只会写静态页面，还要会对接后端的接口。

1.把地址改为后端工程师的电脑地址

在webpack.base.config.js中把测试地址改成后端地址

proxy: {
            '/aaa': {        //识别url的第一个路径来判断
                //后端地址
                target: 'http://192.168.232.99:8080',
                host:'http://192.168.232.99:8080',
                //测试地址
                // target: 'http://192.168.71.134:8081',
                // host:'http://192.168.71.134:8081',
                // secure: false,
                changeOrigin: true
            }
        }

2.登录常用的接口地址

http://192.168.232.99:8080/dizhi.html#/

3.输入用户名和密码，查看对应的接口，输入信息

这时可以查看接口返回的数据格式

4.然后把这串json数据复制黏贴到json.cn中

5.调数据,查看数据是否获取到有两种方法

方法一：是console.log(data);

方法二：是debugger，打开控制台的network查看返回的数据；

我比较倾向于用第二种方法，比较直观。

扫描二维码关注公众号，回复： 10212587 查看本文章

                            type: 'post',
                            url: '/aaa/system/user/getUserRoleList.do',
                            data: {user_id:this.userId},              //直接传入data
                            
                            success: function (data) {
                             //查看数据是否获取到
                             //方法一
                             console.log(data);
                             //方法二
                             debugger;

                            
                             }

6.处理数据逻辑；