<!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 > 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>
vue 登陆页面 带验证码
最新推荐文章于 2023-07-02 09:09:42 发布