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


Posted in Javascript onFebruary 23, 2018

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

效果很简单:

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

代码如下:

前端页面

<!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做一个简单登录页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
js实现select下拉框菜单
Dec 08 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue2 模板template的四种写法总结
Feb 23 #Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 #Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 #Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 #Javascript
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
You might like
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python字符串格式化
2015/06/15 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python实现列表的排序方法分享
2019/07/01 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
迎八一活动主题
2014/01/31 职场文书
前处理组长岗位职责
2014/03/01 职场文书
师范生自我鉴定
2014/03/20 职场文书
授权委托书样本
2014/04/03 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
员工自我评价范文
2015/03/11 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL