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

(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )

最近了解到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="/UploadFiles/2021-04-02/vue.js">

后台代码：


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

上一篇：Vue父组件调用子组件事件方法
下一篇：Vue2 模板template的四种写法总结