一、登录功能
需求描述
目前使用假数据实现效果,当用户输入用户名为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/axios.min.js"></script>
<script src="assets/vue.min-v2.5.16.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);text-align: center;line-height: 310px;font-size:18px;color: white;font-weight: bold ">
蜗牛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-weight: bold;font-size: 18px;">
登录
</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="doReset">重置</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中绑定的数据
// 通过axios发送请求到UserLoginServlet
var url = "http://localhost:8080/login?user_name=" + this.userName + "&passwd=" + this.passwd;
axios.get(url).then(response => {
if (response.data == '登录成功') {//登录成功
window.location.href = 'index.html';//跳转到主页index.html
} else {//登录失败
alert("用户名或密码错误!!!");//弹窗警告
}
})
},
doReset() {//重置内容
this.userName = null;
this.passwd = null;
}
},
created: function () { //页面加载完成后执行
}
});
</script>
</body>
</html>