最近了解到Vue.js挺火的，有同学已经学习了，那我心里痒痒的也学习了一点，然后也学了一点Element组件，就做了简单的登录页面。
效果很简单：
代码如下：
前端页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="https://unpkg.com/element-ui@1.3.6/lib/theme-default/index.css" > <script type="text/javascript" src="https://www.jb51.net/vue/dist/vue.js"></script> <script type="text/javascript" src="https://www.jb51.net/element-ui/lib/index.js"></script> <script type="text/javascript" src="https://www.jb51.net/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 > <el-row> <el-col :span="8"> <el-input v-model="name" placeholder="请输入帐号"> <template slot="prepend">帐号</template> </el-input> </el-col> </el-row> <el-row> <el-col :span="8"> <el-input v-model="password" type="password" placeholder="请输入密码"> <template slot="prepend">密码</template> </el-input> </el-col> </el-row> <el-row> <el-col :span="8"> <el-button 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做一个简单登录页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: