从零开始学vue3-封装接口及实现登录（2）

项目工具

yarn+vite5+vue3+ts+pinia+element-plus

效果图

定义配置文件

创建config文件夹和baseURL.ts文件，路径src/config/baseURL.ts

export const baseURL_dev:string = "http://127.0.0.1:9090/v1/"
export const baseURL_prd:string = "http://127.0.0.1:9090/v1/"

封装axios请求接口

创建utils文件夹和request.ts文件，路径src/utils/request.ts

import axios from 'axios';
import { baseURL_dev } from '../config/baseURL'
import { ElMessage } from 'element-plus'

const instance = axios.create({
  baseURL: baseURL_dev,
  timeout: 10000,
  // headers: {'X-Custom-Header': 'foobar'}
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  ElMessage.error(error.response.data.message);
  return Promise.reject(error);
});

// 封装get请求方法
export const $get = async (url:string, params:object={}) => {
  let {data} = await instance.get(url, {params});
  return data
}

// 封装post请求方法
export const $post = async (url:string, params:object={}) => {
  let {data} =  await instance.post(url, params);
  return data
}

封装应用接口

创建api文件夹和admin.ts文件，路径src/api/admin.ts

import { $post } from '../utils/request'

// 登录方法
export const $Login = async (params:object) => {
  const res = await $post('login', params);
  return res
}

完善登录页面

调整登录页面，登录成功后跳转到Index页面，路径src/views/Login.vue

...
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { $Login } from '../api/admin'
...

...
const router = useRouter()
...

...
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await $Login(ruleForm)
      if (res.success) {
        router.push('/index')
        ElMessage.success(res.message)
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}
...

完善路由信息

新增Index页面路由

...
const routes = [
  {
    path: '/',
    name: 'login',
    component: () => import("../views/Login.vue")
  },{
    path: '/login',
    redirect: '/'
  },{
    path: '/index',
    name: 'index',
    component: () => import("../views/Home.vue")
  }
]
...

新增Index页面

根据路由信息，创建views文件夹和Home.vue文件，路径src/views/Home.vue

<template>
  <div>
    Home
  </div>
</template>

启动运行

未完待续，继续搬砖

【上一篇】(从零开始学vue3-登录页面实现（1） - 掘金 (juejin.cn))