博客前端项目学习day01

在VScode上写前端，采用vue3。

登录

创建项目

1. 检查node版本

node -v

2. 创建一个新的项目

npm init vite@latest blog-front-admin

中间会弹出询问是否要安装包，选择“y”即可。然后依次选择Vue和JavaScript。

ps:刚刚我的位置建错了，我换了一个位置重新建。

3. 按照提示，进入项目，安装依赖并运行项目

cd blog-front-admin
npm install
npm run dev

4. 删减得到一个干净的APP.vue

5. 在src文件下新建路由文件，并安装路由包

npm install vue-router@4 --save

6. 在src文件下新建视图文件，然后在视图文件下新建Index.vue，并简单写点东西，写的时候输入“vue”，然后选择vue3，它会自动填充vue3模板。

8. 在router里面新建index.js文件，并补充完整简单的路由信息

import {createRouter,createWebHistory} from 'vue-router'
const routes =[
    {
        name:'首页',
        path:'/index',
        component:() => import('../views/Index.vue'),
    }
];

const router = createRouter({
    routes,
    history:createWebHistory(),
})

export default router

7. 在main.js里面引用router，在App.vue里面加入路由

8. 运行结果。
   

配置环境变量，方便使用

1. 配置代理路径，方便使用后端路径

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

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

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

安装路径依赖，并使用

npm install path --save

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

登录页面

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

npm install element-plus --save

ps：要做登录页，那就把之前的Index.vue改为Login.vue，以及修改路由。

3. 在Login.vue里面试用element-plus

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

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

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

5. 使用表格

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