一. 内容简介

vue登陆页面实现。

二. 软件环境

2.1 Visual Studio Code 1.75.0

2.2 chrome浏览器

2.3 node v18.14.0

三.主要流程

3.1 搭建html结构

3.2 添加css样式

3.3 js代码

3.4 页面展示

3.5 vue组件完整代码

四.具体步骤

4.1 搭建html结构

<div class="login">

    <!-- 用于显示名字 -->
    <div class="header">
        <p class="title">竞赛助手平台</p>
    </div>

    <!-- 内容 -->
    <div class="content">
        <!-- 放图片 -->
        <div class="content-left">
            <img src="@/static/img/loginBg1.jpg" class="img-bg">
        </div>
        <!-- 放表单 -->
        <div class="content-right">
            <!-- 参赛者登录 -->
            <div class="content-right-title">参赛者登录</div>
            <form action="">
                <div class="user-name" style="margin-top: 60px;">
                    <label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                    <input type="text" class="ant-row ant-form-item" v-model="username" placeholder="邮箱/手机/用户名"
                        @keyup="checkInfo">
                </div>
                <div class="user-pass" style="margin-top: 60px;">
                    <label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
                    <input type="password" class="ant-row ant-form-item" v-model="password" placeholder="请输入密码"
                        @keyup="checkInfo">
                </div>
                <div class="user-pass user-yzm" style="margin-top: 60px;">
                    <div>
                        <label for="yzm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></label>
                        <input type="yzm" class="ant-row ant-form-item" placeholder="请输入验证码">
                    </div>
                    <div><img src="@/static/img/yzm.jpg" class="img-yzm" alt=""></div>
                </div>
            </form>
            <!-- 注册，忘记密码 -->
            <div class="tip">{{tips}}</div>
            <div class="register">
                <a class="register-a" href="">忘记密码</a>
                <a class="register-a" href="">注册账号</a>
            </div>
            <!-- 登录按钮 -->
            <div class="register-button">
                <input type="button" @click="doSubmit" value="登 录" class="btn btn-primary register-button-btn">
            </div>
        </div>
    </div>
    
    <!-- 底部信息 -->
    <div class="footer">
    
    </div>
</div>

4.2 添加css样式

/* 初始配置 */
* {
  margin: 0;
  padding: 0;
}
ul,ol {
  list-style: none;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
h1,h2,h3 {
  font-size: 16px;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* 浮动 */
.l {
  float: left;
}
.r {
  float: right;
}
.clear::after {
  content:"";
  display: block;
  clear: both;
}

/* 版心 */
.container {
  width: 1080px;
  margin: 0 auto;
  position: relative;
}
/* 通栏 */
.container-fluid {
  width: 100%;
}

/* 页面配置 */
.login {
    height: 1009px;
    background: #f0f2f5;
}
.header {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content:center;
}
.title {
    font-size: 33px;
    color: rgba(0, 0, 0, .85);
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    position: relative;
    top: 75px;
}

.content {
    margin: 0 auto;
    width: 1000px;
    height: 620px;
    background: #ffffff;
    border-radius: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
}
.img-bg {
    height: 480;
    width: 533px;
}
.content-left {
    height: 100%;
    display: flex;
    align-items:center;
}
.content-right {
    width: 400px;
    height: 100%;
    margin-top:50px;
    padding: 30px;
}
.content-right-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
}
.user-yzm {
    display: flex;

}
.img-yzm {
    height: 40px;
    margin-right: 0px;
    margin-left: 10px;
}

/* 登录 */
.register {
    margin-top: 0px;
    line-height: 40px;
    display: flex;
    flex-direction: row-reverse;
}
.register-a {
    margin-left: 10px;
}
.register-button {
    line-height: 1.499;
    font-weight: 400;
    width: 100%;
    margin-top: 20px;
}
.register-button-btn {
    width: 100%;
    border-radius: 7px;
}
.tip {
    margin: 0;
    padding: 20px;
    height: 30px;
    width: 100%;
    color: red;
}

4.3 js代码

export default {
    data() {
        return {
            username: "",
            password: "",
            tips: "",
            colorStyle: "color:red",
            isRight: false,
            returnUrl: null,
            pid: 0,
            sid: 0,
            num: 1
        }
    },
    methods: {
        doSubmit: function () {
            if (this.isRight) {
                var url = "http://localhost:8080/user/login";
                axios.get(url, {
                    params: {
                        username: this.username,
                        password: this.password
                    }
                }).then((res) => {
                    //res.data 才表示接口返回的数据
                    var vo = res.data;
                    console.log(vo);

                    if (vo.code == 10000) {
						this.tips = "登录成功！";
                           }
                    } else {
                        this.tips = "登录失败，账号或密码错误！";
                    }
                });
            } else {
                this.tips = "请正确输入帐号和密码！";
            }
        },
        checkInfo: function () {
            if (this.username == "") {
                this.tips = "请输入帐号！";
                this.isRight = false;
            } else if (this.username.length < 8 || this.username.length > 20) {
                this.tips = "账号长度必须为8-20个字符！";
                this.isRight = false;
            } else {
                //账号合法，校验密码
                if (this.password == "") {
                    this.tips = "请输入密码！";
                    this.isRight = false;
                } else if (this.password.length < 6 || this.password.length > 16) {
                    this.tips = "密码长度必须为6-16个字符！";
                    this.isRight = false;
                } else {
                    this.tips = "";
                    this.isRight = true;
                }
            }
        }
    }
}

4.4 页面展示

4.5 vue组件完整代码

<template>
    <div class="login">
        <!-- 用于显示名字 -->
        <div class="header">
            <p class="title">竞赛助手平台</p>
        </div>
        
        <!-- 内容 -->
        <div class="content">
            <!-- 放图片 -->
            <div class="content-left">
                <img src="@/static/img/loginBg1.jpg" class="img-bg">
            </div>
            <!-- 放表单 -->
            <div class="content-right">
                <!-- 参赛者登录 -->
                <div class="content-right-title">参赛者登录</div>
                <form action="">
					<div class="user-name"  style="margin-top: 60px;">
						<label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
						<input type="text" class="ant-row ant-form-item" v-model="username" placeholder="邮箱/手机/用户名" @keyup="checkInfo">
					</div>
					<div class="user-pass"  style="margin-top: 60px;">
						<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
						<input type="password" class="ant-row ant-form-item" v-model="password" placeholder="请输入密码" @keyup="checkInfo">
					</div>
					<div class="user-pass user-yzm"  style="margin-top: 60px;">
                        <div>
                            <label for="yzm"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></label>
                            <input type="yzm" class="ant-row ant-form-item" placeholder="请输入验证码" >
                        </div>
                        <div><img src="@/static/img/yzm.jpg" class="img-yzm" alt=""></div>
					</div>
                </form>
                <!-- 注册，忘记密码 -->
                <div class="tip">{{tips}}</div>
                <div class="register">
                    <a class="register-a" href="">忘记密码</a>
                    <a class="register-a" href="">注册账号</a>
                </div>
                <!-- 登录按钮 -->
                <div class="register-button">
                    <input  type="button" @click="doSubmit" value="登 录" class="btn btn-primary register-button-btn">
                </div>
            </div>            
        </div>



        <!-- 底部信息 -->
        <div class="footer">

        </div>

    </div>
</template>
<script>
import "../static/js/jquery-1.9.min.js"
import "../static/js/cookie_utils.js"
import "../static/js/vue.js"
import "../static/js/utils.js"
import axios from "../static/js/axios.min.js"
import "../static/js/base.js"
    export default {
        data(){
            return {
                username:"",
				password:"",
				tips:"",
				colorStyle:"color:red",
				isRight:false,
				returnUrl:null,
				pid:0,
				sid:0,
				num:1
            }
        }
		},
        methods: {
            doSubmit: function() {
                if (this.isRight) {
                    var url = "http://localhost:8080/user/login";
                    axios.get(url, {
                        params: {
                            username: this.username,
                            password: this.password
                        }
                    }).then((res) => {
                        //res.data 才表示接口返回的数据
                        var vo = res.data;
                        console.log(vo);

                        if (vo.code == 10000) {
         
                                }
                        } else {
                            this.tips = "登录失败，账号或密码错误！";
                        }
                    });

                } else {
                    this.tips = "请正确输入帐号和密码！";
                }
            },
            checkInfo: function() {
                if (this.username == "") {
                    this.tips = "请输入帐号！";
                    this.isRight = false;
                } else if (this.username.length < 8 || this.username.length > 20) {
                    this.tips = "账号长度必须为8-20个字符！";
                    this.isRight = false;
                } else {
                    //账号合法，校验密码
                    if (this.password == "") {
                        this.tips = "请输入密码！";
                        this.isRight = false;
                    } else if (this.password.length < 6 || this.password.length > 16) {
                        this.tips = "密码长度必须为6-16个字符！";
                        this.isRight = false;
                    } else {
                        this.tips = "";
                        this.isRight = true;
                    }
                }
            }
        }
        
    } 
</script>
<style src="@/static/css/dlstyle.css"  scoped></style>
<style src="@/static/css/bootstrap.min.css"  scoped></style>
<style scoped>
/* 初始配置 */
* {
  margin: 0;
  padding: 0;
}
ul,ol {
  list-style: none;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
h1,h2,h3 {
  font-size: 16px;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* 浮动 */
.l {
  float: left;
}
.r {
  float: right;
}
.clear::after {
  content:"";
  display: block;
  clear: both;
}

/* 版心 */
.container {
  width: 1080px;
  margin: 0 auto;
  position: relative;
}
/* 通栏 */
.container-fluid {
  width: 100%;
}

/* 页面配置 */
.login {
    height: 1009px;
    background: #f0f2f5;
}

.header {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content:center;
}
.title {
    font-size: 33px;
    color: rgba(0, 0, 0, .85);
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    position: relative;
    top: 75px;
}

/* 内容配置 */
.content {
    margin: 0 auto;
    width: 1000px;
    height: 620px;
    background: #ffffff;
    border-radius: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
}
.img-bg {
    height: 480;
    width: 533px;
}
.content-left {
    height: 100%;
    display: flex;
    align-items:center;
}
.content-right {
    width: 400px;
    height: 100%;
    margin-top:50px;
    padding: 30px;
}
.content-right-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
}
.user-yzm {
    display: flex;

}
.img-yzm {
    height: 40px;
    margin-right: 0px;
    margin-left: 10px;
}

/* 登录 */
.register {
    margin-top: 0px;
    line-height: 40px;
    display: flex;
    flex-direction: row-reverse;
}
.register-a {
    margin-left: 10px;
}
.register-button {
    line-height: 1.499;
    font-weight: 400;
    width: 100%;
    margin-top: 20px;
}
.register-button-btn {
    width: 100%;
    border-radius: 7px;
}
.tip {
    margin: 0;
    padding: 20px;
    height: 30px;
    width: 100%;
    color: red;
}
</style>

五. 问题

导入css，js有点麻烦，

<style src="@/static/css/dlstyle.css"  scoped></style>
<style src="@/static/css/bootstrap.min.css"  scoped></style>
<style scoped>

<script>
import "../static/js/jquery-1.9.min.js"
import "../static/js/cookie_utils.js"
import "../static/js/vue.js"
import "../static/js/utils.js"
import axios from "../static/js/axios.min.js"
import "../static/js/base.js"