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. Nexus3配置yum私服

    传送门==>>Nexus私服搭建教程 yum私服的优点: >节省公网带宽 >离线安装等 1. 创建Blob Stores 2. 创建仓库 2.1 创建yum代理(aliyun样 ...

  2. 暑假自学java第八天

    1．接口的概念(关键字interface  ) Java程序设计中的接口 ( interface)也是一种规范,用来组织应用程序中的类,并调节它们的相互关系.接口是由常量和抽象方法组成的特殊类,是对抽 ...

  3. postgresql分组后获取第一条数据

    -- 根据编号分组取第一条数据 select * from table t where t.no=(select max(no) from table t1 where t1.no=t.no) -- ...

  4. JM操作数据库

    [前言] 为什么要去直连数据库,去操作数据库? 因为在我们做自动化的时候,或者在大批量准备数据的时候,自动化的时候有时候会生成很多条页面上,接口上无法删除的数据,那么就很有很多的测试数据遗留在系统上, ...

  5. 二本，拿腾讯，阿里 offer 了

    我的春招 Hello,首先自我介绍一下,我是一所普普通通的二本院校的大三学生,坐标江苏. 今年三月份拿到了腾讯实习的offer,人生中第一次面试是腾讯,部门是 TEG 的云架构,并且顺利签约,说实话内 ...

  6. tomcat禁用PUT,DELETE等一些不必要的HTTP方法

    一.背景 公司进行安全整改, 技术要求:系统软件所需支撑的WEB容器环境应禁止除GET和POST外其他HTTP(S)方法. 提供凭证:建议在不影响业务的前提下,禁用PUT.DELETE.HEAD.OP ...

  7. odoo视图 “动作” 里添加菜单按钮：案例

    ####################################################################################odoo中常用方法,在动作里面添 ...

  8. Docker run 命令参数及使用

    Docker run 命令参数及使用 Docker run :创建一个新的容器并运行一个命令 语法 docker run [OPTIONS] IMAGE [COMMAND] [ARG...] OPTI ...

  9. header.mapper 用法

    const header= [xxxx,xxxx] 基本用法是 const obj = header.map( item=>{ obj= item+'123'; return  obj }) c ...

  10. 【Java经验分享篇01】小白如何开始学会看开源项目？

    目录 前言 1.理解开源 1.1.什么是开源? 1.2.开源的定义 1.2.1.开源软件优点 1.2.2.经典开源软件案例 1.3.关于开源协议 1.3.1.如何选择开源协议 2.如何查找开源项目 2 ...