关闭

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

标签: Vue.js前端Element-UI
9093人阅读 评论(2) 收藏 举报
分类:

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

效果很简单:


代码如下:

前端页面

<!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">
<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();
	}

}



1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

vue-cli入门(四)——vue-resource登录注册实例

前言 使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。 实例功能简述 本实例只有简单的两个模块:登录和注册,主要...
  • yuanyuanispeak
  • yuanyuanispeak
  • 2017-06-21 11:49
  • 6755

前端框架Vue(7)——Vue+ElementUI:简易login登录框重构

目标:Vue 来实现一个简易的登录框,有 用户名(user)和 密码(password),具备简单的校验。  使用的UI框架:ElementUI  vue 登录框的优点: 无须操作 dom,只需建立...
  • DOCALLEN
  • DOCALLEN
  • 2017-04-14 14:32
  • 7887

Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载

Vue + ElementUI 手撸后台管理网站基本框架(三)登录及系统菜单加载 本章主要讲解利用ElementUI创建一个导航菜单。实现导航菜单邪道router模式及点击根节点关闭所有菜单
  • harsima
  • harsima
  • 2017-09-12 20:47
  • 6225

Vue.js写一个SPA登录页面的过程

技术栈 vue.js 主框架vuex 状态管理vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状...
  • python233
  • python233
  • 2017-06-22 23:05
  • 1021

vue开发:vue+axios实现登录拦截

一个项目学会前端实现登录拦截 一个项目学会vue全家桶+axios实现登录、拦截、登出功能,以及利用axios的http拦截器拦截请求和响应。 前言 该项目是利用了Github ...
  • Generon
  • Generon
  • 2017-06-02 21:57
  • 4881

ElementUI案例演示:导航、布局、加载动画

知识点1.vue-router之嵌套路由 http://router.vuejs.org/zh-cn/essentials/nested-routes.html 2.element-ui 导航组...
  • github_26672553
  • github_26672553
  • 2016-12-08 14:02
  • 63875

Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制

Vue + ElementUI 手撸后台管理网站基本框架(二)权限控制 后台管理系统中,权限控制一般分为两个部分。一个是接口访问的权限控制,一个是页面的权限控制。本章将讲述这两种权限控制如何实现。
  • harsima
  • harsima
  • 2017-09-12 20:45
  • 6766

ElementUI之表单验证、数据绑定、路由跳转

1.新建表单组件el-form.vue
  • github_26672553
  • github_26672553
  • 2016-12-09 16:35
  • 31152

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(二、编写导航页)

从零开始搭建自己的Vuejs2.0+ElementUI单页面网站之使用vue-router编写导航页面
  • u012907049
  • u012907049
  • 2017-05-28 10:35
  • 7602

从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)

前言VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用vuejs作为前端框架,vuejs轻量、简单的特性使得前端开发变得更加简易,而基于vuejs的前端组件库也越来越多。我们今天使用...
  • u012907049
  • u012907049
  • 2017-05-26 10:31
  • 11308
    个人资料
    • 访问:123809次
    • 积分:2504
    • 等级:
    • 排名:第16975名
    • 原创:123篇
    • 转载:0篇
    • 译文:0篇
    • 评论:42条
    最新评论