溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用Vue.js和Element-UI做一個簡單登錄頁面的實例

發(fā)布時間：2020-09-29 17:02:23 來源：腳本之家 閱讀：303 作者：starjuly 欄目：web開發(fā)

最近了解到Vue.js挺火的，有同學(xué)已經(jīng)學(xué)習(xí)了，那我心里癢癢的也學(xué)習(xí)了一點，然后也學(xué)了一點Element組件，就做了簡單的登錄頁面。

效果很簡單：

使用Vue.js和Element-UI做一個簡單登錄頁面的實例

代碼如下：

前端頁面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"  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"  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做一個簡單登錄頁面的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手