JavaWeb基础学习总结（下）

woananya
146 阅读10分钟

来源：01-Web核心介绍_哔哩哔哩_bilibili

Web

Web:全球广域网，也称为万维网(www)，能够通过浏览器访问的网站。
JavaWeb:是用Java技术来解决相关web互联网领域的技术栈

JavaWeb技术栈
B/S架构: Browser/Server, 浏览器/服务器架构模式，它的特点是，客户端只需要浏览器，应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器，获取Web资源，服务器把Web资源发送给浏览器即可。

  • 好处:易于维护升级:服务器端升级后，客户端无需任何部署就可以使用到新的版本。

请求和响应 image.png

HTTP

HyperText Transfer Protocol,超文本传输协议，规定了浏览器和服务器之间数据传输的规则。

image.png

HTTP协议特点 image.png

HTTP请求数据格式 image.png HTTP响应数据格式 image.png

Web服务器-Tomcat

Web服务器是一个应用程序(软件)，对HTTP协议的操作进行封装，使得程序员不必直接对协议进行操作，让Web开发更加便捷。主要功能是“提供网上信息浏览服务”。
Tomcat是Apache软件基金会一个核心项目，是一个开源免费的轻量级Web服务器，支持Servlet/JSP少量JavaEE规范。 Tomcat也被称为Web容器、Servlet容器。 Servlet需要依赖于Tomcat才能运行。

image.png 安装 image.png image.png image.png

IDEA创建Maven Web项目

image.png 使用骨架 image.png 不使用骨架 image.png

IDEA使用Tomcat

1、集成本地Tomcat image.png 2、使用Tomcat Maven插件 image.png

Servlet

Servlet是Java提供的一门动态web资源开发技术
Servlet是JavaEE规范之一，其实就是一个接口，将来我们需要定义Servlet类实现Servlet接口，并由web服务器运行Servlet

image.png

快速入门 image.png Servlet执行流程 image.png Servlet生命周期 image.png Servlet体系结构 image.png HttpServlet使用步骤：

  • 继承HttpServlet
  • 重写doGet和doPost方法

HttpServlet原理：
获取请求方式，并根据不同的请求方式，调用不同的doXxx方法

Servlet urlPattern配置
Servlet要想被访问，必须配置其访问路径(urlPattern)。一个Servlet，可以配置多个urlPattern。 @WebServlet(urlPatterns = {"/demo1","/demo2"})

urlPattern 配置规则：

  • 精确匹配
  • 目录匹配
  • 扩展名匹配
  • 任意匹配 image.png XML配置方式编写Servlet
    Servlet 从3.0版本后开始支持使用注解配置，3.0版本前只支持web.XML配置文件的配置方式。
    web.XML配置步骤:
  • 1.编写Servlet类
  • 2.在web.xml中配置该Servlet image.png

Request&Response

  • Request:获取请求数据
  • Response:设置响应数据

Tomcat需要解析请求数据，封装为request对象， 并且创建request对象传递到service方法中。使用request对象，查阅JavaEE API文档的HttpServletRequest接口。

image.png image.png

Request继承体系

image.png

Request获取请求数据

image.png

@WebServlet("/req1")
public class ServletDemo3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getMethod();//GET
        System.out.println(method);
        String contextPath = req.getContextPath();
        System.out.println(contextPath);///tomcat-demo1
        StringBuffer requestURL = req.getRequestURL();
        System.out.println(requestURL.toString());//http://localhost/tomcat-demo1/req1
        String requestURI = req.getRequestURI();
        System.out.println(requestURI);///tomcat-demo1/req1
        String queryString = req.getQueryString();
        System.out.println(queryString);//user=an&pass=66
        String agent = req.getHeader("user-agent");//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
        System.out.println(agent);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //另外写一个表单post提交数据
//form method="post" action="/tomcat-demo1/req1"
        BufferedReader reader = req.getReader();
        String line = reader.readLine();
        System.out.println(line);//username=dmanan&password=999999
    }
}

Request通用方式获取请求参数

image.png

@WebServlet("/req2")
public class ServletDemo4 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String method = req.getMethod();
        System.out.println(method);
        Map<String, String[]> map = req.getParameterMap();
        for (String key : map.keySet()) {
            System.out.print(key+":");
            String[] vals = map.get(key);
            for (String val : vals) {
                System.out.print(val+" ");
            }
            System.out.println();
//            get...
//            username:dm
//            password:goushibaba666
//            hobby:basketball
        }
        String[] hobbies = req.getParameterValues("hobby");
        for (String hobby : hobbies) {
            System.out.println(hobby);
//            swim
//            basketball
        }
        String username = req.getParameter("username");
        System.out.println(username);
        String password = req.getParameter("password");
        System.out.println(password);
//        anan
//        123
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

image.png image.png 参数乱码问题
image.png url编码解码： GET获取参数的方式: getQueryString 乱码原因，tomcat进行URL解码，默认的字符集是ISO-8859-1

public class UrlDemo {
    public static void main(String[] args) throws UnsupportedEncodingException {
        String encode = URLEncoder.encode("安安", "utf-8");
        System.out.println(encode);//%E5%AE%89%E5%AE%89
        String decode = URLDecoder.decode(encode, "utf-8");
        System.out.println(decode);//安安
    }
}

GET/POST方式的解决（tomcat8以前）

//        解决get乱码
        byte[] bytes = username.getBytes(StandardCharsets.ISO_8859_1);
        username = new String(bytes, StandardCharsets.UTF_8);

POST方式的解决

req.setCharacterEncoding("utf-8");

image.png （更正：先编码，后解码）

Request请求转发

请求转发(forward):一种在服务器内部的资源跳转方式

image.png 实现方式：

request.getRequestDispatcher("资源B路径").forward(request,response);

请求转发资源间共享数据:使用Request对象 image.png 请求转发特点:

  • 浏览器地址栏路径不发生变化
  • 只能转发到当前服务器的内部资源
  • 一次请求，可以在转发的资源间使用request共享数据

Response

image.png

Response设置响应数据功能介绍

image.png

Response完成重定向

重定向(Redirect):一种资源跳转方式

image.png

//        重定向
//        response.setStatus(302);
//        response.setHeader("location","resp2");

//        简化方式重定向
       response.sendRedirect("resp2");

重定向特点：

  • 浏览器地址栏路径发生变化
  • 可以重定向到任意位置的资源（服务器内部、外部均可)
  • 两次请求，不能在多个资源使用request共享数据

Response响应字符数据

image.png

response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.write("爱安安");
writer.write("<h1>香辣鸡腿堡</h1>");

注意:

  • 该流不需要关闭，随着响应结束，response对象销毁，由服务器关闭
  • 中文数据乱码:原因通过Response获取的字符输出流默认编码:ISO-8859-1
    response.setContentType("text/html;charset=utf-8");

Response响应字节数据

image.png

   FileInputStream fis = new FileInputStream("src/main/webapp/img.png");
        ServletOutputStream os = response.getOutputStream();
//        byte[] bytes = new byte[1024];
//        int len;
//        while ((len=fis.read(bytes))!=-1){
//            os.write(bytes,0,len); 
//        }
//        简化
        IOUtils.copy(fis,os);

        fis.close();

image.png

案例

用户登录

1、静态页面，写到webapp目录下
2、创建数据库，创建user表，创建User实体类
3、导入MyBatis坐标，导入MySQL驱动坐标
4、创建mybatis-config.xml核心配置文件，UserMapper.xml映射文件，UserMapper接口
5、创建Servlet，表单提交路径到loginServlet

image.png

用户注册

image.png

SqlSessionFactory代码优化

public class SqlSessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;
//    静态代码块会随着类的加载而自动执行，且只执行一次
    static {
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

image.png

JSP

概念: Java Server Pages，Java服务端页面。一种动态的网页技术，其中既可以定义HTML、JS、CSS等静态内容，还可以定义Java代码的动态内容 JSP = HTML + Java。JSP的作用:简化开发，避免了在Servlet中直接输出HTML标签

image.png

JSP脚本

JSP脚本用于在JSP页面内定义Java代码

JSP脚本分类 image.png

JSP缺点 image.png image.png

EL表达式

Expression Language表达式语言，用于简化JSP页面内的Java代码。主要功能:获取数据

image.png JavaWeb中的四大域对象:
1.page:当前页面有效
2.request:当前请求有效
3. session:当前会话有效
4. application:当前应用有效
el表达式获取数据，会依次从这4个域中寻找，直到找到为止。

JSTL标签

JSP标准标签库(Jsp Standarded Tag Library)，使用标签取代JSP页面上的Java代码。

image.png

image.png

MVC模式和三层架构

MVC是一种分层开发的模式，其中:M: Model，业务模型，处理业务；V: View，视图，界面展示；C: Controller，控制器，处理请求，调用模型和视图。

image.png MVC好处：职责单一，互不影响，有利于分工协作，有利于组件重用。

三层架构： image.png

MVC和三层架构的区别 image.png

案例

image.png

1、查询所有： image.png 2、添加： image.png 3、修改 image.png image.png

会话跟踪技术

会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应
会话跟踪:一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据

image.png HTTP协议是无状态的，每次浏览器向服务器请求时，服务器都会将该请求视为新的请求，因此我们需要会话跟踪技术来实现会话内数据共享。

实现方式:

  • 1.客户端会话跟踪技术：Cookie
  • 2.服务端会话跟踪技术: Session

Cookie基本使用

Cookie:客户端会话技术，将数据保存到客户端，以后每次请求都携带Cookie数据进行访问 image.png

Cookie 原理

image.png

Cookie使用细节

image.png

Session基本使用

Session：服务端会话跟踪技术，将数据保存到服务端。JavaEE提供HttpSession接口，来实现一次会话的多次请求间数据共享功能。

image.png

Session原理

Session是基于Cookie实现的 image.png

Session使用细节

image.png

Cookie和Session的区别

image.png

登录注册案例

image.png 用户登录： image.png

记住密码

记住用户： image.png image.png 用户注册： image.png

验证码

展示验证码： image.png 校验验证码： image.png

Filter

Filter概念: Filter表示过滤器，是JavaWeb三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。 讨滤器一般完成─些通用的操作，比如:权限控制、统一编码处理、敏感字符处理等等.

image.png

Filter快速入门

image.png

Filter执行流程

image.png

Filter使用细节

image.png 过滤器链：一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链。注解配置的Filter，优先级按照过滤器类名(字符串)的自然排序。 image.png

案例

image.png image.png

Listener

概念:Listener表示监听器，是JavaWeb三大组件(Servlet、Filter、Listener)之一。监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。

image.png

Listener使用

image.png

AJAX

概念:AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML。

AJAX作用:
1．与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据。使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
2．异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等...

image.png

AJAX快速入门

image.png

案例

image.png

Axios异步框架

Axios对原生的AJAX进行封装，简化书写 image.png

快速入门

image.png

Axios请求方式别名

image.png

案例

image.png

JSON

JSON概念: JavaScript Object Notation。JavaScript对象表示法。由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

image.png

JSON基础语法

image.png

JSON数据和JAVA对象转换

image.png

Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换

image.png

案例

image.png image.png

Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

image.png

Vue快速入门

image.png

Vue常用指令

指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如: v-if，v-for...

image.png

image.png

image.png

image.png

image.png

vue生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

image.png

image.png

image.png

image.png

案例

image.png

image.png

Element

Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页。组件:组成网页的部件，例如超链接、按钮、图片、表格等等~

快速入门

image.png

Element布局

image.png

Element组件

查看官网

综合大案例

一、搭建环境 image.png image.png 二、查询所有 image.png 三、新增品牌 image.png 四、代码优化 image.png

public class BaseServlet extends HttpServlet {
    //根据请求路径的最后一段进行分发
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求路径
        String requestURI = req.getRequestURI();
//        System.out.println(requestURI);///brand-case/brand/selectAll
        //获取最后一段路径 方法名
        int index;
        index = requestURI.lastIndexOf("/");
        String methodName = requestURI.substring(index + 1);
//        System.out.println(methodName);//selectAll
        //获取字节码对象，获取方法对象，执行方法
        //this 谁调用了service方法this就是谁 例如BrandServlet
        Class<? extends BaseServlet> c = this.getClass();
        try {
            Method method = c.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            throw new RuntimeException(e);
        } catch (InvocationTargetException e) {
            throw new RuntimeException(e);
        } catch (IllegalAccessException e) {
            throw new RuntimeException(e);
        }
    }
}

五、批量删除 image.png 六、分页查询 image.png

image.png 七、条件分页查询

image.png

avatar
文章
阅读
粉丝