基于element-plus-admin实际开发记录（一）element-plus-admin登录

系列文章目录

---

---

前言

最近，学习vue3，对比vue2来说，对于我多多少少有点难上手。
身为一个前端程序员，自然不能直接躺平了，于是奋发努力开始充实自己。
GitHub上找了一个比较好的框架，开始摸索学习。
采用element-plus-admin进行开发学习，GitHub地址

该框架使用技术： ES2015+、vue-next、typescript、vite、postcss 和 element-plus
本人还在学习摸索中，如有哪里不妥，请各位见谅。
话不多说开搞。

---

提示：以下是本篇文章正文内容

一、解决跨域代理

element-plus-admin使用的vite，vite我也是第一次搞，查阅了不少资料。由于本次学习是好朋友用自己服务器给我搭了一个服务，我本地访问的他的接口需要进行下跨域代理。
直接在vite.config.ts文件中，把server下的proxy注释掉，修改一下，详细如下

 server: {
   
            // proxy: env.VITE_PROXY ? proxy(JSON.parse(env.VITE_PROXY)) : {},
            proxy:{
   
                '/api':{
   
                    target:env.VITE_PROXY,
                    changeOrigin:true,
                    rewrite:(path) => path.replace(/^\/api/,'')
                }
            },
            port: env.VITE_PORT,
            host: '0.0.0.0'
        },

然后在.env.production文件里，修改VITE_PROXY为自己的

VITE_PROXY = [["/api","http://xxx.xxx.xx.xx:8011"]]

二、获取验证码

这里登录时需要输入用户名、密码，然后自己添加了一个图形验证码。
用户的登录的逻辑是这样：
1.用户打开登录页面要先发起请求，获取图形验证码，后台会返回一个image地址和uuid。
2.用户登录时要传递四个参数到登录接口，userName、passWord、captchaCode、uuid。
3.登录成功后会返回用户信息以及token。
4.然后调用路由接口，返回菜单，渲染后进入首页。

第一，在views-user-login.vue文件中添加图形验证码，详细代码如下：

<template>
    <div class='w-screen h-screen bg-gray-800'>
        <div class='layout-login' @keyup='enterSubmit'>
            <h3 class='text-2xl font-semibold text-gray-100 text-center mb-6'>系统登陆</h3>
            <el-form ref='ruleForm' label-position='right' label-width='80px' :model='form' :rules='rules'>
                <el-form-item class='mb-6 -ml-20' prop='name'>
                    <el-input v-model='form.name' placeholder='请输入用户名' prefix-icon='el-icon-user' />
                </el-form-item>
                <el-form-item class='mb-6 -ml-20' prop='pwd'>
                    <el-input v-model='form.pwd' placeholder='请输入密码' prefix-icon='el-icon-lock' show-password />
                </el-form-item>
                <el-form-item class='mb-6 -ml-20' prop='captchaCode'>
                    <el-input v-model='form.captchaCode' placeholder