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

2019-11-19 14:19:23

字体：大中小

来源：转载

供稿：网友

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

上一篇：搭建element-ui的Vue前端工程操作实例

下一篇：Vue2 模板template的四种写法总结