目录
过滤器
javaEE中对请求和响应进行拦截的技术
定义一个类，实现Filter接口
可以让某些请求地址再到达servlet之前进入到指定过滤器中，实现统一的处理。
例如编码过滤，权限等进行统一过滤
功能：
web开发人员通过filter技术，对web服务器管理的所有web资源
作用：
● 过滤器用来实现通用的功能，减少代码冗余，提高可维护性
● 一个过滤器可以配置给多个资源使用
● 一个资源也可以配置多个过滤器，按照配置顺序调用
代码
filtrt包
java
package com.ffyc.webserver.filter;
import javax.servlet.*;
import java.io.IOException;
/*
设置请求和响应编码集的
*/
public class EncodingFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
System.out.println("初始化过滤器");
}
/*
执行过滤操作的方法
*/
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
System.out.println("编码过滤器");
//设置请求编码集
servletRequest.setCharacterEncoding("utf-8");
//设置响应编码集
servletResponse.setContentType("text/html;charset=utf-8");
//让请求离开过滤器，继续向下执行,下一个可能是过滤器，也可能是目标访问的servlet
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {
System.out.println("过滤器销毁时");
}
}loginSercive
java
package com.ffyc.webserver.servlet;
import com.ffyc.webserver.dao.LoginDao;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("doget");
//接收数据
System.out.println(req.getParameter("account"));
System.out.println(req.getParameter("password"));
PrintWriter writer = resp.getWriter();
writer.write("cnl");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求中我们自己提交的数据
String account = req.getParameter("account");
System.out.println(account);
String password = req.getParameter("password");
System.out.println(password);
//dao jdbc 调用其他程序处理
LoginDao loginDao = new LoginDao();
//向前端响应
PrintWriter writer = resp.getWriter();
try {
boolean res = loginDao.login(account,password);
if(res){
writer.write("登录成功！");
}else {
writer.write("账号或密码错误");
}
} catch (Exception throwables) {
throwables.printStackTrace();
writer.write("服务器忙，请稍后再试!");
}
}
}web.xml注册
XML
<!--注册编码过滤器-->
<filter>
<filter-name>encoding</filter-name>
<filter-class>com.ffyc.webserver.filter.EncodingFilter</filter-class>
</filter>
<!--哪些地址可以进入到编码过滤器-->
<filter-mapping>
<filter-name>encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>运行
同步异步
java
package com.ffyc.webserver.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
//注解方式配置servlet
@WebServlet(urlPatterns = "/check",name = "check",loadOnStartup = 1)
public class CheckAccountServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String account = req.getParameter("account");
if(account.equals("admin")){
resp.getWriter().print("账号已存在");
}else{
resp.getWriter().print("账号未注册");
}
}
}运行
同步
同时只能做一件事
同步请求
当前端向后端发送请求时，此时客户端一切操作都会停止，服务器响应回来的内容会覆盖当前网页中的内容，一次只能做一件事，与服务器交互时，其他事情就不能做了
代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function checkAccount(account){
location.href = "http://127.0.0.1:8088/webserver/check?account=+account";
}
</script>
</head>
<body>
<input type="text" name="account" onblur="checkAccount(this.value)"/>
<input type="password">
</body>
</html>输入账号直接进入后端判断无法输入密码
异步
同时做多件事
异步请求
当客户端与服务器端交互时，不影响客户端页面的其他操作，可以同时做两件事情
服务器响应回来的内容不会覆盖整个页面
现在的前后端交互都是异步的，由于页面不用覆盖，体验感更好
如何实现发送异步请求
1、原始方式
在前端用一个对象，XMLhttpRequest 发送请求 接收响应
代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/axios.min.js"></script>
<script>
function checkaccount(account){
//1、创建请求对象
var httpbj = new XMLHttpRequest();
httpbj.open("get","http://127.0.0.1:8080/webserver/check?account="+account);//封装请求
httpbj.send(null);//发送请求
//2、执行回调函数 接收响应结果
httpbj.onreadystatechange = function(){
document.getElementById("message").innerHTML = httpbj.responseText;
}
}
</script>
</head>
<body>
<input type="text" name="account" onblur="checkaccount(this.value)"/><span id="message"></span><br />
<input type="password"/>
</body>
</html>跨域过滤器
java
package com.ffyc.webserver.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
后端向前端响应时告诉前端本次响应是安全的
*/
@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}运行
跨域问题
跨域访问问题
在8848访问8080后端服务
默认浏览器不允许接收来自另一个服务器响应的内容
认为响应回来的数据是来自另一个服务，可能不安全
前后端异步交互时，会出现跨域问题。
跨域问题，不同服务器间进行访问，浏览器不允许js接收来自其他服务器端响应的数据。
只要协议，域名，端口其中一个不同，都属于跨域问题
为什么要跨域访问
前后端分离开发（前端和后端在不同服务器中）
同一家公司不同项目之间要交互
浏览器为什么要阻止跨域访问
为了安全不能让其他服务器的内容肆意的响应到之间的服务中
如何解决跨域问题：
前端解决
CORS（跨源资源共享）
通过在服务器端设置 CORS 响应头，允许特定来源的访问。例如，设置 Access-Control-Allow-Origin 头部为允许的域名。
CORS 是最常用和推荐的方法，可以让服务器明确表示它允许哪些来源的请求。
后端解决
在响应时告知浏览器允许来自于某些指定服务响应的内容。
浏览器就认为其是安全可靠的。
2、用异步框架
axios框架
导包
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/axios.min.js"></script>
<script>
function checkaccount(account){
axios.get("http://127.0.0.1:8080/webserver/check?account="+account).then(function(resp){
if(resp.status==200){
document.getElementById("message").innerHTML = resp.data;
}
})
}
</script>
</head>
<body>
<input type="text" name="account" onblur="checkaccount(this.value)"/><span id="message"></span><br />
<input type="password"/>
</body>
</html>
搜索案例搭建
前端
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/axios.min.js"></script>
<script>
function searchinfo(){
var name = document.getElementById("nameid").value;
axios.get("http://127.0.0.1:8080/webserver/search?name="+name).then((resp)=>{
document.getElementById("box").innerHTML = resp.data;
});
}
</script>
</head>
<body>
<input type="text" name="name" id="nameid"/>
<input type="button" value="查询" onclick="searchinfo()"/>
<div id="box"></div>
</body>
</html>后端
java
package com.ffyc.webserver.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
//注解方式配置servlet
@WebServlet(urlPatterns = "/search" ,name = "search" ,loadOnStartup = 1)
public class SearchServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("aaaaaaaaaaa");
String name = req.getParameter("name");
//与数据库交互查询
String info = "张三,男,15222222";
resp.getWriter().print(str);
}
}效果
json数据格式
json格式的字符串（属性：值，属性：值......）
是一种通用的数据格式 Java和js都认识，是现在前后端交互的一种标配使用方式
不同语言之间如何进行数据交换 Java 和 c 文件
json--javaScript object notation js对象表现形式
"{key:value,key:value}" "{id:10,name:"张三"}" "{{id:10,name:"张三"},{id:10,name:"张三"},{id:10,name:"张三"}}"
在后端将Java对象转为json格式的字符串
有很多的第三方组件可以将我们的Java对象转为json格式对象
组件
pro.xml
XML
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.14.2</version>
</dependency>代码
学生类
java
package com.ffyc.webserver.model;
public class Student {
private int id;
private String name;
private String gender;
private String phone;
public Student() {
}
public Student(int id, String name, String gender, String phone) {
this.id = id;
this.name = name;
this.gender = gender;
this.phone = phone;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
}前端
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/axios.min.js"></script>
<script>
function searchinfo(){
var name = document.getElementById("nameid").value;
axios.get("http://127.0.0.1:8080/webserver/search?name="+name).then((resp)=>{
var stu = resp.data;
document.getElementById("box").innerHTML = stu.name+","+stu.gender
});
}
</script>
</head>
<body>
<input type="text" name="name" id="nameid"/>
<input type="button" value="查询" onclick="searchinfo()"/>
<div id="box"></div>
</body>
</html>后端
java
package com.ffyc.webserver.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.webserver.model.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
//注解方式配置servlet
@WebServlet(urlPatterns = "/search" ,name = "search" ,loadOnStartup = 1)
public class SearchServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("aaaaaaaaaaa");
String name = req.getParameter("name");
//与数据库交互查询 将查询后的结果放在一个个对象中去
Student student = new Student(100,"张三","男","111111111");
String str = new ObjectMapper().writeValueAsString(student);
System.out.println(str);
resp.getWriter().print(str);
}
}运行
