第2阶段10-使用Vue控制CRM管理系统页面组件
一、登录功能
需求描述
目前使用假数据实现效果,当用户输入用户名为admin,密码为123的时候,登录成功跳转到主页(index.html),否则弹出警告对话框提示“用户名或密码错误”。
需求实现
1、vue模板
2、在data中声明需要绑定的数据
3、在HTML中用v-model属性绑定data
4、给登录按钮通过@click绑定点击事件
5、在methods中添加doLogin方法实现业务需求
6、重置按钮功能
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- 导入bootstrap依赖 -->
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖 -->
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/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">
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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="doRest">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//创建vue实例
new Vue({
el: '#app', //将id=app的div的管理权交给vue
data: { //需要绑定的数据
userName: null, //用户名
passwd: null //密码
},
methods: { //所有声明的函数
doLogin(){ //点击登录按钮后执行
//通过this.可以获取data中绑定的数据
if(this.userName == 'admin' && this.passwd == '123'){ //登录成功
window.location.href = 'index.html'; //跳转到主页index.html
} else { //登录失败
alert("用户名或密码错误"); //弹窗警告
}
},
doRest(){ //点击重置按钮后执行
this.userName = null;
this.passwd = null;
}
},
created: function () { //页面加载完成后执行
}
});
</script>
</body>
</html>