网络应用 Vue结合网络数据开发应用 axios+vue

他与本地应用的不同点是 data中的数据有一部分是从网络中获取到的

axios(网络请求库) 内部就是ajax 但是通过封装后用起来更加便捷

axios是一个功能强大的网络请求库 js库

作为js库 首先我们需要导包 确保在有网的状态下

在引入后 他会在页面上注册一个全局的axios对象 来发送请求

axios.get(提供的接口地址?查询字符串key=value&key2=values).then(function(response){},function(err){})

axios.post(提供的接口地址,{查询字符串key:value,key2:values}).then(function(response){},function(err){})

前者用来接收数据 err是错误 里面的参数response和err都可以获取到

axios里面的this会变 但在axios外部可以获取到vue的this

我们就可以将this赋值给that var that = this

ajax和axios的优缺点对比

ajax：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮

基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务

axios：

从 node.js 创建 http 请求

支持 Promise API

客户端支持防止CSRF

提供了一些并发请求的接口（重要，方便了很多的操作）

案例：

<!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>axios+vue基本使用</title>

	</head>

	<body>

		<div id="app">

			<input type="button" value="获取笑话" @click="getJoke">

			<p> {{ joke }}</p>

		</div>

		<input type="button" value="get请求" class="get">

		<input type="button" value="post请求" class="post">

		<!-- 官网提供的 axios 在线地址 -->

		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<script src="js/vue.js"></script>

		<script>

			/*

		            接口:随机获取一条笑话

		            请求地址:https://autumnfish.cn/api/joke

		            请求方法:get

		            请求参数:无

		            响应内容:随机笑话

		        */

			var app = new Vue({

				el: "#app",

				data: {

					joke: "很好笑的笑话"

				},

				methods: {

					getJoke: function() {

						// console.log(this.joke);

						var that = this;

						axios.get("https://autumnfish.cn/api/joke").then(function(response) {

							// console.log(response)

							console.log(response.data);

							// console.log(this.joke);

							that.joke = response.data;

						}, function(err) {})

					},

				},

			})

			/*

			    接口1:随机笑话

			    请求地址:https://autumnfish.cn/api/joke/list

			    请求方法:get

			    请求参数:num(笑话条数,数字)

			    响应内容:随机笑话

			*/

			document.querySelector(".get").onclick = function() {

				axios.get("https://autumnfish.cn/api/joke/list?num=6")

					// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")

					.then(function(response) {

						console.log(response);

					}, function(err) {

						console.log(err);

					})

			}

			/*

			     接口2:用户注册

			     请求地址:https://autumnfish.cn/api/user/reg

			     请求方法:post

			     请求参数:username(用户名,字符串)

			     响应内容:注册成功或失败

			 */

			document.querySelector(".post").onclick = function() {

				axios.post("https://autumnfish.cn/api/user/reg", {

						username: "盐焗西兰花"

					})

					.then(function(response) {

						console.log(response);

						console.log(this.skill);

					}, function(err) {

						console.log(err);

					})

			}

		</script>

	</body>

</html>

axios+vue的更多相关文章

  1. 前端笔记之Vue（七）Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

  2. mock axios vue的数据传递关系

    最近有一个项目要快速出一个前端demo,选择了vue-element框架(虽然其实很想用react,但是为了求快) 本人的基础只有初级的html/css/js知识,和python后端的一些简单工作,和 ...

  3. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  4. 前端向服务器请求数据并渲染的方式（ajax/jQuery/axios/vue）

    原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result

  5. axios+vue实现动态渲染员工数据+数据是对象

    <style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...

  6. Vue.js 第3章 axios&Vue过渡动画

    promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...

  7. vue 之 axios Vue路由与element-UI

    一. 在组件中使用axios获取数据 1. 安装和配置axios 默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装. 在项目根目录中使用 npm安装包 npm install ...

  8. .Net Core WebAPI + Axios +Vue 实现下载与下载进度条

    故事的开始 老板说:系统很慢,下载半个小时无法下载,是否考虑先压缩再给用户下载? 本来是已经压缩过了,不过第一反应应该是用户下的数量多,导致压缩包很大,然后自己测试发现,只是等待的时间比较久而已,仍然 ...

  9. Axios +Vue + themeleay

    1.pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  10. axios + vue导出excel文件

    (使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...

随机推荐

  1. Go语言修改字符串

    Go 语言的字符串无法直接修改每一个字符元素,只能通过重新构造新的字符串并赋值给原来的字符串变量实现.请参考下面的代码: angel := "Heros never die" an ...

  2. 入门Dify平台：知识库分析

    今天,我们来简单了解一下 Dify 的知识库功能.其实,它并没有想象中那么复杂或难以操作.无论是 Dify 还是其他类似平台,都已经将知识库的功能封装得非常完善.你可以直接把它当作一个云端的记事本,内 ...

  3. [源码系列：手写spring] IOC第十四节：容器事件和事件监听器

    代码分支 https://github.com/yihuiaa/little-spring/tree/event-and-event-listenerhttps://github.com/yihuia ...

  4. 【Java】Java实现简单异或加密

    Java实现简单异或加密 零.需求 在做一个简单的Web项目,需要把账号密码以Cookie的形式存储到浏览器中记住,不能直接明文,故需要一种简单的加密方式,想到了异或加密. 壹.实现 /** * 异或 ...

  5. TidHTTP的post编码，老掉牙的问题

    TidHTTP使用post时,需要提交json字符串. 那么采用什么编码,这个问题就头大了.目前xe已经不要考虑编码转换问题.但是.... 我们使用ISuperObject操控json.那么最后提交到 ...

  6. WSGI、Starlette、Uvicorn 与 Gunicorn 核心介绍及使用指南

    WSGI.Starlette.Uvicorn 与 Gunicorn 的核心介绍及使用指南 一.技术定位与核心差异 WSGI(Web Server Gateway Interface) • 定义:传统的 ...

  7. [开源] 分享一个自己开发的, 整合SMS/Mail/Telegram/微信四个平台的开源信息收发平台

    起因于已有的聚合信息发送平台无法满足自己的需求. 不支持我需要的平台,或不支持接收信息后进行处理,或不放心把涉及隐私的消息通过第三方平台发送 利用SMS发送短信(上一篇文章中分享的开源项目) 利用SM ...

  8. MySQL 中 `LIMIT 100000000, 10` 和 `LIMIT 10` 的执行速度是否相同？

    在MySQL中,LIMIT 100000000, 10和LIMIT 10的执行速度通常不会相同.它们的差异在于如何处理数据的检索. LIMIT 10: LIMIT 10表示从查询结果中获取前10条记录 ...

  9. ArcGIS Desktop 10.7 完美汉化安装教程

    1,下载文件并解压缩,双击[Esri ArcGIS Desktop v10.7.0.exe] 2.在安装向导中选择[Next] 3.选中[I accept the master agreement]我 ...

  10. <HarmonyOS第一课11>合理使用动画和转场#鸿蒙课程##鸿蒙生态#

    课程简介 <HarmonyOS第一课:合理使用动画和转场>是专为HarmonyOS开发者设计的课程,旨在教授如何在应用开发中合理运用动画和转场效果.课程首先强调动画在提升用户体验中的重要性 ...