一、网络应用

Vue结合网络数据开发应用

1.1axios

功能强大的网络请求库

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})axios.post(地址{key1=value1，key2=value2}).then(function(response){},function(err){})

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或者失败时触发
通过回调函数的形参可以获取响应内容或错误信息

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button class="get">get请求</button><button class="post">post请求</button><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){}) --><!-- axios.post(地址?key1=value1&key2=value2).then(function(response){},function(err){}) --><script>/*  随机笑话请求地址:https//autumnfish.cn/api/joke/list请求方法:get请求参数：num响应内容：随机笑话 */document.querySelector(".get").onclick = function () {axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {console.log(response);}, function (err) {console.log(err);})}/* 用户注册请求地址：https://autumnfish.cn/api/user/reg请求方法：post请求参数：username响应内容：注册成功或失败 */document.querySelector(".post").onclick = function () {axios.post("https://autumnfish.cn/api/user/reg", { username: "jack" }).then(function (response) {console.log(response);}, function (err) {console.log(err);})}</script>
</body></html>

文档传送门:GitHub - axios/axios: Promise based HTTP client for the browser and node.js

1.2axios+vue

    <!-- 官网提供的axios在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 开发环境版本，包含了有帮助的命令行警告--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><button @click="getJoke">获取笑话</button><p>{{joke}}</p></div><!-- 官网提供的axios在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 开发环境版本，包含了有帮助的命令行警告--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>/*         接口：随机获取一条笑话请求地址：https://autumnfish.cn/api/joke请求方法：get请求参数：无响应内容：随机笑话 */var app = new Vue({el: "#app",data: {joke: "很好笑的笑话"},methods: {getJoke: function () {var that = this;axios.get("https://autumnfish.cn/api/joke").then(function (response) {that.joke = response.data;},function (err) {console.log(err);})}}})</script>
</body></html>

【前端】Vue网络应用相关推荐

常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
Spring Boot笔记-get请求发送json数据（方便前端vue解析）
目录基本概念代码与实例基本概念这里有一个思路,后端只发送Json数据,前端vue去解析.这样的话,就可以做到前后端分离,耦合性就很低了. 代码与实例程序运行截图如下: 得到后,使用vue去解 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分本届作业聊一聊React和Vue的区别老版本的项目环境如何创 ...
前端 vue + element + vux
前端 vue + element + vux 页面效果学习资料 https://blog.csdn.net/yangwenpei116/article/details/90206523
前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏
提示:前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏说明一.首先是适配屏幕的缩放比 1. ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...

【前端】Vue网络应用

一、网络应用

1.1axios

1.2axios+vue

【前端】Vue网络应用相关推荐

最新文章

热门文章