1 08.引入axios请求库和登录接口交互

开发服务器选项 | Vite 官方中文文档

• 安装 axios

http://axios-js.com/zh-cn/docs/index.html#axios-create-config

npm install axios

• 创建实例

  src/axios.js

import axios from 'axios'




const service = axios.create({
    baseURL: '/api',
    // baseURL: 'http://ceshi13.dishait.cn',
    // timeout: 1000,
    // headers: {'X-Custom-Header': 'foobar'}
  });


export default service

• 登录接口

创建api接口目录：src/api , 登录接口存放文件

// src/api/manager.js
import axios  from "~/axios";

export function login(username, password) {
    return axios.post("/admin/login", {
        username,
        password
    })
}

• 解决跨域问题

  vite.config.js

// https://cn.vitejs.dev/config/server-options.html
export default defineConfig({

...略
  server: {
    proxy: {
        '/api': {
          target: 'http://ceshi13.dishait.cn',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
    }
  },
...略


})

• 如何使用

login.vue

• 完成登录信息验证提示

• 完成登录成功后重定向后台

...略
import { login } from '~/api/manager'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'   // 内置


const router = useRouter()


...略
const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log('error')
        }
        login(form.username, form.password).then(res=> {
            console.log(res)
            ElNotification({
                message: res.data.msg,
                type: 'success',
            })

            // 跳转到后台
            router.push('/')
        })
        .catch(err=>{
            console.log(err)
            ElNotification({
                message: err.response.data.msg || '请求失败',
                type: 'error',
            })
        })
    })
}