JavaWeb学习笔记-part1

最新推荐文章于 2024-09-15 19:46:31 发布

这是我了

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量147

点赞数 2

本文链接：https://blog.csdn.net/qq_51704510/article/details/119892760

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

互联网通信

什么是互联网通信

两台计算机通过网络实现文件共享行为，就是互联网通信
互联网通信中的角色划分
- 客户端：用于发送请求的计算机
- 服务端：用于接受请求，并满足请求的计算机
互联网通信模型
- C/S通信模型：
  - client software（客户端软件）
    1. 客户端软件专门安装在客户端计算机上
    2. 帮助客户端计算机向指定服务端计算机发送请求，索要资源文件
    3. 帮助客户端计算机将服务端计算机发送回来的二进制数据文件解析为文字、图片、视频等形式
  - server software（服务器软件）
    1. 服务器软件专门安装在服务端计算机上
    2. 服务器软件用于接收来自于特定的客户端软件发送的请求
    3. 服务器软件在接收到请求后自动在服务端计算机上定位被访问的资源文件
    4. 服务器软件自动将定位的文件内容解析为二进制数据文件通过网络发送回发起请求的客户端软件上
  - 适用场景：普遍用于个人娱乐市场，比如微信、淘宝、B站、大型网络游戏；企业办公应用较少
  - 优缺点：
    - 优点：
      1. 安全性较高
      2. 有效降低服务端计算机的工作压力
    - 缺点：
      1. 增加客户获得服务的成本
      2. 更新较为繁琐
- B/S通信模型：
  - browser （浏览器）
    1. 浏览器安装在客户端计算机
    2. 可以向任意服务器发起请求，索要资源文件
    3. 可以将服务端计算机发送回来的二进制数据文件解析为文字、图片、视频等形式
  - server software （服务器软件）
    1. 服务器软件专门安装在服务端计算机上
    2. 可以接受任意浏览器发送的请求
    3. 自动在服务端计算机上定位被访问的资源文件
    4. 自动将定位的文件内容解析为二进制数据文件通过网络发送回发起请求的浏览器上
  - 适用场景：既适用于个人娱乐市场，又广泛适用于企业日常活动
  - 优缺点：
    - 优点：
      1. 不会增加客户获得服务的成本
      2. 几乎不需要更新浏览器
    - 缺点：
      1. 几乎无法有效的对服务端计算机资源文件进行保护
      2. 服务端计算机工作压力异常大
共享资源文件：
- 什么是共享资源文件：
  
  可以通过网络进行传输的文件，都被称为共享资源文件
  
  所有文件内容都可以通过网络传输，所有文件都是共享资源文件
- HTTP服务器下对于共享资源文件分类：
  1. 静态资源文件
    1. 如果文件内容是固定的，这种文件可以称为静态资源文件（文档，图片，视频）
    2. 如果文件存放的是命令，这些文件只能在浏览器中编译和执行，这种文件可以称为静态资源文件（.html，.css，.js）
  2. 动态资源文件
    
    如果文件存放命令，并且命令不能在浏览器中编译和运行，只能在服务端计算机编译运行，这样的文件称为动态资源文件（.class）
  3. 静态文件和动态文件调用区别
    
    静态文件被索要时，Http服务器直接通过输出流将静态文件中内容或者命令以二进制形式推送给发起请求的浏览器
    
    动态文件被索要时，Http服务器需要创建当前class文件的实例对象，通过实例对象调用对应的方法处理用户请求，通过输出流将运行结果以二进制形式推送给发起请求的浏览器
    
    例如：
```
class Function {
    public add(int a, int b) {
        int sum = a + b;
        return sum;
    }
}
/**
*这是一段class文件
*http服务器会创建一个实例：Function function = new Function();
*然后调用实例对象的方法：int sum = function.add(a,b);
*最后将结果sum返回给发起请求的浏览器
*/
```
后端开发人员在互联网通信中担负的职责：
- 控制浏览器行为
  - 控制浏览器请求行为
    1. 控制浏览器发送的请求地址
    2. 控制浏览器发送请求的方式
    3. 控制浏览器发送请求携带的参数
  - 控制浏览器接受结果行为
    1. 控制浏览器采用对应编译器将接收到的二进制文件数据解析为文字、视频、图片、命令
    2. 控制浏览器将解析内容或者命令进行执行与展示（全局刷新展示/局部刷新展示）
    3. 控制用户与浏览器之间交流（JavaScript-- >jq）
- 开发动态资源文件（class）来解决用户请求

MVC开发规则

介绍

MVC开发规则制定了互联网通信开发过程中必须出现的角色有哪些
MVC开发规则制定了互联网通信开发过程中必须出现的角色担负职责
MVC开发规则制定了互联网通信开发过程中必须出现的角色的出现顺序

角色

DAO对象：

DAO对象提供某站表文件的操作细节，降低对表文件操作难度；

避免反复开发表文件操作代码提高代码复用性
Service对象：

服务对象，提供业务的具体解决方案；

service对象一个方法指定一个业务的解决方案

避免业务开发重复性开发行为，提供复用性

网站每一个业务都有一个独立标准解决方案

业务

概念：浏览器向HTTP服务器发送请求就是一次业务
业务特征：
- 真实业务场景中，一个业务往往包含多个分支任务。因此解决业务开发工作量往往比较巨大
- 真实业务场景中，只有所有分支任务都能顺利成功解决，才可以认为当前业务处理成功
解决业务开发困扰：
- 一个业务可能在网站的多个地方重复出现，如果不去封装，增加开发朗读，进行业务解决代码重复性开发
- 不同程序员面对同一个业务时，给出的解决方案往往有偏差，导致最终解决数据会有偏差

互联网通信开发过程中必须出现的角色有哪些

一次互联网开发过程，必须出现角色有三个：

C，controller object：控制层对象（servlet对象）
M，model object：业务模型对象（service对象）
V，view object：视图层对象（jsp or HttpServletResponse）

互联网通信开发过程中必须出现的角色担负职责

C（servlet对象）：
- 可以调用请求对象读取请求包参数信息
- 必须调用Service对象处理业务
- 必须调用视图层对象将结果写入到响应体中
M（service对象）：
- 处理业务中所有分支任务
- 根据分支任务执行情况判断业务是否处理成功
- 必须通过return将处理结果返回给控制层对象
V（jsp or HttpServletResponse）：
- 禁止参与业务处理
- 唯一任务将处理结果写入到响应体中

互联网通信开发过程中必须出现的角色的出现顺序

请求调用顺序：浏览器——》Servlet——》Service——》DAO
响应顺序：DAO——》Service——》Servlet——》view——》响应体——》浏览器

HTML

介绍：
- HTML编程语言是一种专门在浏览器编译与执行的编程语言
- HTML编程语言学称超文本标记式编程语言
作用：
- HTML编程语言通知浏览器将接受的数据以指定方式在窗口展示[前端]
- 控制浏览器请求行为[前端/服务端工程师] 重点

HTML编程语言语法规范：

HTML编程语言中所有命令都是声明在标签中，比如
HTML编程语言中的所有命令都是预先定义好的，不允许开发人员自行创建新的命令
HTML编程语言中的所有命令不区分英语字母大小写
HTML编程语言中命令开发时主要通过对命令中的属性进行赋值实现开发目的

属性赋值时内容可以包含在一个""中，也可以包含在一个''，也可以省略，此时属性之间必须采用空格进行隔离
HTML编程语言中命令根据书写方式分为：双目标签命令和单目标签命令
- 双目标签命令书写时命令分别出现在开始标签和结束标签，比如<tr></tr>
  
  双目标签命令在书写时结束标签是不能省略的
- 单目标签命令书写时命令出现在一个标签内，比如
  
  单目标签命令表示结束"/"可以省略不写

<html>
    <!--
        在一个HTML文件中，所有的HTML标签命令必须声明在<html></html>
        <html></html>包含两个子标签<head></head>和<body></body>
        <head></head>：设置基础参数信息
        <body></body>：负责通知浏览器将指定内容以指定方式在窗口展示
    -->
    <head>
        <meta charset='utf-8'/>
    </head>
    <body>
        <!--
            <h1></h1>标题标签
            数字可以在1-6中间选择，数字越大字体大小越小
            <p></p>段落标签：包含其中的字符为一段话，段落结尾自动换行
        -->
        <h1>一级标题</h1>
        
        <p>
        Hello,World!</p>
        
        <p>
        Hello,World!</p>
        <!--
            <ol></ol>有序标签
            <ul></ul>无序标签
            子标签<li></li>：该标签会根据序列标签给其中的展示内容顺序添加序号或无序添加小圆点
            序列标签可以嵌套

            这些标签主要用于制作导航页
        -->
        <ol>
            <li>中国</li>
            <li>美国</li>
            <li>俄罗斯</li>
        </ol>
        
        <ul>
            <li>米饭</li>
            <li>面包</li>
            <li>西伯利亚大土豆</li>
        </ul>
        
        <ul>
            <li>中国
                <ol>
                    <li>米饭</li>
                    <li>面条</li>
                    <li>包子</li>
                </ol>
            </li>
            <li>美国
                <ol>
                    <li>面包</li>
                    <li>牛排</li>
                    <li>炸鸡</li>
                </ol>
            </li>
            <li>俄罗斯
                <ol>
                    <li>西伯利亚大土豆</li>
                    <li>赫鲁晓夫大玉米</li>
                    <li>坚不可摧大列巴</li>
                </ol>
            </li>
        </ul>
        <!--
             <table></table>表格标签
            子标签<tr></tr>：行
                子标签<td></td>：单元格
            属性
            border：表格边框宽度
            align：文本对齐方式
            style：更改默认样式
            rowspan：设置单元格高度
            colspon：设置单元格宽度
        -->
        <table border="2" align="center">
            <tr style="background-color:blue">
                <td> 国家 </td>
                <td> 中国 </td>
                <td> 美国 </td>
                <td> 俄罗斯 </td>
            </tr>
            
            <tr align="center" style="background-color:yellow">
                <td rowspan="3"> 食物 </td>
                <td> 米饭 </td>
                <td> 面包 </td>
                <td> 土豆 </td>
            </tr>
            
            <tr align="center" style="background-color:yellow">
                <td> 面条 </td>
                <td> 牛排 </td>
                <td> 玉米 </td>
            </tr>
            
            <tr align="center" style="background-color:yellow">
                <td> 包子 </td>
                <td> 炸鸡 </td>
                <td> 大列巴 </td>
            </tr>
        </table>
        <!--
            <img/>图片标签：在浏览器中展示一张图片
            <center></center>居中格式
            <div></div>内容展示方块
            <font></font>文字标签：展示一行文字
            属性
            src：图片的地址
            title：图片的标题
            width：宽度
            height：高度
        -->
        <center>
            <div>
                <font style="font-size:50">我看不懂但我大受震撼</font>
            </div>
            <img src="OIP.jpg" title="猫"/>
        </center>
    </body>
</html>

浏览器发送请求的三要素：(very important)
- 控制浏览器发送的请求地址
  - 超链接标签命令：
    1. 格式：
```
<a href="请求地址">提示信息</a>
```
      百度一下
      
      淘宝：淘你所想
      
      Myjpg
    2. 工作原理：
      
      不会被浏览器自动执行，在用户单击超链接标签命令时，这个命令才会执行
      
      执行要求浏览器立刻按照href属性地址发送请求
  - 表单标签命令
    1. 格式：
```
<form action="请求地址">
    <input type="submit"/> 
</form>
```
    2. 工作原理：
      
      不会被浏览器自动执行，在用户单击提交按钮时，这个命令才会执行
      
      执行时要求浏览器立刻按照action属性地址发送请求
- 控制浏览器发送请求的方式
  - 请求方式：决定浏览器发送请求时的行为特征
  - 浏览器可以选择请求方式：7种，目前只考虑POST请求方式和GET请求方式
    - GET请求方式：
      1. 要求浏览器发送请求时，其携带的请求参数数量不能超过4K（超量截断）
      2. 要求浏览器发送请求时，必须在浏览器地址栏上将请求参数信息展示出来
      3. 要求浏览器发送请求时，必须将请求参数信息保存在HTTP请求协议包中的请求头
      4. 要求浏览器在接收到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存中
    - POST请求方式：
      1. 要求浏览器发送请求时，可以携带任意数量的请求参数
      2. 要求浏览器发送请求时，必须在浏览器地址栏隐藏请求参数信息
      3. 要求浏览器发送请求时，必须将请求参数信息保存在HTTP请求协议包中的请求体
      4. 禁止浏览器将服务器返回资源文件内容进行保存
    - 控制浏览器发送请求时采用GET请求方式
      1. 超链接标签命令
      2. 表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求，默认为GET方式
    - 控制浏览器发送请求时采用POST请求方式
      
      表单标签method属性设置为POST方式：<form method="post"></form>
  - 请求方式的适用场景
    - 考虑到post请求方式，用户可以将病毒发送到服务器上进行攻击，因此绝大多数门户网站拒绝接受POST请求，日常开发过程中绝大多数请求都是GET
    - 在某些特殊场景下必须使用POST
      1. 文件上传
      2. 发起登录验证请求
      3. 索要服务器中实时变化数据时
- 控制浏览器发送请求携带的参数
  - 请求参数作用：
    
    当用户通过浏览器访问服务端计算机动态资源文件时，往往需要调用其中的方法。
    
    浏览器发送请求时需要携带调用方法需要的实参（请求参数）
  - 请求参数格式：
    
    浏览器发送请求时：请求地址?请求参数1=值&请求参数2=值2
  - 浏览器发送请求时携带的请求参数来源：
    - 通过超链接标签命令指定请求参数
      
      例如：百度
      
      弊端：这种方式发送的请求参数内容时固定的
    - 通过表单域标签命令指定请求参数
      1. 一组声明在form标签内部的标签命令
      2. 提示用户填写请求参数内容，用于提供相对灵活的请求参数内容
      3. 所有表单域标签都有两个属性name和value
        
        name属性声明请求参数名，value属性声明请求参数值
      例如：
    - 表单域标签分类：
      1. <input/>形式： <form action="http://www.baidu.com" method="POST"> 用户姓名:<input type="text" name="username"/><br/> 用户密码:<input type="password" name="password"/><br/> 用户性别:<input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="woman"/>女<br/> 擅长技术:<input type="checkbox" name="jishu" value="java"/>JAVA <input type="checkbox" name="jishu" value="c++"/>C++ <input type="checkbox" name="jishu" value="mysql"/>MySql<br/>  用户头像:<input type="file" name="myfile"/><br/> <input type="submit"/> <input type="reset"/> </form>
      2. <select></select>形式 <form action="http://www.baidu.com"> 籍贯:<select name="home"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="tj">天津</option> </select> <input type="submit"/> <input type="reset"/> </form>
      3. <textarea></textarea> <form action="http://www.baidu.com" method="POST"> 用户姓名:<input type="text" name="username"/><br/> 用户密码:<input type="password" name="password"/><br/> 用户性别:<input type="radio" name="sex" value="man"/>男 <input type="radio" name="sex" value="woman"/>女<br/> 擅长技术:<input type="checkbox" name="jishu" value="java"/>JAVA <input type="checkbox" name="jishu" value="c++"/>C++ <input type="checkbox" name="jishu" value="mysql"/>MySql<br/>  用户头像:<input type="file" name="myfile"/><br/> 备注信息:<textarea name="ta" rows="5" cols="30"></textarea><br/>  <input type="submit"/> <input type="reset"/> </form>
    - 表单域标签value属性默认值
      1. 大多数表单域标签value属性默认是空字符串，例如：username=''
      2. 对于radio和checkbox来说，value属性默认值为'on'的字符串
    - 表单域标签作为请求参数条件
      
      对于大多数表单域标签来说，只要同时满足以下两个条件，就可以作为请求参数
      1. 必须声明在form标签内
      2. 必须声明name参数
      对于radio和checkbox标签来说在满足上述两个条件的同时，还需要满足第三个条件才可以作为请求参数
      1. radio和checkbox必须在被选中的情况下才可以作为请求参数
      此外，如果表单域标签用disabled来修饰，则它不能作为请求参数发送给服务端
      
      顺带一提readonly和disabled的区别：
      - readonly：设置当前标签只能读不能修改，readonly不会影响表单域标签作为请求参数条件
      - disabled：设置当前标签为不可用状态，此时标签中的value不能被修改，disabled修饰的表单域标签永远不能作为请求参数发送给服务端

CSS

是一种专门在浏览器编译并执行的编程语言

用于定位浏览器中HTML标签并对定位的HTML标签中样式属性进行统一管理
HTML标签属性分类
- 基本属性：
  
  大多数HTML标签都拥有的属性，是一个很庞大的群体
  
  比如id属性，用来区分HTML标签，不允许有相同的id
  
  比如name属性，允许一组标签有相同的name
- 样式属性：
  
  是一个非常庞大的群体，通知浏览器将HTML标签中的数据在浏览器中以指定形态展示
  
  比如<div style="background-color:red;width:300;height:300"></div>
- 工作状态属性：
  
  只存在于表单域标签中，用于表示表单域标签状态
  
  check：存在于radio和checkbox中，表示标签是否被选中
  
  disabled：表示标签处于不可用的状态
  
  readonly：表示标签处于只读状态
  
  selected：存在于option标签中，表示标签是否被选中
- 监听属性：
  
  监听属性用户与HTML标签之前进行通信，监听属性用于监听用户再何时对当前标签进行何种操作，当指定操作产生时，监听属性将会通知浏览器调用对应的JavaScript方法来处理当前请求
样式属性开发难度：
- 由于网页经常出现大量的HTML标签拥有相同的样式属性设置，因此导致前端工程师进行大量重复性开发操作
- 当用户修改需求时，导致前端工程师进行大量重复维护工作
CSS的作用
- 通知浏览器将所有满足定位条件的HTML标签进行统一定位
- 通知浏览器对已经定位HTML标签中样式属性进行集中统一赋值管理

CSS选择器：

实际上就是一组定位条件用于定位HTML标签，有9个大类

语法格式：

<html>
    <head>
        <style type="text/css">
            定位条件{
                样式属性1:值1;
                样式属性2:值2
            }
        </style>
    </head>
</html>

ID选择器：

根据HTML标签中ID属性的值进行定位

语法：

<style type="text/css">
    #id编号{
        样式属性1:值1;
        样式属性2:值2
    }
</style>

标签类型选择器：

根据HTML标签类型进行定位

语法

<style type="text/css">
    标签类型名{
        样式属性1:值1;
        样式属性2:值2
    }
</style>

层级选择器
- HTML标签之间的关系：
  - 父子关系：即包含关系
  - 兄弟关系：一组标签拥有相同的父标签，并且彼此之间没有任何包含关系，即为兄弟
- 根据标签之间的关系进行定位
- 示例：
```

<style type="text/css">
    定位父标签条件 定位子标签条件{
        样式属性1:值1;
        样式属性2:值2
    }
</style>
```

自定义选择器

如果一组HTML标签没有相同的特征，但是需要对指定属性赋值相同的内容，此时将自定义选择器绑定到对应的标签上

语法：

<style type="text/css">
    .自定义选择器名{
        样式属性1:值1;
        样式属性2:值2
    }
</style>
<div class="自定义选择器名"></div>
<p class="自定义选择器名"></p>

这是我了

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录