vue+elementplus表单提交时页面刷新

Question

<template>
    <div class="login">
        <Particles
        id="tsparticles"
        class="login__particles"
        :options="options"
        />
        <div class="loginPart" v-if="pageType == 1">
            <h2>用户登录</h2>
            <el-form 
            ref="loginFormRef"
            :model="loginForm"
            :rules="lrules"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            style="transform:translate(-30px);"
            @submit.native.prevent
            >
                <el-form-item label="用户名：" prop="username">
                    <el-input placeholder="请输入用户名" maxlength="20" clearable v-model="loginForm.username"/>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input type="password" placeholder="请输入密码" maxlength="20" show-password clearable v-model="loginForm.password" />
                </el-form-item>
                <el-form-item label="验证码：" prop="verifyCode">
                    <el-input style="width: 150px;"  placeholder="请输入验证码" maxlength="4" clearable  v-model="loginForm.verifyCode"/>
                    <img class="verifyCodeImg" >
                </el-form-item>
                <el-button class="btn" type="primary" @click.native.prevent="Login" >登录</el-button>
                <div style="text-align: right;transform:translate(0,30px);">
                    <el-link type="warning" @click="goRegister()">
                        没有账号？去注册
                    </el-link>
                </div>
            </el-form>
        </div>

        <div class="loginPart" v-if="pageType == 2">
            <h2>用户注册</h2>
            <el-form 
            ref="registerFromRef"
            :model="registerForm"
            :rules="rules"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            style="transform:translate(-30px);"
            >
                <el-form-item label="用户名：" prop="account">
                    <el-input  placeholder="请输入用户名" maxlength="20" clearable v-model="registerForm.username"/>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input  type="password" placeholder="请输入密码" maxlength="20" show-password clearable v-model="registerForm.password"/>
                </el-form-item>
                <el-form-item label="确认密码：" prop="confirmPassword">
                    <el-input  type="password" placeholder="请输入确认密码" maxlength="20" show-password clearable v-model="registerForm.confirmPassword"/>
                </el-form-item>
                <el-form-item label="验证码：" prop="verifyCode">
                    <el-input style="width: 150px;"  placeholder="请输入验证码" maxlength="4" clearable  v-model="registerForm.verifyCode"/>
                    <img class="verifyCodeImg" >
                </el-form-item>
                <el-button class="btn" type="primary" @click="Register" >注册</el-button>
                <div style="text-align: right;transform:translate(0,30px);">
                    <el-link type="warning" @click="backLogin()">
                        已有账号？去登录
                    </el-link>
                </div>
            </el-form>
        </div>

        <div class="footer">
            © 2024 XPXP. All rights reserved.
        </div>
    </div>
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import {login, userLogout}from '~/api/employee'
import router from '~/router'
import {useUserStore} from '~/store/user'
const userStore = useUserStore();  
// const username = ref('');  
// const password = ref('');  

const loginForm = reactive({
  username: '',
  password: '',
  verifyCode:'',
})

const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword:'',
  verifyCode:'',
})
const registerFormRef = ref<FormInstance>()

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 5, message: '用户名长度应在2~5个字符之间', trigger: 'blur' },
  ],
  password: [
  { required: true, message: '请输入密码', trigger: 'blur' },
  { min: 6, message: '密码长度不应小于6个字符', trigger: 'blur' },
  ],
  confirmPassword: [
  { required: true, message: '请输入密码', trigger: 'blur' },
  { min: 6, message: '密码长度不应小于6个字符', trigger: 'blur' },
  ]
})

const loginFormRef = ref<FormInstance | null>(null);

const pageType = ref(1)

const lrules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 5, message: '用户名长度应在2~5个字符之间', trigger: 'blur' },
  ],
  password: [
  { required: true, message: '请输入密码', trigger: 'blur' },
  { min: 6, message: '密码长度不应小于6个字符', trigger: 'blur' },
  ],
  verifyCode: [
  { required: true, message: '请输入验证码', trigger: 'blur' },
  { min: 4, max:4, message: '验证码为4个字符', trigger: 'blur' },
  ]
})

const Register = () => {
  registerFormRef.value!.validate(async (valid: any)=>{
    if(valid) {
      await login(registerForm).then(res => {  
    if (String(res.data.code) === '1') {
      //注册成功，跳转到登录页
      router.push('/Login')
    } else {
      console.error('注册失败，返回数据不完整：', res);  
    }
  }).catch((error) => {  
    console.error('注册请求失败：', error);  
  });  
    }else {
      return
    }
  })
}

const Login = async () => {  
  console.log('Login method called'); // 确认方法被调用 
  console.log(loginFormRef.value? 1:0)
  // 确保 loginFormRef 已初始化  
  if (!loginFormRef.value) {  
    console.error('loginFormRef is not initialized');  
    return;  
  }  
  // const valid = await loginFormRef.value!.validate();
  console.log('called'); // 确认方法被调用
  try {
    // const valid = await loginFormRef.value!.validate();
    console.log('called'); // 确认方法被调用

    if (1) {  
    try {  
      console.log('Form is valid, attempting to log in.');  // 打印信息   
      const res = await userStore.Login({ username: loginForm.username, password: loginForm.password });   
      if (String(res.data.code) === '1') {  
          console.log('log in.');  // 打印信息 
          // 登录成功，跳转到系统首页  
          router.push('/Index');  
        } else {  
          console.error('登录失败，返回数据不完整：', res);  
        }  
      } catch (error) {  
        console.error('登录请求失败：', error);  
      }  
    } else {  
      return;  
    }  
  } catch (error) {
    console.error('Validation error: ', error); // 捕获 validate 方法中的所有错误  
  }   
  
};

const backLogin = () => {  
  // 清空注册表单内容  
  registerForm.username = '';  
  registerForm.password = '';  
  registerForm.confirmPassword = '';  
  registerForm.verifyCode = '';  
  
  // 设置当前页面类型为登录  
  pageType.value = 1;  
}  

const goRegister = () => {  
  // 清空登录表单内容  
  loginForm.username = '';  
  loginForm.password = '';  
  loginForm.verifyCode = '';  
  
  // 设置当前页面类型为注册  
  pageType.value = 2;  
}



const options = {
  fpsLimit: 60,
  interactivity: {
    detectsOn: 'canvas',
    events: {
      onClick: { // 开启鼠标点击的效果
        enable: true,
        mode: 'push'
      },
      onHover: { // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: 'grab'
      },
      resize: true
    },
    modes: { // 配置动画效果
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      grab: {
        distance: 200,
        duration: 0.4
      },
      attract: { // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
        distance: 200,
        duration: 0.4,
        factor: 5
      }
    }
  },
  particles: {
    color: {
      value: '#BA55D3' // 粒子点的颜色
    },
    links: {
      color: '#FFBBFF', // 线条颜色
      distance: 150,//线条距离
      enable: true,
      opacity: 0.4, // 不透明度
      width: 1.2 // 线条宽度
    },
    collisions: {
      enable: true
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: 'none',
      enable: true,
      out_mode: 'out',
      random: false,
      speed: 0.5, // 移动速度
      straight: false
    },
    number: {
      density: {
        enable: true,
        value_area: 800
      },
      value: 80//粒子数
    },
    opacity: {//粒子透明度
      value: 0.7
    },
    shape: {//粒子样式
      type: 'star'
    },
    size: {//粒子大小
      random: true,
      value: 3
    }
  },
  detectRetina: true
}
</script>
<style scoped>
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #FFF0F5;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
.login {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .login__particles {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('~/assets/0001.jpg');
    opacity:0.9;
    position:fixed;
     pointer-events: none;
  }
  .loginPart{
    position:absolute;
    /*定位方式绝对定位absolute*/
    top:50%;
    left:80%;
    /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
    transform:translate(-50%,-50%);
    /*实现块元素百分比下居中*/
    width:450px;
    padding:50px;
    background: rgba(255,204,255,.3);
    /*背景颜色为黑色，透明度为0.8*/
    box-sizing:border-box;
    /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
    box-shadow: 0px 15px 25px rgba(0,0,0,.5);
    /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
    border-radius:15px;
    /*边框圆角，四个角均为15px*/
  }
  h2{
    margin:0 0 30px;
    padding:0;
    color: #fff;
    text-align:center;
    /*文字居中*/
  }
  .btn{
    transform:translate(170px);
    width:80px;
    height:40px;
    font-size:15px;
  }
</style>

救命为什么一点击这个登录按钮页面就刷新啊，也不发送请求的

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

看起来您在提交表单后遇到了页面刷新的问题。这可能是由于表单的提交行为触发了页面的刷新，而没有正确地发送请求。让我们来分析并解决这个问题。

首先，让我们确认是否使用了<el-form>组件的默认提交行为导致了页面刷新。通常，Vue中使用<el-form>组件时，如果不设置@submit事件的处理函数，页面会默认刷新。因此，我们需要确保您已经正确地设置了<el-form>的@submit事件处理函数，并且使用了event.preventDefault()来阻止表单的默认提交行为。这样，当点击登录按钮时，页面就不会刷新。

接下来，让我们检查您的代码中关于表单提交的处理逻辑。在您的代码中，Login函数似乎缺少了阻止表单提交的代码。您需要在函数内部添加event.preventDefault()来阻止表单的默认提交行为。此外，确保在<el-form>标签上设置了正确的@submit事件处理函数引用。下面是修改后的代码示例：

在<el-form>标签上设置@submit="Login"来处理表单提交事件：

<el-form ref="loginFormRef" @submit.native.prevent="Login">

然后在Login函数中阻止表单的默认提交行为并发送请求：

const Login = async () => {  
  console.log('Login method called'); // 确认方法被调用 
  try {
    if (await loginFormRef.value?.validate()) {  // 确保验证成功后再发送请求
      const res = await userStore.Login({ username: loginForm.username, password: loginForm.password });   
      if (String(res.data.code) === '1') {  
          console.log('log in.');  // 打印信息 
          // 登录成功，跳转到系统首页  
          router.push('/Index');  
        } else {  
          console.error('登录失败，返回数据不完整：', res);  
        }  
    } else {  
      return;  // 表单验证失败时返回，不执行后续操作
    }  
  } catch (error) {  // 捕获可能出现的错误并进行处理
    console.error('登录请求失败：', error);  
  }   
};
```注意在代码中检查其他可能引起页面刷新的因素，如Vue Router的导航设置或其他事件触发导致的页面刷新。确保在登录过程中没有其他代码或事件导致页面刷新。另外，请确保您的Vue Router配置正确，并且没有设置导致页面刷新的行为。如果您使用的是Vue Router，可以尝试查看相关的文档或检查代码中的路由配置是否正确。最后，请确保其他部分（如中间件）没有在表单提交时引发页面刷新的问题。如果在服务器端配置了某种形式的认证验证失败重定向或某些重定向机制导致了页面刷新，也需要进行相应的检查和调整。如果您使用的是其他第三方库或插件来处理表单验证或路由导航等逻辑，请确保它们的版本和用法都是正确的，以避免产生不必要的冲突导致页面刷新问题。同时请检查您的前端项目中是否有其他的自定义脚本或库影响页面刷新行为。综上所述，解决表单提交后页面刷新的问题需要从多个方面进行检查和调整。希望以上提供的解决方案能帮助您解决问题。如果问题仍然存在或有其他疑问，请提供更多信息以便进一步分析。