使用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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
js闭包的9个使用场景
Dec 29 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python for i in range ()用法详解
2020/09/18 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python实现AI换脸功能
2020/04/10 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
小学生自我评价范文
2014/01/25 职场文书
旅游个人求职信范文
2014/01/30 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
小学同学聚会感言
2015/07/30 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers