vue3+ts+element 简单的登陆案例 （二）

上篇文章都下载好 ，下面进行具体操作

1. 创建 登陆 注册界面以及路由之间的跳转在这里插入图片描述
   

2. 配置路由（主要解决跨域问题）
有了接口 首先要配置vue.config.js文件（没有则新建） 来解决跨域问题
vue.config.js 文件 点击进去复制

配置好然后进行路由设置

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/Home/home.vue')
  }, {
    path: '/user',
    name: 'Index',
    component: () => import('../views/Index.vue')
  }, {
    path: '/login',
    name: 'Login',
    component: () => import('../components/User/Login.vue')
  }, {
    path: '/regist',
    name: 'Regist',
    component: () => import('../components/User/Regist.vue')
  }, {
    path: "/forgotPassword",
    name: "forgotPassword",
    component: () => import("../components/User/forgotPassword.vue")
  }, {
    path: "/resetpassword/:id",
    name: "resetpassword",
    component: () => import("../components/User/resetPassword.vue")
  }, {
    path: '/:catchAll(.*)',
    name: '404',
    component: () => import('../views/404.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. 配置axios
   配置全局 axios

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import axios from './http'

const app = createApp(App);
// 全局挂载axios
app.config.globalProperties.$axios = axios;

app.use(ElementPlus).use(store).use(router).mount('#app')

用 https.ts 来对axios 扩充

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElLoading } from 'element-plus';
// 加载动画的设置
let loading: any

const startLoading = () => {
  interface Opactions {
    lock: boolean;
    text: string;
    background: string
  }
  const opactons: Opactions = {
    lock: true,
    text: "正在加载...",
    background: 'rgba(0,0,0,0.7)'
  }
  loading = ElLoading.service(opactons)
}
const endLoading = () => {
  loading.close()
}

// 请求拦截
axios.interceptors.request.use((config: AxiosRequestConfig) => {
  // Do something before request is sent
  startLoading()
  return config;
}, error => {
  // Do something with request error
  endLoading()
  return Promise.reject(error);
});

// 相应拦截
axios.interceptors.response.use((response: AxiosResponse<any>) => {
  // Do something before response is sent
  endLoading()
  return response;
}, error => {
  // Do something with response error
  endLoading()
  return Promise.reject(error);
});

export default axios;

4. 完成项目
   具体代码如下 vue3-elementplus