JAVA-web

Http

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

HTTP协议特点:

1. 基于TCP协议:面向连接,安全

2.基于请求——响应模型的: 一次请求对应一次响应

3. HTTP协议是无状态的协议: 对于事务处理没有记忆能力。每次请求一响应都是独立的。

缺点:多次请求间不能共享数据。

优点:速度快

数据格式

三部分

1.请求行:请求数据的第一-行。 其中GET表示请求方式，/

表示请求资源路径，HTTP/1.1表示协议版本

2.请求头:第二行开始,格式为key: value形式。

3.请求体:POST请求的最后一部分，存放请求参数

GET请求和POST请求区别:

1.GET请求请求参数在请求行中，没有请求体。

POST请求请求参数在请求体中

2.GET请求请求参数大小有限制，POST没有

Tomcat

1. Web服务器作用?

➢封装HTTP协议操作，简化开发

➢可以将web项 目部署到服务器中，对外提供网上浏览服务

2. Tomcat是一个轻量级的Web服务器，支持Servlet/JSP少量

JavaEE规范，也称为Web容器，Servlet容器

项目结构

IDEA中创建maven Web项目

不使用骨架

集成本地tomcat

Tomcat - Tomcat Maven插件

Servlet

Servlet是Java提供的一门动态web资源开发技术

●Servlet 是JavaEE规范之一, 其实就是一个接口，将来

我们需要定义Servlet类实现Servlet接口，并由web服务器运行Servlet

快速入门

1. 创建web项目，导入Servlet依赖坐标

<dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

2. 创建:定义一个类,实现Servlet接口， 并重写接口中所有方法,并在service方法中输入一句话

public class ServeletDomo1 implements Servlet {
    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        System.out.println("servlet hello world");
    }
}

3.配置:在类上使用@WebServlet注解，配置该Servlet的访问路径

@WebServlet("/demo1")

4.访问:启动Tomcat, 浏览器输入URL访问该Servlet

执行流程

先放这

生命周期

init方法：

1.调用时机:默认情况下，ServLet被第一 次访问时，调用

LoadOnStartup:

2.调用次数: 1次

sercive

1.调用时机:每一次ServLet被访问时， 调用

2.调用次数:多次

@param req

@param res

athrows ServLetException

athrows IOException

销毁方法

1.调用时机:内存释放或者服务器关闭的时候，ServLet对象会被销毁，调用

2.调用次数: 1次

Servlet urlPattern配置

●Servlet 要想被访问,必须配置其访问路径(urlPattern)

1. 个Servlet, 可以配置多个urlPattern

WebServLet (urLPatterns = {"/demo1", "/demo2"})

2. urlPattern配置规则

①精确匹配.

②目录匹配

③扩展名匹配

4任意匹配

注意：

Request（请求）

获取请求数据

继承体系

1.Tomcat需要解析请求数据，封装为request对象,

并且创建request对象传递到service方法中

2.使用request对象，查阅JavaEE API文档的

HttpServletRequest接口

请求数据

请求行

String getMethod():获取请求方式: GET

String method = request.getMethod();

String getContextPath():获取虚拟目录(项目访问路径): /request-demo

StringBuffer getRequestURL():获取URL(统-资源定位符): http://localhost:8080/request-demo/req1

String getRequestURI):获取URI(统-资源标识符): /request-demo/req1

String getQueryString():获取请求参数(GET方式) : username=zhangsan&password= 123

请求头

String getHeader(String name):根据请求头名称，获取值

请求体

ServletInputStream getInputStream(): 获取字节输入流

BufferedReader getReader(): 获取字符输入流

<form action="http://localhost:8080/tomcat-domo1/req1" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit">

</form>

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取字符输入流
        BufferedReader br = req.getReader();
        //2.读取数据
        String Line = br.readLine();
        System.out.println(Line);
    }

通用方式请求参数

Map<String, String[ ]> getParameterMap():获取所有参数Map集合

String[ ] getParameterValues(String name) :根据名称获取参数值(数组)

String getParameter(String name):根据名称获取参数值(单个值)

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get...");

        //1.获取所有参数的map合集
        Map<String, String[]> map = req.getParameterMap();
        for (String key : map.keySet()) {
            System.out.print(key + ":");

            String[] values = map.get(key);
            for (String value : values) {
                System.out.print(value + " ");
            }
            System.out.println();
        }

        System.out.println("------------");

        //2.根据key值获取参数值，数组
        String[] hobbies = req.getParameterValues("hobby");
        for (String hobby : hobbies) {
            System.out.println(hobby);
        }

        //3.根据key获取单个参数值
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username);
        System.out.println(password);

    }

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

解决请求中文乱码问题

POST

//1.解决乱码: POST, getReader()
        request.setCharacterEncoding("UTF-8");//设置字符输入流的编码

通用方式

➢

通用方式(GET/POST) :先编码，再解码

new String(username.getByte("IS0-8859-1"),"UTF-8");

Request请求转发

●实现方式:

req.getRequestDispatcher("资源B路径").forward(req,resp);

●请求转发资源间共享数据: 使用Request对象

●void setAttribute(String name, Object o):存储数据到request域中

●Object getAttribute(String name):根据key,获取值

●void removeAttribute(String name):根据key,删除该键值对

●请求转发特点:

➢浏览器地址栏路径不发生变化

➢只能转发到当前服务器的内部资源

➢一次请求， 可以在转发的资源间使用request共享数据

Response

响应数据介绍

●响应数据分为3部分: .

1. 响应行:HTTP/1.1 200 OK

void setStatus(intsc) :设置响应状态码

2.响应头:Content-Type: text/html

void setHeader(String name, String value) :设置响应头键值对

3.响应体:<html><head>head><body></body></html>

PrintWriter getWriter():获取字符输出流

ServletOutputStream getOutputStream():获取字节输出流

重定向

//重定向

        //1.设置响应状态码302
        response.setStatus(302);
        //2.设置响应头Location
        response.setHeader("Location","/tomcat-domo1/resp2");

        //简化方式
        response.sendRedirect("/tomcat-domo1/resp2");

重定向特点:

➢浏览器地址栏路径发生变化

➢可以重定向到任意位置的资源(服务器内部、外部均可)

➢两次请求，不能在多个资源使用request共享数据

响应字符数据

//获取字符输出流
        PrintWriter responseWriter = response.getWriter();
        responseWriter.write("你好");

●注意:

该流不需要关闭，随着响应结束，response对象销毁，由服务器关闭

中文数据乱码:原因通过Response获取的字符输出流默认编码: ISO-8859-1

 response.setContentType("text/html;charset=UTF-8");

响应字节数据

路径问题

●明确路径谁使用?

➢浏览器使用:需要加虚拟目录(项目访问路径)

➢服务端使用:不需要加虚拟目录

动态获取虚拟目录

String contextPath = request.getContextPath();
        response.sendRedirect(contextPath+"/resp2");

●练习:

➢<a href=‘路径’ >加虚拟目录

➢<form action=‘路径’ >加虚拟目录

➢req. getRequestDispatcher(“路径")不加虚拟目录

➢resp.sendRedirect("路径")加虚拟目录

代码优化

创建SqlSessionFactory代码优化

//2.1获取SqlSessionFactory对象
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);

●问题:

1. 代码重复:工具类

2. SqISessionFactory 工厂只创建一次，不要重复创建:静态代码块

private static SqlSessionFactory sqlSessionFactory;

    static {
        try {
            //2.1获取SqlSessionFactory对象
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }

JSP

概念:Java Server Pages, Java服务端页面

一种动态的网页技术,其中既可以定义HTML、JS、 CSS等静态内容,还可以定义Java代码的动态内容

JSP = HTML + Java

1. 导入jsp坐标

2. 创建jsp文件

3. 编写html标签和java代码

JSP脚本分类

1. <%.. .%>:内容会直接放到jspService()方法之中

2. <%..%>: 内容会放到out.print()中， 作为out.print(的参数

3.<%!... %>:内容会放到jspService()方法之外，被类直接包含

EL表达式

●Expression Language表达式语言，用于简化JSP页面内的Java代码

●主要功能: 获取数据。

●语法: ${expression}

${brands} : 获取域中存储的key为brands的数据

开头加上

<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>

<body>

${brands}

</body>

JSTL

<c:forEach>

相当于for循环

●items:被遍历的容器

●var:遍历产生的临时变量

●varStatus遍历状态对象 一般用来代替id

count表示从一开始

             <%--<td>${brand.id}</td>--%>
            <td>${status.count}</td>

普通for

MVC模式和三层架构

MVC

➢M: Model,业务模型，处理业务

➢V: View,视图，界面展示

➢C: Controller, 控制器，处理请求，调用模型和视图

三层架构

●数据访问层:对数据库的CRUD基本操作

●业务逻辑层:对业务逻辑进行封装,组合数据访问层层中基本功能，形成复杂的业务逻辑功能

表现层:接收请求,封装数据，调用业务逻辑层,响应数据

案例

准备环境

➢创建新的模块brand_ demo,引入坐标

➢创建三层架构的包结构

➢数据库表tb brand

➢实体类Brand

➢MyBatis 基础环境

●Mybatis-config. xm|

●Br andMapper. xm|

●Br andMapper接口

会话跟踪

●会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接,会话结束。在一-次会话中可以包含多次请求和响应

●会话跟踪: 一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同-次会话的多次请求间共享数据

实现方式

1.客户端会话跟踪技术: Cookie

2.服务端会话跟踪技术: Session

Cookie

基本使用

发送cookie

//1. 创建Cookie对象，设置数据
        Cookie cookie=new Cookie("username","zs");

        //2. 发送Cookie到客户端:使用response对象
        response.addCookie(cookie);

获取cookie

//获取cookie数组,使用request对象
        Cookie[] cookies =request.getCookies();

        //遍历
        for (Cookie cookie : cookies) {
            String name = cookie.getName();
            if ("username".equals(name)){
                String value = cookie.getValue();
                System.out.println(name+":"+value);

                break;
            }
        }

原理

●Cookie的实现是基于HTTP协议的

●响应头: set-cookie

●请求头: cookie

使用细节

●Cookie 存活时间

➢默认情况下，Cookie存储在浏览器内存中，当浏览器关闭，内存释放，则Cookie被销毁

➢setMaxAge(int seconds):设置Cookie存活时间

1. 正数:将Cookie写入浏览器所在电脑的硬盘,持久化存储。到时间自动删除

2.负数: 默认值, Cookie在当前浏览器内存中，当浏览器关闭，则Cookie被销毁

3.零: 删除对应Cookie

●Cookie 存储中文

➢Cookie不能直接存储中文

➢如需要存储，则需要进行转码: URL编码

Session

基本使用

服务端会话跟踪技术:将数据保存到服务站

使用细节

●Session 钝化、活化:

➢钝化:在服务器正常关闭后， Tomcat会自动将Session数据写入硬盘的文件中

➢活化:再次启动服务器后，从文件中加载数据到Session中

●Seesion 销毁:

➢默认情况下，无操作，30分钟自动销毁

➢调用Session对象的invalidate()方法

Filter

快速入门

1.定义类，实现Filter接口， 并重写其所有方法

@WebFilter("/*")
public class FilterDemo implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("demo....");
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void destroy() {

    }
}

2.配置Filter拦截资源的路径:在类上定义@WebFilter注解

@WebFilter("/*")

3.在doFilter方法中输出一句话， 并放行

   System.out.println("demo....");

        filterChain.doFilter(servletRequest,servletResponse);

执行流程

1.放行前，对request 数据进行处理

2.放行后，对Response数据进行处理

拦截路径配置

➢拦截具体的资源: /index.jsp:只有访问index.jsp时才会被拦截。

➢目录拦截: /user/*: 访问/user下的所有资源，都会被拦截

➢后缀名拦截: *.jsp: 访问后缀名为jsp的资源，都会被拦截

➢拦截所有: /*:访问所有资源，都会被拦截

Listenter

●概念: Listener 表示监听器，是JavaWeb三大组件(Servlet、Filter. Listener)之一 。

●监听器可以监听就是在application,session,request三个对象创建、 销毁或者往其中添加修改删除

属性时自动执行代码的功能组件

AJAX

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

●AJAX作用:

1. 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据

➢使用了AJAX和服务器进行通信，就可以使用HTML+ AJAX来替换JSP页面了

2.异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验，等等...

快速入门

1.编写AjaxServlet,并使用response输出字符串

2.创建XMLHttpRequest对象:用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

<script>
    //1.创建对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/brand-demo/ajaxServlet");
    xhttp.send();

    //获取请求
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

                alert(this.responseText);
        }
    };
</script>

axios

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

1.引入axios的js文件

<script src="js/axios-0.18.0.js"></script>

2.使用axios发送请求,并获取响应结果

    axios({
        method:"get",
        url:"http://localhost:8080/brand-demo/axiosServlet?username=zhangsan"
    }).then(function (response) {
        alert(response.data);
    })

请求别名

axios.get("http://localhost:8080/brand-demo/axiosServlet?username=zhangsan").then(function (response) {
        alert(response.data);
    })

JSON

●概念: JavaScript Object Notation。JavaScript 对象表示法

●由于其语法简单, 层次结构鲜明,现多用于作为数据载体，在网络中进行数据传输

JSON数据和JAVA对象转换

●Fastjson是阿里巴巴提供的一 个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON

库，可以实现Java对象和JSON字符串的相互转换。

●使用:

VEU

●Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

●基于MVVM(Model-View-ViewModel)思想， 实现数据的双向绑定,将编程的关注点放在数据上

●官网: https://cn.vuejs.org

快速入门

常用指令

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

生命周期

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

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。

➢发送异步请求，加载数据

Element

●Element: 是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页

●组件:组成网页的部件，例如超链接、按钮、图片、表格等等

快速入门

1.引入Element的CSS、 js文件和Vue.js

2.创建Vue核心对象

3.官网复制Element组件代码

布局

组件