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 ...
随机推荐
- leetcode TOP100 两数相加
两数相加 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表 ...
- Linux中ftp服务器搭建
一.FTP工作原理 (1)FTP使用端口 [root@localhost ~]# cat /etc/services | grep ftp ftp-data 20/tcp #数据链路:端口20 ftp ...
- HMAC简介及HMAC-SHA256实现Demo
一.什么是HMAC HMAC是一种使用单向散列函数来构造消息认证码的方法,其中HMAC中的H就是Hash的意思. HMAC中所使用的单向散列函数并不仅限于一种,任何高强度的单向散列函数都可以被用于HM ...
- STP概述简介及生成树算法
目录: STP概述 STP简介 生成树算法 选择根网桥 选择根端口 选择指定端口 BPDU(桥协议数据单元) STP利用BPDU选择根网桥 STP的收敛 VLAN与STP关系 MSTP多生成树协议华为 ...
- springMVC-1-servlet回顾
SpringMVC重点学习 项目目标:SpringMVC+Vue+SpringBoot+SpringCloud+Linux spring:IOC+AOP SpringMVC:SpringMVC的执行流 ...
- CSS居中对齐终极指南
本文首发于我的公众号:前端新世界 欢迎关注 本文将讨论可用于居中对齐元素的6种CSS技术(按照最佳实践排序),以及每一种技术最适合应用的场景.这里,居中对齐指的是将元素放置在其父元素的水平和垂直中心. ...
- P6845 [CEOI2019] Dynamic Diameter
P6845 [CEOI2019] Dynamic Diameter 题意 一颗带权树,每次更改一条边的权,每次修改后求出最大直径.强制在线. 思路 \(O(n\log^2n)\) 的暴力做法. 根据经 ...
- NOI Online 提高组 题解
来补坑了-- 个人认为三道题难度差不多-- 还有要说一嘴,为啥我在其他网站代码都好好的,复制到 cnblogs 上 Tab 就成 8 空格了?不过也懒得改了. T1 序列 首先,遇到这种加一减一还带附 ...
- docker exec 参数详解
Usage: docker exec [OPTIONS] CONTAINER COMMAND [ARG...] Run a command in a running container Options ...
- SickOs1.2靶机
仅供个人娱乐 靶机信息 靶机下载地址:https://www.vulnhub.com/entry/sickos-12,144/一.主机发现 arp-scan -l 二.端口扫描 1. masscan ...