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

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

效果很简单：

代码如下：

前端页面

 
	
		
			
		 
	
 
 
	
		
			
		
	
 
 
	
		登录
	
 
 

 

后台代码：

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 [email protected]
  * @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();
	}
 
}

感谢您的关注！可加QQ1群：135430763，QQ2群：454796847，QQ3群：187424846。QQ群进群密码：xttblog，想加微信群的朋友，可以微信搜索：xmtxtt，备注：“xttblog”，添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至[email protected]邮箱。商务合作可添加助理微信进行沟通！