0、项目搭建：vue3学习之快速搭建

1、引入axios：

npm install axios@latest

引入进度条：

npm install nprogress@latest

2、在src下创建一个utils/request.js:

// 导入axios
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import qs from "qs";
// 移除小圆圈加载进度
NProgress.configure({ showSpinner: false });

// 创建axios的实例，（统一请求地址，统一超时时间）
const request = axios.create({
    baseURL: "admin", //请求的基础url http://localhost:8888
    timeout:3000,//超时时间
})
// 拦截请求头添加token request请求 interceptors拦截器 use使用
// 还可以做加载提示
request.interceptors.request.use(function(config){

    // 请求开始，打开NProgress
    // 如果配置里面有showLoading(显示加载进度条)
    // 网络请求才显示进度条
    // if(config.showLoading){
    NProgress.start();
    // }

    //只针对get方式进行序列化
    // if (config.method === 'get') {
        // config.paramsSerializer = qs.stringify(config.params, { arrayFormat: 'repeat' })
        // console.log(config.paramsSerializer)
        // config.paramsSerializer = function(params) {
        //     console.log('52')
        //     console.log(params)
        //     console.log(qs.stringify(params, { arrayFormat: 'repeat' }))
        //     return qs.stringify(params, { arrayFormat: 'repeat' })
        // }
    // }

    // 添加token
    config.headers.Authorization="Bearer "+localStorage.getItem("token");
    // config.headers.token=localStorage.getItem("token");
    // 返回配置
    // axios请求服务器方法的配置
    return config;
})
// 拦截响应头，可以对错误进行处理  response响应
request.interceptors.response.use(
    function(res){
        // 请求结束把Nprogress关闭
        NProgress.done();
        // 返回成功的数据
        return res.data;
    },
    function(err){
        // 请求结束把Nprogress关闭
        NProgress.done();
        // 如果是401（没有权限）弹出提示
        console.log(err,"错误");
        // if(err.response.status==401){
        //     // Note.show("没有权限")
        //     // 跳转到登录
        // }else if(err.response.status===0){
        //     // Note.show("请检查网络")
        // }else if(err.response.status==404){
        //     // Note.show("请求地址错误")
        // }else{
        //     // Note.show("网络错误")
        // }
        return err.response.data;
    })



// 导出请求方法
export default request;

index.js:

export function transPrams(data){
    // {name:mumu,age:18} => name=mumu&age=18
    var str="";
    for(var k in data){
        str+=k+"="+data[k]+"&"
    }
    return str.slice(0,-1);
}

3、在src目录下创建api/user.js(名称自定义)：

// export default reqeust
import request from '@/utils/request'

// 获取评论
export function GetFeed(params){
    // get的第二个参数config的params的值是函数的参数params
    return request.get("http://localhost:8888/api/feed",{"params":params})
}
// 发表评论
export  function SendMsg(data){
    // data是个对象 {msg:"xxx"}  xxx
    return request.post("http://localhost:8888/api/feed",data)
}
// 删除评论
export function DelFeed(id){
    return request.delete("http://localhost:8888/api/feed/"+id)
}
// 修改评论
export function UpdateFeed(data){
    return request.put(
        "http://localhost:8888/api/feed/"+data.id,
        data
        )
}

// 导入出登录接口
export function Login(data){
    return request.post("http://localhost:8888/api/login",data)
}

//请求百度
export function GetBaidu(){
    return request.get("http://www.baidu.com")
}

orther.js:

import request  from "@/utils/request";
import { transPrams } from "@/utils";

export function GetHomePage(data){
    // return request.post("https://m.mi.com/v1/home/page")
    // return request.post("http://localhost:8080/v1/home/page")
    return request.post("/v1/home/page",transPrams(data),{showLoading:true})

}
// 获取分类数据的接口
export function GetCategory(data){
    return request.post("/v1/home/category_v2",transPrams(data),{showLoading:true})
}

// 获取详情接口
export function GetDetail(data){
     // content-type:"application/json"（post json）
    //  return request.post("/v1/miproduct/view",data)

    // content-type:"application/x-wwww-form-urlencoded"（post url编码）
    return request.post("/v1/miproduct/view",transPrams(data))
    
    // get请求方式
    //  return request.get("/v1/miproduct/view",{params:data})
}

// 获取购物车api
export function GetCart(){
    return request.get("http://localhost/api/cart")
}
// 添加购物车
export function AddCart(data){
    return request.post("http://localhost/api/cart",data)
}

// 删除购物车
export function DelCart(id){
    return request.delete("http://localhost/api/cart/"+id);
}

// 更新购物车
export function  UpdateCart(data){
    return request.put("http://localhost/api/cart",data);
}

// 搜索
export function Search(data){
    return request.post("/v1/hisearch/query_v3",transPrams(data))
}

4、在组件HelloWorld中输入：

<template>
  <div class="hello">
    <button type="primary" @click="baidu">点击发送百度请求</button>
  </div>
</template>

<script setup>
    import {GetBaidu} from '../api/user.js'

    const baidu = ()=>{
      GetBaidu().then(res=>{
        console.log(res)
      })
    }

</script>

<style scoped>
</style>

点击即可发送请求

2023-09-08 start:

使用axios发送post请求上传文件(multipart/form-data)到后端

end