毛哥的快乐生活(28) Servlet版新闻网站之登录页实现

背景

毛哥决定先捋捋思路,每当毛哥想到【思路】这两个字,毛哥就是认真了。非常可怕,因为凡事就怕认真。凡事都怕,你怕不怕?

反正毛哥怕了,嘿,开心的怕。

实际上做到现在,核心功能也就一个Servlet,然后通过识别用户请求里面的method参数,向浏览器返回不同内容。

当method参数为gotoViewPage时,Servlet向浏览器输出新闻浏览页面的内容。

当method参数为gotoLoginPage时,Servlet向浏览器输出登录页面的内容。

当method参数为gotoPublishPage时,Servlet向浏览器输出发布新闻页面的内容。

决定

毛哥决定先做登录功能的实现,具体的分析呢,就是输入用户名、密码,点击【登录】按钮后,系统核验登录名和密码是否正确,如果正确就提示正确,如果错误就提示错误,这么简单而已。

图片描述

思路

说的简单,孬好也是一个正儿八经的网页啊,孬好也是正儿八经一个编程任务。

做任务,思路要清晰,有道是:读书破万卷下笔如有神,额不对用错典故了,应该是:谋定而后动,大吉又大利!

  1. 先要给用户名和密码输入框命名,因为要根据名字获取输入框的值。
  2. 点击按钮之后,要把数据发送给后台。
  3. 后台接受到数据之后,要判断用户名和密码是否正确。此时毛哥假设用户名maoge,密码verycool正确,其他都是错误。

查找知识点

在学习Servelet这种高级编程技术的路上,毛哥吃了太多的苦了。想到此处就不由得心酸,想唱一首再回首泪眼已朦胧,又感觉稍微有些矫情了,索性就改唱大海向东流天上的星星参北斗,确实带劲~

扯远了,毛哥此时遇到问题,已经不是动不动就求助老猫这个半吊子的窘状了。这个阶段的知识,自己去网上查询查询也就会了,而且自己尝试出来的,毫无疑问印象更加深刻哈。

所以毛哥开始了查找知识点的旅程:

首先,输入框命名很简单,使用name属性即可,例如<input type="text" name="username">就给这个文本输入框命了一个username的名字。后台也能通过这个名字获取网页输入的值。

其次,点击按钮之后,把数据发给后台,这个略微有些复杂,但是也完全难不住毛哥。之前毛哥已经学会通过在网页地址URL后面附加参数来传递数据到后台。例如:http://localhost:8080/ServletNewsSite/NewsServlet?method=gotoLoginPage,就把gotoLoginPage作为method名称的参数传递了。

但是输入框的数据怎么传呢,哈哈,原来人家早就设计好了,有一个表单标签<form>,直接把输入框放到form中传递就可以啦,当然form可以指定将输入框参数传递给谁,我们此处就传递给servlet就好了,谁让它能接受网页请求捏。

最后,后台判断用户名和密码是否正确,哎呀这个也太简单了吧,直接判断下字符串相等就完事了。

代码实现

1 改造登录页返回代码

添加了form,并且给文本框添加name,然后把button按钮类型改为了submit,这样点击按钮后就能把内容提交到后台啦。

注意此处使用了一个小技巧,为了避免双引号添加转义字符/导致代码乱,直接把部分双引号改为单引号,在html中效果一样哦。

	        "    <body>" + 
			"    <form action='NewsServlet' method='get'>"+//添加form,点击后将表单内容提交到NewsServlet
			"        <div id=\"title-bar\">欢迎登录XX讯息网</div>" + 
			"        <div id='input-bar'>" + 
			"            <input name='method' value='doLogin' type=\"hidden\"><br>" + //通过隐藏文本框传递method=doLogin
			"            <span>用户名:</span><input name='username' type=\"text\"><br>" + //为输入框设置name
			"            <span>密码:</span><input name='password' type=\"text\">" + //为输入框设置name
			"        </div>" + 
			"        <div id=\"button-bar\">" + 
			"            <input type='submit' value=\"登录\">" + //将登录按钮类型改为submit
			"        </div>" + 
			"    </form>"+	
			"    </body>" + 

再解释下"<input name='method' value='doLogin' type=\"hidden\"><br>",因为我们想借用NewsServlet来响应登录请求,所以需要通过method区分之前的页面请求,该参数跟用户没有多少关系,属于程序员设计的内容,所以通过type=\"hidden\"隐藏起来。至于为何用\",前面的\表示转义字符,后面的"才是真实含义。至于为何要用转义字符,是因为双引号在java语言内有表示字符串开始和结尾的作用,此处hidden前的双引号是字符串的真实内容,而不是java语法要求,所以加转义字符。

当然如果怕麻烦,也可以写成type='hidden',单引号不存在java语法问题,同时在html里面也是合法的哦。

2 改造后台接受数据

如下添加代码,可见比较简单。

@WebServlet("/NewsServlet")
public class NewsServlet  extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out = resp.getWriter();
		String method=req.getParameter("method");
		if(method.equals("gotoViewPage")) {
			out.println(HtmlData.viewTemplate);
		}else if(method.equals("gotoLoginPage")){
			out.println(HtmlData.loginTemplate);
		}else if(method.equals("gotoPublishPage")){
			out.println(HtmlData.publishTemplate);
		}else if(method.equals("doLogin")) {//处理登录请求
			String username=req.getParameter("username");//取出前台传递过来的username
			String password=req.getParameter("password");//取出前台传递过来的password
			if(username.equals("maoge")&&password.equals("verycool")) {
				out.println("<p>登录成功</p>");
			}else {
				out.println("<p>登录失败,请检查您的用户名和密码</p>");
			}
		}else {
			out.println("404!您请求的页面不存在");
		}
	}
}
3 测试

分别输入错误的用户名密码,以及正确的用户名密码,结果完全如预料一样,大功告成~

图片描述

图片描述

图片描述

图片描述

仔细看下点击登录按钮之后的url,是不是发现表单里面的参数也附在地址url中发送了。

哈哈,生活处处是惊奇啊,喷香吭。

附源码

GitHub


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页