使用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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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 源代码压缩小工具
2009/12/22 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
Python 字符串操作方法大全
2014/03/11 Python
python语音识别实践之百度语音API
2018/08/30 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python将时分秒转换成秒的实例
2019/12/07 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
经典c++面试题五
2014/12/17 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
降消项目实施方案
2014/03/30 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2014年教研室工作总结
2014/12/06 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
MySQL基础(一)
2021/04/05 MySQL
详细分析PHP7与PHP5区别
2021/06/26 PHP