项目登录模块

1.设置固定的本地访问端口和网站名称

在正式开发业务之前，先将项目的本地端口和网站名称进行一下调整

本地服务端口: 在vue.config.js中进行设置

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack

我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？

在项目下, 我们发现了.env.development和.env.production两个文件

development => 开发环境

production => 生产环境

当我们运行npm run dev进行开发调试的时候,此时会加载执行.env.development文件内容

当我们运行npm run build:prod进行生产环境打包的时候,会加载执行.env.production文件内容

所以,如果想要设置开发环境的接口,直接在.env.development中写入对于port变量的赋值即可

# 设置端口号
port = 8888

本节注意:修改服务的配置文件,想要生效的话,必须要重新启动服务，值‘8888’后面不能留有空格

2.登录表单的校验

手机号和密码的校验

字段名对应

为什么要对应? 因为基础模板采用的是username的字段,但是实际接口中采用的是mobile的字段,为了更方便的写代码,所以我们将username改成mobile

这里除了字段名，还有我们的规则校验名称，以及prop名称。

英文提示变成中文

基础模板中都是placeHolder占位符是英文,要变成中文

登录按钮文字同样需要换成中文

校验手机号和校验密码

基础模板中,已经做了校验,我们针对代码进行一些优化

新规则：手机号必填，并且进行格式校验，密码必填，长度6-16位之间

 data() {
    // 自定义校验函数
    const validateMobile = function(rule, value, callback) {
      // 校验value
      // if (validMobile(value)) {
      //   // 如果通过 直接执行callback
      //   callback()
      // } else {
      //   callback(new Error('手机号格式不正确'))
      // }
      validMobile(value) ? callback() : callback(new Error('手机号格式不正确'))
    }
​
    return {
      loginForm: {
        mobile: '13800000002',
        password: '123456'
      },
      loginRules: {
        mobile: [{ required: true, trigger: 'blur', message: '手机号不能为空' }, {
          validator: validateMobile, trigger: 'blur'
        }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }, {
          min: 6, max: 16, message: '密码的长度在6-16位之间 ', trigger: 'blur'
        }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },

我们在utils/validate.js方法中增加了一个校验手机号的方法

/**
 * 校验手机号
 * **/
export function validMobile(str) {
  return /^1[3-9]\d{9}$/.test(str) // 校验手机号
}

utils/validate.js是一个专门存放校验工具方法的文件

关于修饰符