博客前端项目学习day01

这里写自定义目录标题

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

在VScode上写前端，采用vue3。

server:{
    hmr:true,
    port:3001,
    proxy:{
      '/api':{
        target:"http://localhost:8081/",//目标代理接口地址
        secure:false,
        changeOrigin:true,//开启代理，在本地创建一个虚拟服务端
        pathRewrite:{
          '^/api':'/api',
        },
      },
    },
  },

配置本项目路径，方便引用

  resolve:{
    //配置路径别名
    alias: {
      '@':path.resolve(__dirname,'./src'),
    },
  },

安装路径依赖，并使用

npm install path --save

在这里插入图片描述

根据配置，前面的代码做出相应修改
运行，此时的路径端口变成了修改后的3001

登录页面

安装element-plus依赖，并在main.js里面引入

npm install element-plus --save

在这里插入图片描述

ps：要做登录页，那就把之前的Index.vue改为Login.vue，以及修改路由。
在这里插入图片描述

在Login.vue里面试用element-plus

在这里插入图片描述

设置登陆背景，安装相关依赖，

npm install sass --save
npm install sass-loader --save

然后设置背景图片，注意把style.css里面的内容都清空，添加简单的内容，不然会有影响。对于height,不知道为什么使用“height:100%”就不对。
在这里插入图片描述

在这里插入图片描述

请添加图片描述
5. 使用表格

padding作用

注释的结果

没注释的结果
在这里插入图片描述

验证码

在这里插入图片描述

登陆表单

在这里插入图片描述

<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>