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集成logback后访问日志端点
问题描述 使用SpringBootAdmin(sba)监控Springboot服务时,配置了logback日志框架,按天滚动生成日志,此时在sba的日志监控页面出现404,如下图所示: 解决方案 查看 ...
- bson的类型
BSON是JSON的扩展数据类型
- Java读取文件创建时间和最后修改时间
import java.io.BufferedReader; import java.io.File; import java.io.IOException; import java.io.Input ...
- 压力测试工具:apache bench(ab)
作为php后端工程师,除了实现业务需求之外,需要考虑的就是自己写的服务,在大并发下是否能正常运行了,例如在我之前文章讲到的,在并发下,数据库查询可能会造成脏读幻读等情况,导致业务不正常. 但是,在一般 ...
- git使用---安装，提交，回退，修改，分支，标签等
下面是对git的各种使用及命令的基础使用,来自廖雪峰老师的git教程,这个收录下,作为git的使用总结. github上面地址为:https://github.com/Zhangguoliu/lear ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- windows下flutter2.2.3环境搭建
先上几个必上的网站: 官网: https://flutter.cn/docs/get-started/install/windows 中文资源网(毕竟中文母语,看着轻松): https://flutt ...
- QT. 学习之路 三
添加一个动作: Qt 使用QAction类作为动作.QAction包含了图标.菜单文字.快捷键.状态栏文字.浮动帮助等信息.当把一个QAction对象添加到程序中时,Qt 自己选择使用哪个属性来显示, ...
- Selenium启动Firefox示例(python版)
目前做selenium自动化使用的主流语言分为java和python,前一篇为java版,本篇介绍python实现selenium启动Firefox. 1 #-*- coding:utf-8 -*- ...
- 「CF521E」 Cycling City
「CF521E」 Cycling City 传送门 首先你能发现这个东西一定是两个环的公共边. 最开始想的是什么如果一个点被访问过三次那它一定是公共边的某一端之类的东西,然后发现被仙人掌叉掉. 然后就 ...