博客前端项目学习day01

这里写自定义目录标题

登录
- 创建项目
- 配置环境变量，方便使用
- 登录页面
- 验证码
- 登陆表单

在VScode上写前端，采用vue3。

<div class="login-body"><div class="login-panel"><div class="login-title">用户登录</div><el-form :model="formData" :rules="rules" ref="formDataRef"><el-form-item prop="account"><el-input placeholder="请输入账号" v-model="formData.account" size="large"><template #prefix><span class="iconfont icon-account"></span></template></el-input></el-form-item><!-- 其他表单项 --></el-form></div>
</div>

在这段代码中：

<div class="login-body"> 和 <div class="login-panel"> 是用来布局和样式化登录表单的外部容器。
<div class="login-title">用户登录</div> 显示了登录表单的标题。
<el-form> 是 Element UI 提供的表单组件，通过 :model="formData" 绑定了表单数据对象 formData，:rules="rules" 绑定了表单验证规则对象 rules，ref="formDataRef" 为表单组件添加了引用名称 formDataRef。
<el-form-item prop="account"> 定义了一个表单项，prop="account" 指定了与 formData 对象中的 account 字段进行绑定。
<el-input> 是 Element UI 提供的输入框组件，通过 v-model="formData.account" 实现了与 formData 中 account 字段的双向绑定，placeholder 属性设置了输入框的占位符文本，size="large" 设置了输入框的尺寸为大号。
<template #prefix> 中的内容是输入框的前缀，这里使用了一个图标作为账号输入框的前缀图标，具体的图标样式是通过类名 iconfont icon-account 来定义的。

这段代码片段展示了一个基本的使用 Element UI 实现的用户登录表单界面，其中只包含了账号输入框的部分。你可以继续类似的方式添加密码输入框、登录按钮等其他表单元素，以完善整个登录界面的功能。

全部代码以及效果

<template>
<div class="login-body"><div class="login-panel"><div class="login-title">用户登录</div><el-form :model="formData":rules="rules"ref="formDataRef"><el-form-item prop="account"><el-input placeholder="请输入账号"v-model="formData.account"size="large" ><template #prefix><span class="iconfont icon-account"></span></template></el-input></el-form-item><el-form-item prop="password"><el-input placeholder="请输入密码"v-model="formData.password"size="large" ><template #prefix><span class="iconfont icon-password"></span></template></el-input></el-form-item><el-form-item prop="checkCode"><div class="check-code-panel">
<el-input placeholder="请输入验证码"v-model="formData.checkCode" class="input-panel"size="large"/><img :src="checkCodeUrl"class="check-code"@click="changeCheckCode"></div></el-form-item><el-form-item label=""><el-checkbox v-model="formData.rememberMe" :label="true" >记住我</el-checkbox>
</el-form-item><el-form-item label=""><el-button type="primary":style="{width:'100%'}"@click="login"> 登录</el-button></el-form-item></el-form></div>
</div></template><script setup>
import { reactive, ref } from "vue";
const api={checkCode:"api/checkCode"
}
const checkCodeUrl = ref(api.checkCode);
const changeCheckCode = () =>{checkCodeUrl.value = api.checkCode+"?"+new Date().getTime();
}//表单相关
const formDataRef=ref();
const formData=reactive({});const rules={account:[{required:true,message:"请输入用户名",}],password:[{required:true,message:"请输入密码",}],checkCode:[{required:true,message:"请输入验证码",}]}const login = ()=>{formDataRef.value.validate((valid)=>{
if(!valid){
return;
}});
}</script><style lang="scss">
.login-body{width: "100%";height: calc(100vh);background-image: url(../assets/login-bg.jpg);background-size: cover;background-position: center;.login-panel{float: right;margin-right: 100px;margin-top: 100px;padding: 20px;//内容不顶着边width: 350px;border-radius: 5px;//圆角box-shadow: 2px 2px 10px #ddd;//阴影background: rgba(255,255,255,0.7);
.login-title{font-size: 20px;text-align: center;margin-bottom: 10px;
}
.check-code-panel{width:100%;display:flex;align-items: center;.input-panel{// flex:1;// margin-right: 5px;}.check-code{// height: 30px;margin-right: auto;margin-left:5px;cursor:pointer;}
}
}
}</style>