vue3+vite搭建项目（四）_html-js-css

上一章讲了怎么安装vuex并且应用
这一章我们安装使用并且封装axios，在前端中数据交互可以说是非常频繁，所以一个项目必须得使用axios在得到后端传递的数据

1，安装axios，npm install axios --save

2，配置开发环境和生产环境，因为在实际开发过程中我们开发的baseUrl往往是后端的ip+port，打包上线都是https://…。需要在根目录新建文件.env.development和.env.production，名字别写错了。然后变量以VITE开头大写

# development
VITE_BASE_URL='http://192.168.3.67:9088/api'

# production
VITE_BASE_URL='https://.......api'

然后记得重启

获取环境变量是import.meta.env.VITE_BASE_URL

3，在src下新建utils文件夹，utils下面新建request.js文件，封装一下axios

//utils/request.js

import axios from 'axios'


// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: import.meta.env.VITE_BASE_URL,
    // 超时
    timeout: 5000
})


// request拦截器
service.interceptors.request.use(config => {
    // 是否需要设置 token
    config.headers = {
        "Authorization": 'your token',
        'Content-Type': "application/json;charset=utf-8"
    }
    return config
}, error => {
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    if (code == 200) {
        return res
    } else {
        //这边根据UI库的message可以写一下报错信息
        //Message.error(res.data.msg)
        return Promise.reject('error')
    }
},
    error => {
        return Promise.reject(error)
    }
)



function post(url, params) {
    return new Promise((resolve, reject) => {
        service.post(url, params).then(
            (response) => {
                resolve(response.data)
            },
            (err) => {
                reject(err)
            }
        )
    })
}

function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        service.get(url, { params: params }).then((response) => {
            resolve(response.data)
        })
            .catch((err) => {
                reject(err)
            })
    })
}

function put(url, params = {}) {
    return new Promise((resolve, reject) => {
        service.put(url, params).then(
            (response) => {
                resolve(response.data)
            },
            (err) => {
                reject(err)
            }
        )
    })
}

function remove(url, data) {
    return new Promise((resolve, reject) => {
        service
            .delete(url, { data })
            .then((response) => {
                resolve(response.data)
            })
            .catch((err) => {
                reject(err)
            })
    })
}


export default {
    get,
    post,
    put,
    remove,
}

4，然后在src下面新建api文件夹，然后具体的接口就可以在这里写，页面中引用哪个模块的接口导入就好了，以用户为例（当然这个目录结构看具体项目，个人习惯写在系统目录中）

目录结构大概是这样的

//src/api/system/user.js

import request from '@/utils/request'


//获取用户信息
export function getUserInfo(params) {
    return request.get('/api-user/users/current', params)
}

5，我们稍微对之前博客写的改一下路由结构和页面信息，使得页面更清晰

//App.vue，给一个容器就好
<script setup></script>

<template>
  <router-view></router-view>
</template>

<style></style>

之前没有说到路由钩子，我们这边可以利用路由前置做一些判断或者设置，这在项目中经常用到，保持vue2的写法

//router/index.js
import { createRouter, createWebHistory } from "vue-router"
const routes = [
    {
        path: '/',
        name: 'home',
        meta:{
            title:"首页"
        },
        component: () => import('@/view/home.vue')
    },
    {
        path: '/user',
        name: 'user',
        meta:{
            title:"个人中心"
        },
        component: () => import('@/view/user.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next() // 确保一定要调用 next()
  })

export default router

//home.vue 首页

<script setup></script>

<template>
  欢迎来到首页<br />
  <router-link to="/user">去个人中心</router-link>
</template>

<style></style>

//user.vue  个人中心

<script setup>
import { reactive, computed } from "vue";
import { useStore } from "vuex";

const store = useStore();

const userInfo = reactive({
  username: "",
  phone: "",
});

//获取age
const age = computed(() => store.state.user.age);

function add() {
  store.commit("add");
}
</script>

<template>
  <h1>用户名：{{ userInfo.username }}</h1>
  <h2>联系方式：{{ userInfo.phone }}</h2>

  <h4>{{ age }}</h4>
  <button @click="add">年纪+1</button>
  <br /><br />
  <router-link to="/">返回首页</router-link>
</template>

<style></style>

6，调用接口，在页面中使用axios渲染数据

//user.vue

<script setup>
import { reactive, computed } from "vue";
import { useStore } from "vuex";
import { getUserInfo } from "@/api/system/user.js";

const store = useStore();

//获取age
const age = computed(() => store.state.user.age);

//个人信息
const userInfo = reactive({
  username: "",
  phone: "",
});

function add() {
  store.commit("add");
}

function receiveUserInfo() {
  getUserInfo().then((res) => {
    userInfo.username = res.data.username;
    userInfo.phone = res.data.phone;
  });
}
receiveUserInfo();
</script>

<template>
  <h1>用户名：{{ userInfo.username }}</h1>
  <h2>联系方式：{{ userInfo.phone }}</h2>

  <h4>{{ age }}</h4>
  <button @click="add">年纪+1</button>
  <br /><br />
  <router-link to="/">返回首页</router-link>
</template>

<style></style>