vue 登陆页面带验证码

最新推荐文章于 2023-07-02 09:09:42 发布

demaxiydadao

最新推荐文章于 2023-07-02 09:09:42 发布

阅读量321

点赞数

分类专栏：原创有源码自己

本文链接：https://blog.csdn.net/Fuyonghui123/article/details/116748059

版权

原创同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

有源码

20 篇文章 0 订阅

订阅专栏

自己

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<!-- 登陆页面-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/vue/element.css">
    <script src="js/vue/element.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
    <style>
        body{text-align: center;background:#afb4db}
        #login{
            margin: 300px auto;
            width: 360px;
        }
        h2{
           position: relative;
            left: 6px;
            top: -34px;
            color:#fffffb;
        }
        .el-form-item__label{
            font-size: 15px;
            color: #fffffb;
        }
    </style>
</head>
<body>

<div id="login">
    <h2 >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Demo官方高校系统</h2>
    <el-form  label-width="80px" >
        <el-form-item label="用户名:">
            <el-input v-model="user.username"  ></el-input>
        </el-form-item>
        <el-form-item label="密  码:" >
          <el-input v-model="user.password" type="password"></el-input>
        </el-form-item>
        <!--加图片验证  这里直接加上http是因为他会默认 url+zheg -->
        <el-form-item>
            <img v-bind:src="kaptcha" @click="captcha">
            <el-input v-model="user.chapat" style="float: right; width: 142px;" placeholder="验证码"></el-input>
        </el-form-item>
        <el-button type="primary" @click="submit(user)">点击登陆</el-button>
        <el-button>取消</el-button>
    </el-form>
</div>
<div id="footer">
    <footer>
        <p>Posted by: fyh</p>
        <p>Contact information: <a href="www.fuyonghui.com">101332994@qq.com</a>.</p>
    </footer>
</div>
</body>
<script>
   let vue= new Vue({
        el:"#login",
        data:{
            user:{
                username :"",
                password:"",chapat:""
            },
            //定义变量
            kaptcha :global_api_url+"Capt/getCapcha.jpg"
        },
        methods:{
            submit(user){
                axios.post(global_api_url+"login", user).then(rs => {
                  console.log("aaa")
                });
            },
            //图片更换
            captcha(){
                //axios.post(global_api_url+"Capt/getCapcha.jpg")
                //('#check_keyImg').attr('src', global_api_url+'Capt/getCapcha.jpg');
                this.kaptcha = global_api_url + 'Capt/getCapcha.jpg?d='+Math.random();
            }
        }
    })
</script>
</html>

demaxiydadao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 登陆页面带验证码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="style.
复制链接

扫一扫