基于Vite+Vue3 给项目引入Axios

基于Vite+Vue3 给项目引入Axios,方便与后端进行通信。

系列文章指路👉

系列文章-基于Vue3创建前端项目并引入、配置常用的库和工具类

文章目录

安装依赖

npm install axios

新建src/config/config.js 用于存放常用配置

javascript 复制代码
const config = {
   baseUrl: '/boot-test'
}

export default config

进行简单封装

引用阶段先简单封装,后续有复杂功能添加进来再进行改造。

src目录下,新建utils,axios两个文件夹,新建index.js

javascript 复制代码
import axios from 'axios'
import config from "@/config/config.js";

const http = axios.create()
http.defaults.baseURL = config.baseUrl
http.defaults.timeout = 15 * 1000
http.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'

export default http

解决跨域问题

复用我们之前的后端项目,作为Vue3的后端:系列文章-基于SpringBoot3创建项目并配置常用的工具和一些常用的类

需要解决跨域问题,前后端解决都可以,我们本次采用前端解决。

javascript 复制代码
    server: {
        open: true,// 启动项目自动弹出浏览器
        port: 4000,// 启动端口
        proxy: {
            '/boot-test': {
                target: 'http://localhost:8001/boot-test',	// 实际请求地址
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/boot-test/, '')
            },
        }
    },

调用尝试

写个小demo,把后端请求到的水果列表展示到前端表格上。

html 复制代码
<template>
  <h3>
    展示水果列表
  </h3>
  <div style="width: 1000px;">
    <a-table bordered  :scroll="{ y: 300 }"
             :dataSource="tableData" :columns="tableColumn"/>
  </div>

</template>

<script setup>
import {ref} from 'vue';
import http from "@/utils/axios/index.js";

let tableData = ref([])
let tableColumn = initColumns()
getAjaxData()

function getAjaxData() {
  http.get("/goods/fruit/list")
      .then(resp => {
        if (resp && resp.data.code === 200) {
          tableData.value = resp.data.data
        }
      })
      .catch(err => {
      })
}
function initColumns(){
  let columns = []
  columns.push(
      {
        title: '编码',
        dataIndex: 'frCode',
        key: 'frCode',
        minWidth: 150
      },
      {
        title: '名称',
        dataIndex: 'frName',
        key: 'frName',
        minWidth: 200
      },
      {
        title: '价格',
        dataIndex: 'frPrice',
        key: 'frPrice',
        minWidth: 120
      },
  )
  return columns
}
</script>

<style scoped>

</style>
相关推荐
萌萌哒草头将军8 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
xiaoyan201511 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
Wiktok13 小时前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
月下点灯14 小时前
✨项目上线后产品要求把应用字体改大点📏怎么办?一招教你快速解决🔧
前端·vite
李重楼15 小时前
Vite 默认端口启动被拒绝解决办法
vite
xiaohe060119 小时前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(三)
vite·rollup.js
Wiktok21 小时前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok2 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手3 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok3 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin