登录页面接口联调

yangfeng

2024-02-05 eb52624b4ea5303198d4dddc19a3366c87283ff3

登录页面接口联调

 src/api/index.ts

@@ -263,3 +263,30 @@
    data: params
  })
}

/**
 * 获取验证码
 */
export function getCaptcha() {
  return request({
    url: '/api/base/captcha',
    method: 'post'
  })
}

export interface loginParams {
  username: string
  password: string
  captcha: string
  captchaId: string
}
/**
 * 登录
 */
export function login(params: loginParams) {
  return request({
    url: '/api/base/login',
    method: 'post',
    data: params
  })
}

 src/stores/craftModel.ts

@@ -13,7 +13,6 @@
  function getCraftModelList() {
    if (taskStore.activeTask?.Procedure.ID) {
      craftModelList.value = []
      console.log(taskStore, '8877994455')
      const procedureModel = taskStore.activeTask?.ProcedureModel
      const craftObj = [
        {
@@ -61,7 +60,6 @@
    if (taskStore.activeTask?.Procedure.ID && !loading.value && hasMore.value) {
      page.value++
      loading.value = true
      console.log(taskStore, '998877994455')
      // apiGetCraftModelList({
      //   procedureId: taskStore.activeTask?.Procedure.ID,
      //   page: page.value,

 src/views/login/loginView.vue

@@ -20,7 +20,7 @@
            />
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-input v-model="ruleForm.code" autocomplete="off" style="width: 70%"> </el-input>
            <el-input v-model="ruleForm.code" placeholder="验证码" autocomplete="off" style="width: 70%"> </el-input>
            <img class="login-code" :src="captcha" @click="getCaptchaData" />
          </el-form-item>
          <el-form-item>
@@ -35,7 +35,10 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getCaptcha } from '@/api'
import { getCaptcha, login } from '@/api'
import { setToken } from '@/common/utils/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const ruleFormRef = ref<FormInstance>()

@@ -72,23 +75,19 @@
})

const captcha = ref('')
const captchaId = ref('')

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

const rules = reactive<FormRules<typeof ruleForm>>({
@@ -97,11 +96,31 @@
  accountNumber: [{ validator: checkAge, trigger: 'blur' }]
})

const router = useRouter()

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      login({
        username: ruleForm.accountNumber,
        password: ruleForm.pass,
        captcha: ruleForm.code,
        captchaId: captchaId.value
      }).then((rsp) => {
        if (rsp.code == 200) {
          console.log(rsp)
          setToken(rsp.token)
          ElMessage({
            message: '登录成功！',
            type: 'success'
          })
          ruleForm.accountNumber = ''
          ruleForm.pass = ''
          ruleForm.code = ''
          router.push('/')
        }
      })
    } else {
      console.log('error submit!')
      return false

 vite.config.ts

@@ -24,7 +24,7 @@
      },
      '/api': {
        // http://192.168.20.119:8003 http://192.168.20.25:7010
        target: 'http://192.168.20.118:8001',
        target: 'http://192.168.20.119:8001',
        ws: true,
        changeOrigin: true
      }