使用Vue.js和Element-UI做一个简单的登录页面
最近了解到Vue.js挺火的，有同学已经学习了，那我心里痒痒的也学习了一点，然后也学了一点Element组件，就做了简单的登录页面。
效果很简单：
代码如下：
前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//unpkg.com/element-ui@1.3.6/lib/theme-default/index.css">
<script type="text/javascript" src="vue/dist/vue.js"></script>
<script type="text/javascript" src="element-ui/lib/index.js"></script>
<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.login-box {
margin-top:20%;
margin-left:40%;
}
</style>
</head>
<body>
<div class="login-box" id="app" >
<el-row>
<el-col :span="8">
<el-input id="name" v-model="name" placeholder="请输入帐号">
<template slot="prepend">帐号</template>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-input id="password" v-model="password" type="password" placeholder="请输入密码">
<template slot="prepend">密码</template>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-button id="login" v-on:click="check" style="width:100%" type="primary">登录</el-button>
</el-col>
</el-row>
</div>
</body>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
name : "",
password : ""
},
methods : {
check : function(event){
//获取值
var name = this.name;
var password = this.password;
if(name == "" || password == ""){
this.$message({
message : "账号或密码为空！",
type : "error"
})
return;
}
$.ajax({
url : "login",
type : "post",
data : {
name : name,
password : password
},
success : function(data) {
var result = data.result;
if(result == "true" || result == true){
alert("登录成功");
}else {
alert("登录失败");
}
},
error : function(data) {
alert(data);
},
dataType : "json",
})
}
}
})
</script>
</html>
package com.moson.backstage.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* LoginController
* @author MoXingJian
* @email 939697374@qq.com
* @date 2017年6月20日 下午3:03:50
* @version 1.0
*/
@WebServlet("/login")
public class LoginController extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String password = request.getParameter("password");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
if(name.equals("MoSon") && password.equals("123456")){
out.write("{"result":true}");
}else{
out.write("{"result":false}");
}
out.flush();
out.close();
}
}
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇：没有了
- 下一篇： html页面提交数据，利用servlet接收数据并写进xml中
