目前使用假数据实现效果，当用户输入用户名为admin，密码为123的时候，登录成功跳转到主页（index.html），否则弹出警告对话框提示“用户名或密码错误”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><!-- 导入Bootstrap依赖--><link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css"><script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script><script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><!-- 导入vue依赖--><script src="asset/vue.min-v2.5.16.js"></script><script src="asset/axios.min.js"></script>
</head>
<body>
<div class="container" id="app"><!-- bootstrap行 <--><div class="row"><!-- bootstrap 列.6个栅格的宽度--><div class="col-md-6 col-md-offset-3" style="height: 310px;border: 1px solid black;margin-top: 80px; "><!-- bootstrap 行--><div class="row"><!-- 显示文章标题的div--><div class="col-md-5"style="height:310px;background-color:rgb(43,136,223); font-size: 18px;color:white;font-weight:bold;text-align: center;line-height: 310px;">蜗牛CRM管理系统</div><!--显示表单的div--><div class="col-md-7"><!-- div bootstrap 行--><div class="row" style="padding: 30px 0px 30px 0px;"><div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;">登录</div></div><!-- div bootstrap行--><div class="row" style="height: 60px;margin-bottom: 20px;"><div class="col-md-8 col-md-offset-2"><label>用户名</label><input type="text" class="form-control" v-model="userName"/></div></div><!-- div bootstrap行--><div class="row" style="height: 60px;margin-bottom: 20px;"><div class="col-md-8 col-md-offset-2"><label>密码</label><input type="password" class="form-control" v-model="passwd"/></div></div><!-- div bootstrap行--><div class="row" style="height: 60px;margin-bottom: 20px;"><div class="col-md-8 col-md-offset-2" style="text-align: center"><button class="btn btn-primary" style="margin-right: 8px;" @click="doLogin">登录</button><button class="btn btn-default" @click="reset">重置</button></div></div></div></div></div></div></div>
</body>
<script>//创建Vuenew Vue({el: '#app', //将id=app的管理权给vuedata: { //需要用到的数据userName: null,//用户名passwd: null,//密码},methods: { //所有方法的生命doLogin() {//点击登录按钮后执行//通过this.可以获取data中绑定的数据if (this.userName == 'admin' && this.passwd == '123') {//登录成功window.location.href = 'index.html';//跳转到主页index.html} else {alert("用户名或者密码错误");//弹窗警告}},reset(){//点击重置按钮后执行this.userName=null;this.passwd=null;},},created: function () {//页面加载完成后执行}});
</script>
</html>本文发布于:2024-02-01 16:31:48，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170677630837964.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
