20201113 - 前端业务项目的日常记录

1. 记住密码功能

     data () {
           return {
             userName: '', // 账号
             password: '', // 密码
             checked: false // 是否记住密码
           }
         },
         methods: {
           login () { // 点击登录后事件
             if (!this.userName || !this.password) {
               this.$message({
                 message: '请输入账号密码',
                 type: 'warning'
               })
               return
             }
             if (this.checked === true) {
               // 传入账号名，密码，和保存天数3个参数
               this.setCookie(this.userName, this.password, 7)
             } else {
               // 清空Cookie
               this.clearCookie()
             }
             this.$message({
               message: '登录成功',
               type: 'success'
             })
             this.$router.replace({path: '/home'})
           },
           // 设置cookie
           setCookie (c_name, c_pwd, exdays) {
             var exdate = new Date() // 获取时间
             exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
             // 字符串拼接cookie
             window.document.cookie =
               "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString()
             window.document.cookie =
               "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString()
           },
           // 获取cookie
           getCookie () {
             if (document.cookie.length > 0) {
               var arr = document.cookie.split("; ") // 这里显示的格式需要切割一下自己可输出看下
               for (var i = 0; i < arr.length; i++) {
                 var arr2 = arr[i].split("=") // 再次切割
                 // 判断查找相对应的值
                 if (arr2[0] === "userName") {
                   this.userName = arr2[1] // 保存到保存数据的地方
                   this.checked = true
                 } else if (arr2[0] === "userPwd") {
                   this.password = arr2[1]
                   this.checked = true
                 }
               }
             }
           },
           // 清除cookie
           clearCookie () {
             this.setCookie("", "", -1) // 修改2值都为空，天数为负1天就好了
           }
         },
         created () {
           this.$nextTick(() => {
             // 进入登录页面自动聚焦输入框
              document.querySelector('input').focus()
           })
         },
         mounted () {
           this.getCookie()
         }

2. vue-cli4配置问题

vue.config.js:

     // vue.config.js 在cli4项目创建的时候不会自动生成，需要手动创建
     
     module.exports = {
       productionSourceMap: true, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
       configureWebpack: {
         // 报错：Invalid options in vue.config.js: “devtool“ is not allowed
         // 解决：devtool在cli4版本中应该放在configureWebpack对象中
         devtool: 'source-map' // 解决F12无法找到提示所在文件的问题。其可以添加F12内的映射关系，可以映射所有提示所对应项目内在什么路径下的某一个具体文件，方便调试
       },
       pwa: {
         // 用于cli4替换项目的页面图标
         iconPaths: {
           favicon32: 'favicon.ico',
           favicon16: 'favicon.ico',
           appleTouchIcon: 'favicon.ico',
           maskIcon: 'favicon.ico',
           msTileImage: 'favicon.ico'
         }
       },
       css: {
         sourceMap: true, // 开启 CSS source maps， 解决F12无法找到样式所在文件的问题，可以映射某一条样式所在的文件和行数，方便调试。设置为 true 之后可能会影响构建的性能
       }
     }
     

3. el-form 表单验证

html：

     <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="102px" class="demo-ruleForm">
         <el-form-item label="原始密码 ：" prop="oldpass">
           <el-input v-model="ruleForm.oldpass" ref="password" placeholder="请输入原始密码">
           </el-input>
         </el-form-item>
           <el-form-item label="新密码 ：" prop="pass">
           <el-input v-model="ruleForm.pass"  placeholder="由大小写英文字母、数字组成，长度8-20位">
           </el-input>
         </el-form-item>
         <el-form-item label="确认密码 ：" prop="newpass">
           <el-input v-model="ruleForm.newpass"  placeholder="请再次输入密码">
           </el-input>
         </el-form-item>
       </el-form>
     
     <el-button class="saveButton" @click="savePassword('ruleForm')">保存</el-button>

data：

     ruleForm: {
       oldpass: '',
       pass: '',
       newpass: ''
     },
     rules: {
       pass: [
         { required: true, message: '请输入新密码', trigger: 'blur' },
         {
           validator (rule, value, callback, source, options) {
             const errors = []
             const reg = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*()+-]{8,20}$/
             if (value) {
               if (!reg.test(value)) {
                 errors.push('包含数字、字母及特殊字符的8~20位密码')
               }
             }
             callback(errors)
           }
         }
       ],
       oldpass: [
         { required: true, message: '请输入原始密码', trigger: 'blur' },
         {
           validator (rule, value, callback, source, options) {
             const errors = []
             const reg = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*()+-]{8,20}$/
             if (value) {
               if (!reg.test(value)) { errors.push('包含数字、字母及特殊字符的8~20位密码') }
             }
             callback(errors)
           }
         }
       ],
       newpass: [
         { required: true, message: '请输入确认密码', trigger: 'blur' },
         {
           validator (rule, value, callback, source, options) {
             const errors = []
             const reg = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*()+-]{8,20}$/
             if (value) {
               if (!reg.test(value)) { errors.push('包含数字、字母及特殊字符的8~20位密码') }
             }
             callback(errors)
           }
         }
       ]
     }    

保存时的验证事件：

      // 更改密码 - 保存按钮事件
         savePassword (formName) {
           this.$refs[formName].validate((valid) => {
             if (valid) {
               this.$message({
                 message: '更改成功',
                 type: 'success'
               })
               this.passwordDialog = false
             } else {
               return false
             }
           })
         },

清空上次操作留下的表单效验提示语：

     this.$nextTick(() => {
         this.$refs.ruleForm.clearValidate()
       })

---

Smile and let everyone know that today you’re a lot stronger than you were yesterday.
用微笑告诉世人，今天的你比昨天更加强大。