Vue-- Axios 交互(一)

Vue-- Axios 交互

文章目录

• [Vue-- Axios 交互](#Vue-- Axios 交互)
• • 1.什么是交互？
  • • 1.1前后端交互流程：
  • [2.什么是 Axios？](#2.什么是 Axios？)
  • • 官方资源：
  • [3.Axios 安装与使用](#3.Axios 安装与使用)
  • • 安装方式：
    • [3.1发送 GET 请求：](#3.1发送 GET 请求：)
    • [3.2发送 POST 请求：](#3.2发送 POST 请求：)

1.什么是交互？

• 交互：用户输入 → 程序响应
• 前后端分离：
  • 前端：浏览器，负责展示、交互
  • 后端：服务器，处理业务、操作数据库

1.1前后端交互流程：

1. 前端接收用户输入，发送请求到后端
2. 后端处理请求，查询数据库
3. 后端返回数据给前端展示

---

2.什么是 Axios？

• 基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js
• 功能：
  • 创建 XMLHttpRequests / HTTP 请求
  • 支持 Promise API
  • 拦截请求和响应

官方资源：

• GitHub：https://github.com/axios/axios
• 中文文档：http://www.axios-js.com/

---

3.Axios 安装与使用

安装方式：

npm install axios

或 CDN：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.1发送 GET 请求：

axios.get(url, {
  params: { id: 1000 },
  headers: { token: '...' }
}).then(res => {
  this.msg = res.data;
}).catch(err => {
  this.msg = err;
});



find: function () {
          axios.get("/servlet/pro/findByPage", {
                    params: this.params
                }).then(res => {
                    this.list = res.data.data;
                    this.totalPage =res.data.totalPage;
                });
            }

3.2发送 POST 请求：

axios.post(url, {
  userId: "01",
  userName: "MT"
}, {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(res => {
  this.msg = res.data;
}).catch(err => {
  console.log(err);
});


add: function () {
       axios.post("/servlet/pro/add", this.addParams).then(res => {
                    alert(res.data.msg);
                    if (res.data.code == 1) {
                        this.cancel();
                        this.find();
                    }
                })
            }

注意：跨域问题可在后端使用 @CrossOrigin 解决