建设门户网站预算,甘肃省嘉峪关建设局网站,网络建设与运维赛项,phpstudy如何建设网站一、过滤器
过滤器#xff08;Filter#xff09;是一个用于对请求和响应进行预处理的组件。过滤器可以在 Java Servlet 规范中使用#xff0c;通常用于执行一些通用的任务
1、过滤器的作用 过滤器是一种javaEE规范中定义的一种技术#xff0c;可以让请求达到目标servlet之…一、过滤器
过滤器Filter是一个用于对请求和响应进行预处理的组件。过滤器可以在 Java Servlet 规范中使用通常用于执行一些通用的任务
1、过滤器的作用 过滤器是一种javaEE规范中定义的一种技术可以让请求达到目标servlet之前先进入过滤器进行一些拦截处理 当处理完成后可以机洗向后执行到达目标servlet。如果配置了多个过滤器也可以进入到下一个过滤器
2、过滤器的使用场景
1统一编码过滤 统一编码过滤器确保所有进入的请求和所有返回的响应都使用统一的字符编码如 UTF-8
一般所有的请求和响应都需要通过此过滤器所以建议在配置时配置为全部域可以进入到此过滤器
2权限验证
权限验证过滤器用于检查用户是否有权限访问特定的资源。这对于确保安全性非常重要
3跨域过滤
一般情况下浏览器不允许跨域。所谓跨域就是指在不同服务之间进行访问在访问时只要请求协议、域名、端口其中之一不同就属于跨域访问在后端通过跨域过滤器响应时过滤器告知本次响应安全可以正常接收从而解决跨域问题
3、过滤器的搭建
1统一编码过滤器的搭建
跨域过滤器功能组件类
package com.wbc.dormServer.filter;import javax.servlet.*;
import java.io.IOException;public class EncodingFilter implements Filter {String reqencod;String respencod;Overridepublic void init(FilterConfig filterConfig) throws ServletException {System.out.println(初始化过滤器);reqencodfilterConfig.getInitParameter(reqencod);respencodfilterConfig.getInitParameter(respencod);}Overridepublic void destroy() {System.out.println(过滤器销毁时执行);}//执行过滤操作的方法Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {System.out.println(编码过滤器);//设置请求编码集servletRequest.setCharacterEncoding(reqencod);//设置响应编码集servletResponse.setContentType(respencod);//让请求离开过滤器继续向下执行下一个可能是过滤器也可能是目标访问的servletfilterChain.doFilter(servletRequest, servletResponse);}
}过滤器的配置配置于webapp/WEB-INF/web.xml !-- 注册编码过滤器--filterfilter-nameencoding/filter-namefilter-classcom.wbc.dormServer.filter.EncodingFilter/filter-classinit-paramparam-namereqencod/param-nameparam-valueutf-8/param-value/init-paraminit-paramparam-namerespencod/param-nameparam-valuetext/html;charsetutf-8/param-value/init-param/filter
!-- 配置那些地址可以进入到过滤器--filter-mappingfilter-nameencoding/filter-nameurl-pattern/*/url-pattern!--/*表示所有向后端发送的请求都要进入编码过滤器--/filter-mapping此处将例如reqencodutf-8、respencodtext/html;charset-utf-8等参数配置于web.xml是便于打jar包后修改此参数 打包后web.xml可以直接进行修改而java文件不可以因为已经编译为class文件。特在此说明
2跨域过滤器
跨域过滤器功能组件类
package com.wbc.dormServer.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-Origin, http://127.0.0.1:8848);//允许已知安全可靠的另一个服务的请求跨域httpResponse.setHeader(Access-Control-Allow-Methods, *);//允许跨域的请求方法GET, POST, HEAD 等httpResponse.setHeader(Access-Control-Allow-Headers, *);//允许跨域的请求头httpResponse.setHeader(Access-Control-Allow-Credentials, true);//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
}此处通过WebFilter(urlPatterns /*) 在类中配置便不需要在web.xml文件中配置
说明 WebFilter(urlPatterns /供外界访问的地址) 是 Java EE现在的 Jakarta EE中一种注解配置方式用于定义一个 Servlet 过滤器。它通过使用注解来简化配置避免了修改web.xml 文件的需要。 相应的配置servlet是也可以通过类似方法进行配置如此时需要配置一个检查类可以通过注释WebServlet(urlPatterns /check,name check, loadOnStartup 1)来简化配置
二、前后端交互、发送请求
前后端交互发送请求一般分为两种一种是同步请求已淘汰另一种是异步请求
1、同步请求
1同步 简单来说同步就是一次只能做一件事
2同步请求 知道了同步同步请求就很好理解了当前端像后端发送请求时此时客户端一切操作都会终止服务器相应回来的内容会覆盖当前网页的内容。一次只能做一件事与服务器交互时其他事情不能再继续。例如在表单、超链接发送请求时都是同步请求其相应会覆盖当前的网页内容
示例
以一个简单的登录html为例 在同步请求时后端反馈的登录成功会覆盖掉之前的网页十分的不简便不美观 前端代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headbodyform actionhttp://127.0.0.1:8182/dormServer/login methodpost账号:input typetext nameaccount value/br /密码:input typepassword namepassword value/br /input typesubmit value登录//form/body
/html服务器响应类
package com.wbc.dormServer.web;import com.wbc.dormServer.dao.LoginDao;import javax.servlet.ServletConfig;
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;
import java.sql.SQLException;public class LoginServlet extends HttpServlet {/*处理get请求*/Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(doGet());String name req.getParameter(name);String age req.getParameter(age);System.out.println(name);System.out.println(Integer.parseInt(age));}/*处理post请求*/Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(doPost());//设置请求内容解码的编码//req.setCharacterEncoding(utf-8);String account req.getParameter(account);String password req.getParameter(password);System.out.println(account password);//调用jdbcLoginDao loginDao new LoginDao();boolean res false;//resp.setContentType(text/html;charsetutf-8);//设置相应内容的编码PrintWriter printWriter resp.getWriter();//获得一个打印输出流try {res loginDao.login(account, password);if (res){//向前做出相应printWriter.write(h2登陆成功/h2);}else if (!res){//向前做出相应printWriter.write(h2账号不存在/h2);}} catch (ClassNotFoundException | SQLException e) {e.printStackTrace();printWriter.write(h2网络异常404/h2);}}}JDBC 与数据库交互
package com.wbc.dormServer.dao;import java.sql.*;public class LoginDao {public boolean login(String username, String password) throws ClassNotFoundException, SQLException {Class.forName(com.mysql.cj.jdbc.Driver);String url jdbc:mysql://127.0.0.1:3306/chatdb?serverTimezoneAsia/Shanghai;//定义连接sql所需的urlString users root;//用户名String passwords Wbc11280;//密码//建立连接Connection connection DriverManager.getConnection(url,users,passwords);//建立连接//预编译PreparedStatement preparedStatement connection.prepareStatement(select account from user where account ? and password ?);//传入数据preparedStatement.setObject(1, username);preparedStatement.setObject(2, password);//查询操作ResultSet resultSet preparedStatement.executeQuery();//将查询结构封装到ResultSet类型的对象中 需要将数据封装到指定类型的对象中/*preparedStatement.close();connection.close();*/return resultSet.next();}
}2、异步请求
1异步 异步与同步相反简单来说异步就是同时可以做多件事
2异步请求 当客户端与服务器交互时不影响客户端页面的其他操作同时做多件事情 服务器相应回来的内容不会覆盖整个页面现在的前后端交互都是异步的由于页面不用覆盖体验感更好
实现发送异步请求 实现发送异步请求有两种方法一种是较为原始的在前端用一个js对象 XMLhttpRequest 发送请求、接收响应的方式另一种是通过异步框架来实现但底层逻辑也是通过XMLhttpRequest来实现
1在前端用一个js对象 XMLhttpRequest 发送请求、接收响应 前端代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescriptfunction checkAccount(account){//location.href http://127.0.0.1:8182/dormServer/check?accountaccount;/* 跨域访问问题在8848的服务访问8182后端服务默认浏览器不允许接收来自另一个服务的相应内容认为相应回来的数据时来自另一个服务可能不安全*///1、创造请求对象var httpObj new XMLHttpRequest();httpObj.open(get,http://127.0.0.1:8182/dormServer/check?accountaccount,true)//封装请求httpObj.send(null);//发送请求//2、执行回调函数接收响应结果httpObj.onreadystatechangefunction(){document.getElementById(msg).innerHTMLhttpObj.responseText;}}/script/headbodyinput typetext nameaccount onblurcheckAccount(this.value)/span idmsg/spanbr/input typepassword //body
/html
后端响应
package com.wbc.dormServer.web;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;WebServlet(urlPatterns /check,name check, loadOnStartup 1)
public class CheckAccountServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String account req.getParameter(account);if (account.equals(aaaa)) {resp.getWriter().write(账号已存在);}else {resp.getWriter().write(账号未注册);}}
}实现效果 输入账户结束鼠标指针移开后给出提示不覆盖当前页面 2通过异步请求框架这里以axios框架为例
axios中文网|axios API 中文文档 | axios (axios-js.com)axios框架官网axios中文网|axios API 中文文档 | axios (axios-js.com)
在官网下载好js文件后导入到文件夹
此处以发送get请求为例通过axios对异步请求的封装使得在写代码时更加的方便高效。现在普遍在项目开发中使用异步请求框架。
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/axios.min.js/scriptscript function checkAccount(account){/* axios框架对异步请求的封装 */axios.get(http://127.0.0.1:8182/dormServer/check?accountaccount).then((resp){ console.log(msg);document.getElementById(msg).innerHTMLresp.data;//取出后端相应的内容});}/script/headbodyinput typetext nameaccount onblurcheckAccount(this.value)/span idmsg/spanbr/input typepassword //body
/html 需要注意的是当你的应用可能会遇到跨域请求时配置适当的跨域过滤器是必要的无论请求是同步请求还是异步请求。
三、json以及后端响应json数据 当后端向前端响应数据时总是希望可以通过对象进行封装。而不同语言之间是无法直接传输对象的。js想要接收到java的数据只能通过字符串来传输。而无论对于前端程序员还是后端程序员来说拼接和分离字符串都是一件令人头疼的事件。并且在拼接和分离字符串中也需要明确的规则来进行操作否则可能会出现数据丢失或其他不必要的麻烦因此json孕育而生。
1、json的概述 json(Java javaScript object Notation)javaScript对象表示法是一种js对象表示方式的字符串。目前json格式已成为公认的前后端交互的数据标准格式
2、json的作用 后端向前端响应更多的数据后端一般情况下将数据封装到对象中但是js不认识java对象。java中toString将对象转为字符串js接到后却无法用面向对象的方法直接使用。为了是js更方便的进行操作在java中将对象转为json格式的字符串传递给前端js
3、json的运用示例
我们以查询一个学生信息为例
v1.0
前端代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/axios.min.js/scriptscriptfunction search(){var name document.getElementById(name).value;axios.get(http://127.0.0.1:8182/dormServer/search?namename).then((resp){console.log(resp.data);document.getElementById(numid).innerHTMLresp.data.num;document.getElementById(nameid).innerHTMLresp.data.name;document.getElementById(genderid).innerHTMLresp.data.gender;document.getElementById(ageid).innerHTMLresp.data.age;});}/script/headbodyinput typetext idname/input typebutton value搜素 onclicksearch()/div学号span idnumid/spanbr /姓名span id nameid/spanbr /性别span id genderid/spanbr /年龄span id ageid/spanbr //div/body
/html
学生模组
package com.wbc.dormServer.model;public class Student {private int num;private String name;private int age;private String gender;public int getNum() {return num;}public void setNum(int num) {this.num num;}public String getName() {return name;}public void setName(String name) {this.name name;}public int getAge() {return age;}public void setAge(int age) {this.age age;}public String getGender() {return gender;}public void setGender(String gender) {this.gender gender;}Overridepublic String toString() {return Student{ num num , name name \ , age age , gender gender \ };}
}后端相应
package com.wbc.dormServer.web;import com.fasterxml.jackson.databind.ObjectMapper;
import com.wbc.dormServer.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;
import java.io.PrintWriter;WebServlet(urlPatterns /search,name search, loadOnStartup 1)
public class SearchServlet_1 extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name req.getParameter(name);//模拟从数据库查询学生信息并封装到一个学生对象中Student student new Student();student.setNum(100);student.setName(name);student.setAge(20);student.setGender(男);/** json Java javaScript object Notation javaScript对象表示法 {nameaaa,age20}* json 是一种公认的 js识别的对象表示方式 对于java来说就是一种特殊的固定格式的字符串** 对象{键:值,键:值,...}* 集合[{键:值,键:值,...},{键:值,键:值,...},...]* *///String s {name:student.getName(),age:student.getAge()};//打印响应一个学生对象PrintWriter writer resp.getWriter();ObjectMapper objectMapper new ObjectMapper();//通过json组件将java对象转为json格式的字符串String jsonString objectMapper.writeValueAsString(student);writer.print(jsonString);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {super.doPost(req, resp);}}在正规项目中一般打包发送状态码code提示信息message以及数据data。因此我们在此将上方代码规范化
v2.0
添加一个标准的响应模型封装类
package com.wbc.dormServer.model;
//标准的响应模型封装类
public class Result {private int code;private String message;private Object data;public Result(int code, String message, Object data) {this.code code;this.message message;this.data data;}public int getCode() {return code;}public void setCode(int code) {this.code code;}public String getMessage() {return message;}public void setMessage(String message) {this.message message;}public Object getData() {return data;}public void setData(Object data) {this.data data;}
}修改服务器响应类改为发送标准响应模型封装类并做异常处理
package com.wbc.dormServer.web;import com.fasterxml.jackson.databind.ObjectMapper;
import com.wbc.dormServer.model.Result;
import com.wbc.dormServer.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;
import java.io.PrintWriter;WebServlet(urlPatterns /search,name search, loadOnStartup 1)
public class SearchServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {PrintWriter writer resp.getWriter();Result result null;ObjectMapper objectMapper new ObjectMapper();try {String name req.getParameter(name);//模拟从数据库查询学生信息并封装到一个学生对象中Student student new Student();student.setNum(100);student.setName(name);student.setAge(20);student.setGender(男);result new Result(200, 查询成功, student);}catch (Exception e) {result new Result(500, 查询失败,null );}//通过json组件将java对象转为json格式的字符串String jsonString objectMapper.writeValueAsString(result);writer.print(jsonString);/**//** json Java javaScript object Notation javaScript对象表示法 {nameaaa,age20}* json 是一种公认的 js识别的对象表示方式 对于java来说就是一种特殊的固定格式的字符串** 对象{键:值,键:值,...}* 集合[{键:值,键:值,...},{键:值,键:值,...},...]* *//*//String s {name:student.getName(),age:student.getAge()};//打印响应一个学生对象PrintWriter writer resp.getWriter();ObjectMapper objectMapper new ObjectMapper();//通过json组件将java对象转为json格式的字符串String jsonString objectMapper.writeValueAsString(student);writer.print(jsonString);*/}}相应的修改前端代码以匹配后端响应代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/axios.min.js/scriptscriptfunction search(){var name document.getElementById(name).value;axios.get(http://127.0.0.1:8182/dormServer/search?namename).then((resp){console.log(resp.data);if(resp.data.code200){document.getElementById(numid).innerHTMLresp.data.data.num;document.getElementById(nameid).innerHTMLresp.data.data.name;document.getElementById(genderid).innerHTMLresp.data.data.gender;document.getElementById(ageid).innerHTMLresp.data.data.age;document.getElementById(showMsg).innerHTMLresp.data.message;}else if(resp.data.code500){document.getElementById(showMsg).innerHTMLresp.data.message;}});}/script/headbodyinput typetext idname/input typebutton value搜素 onclicksearch()/divdiv id showMsg/div学号span idnumid/spanbr /姓名span id nameid/spanbr /性别span id genderid/spanbr /年龄span id ageid/spanbr //div/body
/html
效果
