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

来源：互联网发布：linux下c语言创建线程编辑：程序博客网时间：2024/05/29 15:35

最近了解到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"><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{@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);}@Overrideprotected 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();}}

阅读全文

1 0