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

更新时间：2020-06-28 23:42:02 作者：startmvc

最近了解到Vue.js挺火的，有同学已经学习了，那我心里痒痒的也学习了一点，然后也学了一

最近了解到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做一个简单登录页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。