Vue.js和Element-UI做一个简单的登录页面 使用Vue.js和Element-UI做一个简单登录页面的实例
starjuly 人气:0想了解使用Vue.js和Element-UI做一个简单登录页面的实例的相关内容吗,starjuly在本文为您仔细讲解Vue.js和Element-UI做一个简单的登录页面的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue.js,Element-UI,登录页面,下面大家一起来学习吧。
最近了解到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" 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做一个简单登录页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
加载全部内容