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 ...
随机推荐
- CSS水平居中与垂直居中的方法
一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...
- 转：nginx服务器配置
1. user www-data说明的是使用的用户,至于www-data这个用户是系统自带的,我们不用说系统里没有这个账户的,虽然这个账户具体是做什么的,我也不太清楚2.worker_processe ...
- C语言：地址
一切都是地址 C语言用变量来存储数据,用函数来定义一段可以重复使用的代码,它们最终都要放到内存中才能供 CPU 使用.数据和代码都以二进制的形式存储在内存中,计算机无法从格式上区分某块内存到底存储的是 ...
- Odoo ORM研究1 - BaseModel中的类属性的作用
概述 我们在写odoo项目的时候,经常继承model.Model来创建我们自己的ORM映射关系表. AbstractModel = BaseModel # 源码 class Model(Abstrac ...
- Tutorial_6 运行结果
1.buyer_favorites.txt 2.代码 package mapreduce; import java.io.IOException; import java.util.Iterator; ...
- 小程序框架WePY 从入门到放弃踩坑合集
小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...
- 优化 Workerman 检查主进程是否存活的逻辑
主要新增了判断进程是否为 Workerman 进程的逻辑,从而优化了确定主进程是否存活的准确性 发现问题 年前逛 GitHub 的时候,发现 Workerman 有一个 2017 年打开的 Issue ...
- Python urllib翻译笔记一
22.5.urllib- URL处理模块urllib 是一个收集几个模块以处理URL的包: urllib.request 用于打开和阅读URL urllib.error 包含由urllib.reque ...
- 网络损伤仪WANsim中的时延的不同模型
网络损伤仪WANsim中的3种时延模型 时延指的是报文从网络的一端到达另一端所花费的时间. 网络损伤仪WANsim中为用户提供了3种时延损伤的模型.常量模型.均匀分布.正态分布. 这3种模型按照各自的 ...
- tomcat的单例多线程代码示例（十）
一.懒汉式单例多线程模式 1.创建模拟的servlet生成器 package cn.bjsxt.sing; import java.util.UUID; public class LszySingle ...