项目实训1

6.29第一周第一次

进行vue框架的配置学习，在IDEA中下载vue插件，创建项目。使用element-ui组件进行快速便捷的组件使用。

编写登录页面

 <el-container>
            <el-header>
                <img class="mlogo" src="../assets/logo.png">
            </el-header>
            <el-main>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>

进行规则判定，输入框内容要符合要求

data() {
            return {

                ruleForm: {

                    username: 'lpy',
                    password: '123456'
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');

                    }else {
                        this.$message.error('错了哦，请输入所有字段！');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

登录界面样式的一些美化

 .demo-ruleForm{
        boder-radius:15px;
        background-clip:padding-box;
        max-width:500px;
        margin:100px auto;
        padding:15px 25px 15px 35px;
        border:  1px solid #eaeaea;
        box-shadow:  0 0 25px #cac6c6;
    }

使用axios进行前后端交互，加快效率

axios.interceptors.response.use(success=>{
    if(success.status&&success.status==200){
        if(success.data.code==500||success.status==401){
            Message.error({message:success.data.message});
            return;
        }
        if(success.data.message){
            Message.success({message:success.data.message});
        }
    }
    return success.data;
},error=>{
    if(error.response.code==504||error.response.code==404){
        Message.error({message:'服务器木了！！！'});
    }else if(error.response.code==401){
        Message.error({message:'尚未登录'});
        router.replace('/');
    }
    return;
});

最后的界面显示