软件开发过程中前后端联调相关问题

最新推荐文章于 2024-01-21 13:44:07 发布
置顶 最新推荐文章于 2024-01-21 13:44:07 发布
阅读量199 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41113298/article/details/132109160
版权

一、接口调用三步曲

1. uniapp接口调用

  1. data中定义项目1

  2. onload中调用

例如：this.getSwiperList()//调用获取轮播图数据的方法

  1. method中定义获取方法在这里插入图片描述

2. 微信小程序接口调用

  1. reques.js中接口封装

如：ScenicspotInfo （data）=> request(POST,‘getScenicspotInfo’,data),

在这里插入图片描述

  1. 需求页面.js（如detail.js）顶部引用接口封装文件

如： const $api = require(“…/…/utils/request”).Api;

在这里插入图片描述

  1. 定义调用页面数据接口的方法
 如 TicketDetailApiWay(){
 $api.ScenicspotInfo({ 'id':1 }).then((res) => {
 this.setData({})
 }).catch(() => {console.log(error)})
}

在这里插入图片描述
需要传递参数（如id）测试的在这里插入图片描述

二、前端如何规范地模拟数据？

1. 接口文档规范（eg：首页楼层数据）

  • 1.请求路径：https://请求域名/api/public/v1/home/floordata
  • 2.请求方法：GET
  • 3.请求参数
参数名参数说明备注
无
  • 4.响应参数
参数名参数说明备注
floor_title楼层标题
product_list楼层内容列表
name名称
image_src图片路径
image_width商品图片宽度
open_type导航链接类型
navigator_url导航链接路径
  • 5.响应数据
{
    "message": [
        {
            "floor_title": {
                "name": "时尚女装",
                "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_title.png"
            },
            "product_list": [
                {
                    "name": "优质服饰",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=服饰"
                },
                {
                    "name": "春季热门",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_2@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=热"
                },
                {
                    "name": "爆款清仓",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_3@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=爆款"
                },
                {
                    "name": "倒春寒",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_4@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=春季"
                },
                {
                    "name": "怦然心动",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_5@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=心动"
                }
            ]
        },
        {
            "floor_title": {
                "name": "户外活动",
                "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor02_title.png"
            },
            "product_list": [
                {
                    "name": "勇往直前",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor02_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=户外"
                },
                {
                    "name": "户外登山包",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor02_2@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=登山包"
                },
                {
                    "name": "超强手套",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor02_3@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=手套"
                },
                {
                    "name": "户外运动鞋",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor02_4@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=运动鞋"
                },
                {
                    "name": "冲锋衣系列",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor02_5@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=冲锋衣"
                }
            ]
        },
        {
            "floor_title": {
                "name": "箱包配饰",
                "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor03_title.png"
            },
            "product_list": [
                {
                    "name": "清新气质",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor03_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=饰品"
                },
                {
                    "name": "复古胸针",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor03_2@2x.png",
                    "image_width": "263",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=胸针"
                },
                {
                    "name": "韩版手链",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor03_3@2x.png",
                    "image_width": "203",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=手链"
                },
                {
                    "name": "水晶项链",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor03_4@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=水晶项链"
                },
                {
                    "name": "情侣表",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor03_5@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=情侣表"
                }
            ]
        }
    ],
    "meta": { "msg": "获取成功", "status": 200 }
}

2. 运用数据

2.1 左边单图片渲染时，利用{}动态设置图片的宽，下标为数组的索引，不用循环

:src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width + 'rpx'}"

2.2右边多图片渲染时，用循环，每循环一次可以得到一个item项，命名为item2和索引命名为i2，将索引当作key，

v-for="(item2,i2) in item.product_list"
//那么图片的地址为
<image src="item2.image_src" mode=""></image>
//完整渲染代码为
<view class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0">
<image :src="item2.image_src" :style="{width:item2.image_width + 'rpx'}" mode="widthFix"/>
</view>

2.3 点击图片如何跳转到对应的商品列表页？

在这里插入图片描述

  • 分析：给到的数据为"navigator_url": “/pages/goods_list?query=服饰”（ ——问号前面是路径，问好后面是路径的参数），实际创建的商品列表页在分包目录下，如何跳转到各自对应的正确目录？ 涉及到自定义url、拆分字符串、拼接字符串、为每个图片对象挂载一个自定义url属性（——即将要跳转到的地址），对原数据进行分割，先做字符串的split分割（——分割之后索引为1的项就是问号后面的值，即路径的参数，）再拿到索引为1的项，动态拼接过来。
// 通过双层 forEach 循环，处理 URL 地址
// prod是形参，用于遍历，参数从问号处做分割，split会把字符串以问号分割成数组，索引为1的是问号后面的值
res.message.forEach(floor => {
	floor.product_list.forEach(prod => {
	prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
})
})
  • 成功结果如下：在这里插入图片描述

3. 规范地模拟数据之多级菜单分类

//一级、二级、三级分类之间通过children属性嵌套,最外层[]里面存放所有一级分类，一级分类的children属性就是它的二级分类
{
    "message": [
        {
            "cat_id": 1,
            "cat_name": "大家电",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "cat_icon": "",
            "children": [
                {
                    "cat_id": 3,
                    "cat_name": "电视",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "cat_icon": "",
                    "children": [
                    {
                        "cat_id": 5,
                        "cat_name": "曲面电视",
                        "cat_pid": 3,
                        "cat_level": 2,
                        "cat_deleted": false,
                        "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                    }]
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

在这里插入图片描述

三、涉及项目逻辑问题的接口调用

示例：

在这里插入图片描述

1、上传图片接口请求

    submit() {
        console.log('点击完成')
        this.cropper.getImg((obj) => {
            //app.globalData.imgSrc = obj.url;
            // console.log( obj.url)
            // 上传方法 ，这个name属性是最重要的属性，他对应着后端传参数的值
            wx.uploadFile({
                url: 'http://192.168.2.50:8060/Api/UploadStarFilmImg',
                filePath: obj.url,
                name: 'file',
                header: {
                    'Content-Type': 'multipart/form-data' // POST默认值
                },
                method: 'post',
                formData: {
                    code: ''
                },
                success: (res) => {
                    //console.log('图片接口数据-----', res)
                    let result = JSON.parse(res.data)
                    console.log('图片接口数据result-----', result)
                    // 图片code存到本地
                    this.setData({
                        imgcode: res.code
                    })
                    app.globalData.imgcode = result.code
                    app.globalData.imgSrc = 'http://192.168.2.50:8012/SFImgPath/' + result.img
                    wx.navigateTo({
                        url: '/pages/index/addnext?src=' + config + result.img + "&imgCode=" + result.code,
                        //  裁剪完成点击跳转，携带的图片路径传入下一个页面，拼接字符串实现
                        // url: `/pages/index/addnext?imgSrc=${obj.url}`,
                    })
                },
                fail:(res)=>{
                    console.log(res)
                }
            });
        });
    },

2、上传录音和提交信息接口

上传录音接口请求 finish.js点击制作完成时
提交信息接口请求 addfinished.js、addfinishedtxt.js点击制作完成时

    Toendpage() {
        //------------------------------------------------------------------------------上传录音
        var voice = this.data.voice;
        wx.uploadFile({
            url: 'http://192.168.2.50:8060/Api/UploadStarFilmVoice',
            filePath: voice,
            name: 'file',
            header: {
                'Content-Type': 'multipart/form-data' // POST默认值
            },
            method: 'post',
            formData: {
                code: ''
            },
            success: res => {
                //console.log('录音接口数据-----', res)
                var resultV = JSON.parse(res.data);
                app.globalData.voice = resultV.voice
                console.log('录音接口数据resultV-----', resultV)
                // 将voice存到全局
                app.globalData.voice = 'http://192.168.2.50:8012/SFVoicePath/' + resultV.voice
                this.setData({
                    voice: resultV.voice
                })
                wx.navigateTo({
                    url: '/pages/addfinished/addfinished?voice=' + config + resultV.voice,
                })
            }
        })
        // 关闭loading提示
        wx.hideLoading()
        //---------------------------------------------------voice的提交信息接口
        wx.request({
            url: 'http://192.168.2.50:8060/Api/SubmatStarFilmInfo',
            data: {
                code: app.globalData.imgcode,
                sftype: 0,
                word: app.globalData.voice,
                status: 1,
                signature: this.data.bywho,
                towritten: this.data.towritten,
            },
            header: {
                'Content-Type': 'application/x-www-form-urlencoded' // POST默认值
            },
            method: 'post',
            success: res => {
                var resultS = res.data;
                console.log('提交信息接口数据resultS-----', resultS)
                wx.navigateTo({
                    url: '/pages/end/end?src=' + resultS.code + "&Voice=" + resultS.voice,
                })
            }
        })

    },

3、查询接口请求end.js和endtxt.js,oppositeget.js和oppvoice.js

       onLoad(options) {
        // 录音时间赋值
        let content = wx.getStorageSync('content')
        this.setData({
            speck_time: content.speck_time,
        })
        this.data.imgCode = app.globalData.imgcode
        console.log(this.data.imgCode)
        // 清除code
        app.globalData = {
            userInfo: null,
            imgSrc: '',
            imgcode: '',
            voice: '',
            CreateTimeStr: '',
        }
        var that = this;
        wx.request({
            url: 'http://192.168.2.50:8060/Api/SelStarFilmInfo',
            data: {
                code: this.data.imgCode
            },
            method: 'post',
            header: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
                console.log('直接打印不用转化', (res.data))
                that.setData({

                    word: res.data.data.Word,
                    Signature: res.data.data.Signature,
                    ToWritten: res.data.data.ToWritten,
                    imgSrc: 'http://192.168.2.50:8012/SFImgPath/' + res.data.data.Img
                })
            }
        })
    },

4、全局变量设置

在这里插入图片描述

5、清除code

在这里插入图片描述

一枚形成良好习惯的前端猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端App与后台服务的对接方案
天将降大任于是人
06-18 2万+
1. 方案一 优点： 1） 模块划分清晰，模块间相互独立，互不影响； 缺点： 1）移动端app需要通过两个域名访问门户系统、运营系统提供的服务； 2）需要提供统一的登录接口、权限校验接口；2. 方案二 AppServer请求转发如下图所示： 优点： 1）AppServer整合各系统提供接口，移动端app通过统一的AppServer服务进行数据访问；
软件联调
xdcosmosli的博客
11-23 3991
最近做个项目，我负责的部分是通信模块的服务器端的程序，前期的通信报文格式商量确定好之后，就自己完成自己的模块，因为这个是跟别的公司的接口，所以，定好报文格式之后，就觉得大家都按照这个标准来完成，应该差不多。等我完成我的部分之后，进行自己测试之后，觉得没有啥问题了，公司老大让去跟接口公司联调，去之前，我把所有自己能考虑的问题，都考虑清楚，觉得差不多最多也就2个小时就搞定了，还可以休息半天不去上班。擦
【微信小程序独立开发 5】后端搭建联调
qq_41481924的博客
01-21 1473
上节我们完成了个人信息页的编写，本节完成将个人信息发给后端，并由后端存储
字节8年经验之谈！如何做好联调测试？
myh919的博客
12-27 1470
在软件开发过程中，联调测试是至关重要的一环，确保不同模块间的接口能够正确交互，数据能够正确流转，业务逻辑能够无缝衔接。随着系统复杂性的增加，多模块联调测试变得越发复杂，要确保测试的质量和进度，可遵循以下步骤。制定详尽的测试计划是成功联调测试的基础，计划应包括每个模块的功能描述、集成的顺序、测试用例、测试环境、数据准备、资源配置、时间表和风险评估。确定测试的范围和目标，确保所有模块之间的交互都有相应的测试案例。明确测试的质量标准和验收准则是控制测试质量的关键，这些标准应与项目目标和用户需求相符合，且清晰具体，
软件与硬件的联调之小程序与云平台相互通信
小黄同学的博客
05-14 675
携带参数： datastream_id ：字段名称，limit ：获取数据的数量，API-KEY，API-KEY储存在 header头部信息中。URL地址：https://api.heclouds.com/devices/设备ID/datastreams。URL地址：https://api.heclouds.com/devices/设备id/datapoints。URL地址：https://api.heclouds.com/devices/设备ID/datapoints。
InterJsonTool联调工具.rar
07-06
InterJsonTool是一款专为JSON格式报文测试与联调设计的工具，对于IT专业人士，特别是从事Web服务开发...在面对复杂的接口联调任务时，InterJsonTool能够提供稳定且灵活的支持，是现代软件开发过程中不可或缺的一部分。
软件开发体系.ppt
10-24
软件开发体系是构建高质量软件产品的基石，它涵盖了从需求分析到系统维护的全过程。在这个过程中，各个阶段紧密相连，形成一个完整的生命周期，确保软件能满足用户需求，达到预期的功能和性能。 一、软件开发流程 ...
frp内网穿透工具，接口联调时候使用
04-17
在现代软件开发过程中，前后端分离的模式越来越常见，但这也带来了一个问题：当后端服务器位于内网而前端开发者在外部网络时，进行接口联调会变得困难。此时，`frp（Fast Reverse Proxy）`就成为了解决这一问题的...
开发一个考生录取查询系统的详细步骤和代码，帮助初学者体验开发系统的过程
07-22
在开发过程中，需要注意以下几点： 1. 数据安全：对用户的输入进行校验，防止SQL注入等安全问题。 2. 错误处理：提供良好的错误提示，方便用户理解和解决问题。 3. 性能优化：合理使用索引，避免全表扫描，提高查询...
一套点餐小程序项目源代码，服务端和小程序端源码都有
最新发布
03-19
在实践中，开发者可以通过这个项目学习到前后端协同开发的过程，了解如何进行接口联调，调试错误，以及如何进行测试和部署。此外，该项目可能还涉及到其他技术，比如微信支付的集成，这将帮助开发者掌握第三方支付...
软件联调测试
BryantKeBo的博客
02-21 8545
联调测试总计 一个大型项目都会涉及多个部门的多个系统，系统之间通过接口或中间件等形式交互。在项目开发时各系统的工作都是并行的，每个系统开发完成后先由内部测试工程师进行内部的功能模块测试。在这整个项目的层面上讲，每个模块的内部测试属于集成测试，待全部模块测试完成后还应进行整个项目的系统联调测试。联调测试相当于在一个大的项目平台下进行系统间接口或中间件的UAT测试。 1 联调测试的意义 在各模块进行自己系统的测试过程中，测试到模块间的交互时，测试工程师都是按照事先的约定（接口文档，消息示例等）通过Mock方式进
opc调试软件_PLC与SCADA或第三方软件的联合仿真调试—NetToPLCSIM
weixin_39676242的博客
12-05 911
写在面前大家好，我是Alic Huan，号主小智的资深损友一枚~·随着虚拟调试的应用越来越广，作为熟悉孪生概念中虚实结合的关键环节，其实离我们并不遥远，不论你现在是作为MES工程师，SCADA工程师，PLC工程师还是机械工程师，随着数字化转型的不断加快，跨领域人才越来越受企业所青睐，如果一味守旧，不求进取，那当时代要抛弃你的时候，连招呼都不会和你打~对数字孪生感兴趣的朋友可以同时看看本刊早先发布的...
接口联调怎么调试
m0_57071129的博客
04-01 4431
一.什么时候开展接口测试 1.项目处于开发阶段，前后端联调接口是否请求的通？（对应数据库增删改查）--开发自测 2.有接口需求文档，开发已完成联调（可以转测），功能测试展开之前 3.专项测试：如测流量大小，查看图片压缩大小，测试接口请求响应时间 4.版本上线前，进行整体回归测试，查看接口是否有异常（如404等）。对准备上线的版本进行抓包，查看服务器地址都是正确的 5.版本功能稳定后，接口自动化 二.接口测试时测试的重点是什么,测试用例如何设计 1、通过性验证，说白了就是传递正确的参数，是否返回
单片机MCU软硬件联调基本方法
热门推荐
bulebin的博客
11-12 1万+
做MCU软件开发，离不开硬件，软硬件调试的技能也是必须掌握的，现在介绍一些软硬件联调的基本方法。 软硬件联调常使用的方法有 ：分支思想、分层法、对比法。这些方法不是只属于软硬件联调可用，在软件开发过程也是常用方法，更进一步说是解决问题的常用方法和思想，解决问题是一个概述，具体表现在生活和工作过程遇到的各种各样的具体问题。 在进行软硬件调试之前，需要准备和具备的能力：稳压电源、万用表、示波器，以
前后端接口联调
u010597189的博客
06-01 1万+
前后端联调福音——RAP教会学校百家号17-04-1505:28原创作者：政宇@招聘技术 58招聘技术团队一、概述RAP是一个可视化接口管理工具 通过分析接口结构，动态生成模拟数据，校验真实接口正确性， 围绕接口定义，通过一系列自动化工具，对前后端接口交互开发进行解耦，以提升协作效率。二、RAP的基本安装与使用首先，我们将简单介绍一下RAP的安装与使用。1、RAP的部署。部署方式有两种：①、使用编...
程序联调时的注意事项
luckydongbin的专栏
11-12 4919
  好长时间没有更新blog了，我对事情不能坚持下来的毛病，又得到了体现。借口可能很多，但是真正的理由只有这一个。最近很多时间花在了程序联调中，觉得很不值得，也是调试方法不得当，现在把这些教训总结一下，防止以后再犯。其中主要错误：1.         接口定义不够明确，特别是对于一些参数，每个人的理解可能会存在较大的差别。2.         对函数的调用没有具体说明，什么时候
vue菜鸟从业记：公司项目里如何进行前后端接口联调
weixin_33809981的博客
07-05 4450
最近我的朋友王小闰进入一家新的公司，正好公司项目采用的是前后端分离架构，技术栈是王小闰非常熟悉的vue全家桶，后端用的是Java语言。在前后端开发人员碰面之后，协商确定好了前端需要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），然后前后端程序猿就嗨皮地并线开发去了。 前后端联调前夕 我的朋友王小闰他们这家公司做本地旅游项目...
前后端联调一般怎么做实际开发中
06-12
前后端联调是指前端和后端在开发过程中需要进行数据交互和接口调试的过程。一般来说，前后端联调可以分为以下几个步骤： 1. 确定接口文档：前后端需要共同确定接口文档，包括接口的请求参数、响应参数、返回码等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值