005.实现用户登录View层

1.login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课网OA办公系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="assets/vue/vue.global.js"></script>
    <script src="assets/element-plus/index.full.js"></script>
    <script src="assets/axios/axios.js"></script>
    <style>
        .login-box {
            border: 1px solid #DCDFE6;
            width: 350px;
            margin: 180px auto;
            padding: 35px 35px 15px 35px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            box-shadow: 0 0 25px #909399;
        }

        .login-title {
            text-align: center;
            margin: 0 auto 40px auto;
            color: #303133;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form ref="loginForm" label-width="80px" :rules="rules" :model="form" class="login-box">
            <h2 class="login-title">慕课网OA办公系统</h2>
            <el-form-item label="账号" prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width:200px">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        const Main = {
            data() {
                return {
                    form: {
                        username: ''
                        , password: ''
                    }
                    , rules: {
                        username: [
                            {required: true, message: '账号不能为空', trigger: 'blur'}
                        ],
                        password: [
                            {required: true, message: '密码不能为空', trigger: 'blur'}
                        ]
                    }
                }
            }
            , methods: {
                onSubmit(formName) {
                    const form = this.$refs[formName];
                    form.validate((valid) => {
                        if (valid) {
                            console.info("表单校验成功,准备提交数据");
                            const form = this.form;
                            const $message = this.$message;
                            const params = new URLSearchParams();
                            params.append("username", form.username);
                            params.append("password", form.password);
                            axios.post("/api/login", params, {}).then(function (response) {
                                console.info(response);
                                const json = response.data;
                                if (json.code == "0") {
                                    window.location.href = "/index.html";
                                } else {
                                    $message.error({message: json.message, offset: 100});
                                }
                            });
                        }
                    })
                }
            }
        };
        //初始化Vue,绑定Main中的数据,利用ElementPlus对#app容器进行重新渲染
        const app = Vue.createApp(Main);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>

 

posted @ 2022-12-06 22:41  李林林  阅读(19)  评论(0编辑  收藏  举报