
Vue3+Vite+Pinia+Naive后台管理系统搭建之六:Axios 网络请求
手摸手~,新手+小白 构建vue3.0项目 教程~
·
前言
如果对 vue3 的语法不熟悉的,可以移步Vue3.0 基础入门快速入门。
Axios 详情可移步官网参看:Axios 官网
github 开源库:Vue3-Vite-Pinia-Naive-Js
gitee 开源库:Vue3-Vite-Pinia-Naive-Js
1. 安装依赖
yarn add axios
// or
npm install axios
2. 新增 .env 环境配置
对环境配置不了解的可移步:Vue 入门系列:.env 环境变量
2.1 新增 .env.development 开发环境变量
# 开发环境配置
ENV = 'development'
# 开发环境
VITE_APP_BASE_API = '/dev-api'
2.2 新增 .env.production 生产环境变量
# 生产环境配置
ENV = 'production'
# 生产环境
VITE_APP_BASE_API = '/prod-api'
3. 编辑 vite.config.js 中的 server
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},
// 服务配置
server: {
// 是否开启https
https: false,
// 端口号
port: 3000,
// 监听所有地址
host: "0.0.0.0",
// 启服务自动打开浏览器
open: false,
// 允许跨域
cors: true,
proxy: {
"/dev-api": {
target: "http://xxx.x.xxx.xxx:8080",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/dev-api/, ""),
},
"/dev/file": {
target: "http://xxx.x.xxx.xxx:9300",
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/dev/, ""),
},
},
},
});
4. 新增 src/api/http.js 配置 aixos 基础配置
import axios from "axios";
// 请求和响应的消息主体用什么方式编码
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 10000,
});
// 请求拦截器
service.interceptors.request.use((config) => {
// TODO
return config;
});
// 响应拦截器
service.interceptors.response.use((res) => {
// TODO
return res.data;
});
export default service;
5. 新增 src/api/login.js 接口封装
import api from "./http.js";
// 登录
export function login(data) {
return api({
url: "/login",
method: 'post',
data
})
}
// 登出
export function logout() {
return api({
url: '/logout',
method: 'delete'
})
}
6. 编辑 src/pages/login.vue 组件中调用接口
<script setup>
import router from "@/router/index.js";
import { NButton } from "naive-ui";
import { login } from "@/api/login.js";
let handleLogin = () => {
login().then(() => {
router.push({ name: "home" });
});
};
</script>
<template>
<div class="login">
<n-button type="primary" size="small" @click="handleLogin">登录</n-button>
</div>
</template>
<style lang="scss" scoped></style>
注意:vite.config.js 中环境映射不是真实的地址,所以请求失败,请根据自己项目需求,修改请求配置
综上
axios 安装完成。下一章 utils 工具构建,然后根据 utils 工具,完善 src/api/http.js 接口请求逻辑、src/store/user.js 登录逻辑、src/router/index.js 路由跳转逻辑。
更多推荐
所有评论(0)