vue.js和aixos.js

  1. # https://blog-static.cnblogs.com/files/lichengguo/vue.js
  2. # 下载该文件，保存的路径为代码同级目录 js/vue.js 文件
  4. # https://blog-static.cnblogs.com/files/lichengguo/axios.js
  5. # 下载该文件，保存的路径为代码同级目录 js/axios.js 文件

js操作json数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7. </head>
  9. <body>
  10.     <script>
  11.         // json语法
  12.         let human = {
  13.             "username": "tom",
  14.             "password": "1234567",
  15.             "age": 20,
  16.         };
  18.         console.log(human);
  19.         console.log(human["username"])
  20.         console.log(human.age)
  21.         console.log(typeof human);
  22.         console.log("--------------------")
  24.         // JSON对象提供对json格式数据的转换功能
  25.         // stringify(json对象)  # 用于把json转换成字符串
  26.         let result = JSON.stringify(human);
  27.         console.log(result); // {"username":"tom","password":"1234567","age":20}
  28.         console.log(typeof result); // string
  30.         // parse(字符串类型的json数据)  # 用于把字符串转成json对象
  31.         let json_str = '{"password":"1123","age":20,"name":"jerry"}';
  32.         console.log(json_str); // {"password":"1123","age":20,"name":"jerry"}
  33.         console.log(typeof json_str); // string
  35.         let json_obj = JSON.parse(json_str);
  36.         console.log(json_obj);
  37.         console.log(typeof json_obj); // object
  39.         console.log(json_obj.age) // 20
  40.     </script>
  41. </body>
  43. </html>

axios的介绍

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <script src="js/vue.js"></script>
  8.     <script src="js/axios.js"></script>
  9. </head>
  11. <body>
  12.     <script>
  13.         /*
  14.         vue.js默认没有提供ajax功能的
  15.         所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互
  16.         注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制
  17.         下载地址:
  18.         https://unpkg.com/axios@0.18.0/dist/axios.js
  19.         https://unpkg.com/axios@0.18.0/dist/axios.min.js
  21.         增 post
  22.         删 delete
  23.         改 put
  24.         查 get
  25.         axios提供发送请求的常用方法有两个：axios.get() 和 axios.post()
  27.         发送get请求
  28.         参数1：必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
  29.         参数2：可选，json对象，要提供给数据接口的参数
  30.         参数3：可选，json对象，请求头信息
  31.         axios.get('服务器的资源地址 参数1',{
  32.             params:{
  33.                 // 参数2
  34.                 参数名:'参数值',
  35.             }
  37.         },{
  38.             // 参数3
  39.             responseData: "json",
  41.         }).then(function (response) {
  42.             console.log("请求成功");
  43.             console.log(response);
  45.         }).catch(function (error) {
  46.             console.log("请求失败");
  47.             console.log(error.response);
  48.         });
  50.         发送post请求
  51.         参数和使用和axios.get()一样
  52.         参数1: 必填，字符串，请求的数据接口的url地址
  53.         参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
  54.         参数3：可选，json对象，请求头信息
  55.         axios.post('服务器的资源地址 参数1', {
  56.             // 参数2
  57.             username: 'tom',
  58.             password: '123456'
  59.         },{
  60.             // 参数3
  61.             responseData: "json",
  62.         })
  63.         .then(function (response) {
  64.             console.log(response);
  65.         })
  66.         .catch(function (error) {
  67.             console.log(error);
  68.         });
  69.         */
  70.     </script>
  71. </body>
  73. </html>

axios的get请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <script src="js/vue.js"></script>
  8.     <script src="js/axios.js"></script>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <input type="text" v-model="city">
  14.         <button @click="get_weather">点击获取天气</button>
  15.     </div>
  17.     <script>
  18.         let vm = new Vue({
  19.             el: "#app",
  20.             data: {
  21.                 city: "",
  22.             },
  23.             methods: {
  24.                 get_weather() {
  25.                     if (this.city == "") {
  26.                         alert("请输入城市名称")
  27.                         return false
  28.                     }
  30.                     // http://wthrcdn.etouch.cn/weather_mini?city=城市名称
  31.                     axios.get("http://wthrcdn.etouch.cn/weather_mini", {
  32.                         params: {
  33.                             city: this.city,
  34.                         }
  36.                     }).then(response => {
  37.                         console.log(typeof response)
  38.                         console.log(response);
  40.                     }).catch(error => {
  41.                         console.log(error.response)
  42.                     });
  43.                 },
  44.             },
  45.         })
  46.     </script>
  47. </body>
  49. </html>

axios的post请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <script src="js/vue.js"></script>
  8.     <script src="js/axios.js"></script>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <button @click="login">登录</button>
  14.     </div>
  16.     <script>
  17.         let vm = new Vue({
  18.             el: "#app",
  19.             data: {
  20.                 city: "",
  21.             },
  22.             methods: {
  23.                 // 登录
  24.                 login(){
  25.                     axios.post("http://127.0.0.1:8080/login/", {
  26.                         username: "tom",
  27.                         password: "123",
  28.                     }).then(function (res) {
  29.                         console.log(res);
  30.                         console.log(res.data);
  31.                     }).catch(function (err) {
  32.                         console.log(err);
  33.                     })
  34.                 },
  36.                 //
  37.             },
  38.         })
  39.     </script>
  40. </body>
  42. </html>

axios的post请求服务端

  1. package main
  3. import (
  4. 	"encoding/json"
  5. 	"fmt"
  6. 	"io/ioutil"
  7. 	"net/http"
  8. )
  10. type userInfo struct {
  11. 	Username string `json:"username"`
  12. 	Password string `json:"password"`
  13. }
  15. func login(w http.ResponseWriter, r *http.Request) {
  16. 	var u userInfo
  18. 	defer r.Body.Close() //关闭连接
  20. 	// 解决跨域
  21. 	w.Header().Set("Access-Control-Allow-Origin", "*")             // 允许访问所有域
  22. 	w.Header().Add("Access-Control-Allow-Headers", "Content-Type") // header的类型
  24. 	if r.Method == "POST" {
  25. 		// 获取客户端传过来的json数据
  26. 		b, err := ioutil.ReadAll(r.Body)
  27. 		if err != nil {
  28. 			fmt.Println("读取数据报错了哦", err)
  29. 			return
  30. 		}
  32. 		// 通过内置的json包转换成对应的结构体
  33. 		_ = json.Unmarshal(b, &u)
  35. 		//
  36. 		if u.Username == "tom" && u.Password == "123" {
  37. 			//返回数据给客户端
  38. 			w.Write([]byte("登录成功"))
  39. 		} else {
  40. 			w.Write([]byte("登录失败"))
  41. 		}
  42. 	}
  43. }
  45. func main() {
  46. 	http.HandleFunc("/login/", login)
  47. 	http.ListenAndServe("0.0.0.0:8080", nil)
  48. }

Vue系列-02-axios的更多相关文章

  1. VUE系列三：实现跨域请求(fetch/axios/proxytable)

    1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...

  2. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

  3. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  4. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  5. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  6. Aoite 系列(02) - 超动感的 Ioc 容器

    Aoite 系列(02) - 超动感的 Ioc 容器 Aoite 是一个适于任何 .Net Framework 4.0+ 项目的快速开发整体解决方案.Aoite.Ioc 是一套解决依赖的最佳实践. 说 ...

  7. SAP接口编程 之 JCo3.0系列(02) : JCo Client Programming

    SAP接口编程 之 JCo3.0系列(02) : JCo Client Programming 字数545 阅读52 评论0 喜欢1 JCo3.0调用SAP函数的过程 大致可以总结为以下步骤: 连接至 ...

  8. Java 之 I/O 系列 02 ——序列化（二）

    Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 继续上篇的第二个问 ...

  9. Java 之 I/O 系列 02 ——序列化（一）

    Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 一 序列化概述 序 ...

  10. Java 集合系列 02 Collection架构

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

随机推荐

  1. 虚拟机centos7环境搭建，系统分区，静态IP配置

    文章目录 1.虚拟机安装centos7 2.系统分区 3.配置静态IP centos7下载地址 http://mirrors.aliyun.com/centos/7/isos/x86_64/ Cent ...

  2. varnish配置语言(1)

    目录 1. vcl语法 1.1 主体语法 1.2 操作符 1.3 Subroutines 1.4 关键字 2. 内置的Subroutines 2.1 client-side vcl_recv vcl_ ...

  3. python -- 面向对象编程(继承、重写)

    一.继承 子类可以继承父类的所有公有成员,但不能直接访问父类的私有成员,只能通过父类的公有方法间接访问私有属性或私有方法. 如: class DerviedClassName(BaseClassNam ...

  4. 网络损伤仪WANsim中的乱序功能

    乱序 乱序功能需要指定每个帧 发生乱序的概率,以及新的帧的位置相较于原来位置的时间范围. 乱序的概率范围是0%~20%,颗粒度是0.001%.Delay的设置范围为 0s~10s,颗粒度为0.1 ms ...

  5. 【C#】C#中使用GDAL3（二）：Windows下读写Shape文件及超详细解决中文乱码问题

    转载请注明原文地址:https://www.cnblogs.com/litou/p/15035790.html 本文为<C#中使用GDAL3>的第二篇,总目录地址:https://www. ...

  6. 《Node+MongoDB+React 项目实战开发》已出版

    前言 从深圳回长沙已经快4个月了,除了把车开熟练了外,并没有什么值得一提的,长沙这边要么就是连续下一个月雨,要么就是连续一个月高温暴晒,上班更是没啥子意思,长沙这边的公司和深圳落差挺大的,薪资也是断崖 ...

  7. [考试总结]noip模拟6

    我好菜啊 真上次第二这次倒二... 因为昨天还没有改完所有的题所以就留到今天来写博客了 这次考试总结的教训有很多吧,反正处处体现XIN某人的laji,自己考试的是后本以为一共四个题目,三个题目都没有看 ...

  8. javascript学习笔记-（三）

    ES6标准新增了一种新的函数:Arrow Function(箭头函数) 案例: 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: ...

  9. Python自动化测试面试题-编程篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  10. 第一篇 -- Go环境的搭建以及Hello World程序编写

    VS Code的下载和安装 1. 下载链接(本人下载版本VSCodeUserSetup-x64-1.57.0.exe) https://code.visualstudio.com/download 友 ...