热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:vue本地设置请求接口及数据

本文由编程笔记#小编为大家整理,主要介绍了vue本地设置请求接口及数据相关的知识,希望对你有一定的参考价值。1、安装axios
本文由编程笔记#小编为大家整理,主要介绍了vue本地设置请求接口及数据相关的知识,希望对你有一定的参考价值。


1、安装axios

yarn add axios

2、在入口文件main.js中设置


import { getRequest, postRequest} from ‘./libs/api‘;//导入
Vue.prototype.getRequest = getRequest;//注入到vue对象
Vue.prototype.postRequest = postRequest;//注入到vue对象

 3、创建api接口

  1:src目录下创建libs文件夹

  2:在libs文件夹中创建api.js接口文件


import axios from ‘axios‘
// 统一请求路径前缀
let base = ‘‘
// let base = ‘http://localhost:60155‘;

export const getRequest
= (url, params) => {
// let accessToken = getStore(‘accessToken‘);
return axios({
method:
‘get‘,
url: `${base}${url}`,
params: params
// headers: {
// ‘accessToken‘: accessToken
// }
})
}
export const postRequest
= (url, params) => {
// let accessToken = getStore("accessToken");
return axios({
method:
‘post‘,
url: `${base}${url}`,
data: params,
transformRequest: [
function (data) {
let ret
= ‘‘
for (let it in data) {
ret
+= encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
}
return ret
}],
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded‘
// ‘accessToken‘: accessToken
}
})
}
// Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
//
引用axios
//
声明导出接口getRequest函数
//
传入url params参数
//
声明get/post 赋值url 和params

4、在vue文件中的created中调用接口


created: function () {

// 请求数据赋值
this.getRequest(‘/static/static1.json‘).then(res => {
console.log(res)
// 赋值
this.remindlist = res.data.Todayplanset
})
}

注意请求的“/static/staric1.json”的路径,这个文件放在public文件夹中(public默认为根目录  报404为路径问题)

最后请求完成 返回的json数据

技术分享图片

 


推荐阅读
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
  • 延迟注入工具(python)的SQL脚本
    本文介绍了一个延迟注入工具(python)的SQL脚本,包括使用urllib2、time、socket、threading、requests等模块实现延迟注入的方法。该工具可以通过构造特定的URL来进行注入测试,并通过延迟时间来判断注入是否成功。 ... [详细]
  • node.jsrequire和ES6导入导出的区别原 ... [详细]
  • vue使用
    关键词: ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项,包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法,如下载缺失的msvcr110.dll文件等。通过本文的指导,读者可以轻松地在Windows系统下配置PHP5.6,并解决一些常见的配置问题。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 本文介绍了如何使用vue-awesome-swiper组件,包括在main.js中引入和使用swiper和swiperSlide组件,以及设置options和ref属性。同时还介绍了如何在模板中使用swiper和swiperSlide组件,并展示了如何通过循环渲染swipes数组中的数据,并使用picUrl属性显示图片。最后还介绍了如何添加分页器。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 微信官方授权及获取OpenId的方法,服务器通过SpringBoot实现
    主要步骤:前端获取到code(wx.login),传入服务器服务器通过参数AppID和AppSecret访问官方接口,获取到OpenId ... [详细]
author-avatar
一马当先_市政建设团委
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有