element ui登录界面_使用Vue.js和Element-UI做一个简单登录页面的实例

最近了解到Vue.js挺火的，有同学已经学习了，那我心里痒痒的也学习了一点，然后也学了一点Element组件，就做了简单的登录页面。

效果很简单：

代码如下：

前端页面

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 = data.result;

if(result == 'true' || result == true){

alert("登录成功");

}else {

alert("登录失败");

}

},

error : function(data) {

alert(data);

},

dataType : 'json',

})

}

}

})

后台代码：

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();

}

}

以上这篇使用Vue.js和Element-UI做一个简单登录页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

本文标题: 使用Vue.js和Element-UI做一个简单登录页面的实例

本文地址: http://www.cppcns.com/wangluo/javascript/221021.html