Vue前端axios发送请求后端数据样例

1.导入脚手架axios.min.js和vue.min.js

2.模拟请求数据data.json

{"sucess": true,"code": 20000,"message": "成功","data": {"items": [{"name": "lucy", "age": 20},{"name": "mary", "age": 21},{"name": "jack", "age": 23}]}
}

3.test.html界面模拟

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><div v-for="user in userList">{{user.name}} -- {{user.age}}</div></div><script src="vue.min.js"></script><script src="vue-router.min.js"></script><script src="axios.min.js"></script><script>new Vue({el: '#app',//固定的结构data: { // 在data定义变量和初始值userList:[]},created() { // 在页面渲染之前执行this.getUserList();},mouted() {},methods: { //编写具体的方法//创建方法getUserList() {// 使用axios发送ajax请求//axios.提交方式()// axios.get("请求接口路径")axios.get("data.json").then(response => {// response就是请求之后返回数据//console.log(response)this.userList = response.data.data.itemsconsole.log(this.userList);}) // 请求成功执行then方法.catch(error => {}) // 请求失败会执行catch方法}}})</script>
</body></html>

4.测试结果

Vue前端axios发送请求后端数据样例相关推荐

vue前端如何获取django后端数据
轮播图前端获取数据 script template ajax和axios有什么区别呢? 在我们构建好后端api,也就相当于把让前端获取的数据准备好了.这个时候需要前端使用axios请求向后端api请求 ...
解决：vue 用 axios 发送请求，每次都会发送两次请求
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我的解决方法是后端加一个过滤器: package gentle.filter;import java ...
axios发送请求，后端报错：所需的防伪表单字段“__RequestVerificationToken”不存在
后端使用.net mvc开发,前端使用axios发送post请求遇到错误:所需的防伪表单字段"__RequestVerificationToken"不存在. 看到此提示我们知道原因 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
vue打开后端html文件,vue中怎么请求后端数据？
vue中怎么请求后端数据?下面本篇文章给大家介绍一下vue 请求后台数据.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue 请求后台数据需要引用vue-resource 安装 ...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置安装 axios ...
Vue安装并使用axios发送请求
前言本文主要介绍的是使用在Vue项目中安装并使用axios发送请求 axios介绍 axios是一种Web数据交互方式它是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 ...
vue 使用axios发送的请求使用md5加密
之前使用axios发送请求都是直接发送,没有加入任何加密方式,但是这种情况其实是不安全的,最近项目要求使用md5进行加密. 在项目根目录下面安装md5 npm install --save js-md ...
大前端–Vue前端体系、前后端分离
大前端–Vue前端体系.前后端分离前言 Soc:关注点分离原则 HTML+CSS+JS(视图):给用户看,刷新后台给的数据网络通信:axios 页面跳转:vue-router 状态管理:vuex ...

Vue前端axios发送请求后端数据样例

1.导入脚手架axios.min.js和vue.min.js

2.模拟请求数据data.json

3.test.html界面模拟

4.测试结果

Vue前端axios发送请求后端数据样例相关推荐

最新文章

热门文章