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

最新推荐文章于 2024-06-30 12:46:56 发布
置顶 最新推荐文章于 2024-06-30 12:46:56 发布
阅读量198 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 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
    评论
vue菜鸟从业记：公司项目里如何进行前后端接口联调
weixin_33809981的博客
07-05 4450
最近我的朋友王小闰进入一家新的公司，正好公司项目采用的是前后端分离架构，技术栈是王小闰非常熟悉的vue全家桶，后端用的是Java语言。在前后端开发人员碰面之后，协商确定好了前端需要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），然后前后端程序猿就嗨皮地并线开发去了。 前后端联调前夕 我的朋友王小闰他们这家公司做本地旅游项目...
移动端App与后台服务的对接方案
热门推荐
天将降大任于是人
06-18 2万+
1. 方案一 优点： 1） 模块划分清晰，模块间相互独立，互不影响； 缺点： 1）移动端app需要通过两个域名访问门户系统、运营系统提供的服务； 2）需要提供统一的登录接口、权限校验接口；2. 方案二 AppServer请求转发如下图所示： 优点： 1）AppServer整合各系统提供接口，移动端app通过统一的AppServer服务进行数据访问；
日常开发--前后端联调规范
银角大王
03-01 1813
项目场景: 针对前后端分离技术,前端人员和后端开发要提前协商接口文档数据; 然后再去码代码这时任何一端开发完成,都会先用mock数据(假数据)来测试程序, 后端一般会用postman/http requster 而前端一般会用到gulp,webpack,fekit去哪儿网的一款前端自动化构建工具， 据说历史比webpack和gulp都要久远）等等自动化构建工具都有mock数据的功能，这不是...
前后端联调
2301_79965602的博客
03-11 797
在现代Web开发中，前后端分离是一种常见的架构模式，这意味着前端和后端可以独立开发，从而提高开发效率。在这种模式下，前端开发主要负责用户界面（UI）和用户体验（UX），而后端则负责处理业务逻辑、数据库交互等服务器端的任务。为了模拟真实的数据交互，前端开发人员会使用mock数据来代替后端提供的真实数据，这样可以在没有后端支持的情况下继续开发前端功能。当前后端开发完成后，需要通过联调来测试整个应用的功能是否按预期工作。
开发工具：让前后端联调不再争吵——Apifox
欢迎来到 ABin-阿斌的博客：写一生代码，创一世佳话，筑一览芳华。
02-21 1782
声明： 原文作者：微信公众号：JavaGuide 原文地址：https://mp.weixin.qq.com/s/K96RRuw5S_9Lamr2uAdHQA 文章目录声明：原文作者：微信公众号：JavaGuide原文地址：https://mp.weixin.qq.com/s/K96RRuw5S_9Lamr2uAdHQA前言如何做？团队原来的工作模式我们遇到的问题如何解决怎么办？自己干！最佳实践Apifox 解决方案一、如何解决这些问题1、Apifox 定位2、Apifox 宗旨3、Apifox 功能二、A
开发中前后端数据通信，前后端联调方法
焚心似火
12-14 2961
在开发过程中前后端需要不定时进行数据交互，由于是在不同的电脑上操作，所以前端不能直接获得后台数据，需要按照以下几种方法才能时间数据互通： 第一种：跨域访问最先想到的当然是jsonp了 第二种：通过CORS（Cross-Origin Resource Sharing）跨域资源共享的方式实现 第三种：通过往请求消息头中加Access-Control-Allow-Origin Access-Co
前后端联调--安装系统管理服务与解决跨域问题
qq_46020806的博客
08-29 297
通过script标签的src属性进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方。出这个提示的原因是基于浏览器的同源策略，去判断是否跨域请求，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。这里进行前后联调的目的是体会前后端联调的流程，测试的功能为课程查询功能。
公司项目里如何进行前后端接口联调
czboy
08-14 1万+
最近我的朋友王小闰进入一家新的公司，正好公司项目采用的是前后端分离架构，技术栈是王小闰非常熟悉的vue全家桶，后端用的是Java语言。   在前后端开发人员碰面之后，协商确定好了前端需要的数据接口（扯那么多，其实也就是关于json数据的字段的定义），然后前后端程序猿就嗨皮地并线开发去了。     前后端联调前夕     我的朋友王小闰他们这家公司做本地旅游项目的，安排到他手上的活儿...
前后端联调经验总结
weixin_52448922的博客
01-23 4474
前后端联调经验总结
软件开发体系.ppt
10-24
软件开发体系是构建高质量软件产品的基石，它涵盖了从需求分析到系统维护的全过程。在这个过程中，各个阶段紧密相连，形成一个完整的生命周期，确保软件能满足用户需求，达到预期的功能和性能。 一、软件开发流程 ...
apifox安装包 强大的 API 工具，支持 API 文档、API 调试、API Mock、API 自动化测试
11-02
我们在日常编程开发过程中经常实行的是前后端分离架构的模式，一个项目的落地会通过产品、开发、测试三方会审，对项目需求评审过后，前后端开发会制定一些接口，他们通常会用以下方式： 开发指定接口文档（Reg）。 ...
V2EX社区小程序源码课程设计.zip
03-27
同时，我们还将介绍小程序的后端开发技术，包括云开发、数据库操作、API接口设计等，帮助学员实现前后端的联调与数据交互。 此外，课程设计中还将涉及小程序的测试、优化与发布等环节。我们将教授学员如何进行单元...
开发必备神器--挡板工具 moco.zip
06-21
在软件开发过程中，尤其是前后端分离的项目中，前端开发者常常遇到一个挑战：后端接口未完成或不稳定，导致前端无法进行正常的联调工作。为了解决这个问题，一种名为Moco（Mocking and Testing）的挡板工具应运而生...
基于SpringBoot+Vue+ElementUI实现一个后台管理系统模板源码
10-15
6. **测试与调试**：前后端联调，进行单元测试和集成测试。 7. **部署**：打包为jar或war文件，部署到服务器，如Tomcat或Jenkins进行持续集成。 总之，这个项目提供了一个完整的SpringBoot、Vue.js和ElementUI集成...
前端面试题（12）答案版
最新发布
weixin_49062485的博客
06-30 505
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。
React 组件 API
csbysj2020的博客
06-29 408
React 组件可以通过两种方式定义：类组件和函数组件。类组件使用 ES6 的类语法，而函数组件则是一个简单的 JavaScript 函数。React 组件 API 是 React 开发中的基础，理解并掌握这些 API 对于创建高效、可维护的 React 应用程序至关重要。无论是类组件还是函数组件，都提供了丰富的特性和方法来管理组件的状态、属性和生命周期。通过熟练使用这些 API，开发者可以更加轻松地构建复杂的用户界面。
TS_类型
分享程序相关知识
06-29 1231
typescripe类型相关知识点。
实战|记一次java协同办公OA系统源码审计
weixin_46239998的博客
06-26 1666
实战|记一次java协同办公OA系统源码审计
前后端联调一般怎么做实际开发中
06-12
前后端联调是指前端和后端在开发过程中需要进行数据交互和接口调试的过程。一般来说，前后端联调可以分为以下几个步骤： 1. 确定接口文档：前后端需要共同确定接口文档，包括接口的请求参数、响应参数、返回码等内容。 2. 前端调用接口：前端根据接口文档编写相应的代码，调用后端提供的接口，并将请求参数发送给后端。 3. 后端处理请求：后端接收到前端发送的请求后，根据请求参数进行相应的处理，并返回响应数据。 4. 前端处理响应数据：前端接收到后端返回的响应数据后，根据响应参数进行相应的处理，例如展示数据、更新页面等。 5. 调试接口：在前后端联调的过程中，需要不断地调试接口，确保接口的正确性和稳定性。 6. 修复问题：如果在联调的过程中发现问题，需要及时修复并重新调试接口。 除了以上步骤，前后端联调还需要注意以下几点： 1. 接口命名规范：前后端需要遵守一定的接口命名规范，以避免出现混淆和错误调用的情况。 2. 参数校验：前后端需要对接口的请求参数进行校验，以确保参数的正确性和安全性。 3. 接口安全：前后端需要对接口进行安全性验证，避免恶意攻击和非法调用。 总之，前后端联调是一个需要前后端密切配合、不断调试的过程，通过良好的沟通和协作，可以让项目顺利进行并保证接口的正确性和稳定性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值