登录页面配置和验证码问题

yangfeng

2024-02-05 97fbcafbcf9c214de42f276a17a5f5b5d1619d80

登录页面配置和验证码问题

 src/views/login/loginView.vue

@@ -19,9 +19,10 @@
              autocomplete="off"
            />
          </el-form-item>
          <!-- <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
          </el-form-item> -->
          <el-form-item label="" prop="code">
            <el-input v-model="ruleForm.code" autocomplete="off" style="width: 70%"> </el-input>
            <img class="login-code" :src="captcha" @click="getCaptchaData" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          </el-form-item>
@@ -32,8 +33,9 @@
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getCaptcha } from '@/api'

const ruleFormRef = ref<FormInstance>()

@@ -65,7 +67,28 @@
const ruleForm = reactive({
  pass: '',
  // checkPass: '',
  accountNumber: ''
  accountNumber: '',
  code: ''
})

const captcha = ref('')

const getCaptchaData = () => {
  getCaptcha().then((rsp) => {
    if (rsp.code == 200) {
      this.captchaId = rsp.data.captchaId
      this.captcha = rsp.data.picPath
    }
  })
}
onMounted(() => {
  // 获取验证码
  getCaptcha().then((rsp) => {
    if (rsp.code == 200) {
      this.captchaId = rsp.data.captchaId
      this.captcha = rsp.data.picPath
    }
  })
})

const rules = reactive<FormRules<typeof ruleForm>>({

 vite.config.ts

@@ -21,6 +21,12 @@
        target: 'http://192.168.20.120:9081',
        ws: true,
        changeOrigin: true
      },
      '/api': {
        // http://192.168.20.119:8003 http://192.168.20.25:7010
        target: 'http://192.168.20.118:8001',
        ws: true,
        changeOrigin: true
      }
    }
  },