前端:实现一个form表单,表单中包含一个提交的文本框(用户名),一个密码框(密码),一个登录/提交按钮。
后端:实现一个httpervlet类的继承的servlet类。这个类主要负责获取前端过来的数据,将前端数据提取出用户名、密码,然后用我们预先写在程序中的用户名和密码做比对,结果返回给前端登录成功或者失败。
无数据库交互。
此需求依赖于上篇文章介绍过的maven+web框架,所以核心文件有:
1.Loginservlet.java
2.web.xml
3.Login.html
1.前端代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面title>
head>
<body>
<div style="background: aliceblue">
<h1 style="color: cadetblue">欢迎来到登陆页面,请输入用户名和密码h1>
<form action="form" method="post">
姓名:<input type="text" placeholder="请输入正确的账户名" name="username" value="null">
<br>
密码:<input type="password" placeholder="请输入正确的密码" name="password" value="null">
<br>
<input type="submit" value="点击登陆">
form>
div>
body>
html>
2.web.xml文件:
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>demoservlet-name>
<servlet-class>com.csdn.Mylogin2servlet-class>
servlet>
<servlet-mapping>
<servlet-name>demoservlet-name>
<url-pattern>/formurl-pattern>
servlet-mapping>
web-app>
3.后端代码:
package com.csdn;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import javafx.print.Printer;
public class Mylogin2 extends HttpServlet {
//实现登陆
//预备属性
static final String username="张三";
static final String password="abcde";
//1.重写
public void service(HttpServletRequest request, HttpServletResponse response) throws IOException {
//准备数据
String inputname;
String inputpswd;
//顺序问题一定要注意 我们一定要先设置格式再去拿流 这样对于返回给前端的流才会正确编码
request.setCharacterEncoding("UTF-8");
//这句话是告诉浏览器 何种方式解析
response.setContentType("text/html;charset=utf-8");
//获取前端发来的数据的实例对象
inputname=request.getParameter("username");
inputpswd=request.getParameter("password");
PrintWriter printWriter=response.getWriter();
//正确匹配字符串
if (inputname.equals(username)&&inputpswd.equals(password)){
//返回给前端页面登陆成功的页面--出现了乱码问题--编码格式设置--统一tomcat里面的编码
//! 编码问题的解决 --首先 对于请求和相应的对象的设置 只有对post方式有效 get方式要改一下server里面的编码
//做的时候后期出现了 访问页面 404 我重新改了一下 web里面的拦截器 和 form里面的动作 但是貌似找不到网页不是因为改变web拦截器
printWriter.println(""
+"登陆成功"+"");
printWriter.close();
}else {
//返回给前端页面登陆失败标签
printWriter.print(""
+"登陆失败"+"");
printWriter.close();
}
}
}
前端这一块:主要有三个问题
1.要明确好表格的action属性的值,这涉及到web.xml
能否拦截到form发送的这个动作。
2.另外,form发送的时候有两种方式 get 和 post
这里简单说一下,get方式就是走url。post不走url
这里涉及到get和post提交方式的数据限制,对于http协议来讲两者本质没有限制。
get来说,是不同的浏览器对get的限制,比如说IE最大支持2K
post来说,是服务器对post的限制,比如说Tomcat限制最大为2M。
3.另外get和post方式涉及到一个编码(对中文支持、乱码问题)问题。
简单说:如果你是post发送得数据,那么你在java类里面设置好格式就好了
但是如果你是get方式处理数据,你要把tomcat里面也配置好
//当然了这种登录信息,我就不用get了(抓下包也一样。。。注入。。)
编码问题:涉及到相关的三方面:
1.前端拿来的数据的编码:
request.setCharacterEncoding("UTF-8");
2.后端给前端的数据的编码:
response.setContentType("text/html;charset=utf-8");
3.在tomcat文件下有一个conf文件夹,其中server文件 其中是这样设置编码的。(我这个端口换过了,开的是8089端口)
<Connector port="8089" protocol="HTTP/1.1"
connectionTimeout="20000"
>
redirectPort="8443" URIEncoding="UTF-8" />
这块问题不大,主要是设置拦截器,并且将数据交给正确的java类啦处理。
遇到的问题是:记得classname里面写的是包名+类名,第一次写的时候直接写的类名
另外还有拦截器要和表格的action对应上,但是要加 /
<servlet>
<servlet-name>demoservlet-name>
<servlet-class>com.csdn.Mylogin2servlet-class>
servlet>
<servlet-mapping>
<servlet-name>demoservlet-name>
<url-pattern>/formurl-pattern>
servlet-mapping>
后端逻辑其实比较简单:核心逻辑只是一个字符串匹配问题(毕竟我们不用去数据库取数据,直接用string的equals比较就行)–其实我第一次用的真是==,太长时间忘了,甚至记得==重写过,应该可以直接用。。。
从前端拿数据还好说,
当时我代码第一次基本上是这样写的
//从前端拿
inputname=request.getParameter("username");
inputpswd=request.getParameter("password");
request.setCharacterEncoding("UTF-8");
//返回给前端
PrintWriter printWriter=response.getWriter();
response.setContentType("text/html;charset=utf-8");
printWriter.println(""
+"登陆成功"+"");
然后我疯狂各种修改,将tomcat里面也改了,但是就是无济于事,后来在在上午的代码里一点点对比,发现了竟然是顺序问题。
简单总结一下:你拿到流的时候,那么那个时候编码格式已经固定,后期是改变不了的。
所以一定要把编码写在前面。
//写在后面
对于request请求,我刚试了一下,如果不设置请求,拿到的数据是null(控制台)
而response,不设置格式的话返回给前端的是 ???? 问号