使用Vue.js和Element-UI做一个简单登录页面的实例
程序员文章站
2022-12-29 21:32:47
最近了解到vue.js挺火的，有同学已经学习了，那我心里痒痒的也学习了一点，然后也学了一点element组件，就做了简单的登录页面。
效果很简单：
代码如下：
前...
最近了解到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" rel="external nofollow" >
<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();
}
}
以上这篇使用vue.js和element-ui做一个简单登录页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。