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

时间：2021-05-25

最近了解到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做一个简单登录页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章