在使用ElementUI进行登录注册的跨域请求时，我们可以利用ElementUI的表单验证功能和Axios进行HTTP请求。以下是一个简单的例子：
首先，安装axios：
npm install axios然后，使用ElementUI构建登录和注册表单，并使用axios发送跨域请求。
登录表单代码示例：
<template>
<el-form :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="Username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="Password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitLogin">Login</el-button>
</el-form-item>
</el-form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: 'Please input username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please input password', trigger: 'blur' },
{ min: 6, message: 'Password length should be greater than 6', trigger: 'blur' }
]
}
};
},
methods: {
submitLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
axios.post('http://example.com/api/login', this.loginForm)
.then(response => {
// Handle login success
console.log(response.data);
})
.catch(error => {
// Handle login error
console.error(error);
});
} else {
console.log('Login form is not valid');
return false;
}
});
}
}
};
</script>注册表单代码示例：
<template>
<el-form :model="registerForm" :rules="registerRules" ref="registerForm">
<el-form-item prop="username">
<el-input v-model="registerForm.username" placeholder="Username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="registerForm.password" placeholder="Password"></el-input>
</el-form-item>
<el-form-item prop="email">
<el-input v-model="registerForm.email" placeholder="Email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitRegister">Register</el-button>
</el-form-item>
</el-form>
</temp