----------------------------------- 登录模块
1.0 设置固定的本地访问端口和网站名称
目标: 设置统一的本地访问端口和网站title
本节注意
: 修改服务的配置文件,想要生效的话,必须要重新启动服务,值‘8888’后面不能留有空格
1.1 本地服务端口
- 在**
vue.config.js
**中进行设置 vue.config.js
就是vue项目相关的编译,配置,打包,启动服务相关的配置文件,它的核心在于webpack,但是又不同于webpack,相当于改良版的webpack- 如图,是开发环境服务端口的位置
const port = process.env.port || process.env.npm_config_port || 9528
我们看到上面的 **`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 // 因为是开发使用的端口号, 所以不需要在production里面写
1.2 网站名称
- 网站名称实际在configureWebpack选项中的name选项,通过阅读代码,我们会发现name实际上来源于src目录下**
settings.js
**文件 - 所以,我们可以将网站名称改成"
人力资源管理平台
"
module.exports = {
title: '人力资源管理平台', // 项目名称, 也就是顶部的网页名称
/**
* @type {boolean} true | false
* @description Whether fix the header
*/
fixedHeader: false, // 固定头部
/**
* @type {boolean} true | false
* @description Whether show the logo in sidebar
*/
sidebarLogo: false // 显示左侧菜单logo
}
2.0 登录页面的基础布局
**目标
**完成登录页面的基础布局
- 本节注意: @` 是我们在vue.config.js中设置的一个路径别名,指定src根目录,这样可以很方便的寻找文件
- 本节注意: 如需要在样式表中使用 @ 别名的时候,需要在@前面加上一个**
~
**符号,否则不识别
3.0 登录表单的校验和修饰符
目标:对登录表单进行规则校验
本节注意: 修饰符(native)的使用
- 基础模板中,已经做了校验,我们针对代码进行一些优化
- 新规则:手机号必填,并且进行格式校验,密码必填,长度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: