Day 3---vue2 从0开始 写一个前端框架

项目背景：vue2

业务需求：用Vue+Element 写一个前端框架

今日主线任务：优化静态登陆页面

项目地址：

https://gitee.com/whwbs/my_project.githttps://gitee.com/whwbs/my_project.git

---

1.简化样式，引入flex

安装flex.css，main.js中引入，这里使用flex主要是为后期项目大量应用练个手。

npm install --save flex.css

// 这里用flex="main:justify"
 <p class="login_help" flex="main:justify">
    <span><i class="el-icon-question"></i>忘记密码</span>
    <span>注册用户</span>
 </p>


// 这里用style="float:right;"
 <p class="login_help">
    <span><i class="el-icon-question"></i>忘记密码</span>
    <span style="float:right;">注册用户</span>
 </p>

还可以自行对登陆框进行优化，不做举例。

2.更换浏览器标签页图标

my_project/public/favicon.ico就是图标文件，my_project/public/index.html文件中替换，刷新页面查看效果。

3.增加表单校验

       <el-form ref="loginForm"
                   :model="form"
                   :rules="rules"
                   style="padding:30px 0px 0px 0px;">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名"
                        v-model="form.username">
                <i slot="prepend"
                   class="el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password"
                        placeholder="请输入密码"
                        show-password>
                <i slot="prepend"
                   class="el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         class="button_login"
                         @click.native="submit">登陆</el-button>
            </el-form-item>
            <p class="login_help"
               flex="main:justify">
              <span><i class="el-icon-question"></i>忘记密码</span>
              <span>注册用户</span>
            </p>
          </el-form>

 data中加入校验规则

   // 表单校验
      rules: {
        username: [
          {
            required: true, message: '请输入用户名', trigger: 'blur'
          }
        ],
        password: [
          {
            required: true, message: '请输入密码', trigger: 'blur'
          }
        ],
      }

增加登陆方法

    /**
     * @name: submit
     * @description: 登陆
     */
    submit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {

        } else {
          // 校验失败 开始抖动效果
          this.$refs.loginForm.$el.style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both"
          setTimeout(() => {
            this.$refs.loginForm.$el.style.animation = ""
          }, 500)
          this.$message.error('表单校验失败,请检查')
        }
      });

    }

4.校验失败抖动效果

方法中，使用了抖动效果，考虑到该效果可能在表单中大量使用，单独建立css文件存储my_project/src/assets/style/transition.css

@keyframes shake {
  10%, 90% {
      transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
      transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
      transform: translate3d(4px, 0, 0);
  }
}

登陆页引入 

import '@/assets/style/transition.css' // 验证码错误抖动效果css

---

主要文件代码

<!--
 * @Description: 登陆页面
 * @Author: Walis
 * @Date: 2022-11-04 13:00:48
 * @LastEditors: Walis
 * @LastEditTime: 2022-11-05 12:43:48
-->
<template>
  <div class="container"
       flex="main:center cross:center"
       id="container">
    <!-- 提示信息 -->
    <div class="tips">{{tipsList[tipsIndex]}}</div>
    <!-- 登录框 -->
    <div class="login_box">
      <el-card class="login_form">
        <!-- 这里可以替换成svg图 -->
        <div class="logo">
          系统登陆
        </div>
        <div class="form">
          <el-form ref="loginForm"
                   :model="form"
                   :rules="rules"
                   style="padding:30px 0px 0px 0px;">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名"
                        v-model="form.username">
                <i slot="prepend"
                   class="el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password"
                        placeholder="请输入密码"
                        show-password>
                <i slot="prepend"
                   class="el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         class="button_login"
                         @click.native="submit">登陆</el-button>
            </el-form-item>
            <p class="login_help"
               flex="main:justify">
              <span><i class="el-icon-question"></i>忘记密码</span>
              <span>注册用户</span>
            </p>
          </el-form>
        </div>

      </el-card>
    </div>
    <!-- 底部版权信息 -->
    <div class="copyright">copyright@一个总在代码给自己下毒的程序猿</div>
  </div>
</template>
<script>
// 注意 这里用 require 引入 particles.js
require('particles.js') /* eslint-disable */  // 使eslint忽略对该行代码的检查
import config from './config/snow'// 雪花动效组件配置 如需更换动效 修改名称即可
import '@/assets/style/transition.css' // 验证码错误抖动效果css
export default {
  components: {},
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      tipsIndex: 0, //  随机提示信息索引
      tipsList: [ // 随机提示信息数组
        '一个好的程序员是那种过单行线马路都要往两边看的人。(Doug Linder)',
        '程序有问题时不要担心。如果所有东西都没问题,你就失业了。(软件工程的Mosher定律)',
        '程序员的麻烦在于,你无法弄清他在捣腾什么,当你最终弄明白时,也许已经晚了。(超级计算机之父Seymour Cray) ',
        '程序员最讨厌的两件事:写文档写注释，别人不写文档别人不写注释'
      ],
      // 表单校验
      rules: {
        username: [
          {
            required: true, message: '请输入用户名', trigger: 'blur'
          }
        ],
        password: [
          {
            required: true, message: '请输入密码', trigger: 'blur'
          }
        ],
      }
    }
  },
  methods: {
    /**
     * @name: submit
     * @description: 登陆
     */
    submit () {
      this.$refs.loginForm.validate((valid) => {
        console.log(valid)
        if (valid) {

        } else {
          // 校验失败 开始抖动效果
          this.$refs.loginForm.$el.style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both"
          setTimeout(() => {
            this.$refs.loginForm.$el.style.animation = ""
          }, 500)
          this.$message.error('表单校验失败,请检查')
        }
      });

    }

  },
  mounted () {
    // 初始化提示信息
    this.tipsIndex = Math.floor((Math.random() * this.tipsList.length))
    particlesJS('container', config)// 初始化粒子插件
  },
  beforeDestroy () {
    if (pJSDom && pJSDom.length > 0) {  // 销毁 particlesJS 解决内存溢出问题
      pJSDom[0].pJS.fn.vendors.destroypJS()
      pJSDom = []
    }
  },
}
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  position: relative;
  background-image: url("./image/back1.jpeg");
  background-position: center top;
  background-size: 100% 100%;
  overflow: hidden;
  .tips {
    top: 20px;
    position: absolute;
    font-size: 20px;
    color: #fff;
  }
  .login_box {
    top: 30%;
    position: absolute;
  }
  .logo {
    font-size: 30px;
  }
  .login_form {
    height: 100%;
    width: 350px;
    .button_login {
      width: 100%;
    }
    .login_help {
      font-size: 14px;
      color: #409eff;
    }
  }
  .copyright {
    bottom: 20px;
    color: #fff;
    position: absolute;
  }
}
</style>