1. 登录

自定义页面 路径 /mdiyPage/login.do对应模版login.htm

[!tip] /mdiyPage/login.do可以根据实际业务需求修改名称
login.htm 也可以根据实际业务需求修改名称

HTML

<!--表单位置-start-->
<div id="app">
    <div @keydown.13='login'>
        <el-form ref="form" :model="form" :rules="rules" label-position="right" size="large" label-width="130px">
            <el-form-item label="登录名" prop="peopleName">
                <el-input v-model="form.peopleName" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入登录名">
                </el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="peoplePassword">
                <el-input v-model="form.peoplePassword" :disabled="false" :readonly="false" :clearable="true" type="password" placeholder="请输入登录密码">
                </el-input>
            </el-form-item>
            <el-row :gutter="0" justify="start" align="top">
                <el-col :span="12">
                    <el-form-item label="验证码" prop="rand_code">
                        <el-input v-model="form.rand_code" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入验证码">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div>
                        <img :src="verifCode" @click="code" />
                        <div @click="code">
                            看不清？换一张
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-form-item label=" ">
                <el-button @click="login" type="primary" :loading="loading">
                    {{loading?'登录中':'立即登录'}}
                </el-button>
                <div>
                    <el-link href="/mdiyPage/resetPassword.do" :underline="false" icon="el-icon-warning-outline">忘记密码
                    </el-link>
                    <el-link href="/mdiyPage/register.do" :underline="false" icon="el-icon-user">账号注册</el-link>
                </div>
            </el-form-item>
        </el-form>
    </div>
</div>

JavaScript

<!--js位置-start-->
<script>
var app = new Vue({
    el: '#app',
    watch: {},
    data: {
        loading: false,
        verifCode: ms.base + "/code?t=" + new Date().getTime(),
        saveDisabled: false,
        //表单数据
        form: {
            // 验证码
            rand_code: '',
            // 登录名
            peopleName: '',
            // 登录密码
            peoplePassword: '',
        },
        rules: {
            // 登录名
            peopleName: [{
                "required": true,
                "message": "登录名不能为空"
            }, { "pattern": "^[^[!@#$%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$", "message": "登录名格式不匹配" }, {
                "min": 1,
                "max": 30,
                "message": "登录名长度必须为1-30"
            }],
            // 登录密码
            peoplePassword: [{
                "required": true,
                "message": "登录密码不能为空"
            }, { "pattern": "^[^[!@#$%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$", "message": "登录密码格式不匹配" }, {
                "min": 1,
                "max": 30,
                "message": "登录密码长度必须为1-30"
            }],

            rand_code: [
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { min: 1, max: 4, message: '长度不能超过4个字符', trigger: 'change' }
            ],
        },
    },
    methods: {
        //获取验证码
        code: function() {
            this.verifCode = ms.base + "/code?t=" + new Date().getTime();
        },
        //登录
        login: function() {
            var that = this;
            //表单验证
            that.$refs.form.validate(function(valid) {
                if (valid) {
                    //更新加载状态
                    that.loading = true;
                    //请求验证接口
                    ms.http.post("/checkLogin.do", that.form).then(function(res) {
                        //成功
                        if (res.result) {
                            that.$notify({
                                title: '成功',
                                message: '登录成功',
                                type: 'success'
                            });
                            //重定向调整地址
                            var url = ms.util.getParameter("url");
                            if (url) {
                                url = decodeURIComponent(url);
                                var linkIndex = url.lastIndexOf("link=");
                                if (linkIndex > 0) {
                                    var link = url.substring(url.lastIndexOf("link=") + 5)
                                    url = decodeURIComponent(link);
                                }

                            } else {
                                url = "/people/peopleInfo.do";
                            }
                            window.location.href = url;
                        }
                        //更新加载状态
                        that.loading = false;
                    }).catch(function(err) {
                        that.code();
                        that.loading = false;
                    });
                }
            });
        }
    },
    created: function() {
        this.code();
    }
})
</script>
<!--js位置-end-->