当前位置: 首页 > news >正文

关于Vue前端接口对接的思考

关于Vue前端接口对接的思考

  • 目录
    • 概述
      • 需求:
    • 设计思路
    • 实现思路分析
      • 1.vue 组件分类和获取数值的方式
      • 2.http 通信方式 分类 如何对接
      • 3.vue 组件分类和赋值方式,
  • 参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

在这里插入图片描述

概述

需求:

设计思路

实现思路分析

1.vue 组件分类和获取数值的方式

在Vue中,组件可以分为以下几种类型:

  1. 全局组件(Global Components):全局组件是在Vue实例化前定义的组件,可以在任何地方使用。可以通过Vue.component方法全局注册组件,或者在Vue实例中的components属性上注册组件。

  2. 局部组件(Local Components):局部组件是在Vue实例中定义的组件,只能在该Vue实例的范围内使用。可以在Vue实例的components属性中注册组件。

  3. 私有组件(Private Components):私有组件是在其他组件内部定义的组件,只能在该组件的范围内使用。可以在父组件的components属性中注册私有组件。

获取数值的方式取决于数据是在父组件传递给子组件还是在子组件自己定义的。以下是常见的获取数值的方式:

  1. 父组件传值给子组件:父组件通过属性的形式将数据传递给子组件,子组件可以通过props选项接收数据。在子组件中,可以通过this.$props或者直接使用props定义的变量名来获取父组件传递的数据。

  2. 子组件自定义数据:子组件可以在自己的data选项中定义数据,并通过模板或者计算属性等方式获取和使用这些数据。

  3. 子组件事件传递数据给父组件:子组件可以通过$emit方法触发自定义事件,并传递数据给父组件。父组件可以通过在子组件上监听对应的事件来获取数据。

这些是Vue中常见的组件分类和获取数值的方式,具体使用方法可以参考Vue的官方文档。
其实绝大部分的场景中我们都可以尝试对应的localstrore 存取的方式进行处理。

要获取 Vue 组件中的值,可以使用以下几种方法:

  1. 使用 v-model 双向绑定:在组件中的输入框或其他表单元素上使用 v-model 指令绑定一个父组件的数据属性。当用户在子组件中修改输入框的值时,父组件的数据属性也会跟着更新。这样就可以通过访问父组件的数据属性来获取组件中的值。
<template><input v-model="value" type="text">
</template><script>
export default {props: ['value']
}
</script>
  1. 使用 $emit 事件:在子组件中通过 $emit 方法触发一个自定义事件,并传递需要传递的值。在父组件中通过在子组件上使用 v-on 指令监听该事件,并在触发时执行相应的方法来获取传递的值。
<template><button @click="onClick">Click me</button>
</template><script>
export default {methods: {onClick() {this.$emit('button-clicked', 'Hello!')}}
}
</script>
<template><child-component @button-clicked="onButtonClicked"></child-component>
</template><script>
export default {methods: {onButtonClicked(value) {console.log(value) // 输出:Hello!}}
}
</script>
  1. 使用 ref 引用:在父组件中通过在子组件上使用 ref 属性为子组件指定一个引用名称,然后通过访问 this.$refs 对象来获取子组件实例。然后可以使用子组件实例的方法和属性来获取需要的值。
<template><child-component ref="childComponentRef"></child-component>
</template><script>
export default {mounted() {const childComponent = this.$refs.childComponentRefconst value = childComponent.getValue()console.log(value)}
}
</script>

如何获取具体的组件数值参看对应的API文档

2.http 通信方式 分类 如何对接

HTTP通信方式可以分为以下几种分类:

  1. 请求方式分类:HTTP通信可以通过不同的请求方式进行交互,包括GET、POST、PUT、DELETE等。

  2. 数据格式分类:HTTP通信可以通过不同的数据格式进行传输,包括普通文本、JSON、XML等。

  3. 接口类型分类:HTTP通信可以用于不同的接口类型,包括Web接口、RESTful接口、SOAP接口等。

对接HTTP通信方式,一般需要以下步骤:

  1. 确定通信方式:根据具体需求,选择合适的请求方式进行通信。

  2. 构建请求数据:根据接口要求,构建合适的请求数据,包括URL、请求头、请求体等。

  3. 发送请求:使用相应的编程语言或工具库,发送HTTP请求。

  4. 处理响应:接收到服务器的响应后,根据响应数据进行处理,可以是解析响应数据、处理异常情况等。

  5. 解析响应数据:根据接口要求,解析响应数据,可以是从响应数据中提取需要的信息。

  6. 后续处理:根据业务需求,对响应数据进行后续的处理,例如存储、展示、分析等。

接入HTTP通信方式的具体实现取决于开发环境和编程语言,可以使用各种编程语言提供的HTTP库或框架,如Python的requests库、Java的HttpClient等。
最佳实践是先用工具测试完成后,拼成要素报文传递即可。通常来说都是基于JSON的restful 和xml 的SOAP。

3.vue 组件分类和赋值方式,

Vue具体组件有很多种,常见的包括但不限于:按钮组件、输入框组件、选择器组件、日历组件、对话框组件、表格组件等。

赋值方式有多种,取决于组件的属性和父组件调用时的需求。以下是一些常见的赋值方式:

  1. 静态赋值:直接在组件标签内部使用属性进行赋值,例如:

    <my-component message="Hello"></my-component>
    

    在组件内部通过props属性接收该值:

    props: {message: String
    },
    
  2. 动态赋值:使用v-bind指令将数据动态绑定到组件的属性上,例如:

    <my-component :message="myMessage"></my-component>
    

    在组件内部通过props属性接收该值:

    props: {message: String
    },
    
  3. 传递整个对象:可以将一个对象作为属性传递给子组件,例如:

    <my-component :user="userInfo"></my-component>
    

    在组件内部通过props属性接收该对象:

    props: {user: Object
    },
    
  4. 通过事件传递数据:当需要从子组件向父组件传递数据时,可以使用自定义事件。子组件通过$emit方法触发事件并传递数据,父组件通过在子组件标签上使用v-on指令监听事件并获取数据,例如:
    在子组件中触发事件:

    this.$emit('update', data);
    

    在父组件中监听事件:

    <my-component @update="handleUpdate"></my-component>
    

    在父组件中定义事件处理方法:

    methods: {handleUpdate(data) {// 处理传递的数据}
    }
    

Vue具体组件有很多,下面列举一些常用的组件:

  1. 按钮组件(Button):用于创建按钮,可以设置不同的样式和功能。
  2. 输入框组件(Input):用于接收用户的输入,可以设置输入框的类型和验证规则。
  3. 列表组件(List):用于展示数据列表,可以进行分页、排序等操作。
  4. 菜单组件(Menu):用于创建导航菜单,可以设置菜单的样式和功能。
  5. 弹窗组件(Modal):用于显示弹窗,可以通过设置属性来控制弹窗的内容和样式。
  6. 图片组件(Image):用于显示图片,可以设置图片的大小和样式。
  7. 表格组件(Table):用于展示表格数据,可以设置表格的列和数据。
  8. 标签组件(Tag):用于创建标签,可以设置标签的样式和点击事件。
  9. 图表组件(Chart):用于绘制图表,可以根据数据生成柱状图、折线图等。

赋值使用案例:

假设有一个用户信息的组件,可以将用户信息传递给组件进行展示。

HTML模板:

<template><div><h2>{{ user.name }}</h2><p>{{ user.age }}</p><p>{{ user.email }}</p></div>
</template>

Vue脚本:

<script>
export default {name: 'UserInfo',props: {user: {type: Object,required: true}}
}
</script>

使用组件并传递用户信息:

<template><div><user-info :user="userInfo"></user-info></div>
</template><script>
import UserInfo from './UserInfo.vue'export default {name: 'App',data() {return {userInfo: {name: '张三',age: 20,email: 'zhangsan@example.com'}}},components: {UserInfo}
}
</script>

在这个例子中,通过在父组件中定义一个userInfo对象,并将其传递给UserInfo组件的user属性,从而完成了赋值。
当然不用的组件的赋值方法不同,具体参看具体的API文档。

我们再对接接口的情况下,大部分不用研究的,基本三步走,复用(本质是熟悉),搜索,逻辑连调和验证。

参考资料和推荐阅读

参考资料
官方文档
开源社区
博客文章
书籍推荐

欢迎阅读,各位老铁,如果对你有帮助,点个赞加个关注呗!同时,期望各位大佬的批评指正~

相关文章:

关于Vue前端接口对接的思考

关于Vue前端接口对接的思考 目录概述需求&#xff1a; 设计思路实现思路分析1.vue 组件分类和获取数值的方式2.http 通信方式 分类 如何对接3.vue 组件分类和赋值方式&#xff0c; 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your p…...

【设计模式之美】SOLID 原则之三:里式替换(LSP)跟多态有何区别?如何理解LSP中子类遵守父类的约定

文章目录 一. 如何理解“里式替换原则”&#xff1f;二. 哪些代码明显违背了 LSP&#xff1f;三. 回顾 一. 如何理解“里式替换原则”&#xff1f; 子类对象能够替换程序中父类对象出现的任何地方&#xff0c;并且保证原来程序的逻辑行为不变及正确性不被破坏。 里氏替换原则…...

代码随想录第六十三天——被围绕的区域,太平洋大西洋水流问题,最大人工岛

leetcode 130. 被围绕的区域 题目链接&#xff1a;被围绕的区域 步骤一&#xff1a;深搜或者广搜将地图周边的’O’全部改成’A’ 步骤二&#xff1a;遍历地图&#xff0c;将’O’全部改成’X’&#xff0c;将’A’改回’O’ class Solution { private:int dir[4][2] {-1, 0…...

Docker 项目如何使用 Dockerfile 构建镜像?

1、Docker 和 Dockerfile 的重要性 1.1、Docker 简介&#xff1a;讲述 Docker 的起源、它是如何革新现代软件开发的&#xff0c;以及它为开发者和运维团队带来的好处。重点强调 Docker 的轻量级特性和它在提高应用部署、扩展和隔离方面的优势。 本文已收录于&#xff0c;我的…...

实践学习PaddleScience飞桨科学工具包

实践学习PaddleScience飞桨科学工具包 动手实践&#xff0c;在实践中学习&#xff01;本项目可以在AIStudio平台一键运行&#xff01;地址&#xff1a;https://aistudio.baidu.com/projectdetail/4278591 本项目第一次执行会报错&#xff0c;再执行一次即可。若碰到莫名其妙的…...

Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式 今天在项目中碰到一个 UI 改造的需求&#xff0c;需要根据设计图把页面升级成 UI 设计师提供的设计图样式。 到最后页面改造完了&#xff0c;但是 UI 提供的下拉菜单样式全部是黑色半透明的&#xff0c;只能硬着头皮改了。…...

达梦数据库主备集群

1&#xff1a;服务器硬件需求 按实际业务需求&#xff0c;选择合适的服务器&#xff0c;准备 3 台服务器&#xff0c;一台主库服务器&#xff0c;一台备库服务器&#xff0c;一台监视器服务器&#xff0c;服务器参数建议如下&#xff1a; 硬件要求物理内存>16 GB交换区Swa…...

Spark Doris Connector 可以支持通过 Spark 读取 Doris 数据类型不兼容报错解决

1、版本介绍&#xff1a; doris版本&#xff1a; 1.2.8Spark Connector for Apache Doris 版本&#xff1a; spark-doris-connector-3.3_2.12-1.3.0.jar:1.3.0-SNAPSHOTspark版本&#xff1a;spark-3.3.1 2、Spark Doris Connector Spark Doris Connector - Apache Doris 目…...

深入理解 go chan

go 里面&#xff0c;在实际程序运行的过程中&#xff0c;往往会有很多协程在执行&#xff0c;通过启动多个协程的方式&#xff0c;我们可以更高效地利用系统资源。 而不同协程之间往往需要进行通信&#xff0c;不同于以往多线程程序的那种通信方式&#xff0c;在 go 里面是通过…...

java+vue基于Spring Boot的渔船出海及海货统计系统

该渔船出海及海货统计系统采用B/S架构、前后端分离进行设计&#xff0c;并采用java语言以及springboot框架进行开发。该系统主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、渔船信息、渔船航班、海货价格、渔船海货、非法举报、渔船黑名单等功能。该系统操…...

Linux第25步_在虚拟机中备份“ST官方的TF-A源码”

TF-A是ARM公司提供的&#xff0c;ST公司通过修改它&#xff0c;做了一个自己的TF-A代码。因为在后期开发中&#xff0c;若硬件被改变了&#xff0c;我们需要通过修改"ST官方的TF-A源码"就可以自己的TF-A代码了。为了防止源文件被误改了&#xff0c;我们需要将"S…...

统计学-R语言-4.1

文章目录 前言编写R函数图形的控制和布局par函数layout函数 练习 前言 安装完R软件之后就可以对其进行代码的编写了。 编写R函数 如果对数据分析有些特殊需要&#xff0c;已有的R包或函数不能满足&#xff0c;可以在R中编写自己的函数。函数的定义格式如下所示&#xff1a; …...

C++(1) —— 基础语法入门

目录 一、C初识 1.1 第一个C程序 1.2 注释 1.3 变量 1.4 常量 1.5 关键字 1.6 标识符命名规则 二、数据类型 2.1 整型 2.2 sizeof 关键字 2.3 实型&#xff08;浮点型&#xff09; 2.4 字符型 2.5 转义字符 2.6 字符串型 2.7 布尔类型 bool 2.8 数据的输入 三…...

构建基于RHEL8系列(CentOS8,AlmaLinux8,RockyLinux8等)的支持63个常见模块的PHP8.1.20的RPM包

本文适用&#xff1a;rhel8系列&#xff0c;或同类系统(CentOS8,AlmaLinux8,RockyLinux8等) 文档形成时期&#xff1a;2023年 因系统版本不同&#xff0c;构建部署应略有差异&#xff0c;但本文未做细分&#xff0c;对稍有经验者应不存在明显障碍。 因软件世界之复杂和个人能力…...

Vue-插槽(Slots)

1. 介绍 在Vue.js中&#xff0c;插槽是一种强大的功能&#xff0c;它允许你创建可重用的模板&#xff0c;并在使用该模板的多个地方插入自定义内容。 插槽为你提供了一种方式&#xff0c;可以在父组件中定义一些“插槽”&#xff0c;然后在子组件中使用这些插槽&#xff0c;插…...

新火种AI|GPT-5前瞻!GPT-5将具备哪些新能力?

作者&#xff1a;小岩 编辑&#xff1a;彩云 Sam Altman在整个AI领域&#xff0c;乃至整个科技领域都被看作是极具影响力的存在&#xff0c;而2023年OpenAI无限反转的宫斗事件更是让Sam Altman刷足了存在感&#xff0c;他甚至被《时代》杂志评为“2023年度CEO”。 也正因此&…...

安防视频监控系统EasyCVR设备分组中在线/离线数量统计的开发与实现

安防视频监控EasyCVR系统具备较强的兼容性&#xff0c;它可以支持国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等。EasyCVR平台可覆盖多类型的设备接入&am…...

spring cloud之集成sentinel

写在前面 源码 。 本文一起看下spring cloud的sentinel组件的使用。 1&#xff1a;准备 1.1&#xff1a;理论 对于一个系统来说&#xff0c;最重要的就是高可用&#xff0c;那么如何实现高可用呢&#xff1f;你可能会说&#xff0c;集群部署不就可以了&#xff0c;但事实并…...

让车辆做到“耳听八方”,毫米波雷达芯片与系统设计

摘要: 毫米波雷达,是指工作在毫米波波段(一般为30~300GHz频域,波长1~10mm)探测的雷达。毫米波雷达体积小、质量轻、空间分辨率高,穿透“雾烟灰”的能力强,还具备全天候全天时工作的优势。在智能网联汽车体系中,毫米波雷达是系统感知层不可或缺的重要硬件,能让智能驾…...

Python如何实现数据驱动的接口自动化测试

大家在接口测试的过程中&#xff0c;很多时候会用到对CSV的读取操作&#xff0c;本文主要说明Python3对CSV的写入和读取。下面话不多说了&#xff0c;来一起看看详细的介绍吧。 1、需求 某API&#xff0c;GET方法&#xff0c;token,mobile,email三个参数 token为必填项mobil…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...