springboot +vue (从零开始)-----二：vue登录页（一）

springboot +vue (从零开始)-----二：vue登录页（一）

前端页面是用的 是 elementui

elementui 官网：https://element.eleme.cn/#/zh-CN/component/installation

将前端样式组件引入 执行

npm i element-ui -S

还需要引入

创建登录页

红框的2个页面 是创建页面时候生成的，没有实际意义，以后我会删除。新建的登录页已经创建完成

将login 页面引入到 router/index.js中

现在整体代码如图:

效果：

加入样式

``

.loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.loginTitle{
    margin: 0px auto 40px auto;
    text-align: center;
}
.loginRemember{
    text-align: left;
    margin: 0px 0px 15px 0px;
}

效果：

Login.vue页面代码如下

<template>
    <div>
        <el-form
                :rules="rules"
                :model="loginForm"
                class="loginContainer"
                ref="loginForm">
            <h3 class="loginTitle">系统登陆</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password"><!-- prop 表单验证 -->
                <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码" />
            </el-form-item>
            <el-checkbox class="loginRemember" v-model="checked">记住密码</el-checkbox>
            <el-button type="primary" style="width: 100%" >登录</el-button>
            <!--            <el-button type="primary" style="width: 49%">注册</el-button>-->
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm:{
                    username: "admin",
                    password: "123456",
                },
                checked:true,
                rules:{
                    username:[{required:true,message:"请输入用户名",trigger:"blur"}],
                    password:[{required:true,message:"请输入密码",trigger:"blur"}]
                }
            };
        }
    }
</script>

<style scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>

今天就写这些。前期建议大家手撸下代码，你会发现很多问题。差不多的时候，我会告诉大家代码库地址。不过现在还得委屈下大家。