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 ...
随机推荐
- 巧用SpringBoot扩展点EnvironmentPostProcessor
我们的项目是单体项目,使用的是springboot的框架,随着对接的外部服务越来越多,配置文件越来越臃肿..我们将对接的外部服务的代码单独抽离出来形成service依赖,之后以jar包的形式引入,这时 ...
- Spring：Spring-IOC实例化bean的常用三种方式
Spring容器提供了三种对bean的实例化方式: 1)构造器实例化 public class Demo { private String name; //getter和setter方法略 } < ...
- linux之软连接 硬链接 link ln
p.p1 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(220, 161, 13, 1) } p.p2 { margi ...
- Adaptive AUTOSAR 学习笔记 2 - 官方文档下载及阅读建议
目前互联网上没有太多的 Adaptive AUTOSAR 的学习资料,官方文档是一个很不错的途径.看过官方文档才发现,目前很多关于 Adaptive AUTOSAR 的文章都是官方文档的简化翻译,不如 ...
- C语言：预处理 编译过程分解 证明图
- C语言：数的保存 原码 反码 补码
a=6 a=-18 a 的原码就是0000 0000 0000 0110 1000 0000 0001 0010 ...
- Git初始化本地已有项目
1.初始化仓库 git init 2.remote git remote add origin 仓库地址 3.从远程分支拉取master分支并与本地master分支合并 git pull origin ...
- 【LeetCode】1207. 独一无二的出现次数
1207. 独一无二的出现次数 知识点:set:哈希表 题目描述 给你一个整数数组 arr,请你帮忙统计数组中每个数的出现次数. 如果每个数的出现次数都是独一无二的,就返回 true:否则返回 fal ...
- Requests方法 -- post
>>> import requests 导入requests库 >>> help(requests) #查看requests方法Help on package ...
- 微信小程序云开发-云存储的应用-云相册
一.准备工作 1.创建数据库表images 2.设置数据库表images的权限 二.创建图片列表页 创建图片列表页imageList,用于展示图片列表.该页面具有跳转到图片上传页面.图片列表展示.删除 ...