关于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.childComponentRef
    const 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文档。

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

参考资料和推荐阅读

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

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

  • 26
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
对于Vue前端接口搜索功能,你可以按照以下步骤进行实现: 1. 创建一个输入框和搜索按钮,用于用户输入搜索关键字和触发搜索操作。 2. 在Vue组件中,使用`v-model`指令绑定输入框的值到一个数据属性,例如`searchKeyword`。 3. 添加一个点击事件处理函数,该函数在用户点击搜索按钮时触发。可以使用`@click`指令或`v-on:click`绑定事件。 4. 在事件处理函数中,可以使用Axios或其他HTTP库发送异步请求到后端接口,传递搜索关键字作为参数。 5. 处理接口返回的数据,将结果展示在前端页面中。 以下是一个简单的示例代码: ```vue <template> <div> <input type="text" v-model="searchKeyword" placeholder="输入关键字" /> <button @click="search">搜索</button> <ul> <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { searchKeyword: '', searchResults: [], }; }, methods: { async search() { try { const response = await axios.get('/api/search', { params: { keyword: this.searchKeyword }, }); this.searchResults = response.data; } catch (error) { console.error(error); } }, }, }; </script> ``` 上述代码中,用户在输入框中输入关键字后,点击搜索按钮会触发`search`方法。该方法通过Axios发送GET请求到`/api/search`接口,并将关键字作为参数传递给后端。后端处理请求并返回搜索结果,前端将结果存储在`searchResults`数组中,并在页面中展示出来。 请注意,上述代码仅作为示例,实际情况中,你需要根据你的后端接口和数据结构进行适当的调整和修改。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执于代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值