网络应用 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. Oracle操作审计

    因为信安的要求,要对Oracle加审计.看了一下,原来是有开的,类型为DB: SQL> show parameter audit; NAME TYPE VALUE --------------- ...

  2. 选择排序（LOW）

    博客地址:https://www.cnblogs.com/zylyehuo/ # _*_coding:utf-8_*_ def select_sort(li): for i in range(len( ...

  3. OkHTTP发送POST请求传送JSON数据

    导入依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> ...

  4. AIX操作系统基本命令

    1,内核 bootinfo -k   2,硬件 bootinfo -r lscfg |grep proc lspv lscfg   3,操作系统 oslevel -r oslevel -s uname ...

  5. 开源姿势识别 Demo

    最近项目中要用到姿势识别,调研了 BlazePose. MoveNet 等模型,以下是一些详细的对比. 包括 mediapipe 和 tfjs 等运行环境,webgl,webgpu,wasm 都做了尝 ...

  6. 【Python】批量导出word文档中的图片、嵌入式文件

    Python 批量导出word文档中的图片.嵌入式文件 需求 学生试卷中的题目有要提交截图的,也有要提交文件的,为了方便学生考试,允许单独交或者嵌入Word中提交,那么事后如何整理学生的答案?单独提交 ...

  7. RESTful的连接时间超时时间设定

    dsResrful的连接方式时,如何设定timeout呢? DSRestConnection.HTTP.ConnectTimeout := 5000; 就这么简单.因为封装的indy的TidHTTP. ...

  8. MySQL隐藏手机号

    1.实现方法 通过MySQL的left.right.contact函数实现 2.语法说明 contact()函数 作用:将多个字符串连接成一个字符串 语法:concat(字符串1,....,字符串n) ...

  9. 函数组件的声明方式及差异+React.memo和userCallback区别

    1.函数组件的声明方式及差异 普通函数声明 箭头函数声明 使用React.FC类型(TypeScript专用) interface Props { content: string } // 写法一 c ...

  10. MaxKB 开启模型联网搜索

    前言 模型联网搜索是当前大语言模型(LLM)领域的重要技术方向,其核心在于通过结合互联网实时数据与模型推理能力,突破预训练数据的时间限制,提供更精准.动态的回答. 核心应用场景 实时信息补充 例如查询 ...