用Spring Boot Vue做微人事项目第一天
强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码
用Spring Boot Vue做微人事项目系列目录
一、首先配置一个项目如何更便捷的启动，详细步骤如下图
前端框架用的是Element UI，后台用的是spring boot，写把前端写完，再写后台接口
使用npm i element-ui -S命令行在vue的生产配置里面下载Element UI
下载好了之后不能直接使用，还需要引用一下两行代码
代码语言：javascript复制import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';在加上Vue.use(ElementUI);就可以在vue中使用element ui了
首先定义登录页Login.vue
代码语言：javascript复制<template>
<div>
<!--element ui的表单验证规则配置 用 :rules="rules"这是简写的，本来是v-model:rules="rules"-->
<!--:model 表单里面的数据对象-->
<el-form :rules="rules" :model="loginForm" class="loginContainer" ref="loginForm">
<h3 class="loginTitle">系统登录</h3>
<!--表单里面的每一项叫做<el-form-item></el-form-item,要加个prop属性，本来是不用加的，但是我们这个使用了字段校验，这种情况家就一定要加prop属性-->
<el-form-item prop="username">
<!--auto-complete:是否自动补全-->
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-checkbox class="loginRember" v-model="checked"></el-checkbox>
<el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return{
loginForm:{
username:"admin",
password:"123"
},
checked:true,
rules:{
//required:true:用户名必填 如果没填就弹出““””“"请输入用户名",trigger:blur 触发的方式是blur
username:[{required:true,messsage:"请输入用户名",trigger:"blur"}],
password:[{required:true,message:"请输入密码",trigger:"blur"}]
}
}
},
methods:{
submitLogin(){
this.$refs.loginForm.validate((validate) =>{
if(validate){
alert("submit!");
}else {
this.$message.error("请输入所有字段");
return false;
}
})
}
}
}
</script>
<style scoped>
.loginContainer{
border-radius: 15px;
background-clip:padding-box;
margin: 180px auto;
width: 350px;
padding: 15px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
margin: 15px auto 20px auto;
text-align: center;
color: #505458;
}
.loginRember{
text-align: left;
margin: 0 0 25px 0;
}
</style登录页的浏览器效果如下图所示
:rules 校验规则 :model 表单里面的数据对象
觉得文章对自己有用，想要继续学下去的可以
可以长按下方二维码
