elementui登录界⾯_使⽤Vue.js和Element-UI做⼀个简单登录
页⾯的实例
最近了解到Vue.js挺⽕的，有同学已经学习了，那我⼼⾥痒痒的也学习了⼀点，然后也学了⼀点Element组件，就做了简单的登录页⾯。效果很简单：
javascript登录注册界面代码如下：
前端页⾯
Insert title here
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.login-box {
margin-top:20%;
margin-left:40%;
}
帐号
密码
登录
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 = sult;
if(result == 'true' || result == true){
alert("登录成功");
}else {
alert("登录失败");
}
},
error : function(data) {
alert(data);
},
dataType : 'json',
})
}
}
})
后台代码：
ller; 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
* @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 = Parameter("name");
String password = Parameter("password");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = Writer();
if(name.equals("MoSon") && password.equals("123456")){
out.write("{\"result\":true}");
}else{
out.write("{\"result\":false}");
}
out.flush();
out.close();
}
}
以上这篇使⽤Vue.js和Element-UI做⼀个简单登录页⾯的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。