尚硅谷-javaweb笔记记录

Javaweb笔记

网页三组成：内容html，表现css，行为js。

html，css，javascript

---

style标签定义css样式代码(只能在一个页面公用css样式)

css文件

id选择器：

#id001{}

#id002{}

使用：

标签1

class选择器：

.class001{}

使用：

类选择器

组合选择器：

选择器1，选择器2…{

​ 属性：值；

}

js

里编写或者写完了再引入进去。

且运算&&：当表达式为全真，返回最后一个表达式，当表达式为假时，返回第一个为假的表达式。

或运算||：当为假时，返回最后一个假的表达式，当为真时，返回第一个为真的表达式。

数组：var 数组名 = [];

​ var 数组名=[1,‘2d’,d];

函数：不允许重载。

对象的定义：var bianliangming = new Object();//对象的实列

​ 变量名.属性名 = 值；//定义一个属性

​ 变量名.函数名 = function（）{}；//定义一个函数

---

					var  变量名 = {                                                //花括号形式定义一个对象

​ 属性名：值；

​ 函数名：function（）{}；

​ }；

js中的事件：电脑输入设备与页面进行交互的响应。

​ 事件的注册：静态注册：通过html标签直接响应代码。

​ 动态注册：获得DOM对象，然后调用函数来赋予事件响应后的代码。

​ onload事件，浏览器响应完页面之后完成的自动触发的操作

​ onclick事件:

<button id = "btn001" >按钮1</button>
var btnObj = document.getElementById("btn001");
btnObj.onclick = function(){
    alert("动态的注册onclick事件");
}

​ onbur事件：失去焦点事件

​ onsubmit事件：点击提交事件

---

静态Web

• 无法更新，所有用户看到的都是同一页面
• 无法与数据库进行交互

动态Web

• 页面会动态展示，，可以进行数据库交互

• 出现错误，需要修改后台程序，进行停机维护

Web服务器

ASP：微软使用的

php：开发速度快，功能强大，跨平台，代码简单，但是无法承载高访问量的问题

jsp：可以承载三高（高访问，高并发，高可用），

web服务器是(tomcat，IIS)

工作3-5年后，期望手写tomcat服务器。

tomcat配置

• web.xml里配置端口号，主机号，

  面试题：网站时如何进行访问的？

  1. 输入一个域名，回车
  2. 现在本机的C:windows\System32\drivers\hosts 配置文件里找有没有域名映射，
     1. 有，直接返回IP地址，该地址中，有我们需要的web程序
     2. 、没有，去DNS找，找不到就返回找不到。

部署web工程

将文件放入Webapps中。

访问：http：//ip：端口号/…

手托html页面文件走的是file协议（不走网络），访问浏览器是走的是http协议（走网络）。

------------------------网站的大致结构--------------------------------

--webapps:web目录
    -ROOT
    -yyds
    	_WEB-INF
    		-classes:java程序
            -lib：web应用所依赖的jar包
            -web.xml:网站配置文件
        - index.html 默认的首页
        -static
                -css
                -js
                -img
       -........

http， 请求，响应

http

• http1.0 客户端与服务器连接后，只能获得一个web资源
• http2.0客户端与服务器连接后，可以获得多个web资源

请求

• get参数少，大小有限制，会在浏览器的地址栏显示数据，不安全，但高效
• post参数没有限制，大小没有限制，不会在地址栏里显示数据，安全，但不高效。
  • 消息头
    • accept：支持的数据类型
    • Accept-Encoding:支持的编码格式 GBK ISO８８５９－１　ＵＴＦ－８　GB２３１２
    • Cache－Control：缓存控制
    • Ｃｏｏｎｅｃｔｉｏｎ：请求完成判断是断开还是连接
    • ＨＯＳＴ：主机

响应状态码

• 200 成功
• 3XX请求重定向
• 404找不到资源
• 5XX服务器代码错误
• 502网关错误

当你的浏览器地址栏输入地址并一瞬间将页面展示出来,经历了什么?

\1. 域名解析
\2. 发起TCP的三次握手
\3. 建立起TCP连接后发起http请求
\4. 服务器响应http请求，浏览器得到html代码
\5. 浏览器解析html代码，并请求html代码中的资源（css JavaScript 图片）
\6. 浏览器对页面进行渲染呈现

Maven（该部分了解即可）

• javaweb需要大量的jar包,maven是自动帮我们导入和配置

Maven项目架构管理工具"约定大于配置"

配置

• ​ 系统变量:M2_HOME maven目录下的bin目录
• 系统变量:MAVEN_HOME maven的目录
• 用户(狂神的是系统的path)的path配置:%AVEN_HOME%\bin

镜像mirrors

​ 作用:加速我们的下载

<mirror>
<id>nexus-aliyun</id>
<mirrorOf>*,!jeecg,!jeecg-snapshots</mirrorOf>
<name>Nexus aliyun</name>
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
 </mirror>

本地仓库

<localRepository>F:\Maven_tools\apache-maven-3.8.4\maven-repo</localRepository>

在idea中使用maven

1. 配置
2. idea项目配置成功后，需要看一下maven的配置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gkXDV4O5-1645929094605)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220113141608954.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yZHIESF7-1645929094606)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220113142657455.png)]

Servlet

1. 编写一个类，继承接口
2. 部署

ServletContext类

1. 接口，
2. 一个web工程只有一个ServletContest对象
3. 该对象是一个域对象

域对象：向map一样存取数据的对象

​ 存 取 删除对象

Map put（） get（） remove（）

域对象 setAttribute（） getAttribute（） removeAttribute（）

SetvletContext（）的四个作用：

1. 获取web.xml中配置的上下文参数context-param
2. 获取当前的工程路径
3. 获取部署后在服务器硬盘上的绝对路径
4. 存取数据

JavaEE三层架构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7NN8xVNz-1645929094607)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220117151750781.png)]

书城项目

阶段一

1，创建数据库

drop database if exists book;
create database book;
use book;

create  table t_user(
	 `id` int  primary key auto_increment,
	 `username` VARCHAR(10) not null unique,
	 `password` varchar(32)  not null,
	 `email` varchar(20)
);
insert into t_user(`username`,`password`,`email`) values('admin','admins','[email protected]');
select * from t_user

2,编写数据库对应 的Javaebean对象。

public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;

3，编写UserDao

4，编写UserService和测试

阶段2：用户注册，用户登录

略

Listener监听器（spring再说）

EL表达式

主要是代替jsp的表达式脚本输出，更加简洁。

格式：${ 表达式} //当输出为空是。jsp的表达式输出为null，而EL表达式的输出是空。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VELDuguw-1645929094607)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220222134623122.png)]

EL的输出主要是：域对象

• 当四个域中都有相同的key 的数据的时候，EL表达式会按照四个域的从小到大的顺序去进行搜索，找到就输出。

JSTL标签库

• 为了替换代码脚本。

使用：

​ 导入jar包

​ 使用taglib指令引入标签库

<@ tablig prefix=“c” url = “http://java.sun.com/jsp/jstl/core” %>

---

:保存域对象

${requestScope.key1}

---

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lNSwDpBI-1645929094607)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220222181652511.png)]

---

标签
作用:多路判断。跟switch … case … default非常接近
choose标签开始选择判断
when标签表示每一种判断情况
test属性表示当前这种判断情况的值

<%
request.setAttribute( s: “height”,o: 168);%>

小巨人

很高

还可以

剩下小到170的情况

---

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TdWM85sJ-1645929094607)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220222183009501.png)]

---

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4WIJrtIe-1645929094607)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220222184045725.png)]

---

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idHhT67t-1645929094609)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220222184428429.png)]

文件的上传与下载

上传

1、要有一个form标签, method=post请求
2、form标签的encType属性值必须为multipart/form-data值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5Enlfk2-1645929094609)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220223124145680.png)]

Content-Type表示提交的数据类型
multipart/form-data表示提交的数据，以多段(每一个表单项一个数据段)的形或进行拼接，然后以****发送给服务器
boundary表示每段数据的分隔符
-----WebKitFor mBoundarycl2joVsAFxzitHaW是由浏览
器每次都随机生成。它就是每段数据的分界符。

3、在form标签中使用input type=file添加上传的文件
4、编写服务器代码（Servlet）接收,处理上传的数据。

commons-fileupload.jar和commons-io.jar包中，我们常用的类有哪些?（解析文件上传）

ServletFileupload类，用于解析上传的数据。
Fileltem类,表示每一个表单项。

boolean ServletFileUpload.isNultipartContent(HttpServletRequest request);
判断当前上传的数据格式是否是多段的格式。

public List parseRequest(HttpServletRequest request)
解析上传的数据

boolean FileItem.isFormField()
判断当前这个表单项，是否是普通的表单项。还是上传的文件类型。

true表示普通类型的表单项
false表示上传的文件类型

package com.servlet;//servlet代码
//需要两个jar包commons-fileupload 和 commons-io
//需要配置web.xml

package com.servlet;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.List;

public class Upload extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //先判断上传的是否是多段数据
        if (ServletFileUpload.isMultipartContent(req)) {
            //创建fileItemFactory工厂实现类
            FileItemFactory fileItemFactory = new DiskFileItemFactory();
            //创建工具类
            ServletFileUpload servletFileUpload = new ServletFileUpload(fileItemFactory);

            try {
                List<FileItem> list = servletFileUpload.parseRequest(req);

                for (FileItem fileItem : list) {

                    if (fileItem.isFormField()) {
                        //True普通表单项
                        System.out.println("表单项的name属性值：" + fileItem.getFieldName());
                        System.out.println("表单项的value属性值：" + fileItem.getString());

                    } else {
                        //上传的文件
                        System.out.println("name的属性值：" + fileItem.getFieldName());
                        System.out.println("文件名" + fileItem.getName());

                        fileItem.write(new File("f:\\" + fileItem.getName()));
                    }

                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("ok");

        }
    }
}

下载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-91qHMZew-1645929094609)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220223141700360.png)]

​ base64 的编码和解码操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2q0dRrh-1645929094610)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220223150752605.png)]

火狐的写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vE0Ssrfa-1645929094610)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220223150946116.png)]

package com.servlet;L

import org.apache.commons.io.IOUtils;

import javax.servlet.ServletContext;
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.InputStream;
import java.io.OutputStream;

public class Download extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1,获取文件名
        String downloadFileName = "1.jpg";



        //2,读取要下载的文件内容
        //by ServletContext
        ServletContext servletContext = getServletContext();
        InputStream resourceAsStream = servletContext.getResourceAsStream("/file/" + downloadFileName);
        //获取响应输出流
        OutputStream outputStream = resp.getOutputStream();
        IOUtils.copy(resourceAsStream,outputStream);

        //获取要下载的文件类型
        String mimeType = servletContext.getMimeType("/file/" + downloadFileName);
        System.out.println("文件类型是：" + mimeType );

        //告诉客户端有用于下载使用（使用响应头）
        resp.setHeader("Content-Disposition","attachmentf;filename=中国");//http不支持中文，需要编码，谷歌和ie用url编码，火狐用Base64来
        //编码

    }
}

springMVC(降低耦合度)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BS1Rb3EK-1645929094610)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220224182410778.png)]

书城项目-图书模块

1. 编写图书数据库表
2. 编写JavaBean
3. 编写Dao层
4. 编写Service层
5. 编写web层

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvrOUlIA-1645929094611)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225141328825.png)]

Cookie（可以实现免用户名登录）

• Cookie就是服务器通知客户端保存键值对的一种技术
• 客户端有了Cookie每次请求都发给服务器
• 大小不能超过4kb

创建Cookie

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fl0AArF9-1645929094612)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225153802419.png)]

服务器获取cookie

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkN2WhJQ-1645929094612)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225154043134.png)]

Session会话

• 是一个接口
• 维护一个客户端和服务器之间关联的技术
• 用来保存信息

创建

• request.getSession（）
• isNew（）判断是不是新的session
• getId（）获取sesison的唯一id值

保存数据

req.getSession.setAttribute()

生命周期

setMaxInactiveInterval(int Interval)设置时长，以秒单位（默认30分钟

web.xml里面的配置）

getMaxInactiveInterval(int Interval)获取时长

原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDiwo4cj-1645929094612)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225164331681.png)]

表单重复提交之验证码

1. 提交后，用户按F5会发起最后一次提交，造成重复提交，（使用重定向来进行跳转）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ZbbV0zA-1645929094612)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225165417935.png)]

由于网络原因，多点几次提交，也会造成重复提交，（验证码来解决）

3，回退网页，再点提交，也会造成重复提交（验证码来解决 ）

原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJGjY0RY-1645929094613)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225174023293.png)]

Filter过滤器

• 三大组件之一

• 权限检查，日记操作，事务管理等。

• web下有一个admin目录，该资源必须是用户登录之后才能访问

  
  import javax.Filter//导包
      
   doFilter()//专门用于拦截
      ------------------------------------------------
   //配置 web.xml
      <filter>
      	<filter-name>adminFilter</filter-name>//起个名
      	<filter-class></filter-class>//全类名
      </filter>
      <filter-mapping>
              <filter-name></filter-mapping>//给哪个filter使用
              <url-pattern><url-pattern>//请求地址
   	</filter-mapping>
     -----------------------------------------------
    
      
  
  

生命周期

• 构造器方法
• init（）初始方法
• dofilter（）方法
• destory（）销毁方法

FilterConfig类

• 配置Filter的类

• 主要是获取filter的配置内容

  获取filter-name，获取init-param初始化参数，获取ServletContext参数

FilterChain过滤器链

• 多个过滤器共同工作

• web.xml要配置

• 执行顺序是由web.xml配置顺序来执行的，

• 所有的filter和资源是在同一个线程执行的

• 多个过滤器执行的时候是用同一个request对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ird8UPv-1645929094613)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220225195645734.png)]

filter的拦截路径

• 精确匹配

http://ip:port/工程路径/target.jsp

• 目录匹配

/admin/*admin目录后面的都匹配

• 后缀名匹配

*.html

JSON轻量级的数据交换格 式

• 轻量级是和xml来比较
• json在Javascript中的使用

格式：{“键“：值，“键“：值，“键“：值，“键“：值}

json本身是个对象

json一种是字符串的形式存在

JSON.stringify() //把JSON对象转换成json字符串

JSON.parse() //转化成json对象

• 数据交换是指客户端与服务器之间业务数据的传递格式

• 在java中的用法：

  • javaBean和json的互传

    • 谷歌中GSON的jar包可以使用

  • List和json的互传

    • Type

  • map和json的互传

    同上，优化：可以使用匿名内部类来解决多个类的问题

AJAX

是一种浏览器通过js异步发起请求，局部更新页面的技术。

• 浏览器不会变化，地址栏不变

jQuery的AJAX请求

javascript来发送给服务器

II8N国际化

locale

st对象

[外链图片转存中…(img-1ird8UPv-1645929094613)]

filter的拦截路径

• 精确匹配

http://ip:port/工程路径/target.jsp

• 目录匹配

/admin/*admin目录后面的都匹配

• 后缀名匹配

*.html

JSON轻量级的数据交换格 式

• 轻量级是和xml来比较
• json在Javascript中的使用

格式：{“键“：值，“键“：值，“键“：值，“键“：值}

json本身是个对象

json一种是字符串的形式存在

JSON.stringify() //把JSON对象转换成json字符串

JSON.parse() //转化成json对象

• 数据交换是指客户端与服务器之间业务数据的传递格式

• 在java中的用法：

  • javaBean和json的互传

    • 谷歌中GSON的jar包可以使用

  • List和json的互传

    • Type

  • map和json的互传

    同上，优化：可以使用匿名内部类来解决多个类的问题

AJAX

是一种浏览器通过js异步发起请求，局部更新页面的技术。

• 浏览器不会变化，地址栏不变

jQuery的AJAX请求

javascript来发送给服务器

II8N国际化

locale