使用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深入理解js闭包
Jul 03 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js调试工具Console命令详解
Oct 21 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
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用mysql数据库存储session的代码
2010/03/05 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
js 事件小结 表格区别
2007/08/13 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
详解python多线程之间的同步(一)
2019/04/03 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
C#基础面试题
2016/10/17 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
学生安全责任书
2014/04/15 职场文书
百日安全活动总结
2014/05/04 职场文书
应届大学生自荐书
2014/06/17 职场文书
家庭贫困证明
2014/09/23 职场文书
教师年终个人总结
2015/02/11 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书