小白学习Vue3之管理系统模板搭建（二）——axios&router

axios

安装Axios

npm i axios -- save

配置Axios

在 src 文件夹下新建 utils 文件夹，在 utils 文件夹下新建 http 文件夹，然后 新建 axios.js 和 http.js。

1. axios.js：主要用于创建axios实例、拦截请求和响应

Promise.reject()和Promise.resolve()
Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

• Promise.resolve(value)
  返回一个以给定值解析后的Promise 对象。如果这个值是一个 promise ，那么将返回这个 promise ；如果这个值是thenable（即带有"then" 方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态；否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
• Promise.reject(reason)
  返回一个新的Promise实例，状态为Rejected。Promise.reject方法的参数reason会被传递给实例的回调函数。

Promise(resolve,reject)的基本使用

2. http.js：主要用来封装各种请求：

配置跨域

在 vite.config.js 配置跨域：增加

//配置跨域
    proxy: {
      '/api': {
        target: 'http://localhost:7979',
        changeOrigin:true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }

/api：对应到创建axios实例的baseURL 属性
target 是后台接口地址。

router

安装路由

npm install vue-router --save 

配置路由

1. 在 src 文件夹下新建 router 文件夹，然后新建 index.js
   
   代码如下

import {createRouter, createWebHashHistory} from 'vue-router';

const routes = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: 'login',
        name: 'login',
        mete: {
            title: '登录'
        },
        component: () => import('../view/Login.vue')
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
//挂载路由导航守卫
router.beforeEach((to, from, next) => {
    //修改页面title
    if(to.meta.title) {
        document.title = '后台管理系统 - '+to.meta.title
    }
    //放行登录页面
    if(to.path === '/login') {
        return next()
    }
    //获取token
    const token = sessionStorage.getItem('token')
    if(!token) {
        return next('/login')
    } else{
        next()
    }
    return next()
})
//导出路由
export default router

2.在main.js中配置路由

代码如下

//配置路由
import router from './router'

// 注册路由
app.use(router)