refs的实际用法
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px">
<h2 style="margin-left: 1vw;">用户登录</h2>
<el-divider></el-divider>
<div class="Input_area">
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" style="margin-top: 2vh;"
placeholder="请输入密码"></el-input>
</el-form-item>
</div>
<el-button @click="$event =>submitForm('ruleForm')" style="width: 21vw;margin: 1vw;"
type="primary">登录</el-button>
<p style="margin-left: 1vw;color: #0000CD">您登录的ip为: { { ip_msg }}</p>
</el-form>
在data中定义：
data() {
return {
ruleForm: { //登录表单输入信息
pass: '',
name: ''
},
ip_msg: "", //本地IP信息
rules: { //登录表单验证规则
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods中写验证的方法：
methods: {
submitForm(formName) { //表单提交
this.$refs[formName].validate((valid) => {
在this.$refs[formName].validate()这里是Element UI提供的表单验证方法
if (valid) {
this.axios.post('/api/account', {
usernameOrEmailAddress: 'admin', //提交参数
password:"baotimes0928"
})
.then(response => {
console.log(response.data.result);
})
.catch(error => {
console.log(error);
});
// console.log(this.data.ruleForm.name)
this.$router.push({
name: 'Home',
params: { name: this.ruleForm } // 提交本地参数
})
} else {
console.log('error submit!!');
return false;
}
});
},
}
设置背景照片底层显示：
background: url('../assets/main_bg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
config中配置跨域问题：
一下代码直接暴力CV
const { defineConfig } = require('@vue/cli-service')
const path = require('path');
module.exports = defineConfig({
transpileDependencies: true,
outputDir: 'dist',
assetsDir: 'static',
devServer: {
proxy: {
'/api': {
target: 'http://118.190.79.161:83/api/', // 后端API接口的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 重写请求路径：将所有以/api开头的请求url去掉/api
}
}
}
}
})