VUE2创建调用接口页面并引入

最新推荐文章于 2024-07-23 11:05:47 发布
最新推荐文章于 2024-07-23 11:05:47 发布
阅读量292 收藏
点赞数 7
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_77051183/article/details/138304513
版权

最近在项目中用到了这个，在API文件里创建调用接口的组件

就是这样的，但是要怎么引入到使用的页面呢？

首先要找到使用的页面，然后在script中使用import

这样引入，然后需要在methods里面使用这个组件

其次是在munted（）里面调用这个方法(this.costOptimizeBard())，记住引用的方法名和调用的方法名不能重复，就像

这两个不能重复，不然容易报错。

然后在这里打印一下，就可以看到接口返回的值了

鹿鸣
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 调用 RESTful风格接口操作
11-19
本篇将详细介绍如何在Vue项目中调用RESTful风格的接口进行CRUD（创建、读取、更新、删除）操作，并探讨相关技术点。 首先，让我们看下Java后端提供的RESTful接口示例： 1. 登录接口：使用`@GetMapping`注解，路径...
vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2
快乐学习
04-17 1万+
本文中教学如何从创建vue项目到从Element UI官网引用组件来创建一个新的vue页面，包括路由注册这些都有详细的说明介绍Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。 Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。
Vue2添加API接口地址修改配置文件的方法[艾思软件]
赵吉平的专栏
09-03 1644
在Vue的项目环境部署中, 经常遇到, Vue的的API接口地址需要修改的情况, 默认情况下, Vue打包后就没办法修改了, 修改一下就需要重新打包, 这给运维人员和开发人员都带来很多不开森. 添加个配置文件, 让运维人员随时修改接口地址是非常必要的. 可以经过下面简单几步实现
Vue2 (六)：使用组件的三大步骤
weixin_51000853的博客
09-15 1518
使用创建，其中options和时传入的那个options几乎一样，但也有点区别；1）.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2）.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，。3）.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
vue2 解决跨域并且在页面上如何调用后台接口
weixin_46165123的博客
08-07 1221
假设你的Vue.js应用程序运行在http://localhost:8080,而你的后端API运行在http://api.example.com。首先, 在你的Vue项目的根目录下创建vue.config.js文件(如果已经存在, 请忽略此步骤).在上面的配置中, 我们将所有以/api开头的请求代理到目标URL。
4.Vue-Vue调用第三方接口
玄衣手记
10-16 2139
用vue调用第三方接口
vue项目中请求接口的使用,vue前端怎么调用接口
纸尿裤排行
09-15 7566
那么我们可以修改下代码，使其支持自定义模板Vue.component('XSelect',{props:['value','options',{name:'template',default:''}],created(){varoptionTpl=this.templatethis.$options.template=`${optionTpl}`}})用户使用是就可以传入模板了可能存在的问题我们知道Vue在内部帮我们做了许多优化，但是在这里可能会由于某些优化导致动态拼接的模板无法渲染成功。
vue之封装多个组件调用同一接口的案例
11-19
本文将探讨如何在Vue中封装公共方法，以实现多个组件调用同一接口并返回接口调用的结果。 首先，让我们看一个简单的例子。在描述中提到的`getAll()`函数是一个尝试获取所有教师数据的接口调用。它使用了一个名为`$...
详解vue项目中调用百度地图API使用方法
10-17
总结来说，调用百度地图API在Vue项目中的主要步骤包括申请API密钥、引入API库、Webpack配置、创建地图容器、引入BMap模块、初始化地图对象，并在Vue组件中进行交互。通过这些步骤，你可以顺利地在Vue项目中集成并...
vue实现的请求服务器端API接口示例
12-11
在Vue.js应用中，与服务器端API接口交互是常见的需求，这通常涉及到数据的获取、更新、创建和删除等操作。本示例介绍了一个使用axios库实现的Vue中请求服务器端API接口的方法。 首先，引入axios库，它是一个基于...
创建Vue2项目，调用后端接口
qq_21344887的博客
08-13 2727
Vue
vue2.0项目调用多个IP接口
u010022260的博客
11-12 4848
vue2.0项目调用多个IP接口的 项目中经常遇到跨域问题，通过我们在本地配置代理可以解决这个问题。可偶尔遇到一个页面里面需要调用来自两个以上不同IP段的接口，多个IP要怎么配置代理呢，请往下看。 在项目目录 config/index.js文件配置代理 module.exports = { ... dev: { proxyTable: { '/api': { target: 'http://192.168.17.219:8083',
vue中调用接口方式
zhang_zbb的博客
07-04 4996
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 1.Promise Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 主要解决异步深层嵌套的问题。 promise 提供了简洁的API,使得异步操作更加容易。 1.1 基于Promise发送Ajax请求 <script type="text/javascript"> /*
vue2. 关于vue2 app 请求接口代理的两种方式
岁月清浅， 不落痕迹
09-03 2068
重点内容 . 1. webpack.dev.conf.js中创建接口: // 开头调用: var express = require(‘express’) var axios = require(‘axios’) var app = express() var apiRoutes = express.Router() app.use(‘/api’, apiRoutes) // d...
Vue学习笔记（2）前后端接口调用
h13245的博客
10-18 3376
前后端交互 前后端交互模式 接口调用方式 原生ajax 基于JQuery的ajax fetch axios __传统形式的URL：__协议（http，https）+host（www.baodu.com）+端口（80）+路径（/admin/getBlankTable）+query（查询参数?username=admin&age=12）+fragment（锚点，定位页面的某个位置） http://www.tradition.com/admin/getBlankTable?username=ad
Vue中的接口调用
就是有点怕怕的博客
03-20 4494
1.Fetch Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。 <script type="text/javascript"> /* Fetch API 基本用法 */ fetch('http://localhost:3000/...
Vue项目中的接口调用
热门推荐
一起学习前端知识，一起成为前端开发工程师！
04-24 2万+
在企业开发过程中，往往有着明确的前后端的分工，前端负责接收、使用接口，后端负责编写、处理接口。 对于前端如何使用接口，今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中在src文件夹中，，有这么些内容。 我们常常把接口文件，新建一个文件夹在src下，命名为api，api内的文件便是接口文件。 通常把后端的接口写在api文件夹下，自己命名为xxx.js // 登录 export function login(data) { return request({ url: '/api/c
Vue接口调用问题
不二青春
05-08 8438
应公司需求，接口需要对接vue，记录一下碰到的问题 开发环境： 系统：windows10 php开发环境：PHPstudy（PHP5.6.27 NTS+Apache+MySQL） 前端：vue2.x 后端：thinkPHP5.0.24 一、接口调用 前提是安装了axio main.js中引用 import axios from 'axios' Vue.prototype.$h...
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
最新发布
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 460
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
vue2怎么调用接口
07-28
在Vue2中调用接口的方法如下所示： 首先，在页面的`<script>`标签中，通过`import`语句引入需要使用的接口，例如： ```javascript import { login, captchaImage, getInfo, logOut, reset } from '@/api/login' ``` 这里的`@/api/login`是指引入的接口文件的地址。 接下来，可以在需要调用接口的地方使用以下代码： ```javascript 接口名({参数1:页面中的参数1，参数2：页面中的参数2}).then(res => { console.log(res) // res就是调用接口后，后台返回过来的结果，一般数据储存在res.data.data中，具体情况而论 }) ``` 这里的`接口名`是指需要调用的接口名称，`参数1`和`参数2`是接口需要的参数，可以根据实际情况进行传递。 举个例子，假设在一个名为`Table.vue`的组件中需要调用接口获取数据，可以按照以下方式编写代码： ```html <template> <div> <el-button type="success" v-on:click="getData">获取数据</el-button> <el-table :data="datas" style="width: 100%"> <el-table-column prop="id" label="编号" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> </el-table> </div> </template> <script> import axios from 'axios' export default { name: "Table", data() { return { datas: \[\] } }, methods: { getData() { let _this = this axios.get('http://localhost:8082/user/list').then(function (response) { _this.datas = response.data }) } } } </script> <style scoped> </style> ``` 在上述代码中，通过点击按钮触发`getData`方法，该方法使用`axios`库发送GET请求到指定的接口地址，然后将返回的数据赋值给`datas`，从而实现在页面中显示接口返回的数据。 请注意，这里使用了`_this`变量来保存组件实例的引用，以便在回调函数中使用正确的`this`。 #### 引用[.reference_title] - *1* *2* [Vue项目中的接口调用](https://blog.csdn.net/weixin_45369856/article/details/124374678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [创建Vue2项目，调用后端接口](https://blog.csdn.net/qq_21344887/article/details/126323077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值