山东大学项目实训—微信小程序选座系统—7月2日

山东大学项目实训—7月2日

微信小程序教室选座系统PC端设计（第五天）

学习目标：

学习VUE和后端交互，即axios依赖的使用

---

学习内容：

一、axios简介

axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，它本身具有以下性质：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF
• 体量相对较小

二、安装使用

1、安装

在工程目录下，使用命令行：

npm install axios --save-dev

2、改写原型链
在main.js中引用axios。由于在其他组件中无法使用axios命令，所以需要将axios改写为Vue的原型属性。

import axios from 'axios' //引入axios
Vue.prototype.$ajax=axios //修改Vue的原型属性

3、axios的常用API（参数传递）

• get：查询数据
• post：添加数据
• put：修改数据
• delete：删除数据

1）get传递参数
通过URL传递参数

//通过URL传递参数
axios.get('http://localhost:8088/sayhi?name=xxx').then(function (ret) {
        alert(ret.data)
    })

2）POST传递参数

//通过对象传递参数（默认传递的是json格式的数据）
axios.post('http://localhost:8088/login',{
        name:"admain",
        pass:"1234",
    }).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

3）axios的响应结果

• data：实际响应回来的数据
• headers：响应头信息
• status：响应状态码
• statusText：响应状态信息

4、asyns/await接口调用

基本用法：

• async/await是ES7引入的语法，可以更加方便的进行异步操作
• async关键字用于函数上（async函数的返回值是Promise实例对象）
• await关键字用于async函数中（await可以得到异步的结果）

---

学习产出

一份简易学习报告，对已有代码进行进一步完善。

---