使用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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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教程归纳总结
2008/06/07 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JavaScript中“+=”的应用
2007/02/02 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python 变量类型详解
2018/10/10 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
详解Python 函数参数的拆解
2020/09/02 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
总经理助理的八要求
2013/11/12 职场文书
英语教师自荐信
2014/05/26 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
详解Java实现数据结构之并查集
2021/06/23 Java/Android
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL