Vue系列-02-axios
vue.js和aixos.js
# https://blog-static.cnblogs.com/files/lichengguo/vue.js
# 下载该文件，保存的路径为代码同级目录 js/vue.js 文件
# https://blog-static.cnblogs.com/files/lichengguo/axios.js
# 下载该文件，保存的路径为代码同级目录 js/axios.js 文件
js操作json数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json语法
let human = {
"username": "tom",
"password": "1234567",
"age": 20,
};
console.log(human);
console.log(human["username"])
console.log(human.age)
console.log(typeof human);
console.log("--------------------")
// JSON对象提供对json格式数据的转换功能
// stringify(json对象) # 用于把json转换成字符串
let result = JSON.stringify(human);
console.log(result); // {"username":"tom","password":"1234567","age":20}
console.log(typeof result); // string
// parse(字符串类型的json数据) # 用于把字符串转成json对象
let json_str = '{"password":"1123","age":20,"name":"jerry"}';
console.log(json_str); // {"password":"1123","age":20,"name":"jerry"}
console.log(typeof json_str); // string
let json_obj = JSON.parse(json_str);
console.log(json_obj);
console.log(typeof json_obj); // object
console.log(json_obj.age) // 20
</script>
</body>
</html>
axios的介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<script>
/*
vue.js默认没有提供ajax功能的
所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互
注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制
下载地址:
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
增 post
删 delete
改 put
查 get
axios提供发送请求的常用方法有两个：axios.get() 和 axios.post()
发送get请求
参数1：必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
参数2：可选，json对象，要提供给数据接口的参数
参数3：可选，json对象，请求头信息
axios.get('服务器的资源地址 参数1',{
params:{
// 参数2
参数名:'参数值',
}
},{
// 参数3
responseData: "json",
}).then(function (response) {
console.log("请求成功");
console.log(response);
}).catch(function (error) {
console.log("请求失败");
console.log(error.response);
});
发送post请求
参数和使用和axios.get()一样
参数1: 必填，字符串，请求的数据接口的url地址
参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
参数3：可选，json对象，请求头信息
axios.post('服务器的资源地址 参数1', {
// 参数2
username: 'tom',
password: '123456'
},{
// 参数3
responseData: "json",
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
*/
</script>
</body>
</html>
axios的get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="city">
<button @click="get_weather">点击获取天气</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
city: "",
},
methods: {
get_weather() {
if (this.city == "") {
alert("请输入城市名称")
return false
}
// http://wthrcdn.etouch.cn/weather_mini?city=城市名称
axios.get("http://wthrcdn.etouch.cn/weather_mini", {
params: {
city: this.city,
}
}).then(response => {
console.log(typeof response)
console.log(response);
}).catch(error => {
console.log(error.response)
});
},
},
})
</script>
</body>
</html>
axios的post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="login">登录</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
city: "",
},
methods: {
// 登录
login(){
axios.post("http://127.0.0.1:8080/login/", {
username: "tom",
password: "123",
}).then(function (res) {
console.log(res);
console.log(res.data);
}).catch(function (err) {
console.log(err);
})
},
//
},
})
</script>
</body>
</html>
axios的post请求服务端
package main
import (
"encoding/json"
"fmt"
"io/ioutil"
"net/http"
)
type userInfo struct {
Username string `json:"username"`
Password string `json:"password"`
}
func login(w http.ResponseWriter, r *http.Request) {
var u userInfo
defer r.Body.Close() //关闭连接
// 解决跨域
w.Header().Set("Access-Control-Allow-Origin", "*") // 允许访问所有域
w.Header().Add("Access-Control-Allow-Headers", "Content-Type") // header的类型
if r.Method == "POST" {
// 获取客户端传过来的json数据
b, err := ioutil.ReadAll(r.Body)
if err != nil {
fmt.Println("读取数据报错了哦", err)
return
}
// 通过内置的json包转换成对应的结构体
_ = json.Unmarshal(b, &u)
//
if u.Username == "tom" && u.Password == "123" {
//返回数据给客户端
w.Write([]byte("登录成功"))
} else {
w.Write([]byte("登录失败"))
}
}
}
func main() {
http.HandleFunc("/login/", login)
http.ListenAndServe("0.0.0.0:8080", nil)
}
Vue系列-02-axios的更多相关文章
- VUE系列三：实现跨域请求(fetch/axios/proxytable)
1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- Aoite 系列(02) - 超动感的 Ioc 容器
Aoite 系列(02) - 超动感的 Ioc 容器 Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Ioc 是一套解决依赖的最佳实践. 说 ...
- SAP接口编程 之 JCo3.0系列(02) : JCo Client Programming
SAP接口编程 之 JCo3.0系列(02) : JCo Client Programming 字数545 阅读52 评论0 喜欢1 JCo3.0调用SAP函数的过程 大致可以总结为以下步骤: 连接至 ...
- Java 之 I/O 系列 02 ——序列化（二）
Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 继续上篇的第二个问 ...
- Java 之 I/O 系列 02 ——序列化（一）
Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 一 序列化概述 序 ...
- Java 集合系列 02 Collection架构
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
随机推荐
- 再看Lambda架构
博客原文地址 最*看了一本<大数据系统构建>的书,发现之前对于Lambda架构的理解还是不够深入和清晰. 之前对Lambda架构的理解 Azure文档上有一张Lambda架构的图, 同时也 ...
- 【重学Java】Set集合
Set集合 Set集合概述和特点[应用] 无序不可重复 没有索引,不能使用普通for循环遍历.可以使用迭代器或者增强foreach语句遍历 TreeSet集合 TreeSet集合概述和特点[应用] 无 ...
- Kafka：docker安装Kafka消息队列
安装之前先看下图 Kafka基础架构及术语 Kafka基本组成 Kafka cluster: Kafka消息队列(存储消息的队列组件) Zookeeper: 注册中心(kafka集群依赖zookee ...
- Auto update Python 2.x to 3.x
1, How to check the python version import sys if sys.version_info < (3.0) print ("python ...
- shell 调用其他shell脚本中的变量、函数
在Shell中要如何调用别的shell脚本,或别的脚本中的变量,函数呢? 方法一: . ./subscript.sh (两个点之间,有空格) 方法二: source ./subscript. ...
- MySQL之group by的使用
使用命令:select 字段 from table_name group by col_name; 注意点: 在有group by的查询语句中,select指定的字段要么就包含在group by语句的 ...
- XXE学习（待更新）
XXE基础 XXE(XMl External Injection),即XML外部实体注入漏洞. XXE漏洞发生在应用程序解析XML输入时,没有禁止外部实体得加载,导致可以加载恶意外部文件,造成文件读取 ...
- 公钥-私钥 白名单-黑名单 Linux 远程访问及控制（SSH）
远程访问及控制一.SSH远程管理二.OpenSSH服务器① SSH (Secure Shell)协议② OpenSSH三.配置OpenSSH服务器举例四.sshd 服务支持两种验证方式五.使用SSH客 ...
- C语言：char讲解与例子
#include <stdio.h> main() { char bla,blb,blc;//声明或定义三个字符型变量,变量名为bla,blb,blc //字符型数据用标识符char来标识 ...
- Java基础00-抽象类20
1. 抽象类 1.1 抽象类概述 代码示例:没有{}大括号的方法就是一个没有方法体的方法,要把它定义成抽象方法,就要给它加一个abstract关键字,而类中有抽象方法,该类也必须是一个抽象类,所以给类 ...