vue3.0加MongoDB加node的后台管理系统（二）

最新推荐文章于 2024-04-08 09:06:04 发布

Kepler_明

最新推荐文章于 2024-04-08 09:06:04 发布

阅读量301

点赞数

分类专栏： vue3.0 文章标签： vue.js node.js

本文链接：https://blog.csdn.net/keplers/article/details/114060059

版权

本文介绍了如何在Vue3.0项目中封装接口，并结合MongoDB和Node.js创建后台管理系统。首先在/src/webapi/api.js中封装请求，接着在login模块封装注册请求。通过/src/webapi/index.js引入并全局挂载。在main.js中进行全局配置。然后逐步创建登录页面，包括背景设置、登录框和验证码组件的实现。

摘要由CSDN通过智能技术生成

接口定义完成，接下来我们进行页面的定义和封装接口

在 /src/webapi/api.js中封装请求

import axios from 'axios'
// 引入axios
import router from '../router/router'
// 引入路由
import {
    message } from 'ant-design-vue'
// 引入提示
const webapi = axios.create({
   
// 判断当前的环境使用不同的地址
    baseURL: process.env.NODE_ENV === 'development' ? http://localhost:8000/api: http://xxx:8000/api
    headers: {
   
        'Content-Type': 'application/json'
    }
})
// 跳转页面
const toLogin = () => {
   
    router.push({
   
        path: '/login'
    });
}

const errorHandle = (status, error) => {
   
    console.log(status)
    // 状态码判断
    switch (status) {
   
        //未登录状态
        case 401:
            toLogin()
            break
        case 403:
            // 403 token过期
            // 清除token并跳转登录页
            message.error("403: 登录过期，请重新登录")
            localStorage.removeItem("fuckToken")
            setTimeout(() => {
   
                toLogin()
            }, 1000)
            break
        case 404:
            message.error("404: 请求资源未找到!")
            router.push({
   
                path: '/404'
            })
            break
        case 500:
            message.warning("500: 服务器加载失败!")
            router.push({
   
                path: '/500'
            })
            break
        default:
            message.warning(`其他错误信息: ${
     error}`)
    }
}

// 添加请求拦截器
// 在请求发送之前做一些事
webapi.interceptors.request.use(
    config => {
   
    // 将token添加到请求头上
        if (localStorage.getItem('fuckToken')) {
   
            config.headers['x-access-token'] = localStorage.getItem('fuckToken')
        }
        // 添加时间戳,防止缓存
        config.url = `${
     config.url}?time=${
     Date.parse(new Date())}`
        return config
    },
    error => {
   
        return Promise.reject(error)
    }
)
// 响应拦截器 —— 处理响应对象
webapi.interceptors.response.use(
    response => {
   
        // 传递message参数可以显示默认失败提示
        if (response.data.msg && response.data.code !== 1000) {
   
            errorHandle(response.data.code, response.data.error)
            // // 抛出异常，终止执行
            throw Error('已处理：res.data.code不为1000')
        }
        return response
    },
    error => {
   
        const {
    response } = error
        if (response) {
   
            // 相应错误处理: token 过期， 无权限访问， 路径不存在， 服务器问题等
            errorHandle(response.status, response.data.error)
            return Promise.reject(response)
        } else {
   
            return Promise.reject(error)
        }
    }
)
// 封装的请求
export function get (url, params) {
   
    return new Promise((resolve, reject) => {
   
        webapi.get(url, params)
            .then(response => {
   
                resolve(response.data)
            })
            .catch(err => {
   
                reject(err)
            })
    })
}
export function post (url, data = {
   }) {
   
    return new Promise((resolve, reject) => {
   
        webapi.post(url, data)
            .then(response => {
   
                resolve(response.data)
            })
            .catch(err => {
   
                reject(err)
            })
    })
}
export function put (url, data) {
   
    return new Promise(