【学习笔记】Vue+Element UI+axios 实现简单的登录页面

前言本文主要是学习过程的记录，可能写法上不是很规范，仅供学习参考。Vue3文档：传送门Element UI文档：传送门使用了表单，按钮，消息提示。功能介绍用户名校验空和2-20位中英文。密码必须包含大小写字母、数字和特殊字符，两种或两种以上，6-20位。没有后端，直接js校验账户，通过提示“登录成功”，错误提示相应消息，输入框标红。测试用户名:admin 密码:123abc代码在线预览codepe

Love丶伊卡洛斯

3482人浏览 · 2021-06-03 16:14:34

Love丶伊卡洛斯 · 2021-06-03 16:14:34 发布

前言

本文主要是学习过程的记录，可能写法上不是很规范，仅供学习参考。
Vue3文档：传送门
Element UI文档：传送门
axios文档：传送门
使用了表单，按钮，消息提示。
程序云端测试临时开放：传送门

功能介绍

用户名校验空和2-20位中英文。
密码必须包含大小写字母、数字和特殊字符，两种或两种以上，6-20位。
测试用户名:admin 密码:123abc
1、没有后端版，直接js校验账户，通过提示“登录成功”，错误提示相应消息，输入框标红。
2、get请求后端版，使用axios，发送get请求至后端cgi，简单校验后返回数据。

代码在线预览

codepen传送门
在这里插入图片描述

效果图

无后端版

在这里插入图片描述

后端版

在这里插入图片描述

官方自定义校验规则版

错误提示在输入框下方
在这里插入图片描述

代码

无后端版

<!DOCTYPE html>
<html>

<head>
    <title>
        登录
    </title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <style>
        @import url("https://unpkg.com/element-plus/lib/theme-chalk/index.css");

        #app {
            width: 300px;
        }

        .error_input input {
            border-color: red;
        }

        #login_btn {
            width: 220px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :label-position="labelPosition" label-width="80px" :model="form">
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名" v-bind:class="{error_input:form.username_temp}"
                    @input="check_username(form.username)"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="form.password" v-bind:class="{error_input:form.password_temp}"
                    show-password @input="check_password(form.password)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" id="login_btn" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script>
    const {ElMessage} = ElementPlus;

    var Main = {
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                    username_temp: false,
                    password_temp: false
                },
                labelPosition: "right"
            };
        },
        methods: {
            check_username(val) {
                if (val.length < 2 || val.length > 20) {
                    this.form.username_temp = true;
                } else {
                    this.form.username_temp = false;
                }
            },
            check_password(val) {
                if (val.length < 6 || val.length > 20) {
                    this.form.password_temp = true;
                } else {
                    this.form.password_temp = false;
                }
            },
            login() {
                let u = this.form.username;
                let p = this.form.password;

                if (u.length == 0 || p.length == 0) {
                    ElMessage.error("用户名或密码不能为空！");
                } else if (!/^[a-zA-Z0-9]{2,20}$/.test(u)) {
                    ElMessage.error("用户名为2-20位！");
                } else if (
                    !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
                        p
                    )
                ) {
                    console.log("username:" + u + " password:" + p);
                    ElMessage.error(
                        "密码必须包含大小写字母、数字和特殊字符，两种或两种以上！"
                    );
                } else {
                    if (u == "admin" && p == "123abc") {
                        ElMessage.success({
                            message: "登录成功",
                            type: "success"
                        });
                    } else {
                        ElMessage.error("用户名或密码错误！");
                    }
                }
            }
        },
        watch: {}
    };

    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app");

</script>

</html>

后端版

test.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8;"/>
    <title>
        登录
    </title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        @import url("https://unpkg.com/element-plus/lib/theme-chalk/index.css");

        #app {
            width: 300px;
        }

        .error_input input {
            border-color: red;
        }

        #login_btn {
            width: 220px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :label-position="labelPosition" label-width="80px" :model="form">
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名" v-bind:class="{error_input:form.username_temp}"
                    @input="check_username(form.username)"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="form.password" v-bind:class="{error_input:form.password_temp}"
                    show-password @input="check_password(form.password)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" id="login_btn" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script>
    const {ElMessage} = ElementPlus;

    var Main = {
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                    username_temp: false,
                    password_temp: false
                },
                labelPosition: "right"
            };
        },
        methods: {
            check_username(val) {
                if (val.length < 2 || val.length > 20) {
                    this.form.username_temp = true;
                } else {
                    this.form.username_temp = false;
                }
            },
            check_password(val) {
                if (val.length < 6 || val.length > 20) {
                    this.form.password_temp = true;
                } else {
                    this.form.password_temp = false;
                }
            },
            login() {
                let u = this.form.username;
                let p = this.form.password;

                if (u.length == 0 || p.length == 0) {
                    ElMessage.error("用户名或密码不能为空！");
                } else if (!/^[a-zA-Z0-9]{2,20}$/.test(u)) {
                    ElMessage.error("用户名为2-20位！");
                } else if (
                    !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
                        p
                    )
                ) {
                    console.log("username:" + u + " password:" + p);
                    ElMessage.error(
                        "密码必须包含大小写字母、数字和特殊字符，两种或两种以上！"
                    );
                } else {
                    axios.get('/cgi-bin/test.cgi', {
                        params: {
                        username: u,
                        password: p
                        }
                    })
                    .then(function (response) {
                        console.log(response);
                        console.log(response.data);
                        if(response.data == true)
                        {
                            ElMessage.success({
                                message: "登录成功",
                                type: "success"
                            });
                        }
                        else
                        {
                            ElMessage.error("用户名或密码错误！");
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }
            }
        },
        watch: {}
    };

    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app");

</script>

</html>

test.c

后端server使用的boa，感兴趣的话可以参考 Linux下嵌入式Web服务器BOA和CGI编程开发

//编译配合cgic.c cgic.h 编译为test.cgi
#include <stdio.h>
#include <string.h>
#include <stdlib.h>
#include <unistd.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <arpa/inet.h>
#include <errno.h>
#include <time.h>
#include "cgic.h"

char *get_request_content(char *src, char *content, int max_len);

int cgiMain(void)
{
        char *lenstr = NULL;
        lenstr = getenv("QUERY_STRING");
        if(NULL == lenstr)
        {
                return -1;
        }

        cgiHeaderContentType("text/html");

        char *u = get_request_content(lenstr, "username", 20);
        char *p = get_request_content(lenstr, "password", 20);

        if(NULL == u || NULL == p)
        {
                return -1;
        }

        if(0 == strncmp(u, "admin", 20) && 0 == strncmp(p, "123abc", 20))
        {
                printf("true");
        }
        else
        {
                printf("false");
        }

        return 0;
}

char *get_request_content(char *src, char *content, int max_len)
{
        char *result = (char *)malloc((max_len) * sizeof(char));
        memset(result, 0, max_len);
        int i = 0;
        char *temp = NULL;
        temp = strstr(src, content);
        if (temp == NULL)
        {
                return NULL;
        }
        temp += strlen(content);
        temp += 1;
        while (1)
        {
                if (max_len == i)
                        break;
                if (temp[i] != '&')
                {
                        result[i] = temp[i];
                        i++;
                }
                else
                {
                        break;
                }
        }
        return result;
}

官方自定义校验规则版

<!DOCTYPE html>
<html>

<head>
    <title>
        登录
    </title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <style>
        @import url("https://unpkg.com/element-plus/lib/theme-chalk/index.css");

        #app {
            width: 300px;
        }

        #login_btn {
            width: 220px;
        }

        .el-form-item__error {
            position: unset;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :label-position="labelPosition" label-width="80px" :model="form" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入密码" v-model="form.password" show-password autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" id="login_btn" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script>
    const {ElMessage} = ElementPlus;

    var Main = {
        data() {
            var validateUser = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else if (!/^[a-zA-Z0-9]{2,20}$/.test(value)) {
                    callback(new Error("用户名为2-20位！"));
                } else {
                    if (this.from.checkPass !== '') {
                        this.$refs.from.validateField('username');
                    }
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
                    callback(new Error("密码必须包含大小写字母、数字和特殊字符，两种或两种以上！"));
                } else {
                    if (this.from.checkPass !== '') {
                        this.$refs.form.validateField('password');
                    }
                    callback();
                }
            };
            return {
                form: {
                    username: "",
                    password: ""
                },
                rules: {
                    username: [
                        {validator: validateUser, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                },
                labelPosition: "right"
            };
        },
        methods: {
            check_username(val) {
                if (val.length < 2 || val.length > 20) {
                    this.form.username_temp = true;
                } else {
                    this.form.username_temp = false;
                }
            },
            check_password(val) {
                if (val.length < 6 || val.length > 20) {
                    this.form.password_temp = true;
                } else {
                    this.form.password_temp = false;
                }
            },
            login() {
                let u = this.form.username;
                let p = this.form.password;

                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (u == "admin" && p == "123abc") {
                            ElMessage.success({
                                message: "登录成功",
                                type: "success"
                            });
                        } else {
                            ElMessage.error("用户名或密码错误！");
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        watch: {}
    };

    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app");

</script>

</html>

vue-cli中使用

在这里插入图片描述

login.vue

<template>
  <div id="app">
    <el-form :label-position="labelPosition" label-width="80px" :model="form">
      <el-form-item label="用户名">
        <el-input
          v-model="form.username"
          placeholder="请输入用户名"
          v-bind:class="{ error_input: form.username_temp }"
          @input="check_username(form.username)"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          v-bind:class="{ error_input: form.password_temp }"
          show-password
          @input="check_password(form.password)"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" id="login_btn" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        username_temp: false,
        password_temp: false,
      },
      labelPosition: "right",
    };
  },
  methods: {
    check_username(val) {
      if (val.length < 2 || val.length > 20) {
        this.form.username_temp = true;
      } else {
        this.form.username_temp = false;
      }
    },
    check_password(val) {
      if (val.length < 6 || val.length > 20) {
        this.form.password_temp = true;
      } else {
        this.form.password_temp = false;
      }
    },
    login() {
      let u = this.form.username;
      let p = this.form.password;

      if (u.length == 0 || p.length == 0) {
        this.$message.error("用户名或密码不能为空！");
      } else if (!/^[a-zA-Z0-9]{2,20}$/.test(u)) {
        this.$message.error("用户名为2-20位！");
      } else if (
        !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
          p
        )
      ) {
        console.log("username:" + u + " password:" + p);
        this.$message.error(
          "密码必须包含大小写字母、数字和特殊字符，两种或两种以上！"
        );
      } else {
        if (u == "admin" && p == "123abc") {
          this.$message.success({
            message: "登录成功",
            type: "success",
          });
        } else {
          this.$message.error("用户名或密码错误！");
        }
      }
    },
  },
  watch: {},
};
</script>

<style>
#app {
  width: 300px;
}

.error_input input {
  border-color: red;
}

#login_btn {
  width: 220px;
}
</style>

main.js

追加

// 手动配置element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...