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

效果很简单：

代码如下：

前端页面

！DOCTYPE html html towneta charset=' UTF-8 ' title在此插入标题/title link rel='样式表href='//unpkg。com/[email protected]/lib/theme-default/index。CSS ' rel='外部无跟随'脚本类型=' text/JavaScript ' src=' http : vue/dist/vue。js '/script脚本类型=' text/JavaScript ' src=' http 3360 element-ui/lib/index。js .最后一个孩子{ margin-bottom : 0；} }.登录-框{利润率-前：20%；保证金-左侧：40%;}/style/head dydiv class=' log in-box ' id=' app ' El-rowell-col : span=' 8 ' El-input id=' name ' v-model=' name ' placeholder='请输入帐号模板槽='prepend '帐号/template/El-input/El-col/El-row El-rowell-col : span=' 8 ' El-input id=' password ' v-model=' password ' type=' password ' placeholder='请输入密码模板槽='prepend '密码/template/El-input/El-col/El-row El-rowell-col : span=' 8 ' El-button id=' log in ' v-: click=' check style=' width :100% ' type=' primary '登录/El-button/El-col/El-row/div/正文脚本类型=' text/JavaScript ' new Vue({ El : ' # app '，数据： {名称： ' '，密码： ''}，方法： {检查：功能(事件){//获取值var name=this . namevar password=this . password if(name=' ' | | password==' '){ this . $message({message : '账号或密码为空！键入：“错误”})返回；}$.ajax({url : 'login '，键入： '岗位'，数据： {name : name，password : password}，success : function(data){ var result=data。结果；如果(结果=='true' ||结果==true){alert('登录成功');}else {alert('登录失败');}},错误：函数（数据){alert(数据);}，dataType : 'json '，})}}})/script/html后台代码：

打包。莫森。背景。控制器；导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse/* * * LoginController * @作者莫星健* @电子邮件[电子邮件保护]* @日期2017年6月20日下午3:03:50 * @ 1.0版*/@ WebServlet(“/log in”)公共类逻辑控制器扩展了httpersvlet { @ overrided protected void doGet(httpersvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException {doPost(请求，响应);} @ overrided protected void doPost(HttpServletrequest请求，HttpServletResponse响应)引发ServletException，IOException { String name=request。getparameter(' name ')；字符串密码=请求。GetParameter('密码')；回应。setcharacter encoding(' UTF-8 ')；回应。SetContentType(' text/XML；字符集=UTF-8 '；PrintWriter out=响应。getwriter()；if(名称。等于(' MoSon ')密码。等于(' 123456 '){ out。写入(' { '结果' : true } ')；} else { out。write(' { '结果' : false } ')；}出去。flush()；出去。close()；}}以上这篇使用Vue.js和元素-用户界面做一个简单登录页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。