最近了解到Vue.js挺火的，有同學已經學習了，那我心里癢癢的也學習了一點，然后也學了一點Element組件，就做了簡單的登錄頁面。
效果很簡單：
代碼如下：
前端頁面
<!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" 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做一個簡單登錄頁面的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
