[JavaScript知识库]Vue使用Axios向服务端发送请求

第一步安装Axios

npm install axios

第二步封装请求

• 在Src文件下创建一个工具文件夹 在文件夹下创建request.js
• 并配置baseurl ，代码如下

import axios from "axios"
const request=axios.create({
    baseURL:"http://localhost:8080",
})
export default request;

第三步封装api

• 在src下创建api文件夹
• 在api文件夹创建具体业务api js文件（这里以用户登录为例子）
• 在use.js文件内配置一下内容

//用户操作相关api
import request from "../utils/reuqest"
//用户登陆 get请求
export const login = (loginform) => {
    return request.get(
        "/web-app-api/user/login",   //访问服务端api接口
        {
            params: {
                userphone: loginform.userphone, //传递的参数1
                password: loginform.password,   //传递的参数2
            },
        }
    )
}

第四步在具体的页面中引用api

• 这里以登陆功能为例

<template>
  <div class="login">
    <div class="second">
      <div class="text1"><h1>登陆</h1></div>
      <el-form label-width="0px">
        <el-form-item>
          <el-input
            v-model="loginform.userphone"
            prefix-icon="el-icon-user"
            clearable
            placeholder="请输入登陆手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input           
            v-model="loginform.password"
            prefix-icon="el-icon-user"
            clearable
            placeholder="请输入登陆密码"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="false" @click="userlogin"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../api/user"; //导入封装api
export default {
  data() {
    return {
      loginform: {
        userphone: "12345678910",
        password: "12345678910",
      },
    };
  },
  methods: {
  //登陆按钮的点击事件 实现登陆
    async userlogin() {
      const res = await login(this.loginform);
      console.log(res.data.data); //查看返回信息
    },
  },
};
</script>

第五步输入账户密码尝试登陆 并查看登陆返回信息

• 查看返回信息

• 到这里就安装成功了