前端如何对接接口

最新推荐文章于 2025-05-15 20:39:55 发布

走到天涯海角

最新推荐文章于 2025-05-15 20:39:55 发布

阅读量2.5w

点赞数 25

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端调接口

@曾超缘的博客

本文链接：https://blog.csdn.net/weixin_42995083/article/details/102952431

前端专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了前端工程师对接后端接口的步骤，包括修改webpack配置指向后端地址、登录常用接口、处理数据逻辑等关键操作。通过具体实例，如使用proxy更改目标地址、调试接口返回数据及数据处理方法，帮助前端工程师更好地与后端协作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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查看返回的数据；

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

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

                            
                             }

6.处理数据逻辑；