详细描述JavaWeb
2021-04-11 16:39:29 1 举报AI智能生成
JavaWeb中概念众多，本流程图帮助梳理JavaWeb中各知识的联系，实现知识系统化
作者其他创作
大纲/内容
客户端
简介
在浏览器中运行的部分，就是用户看到并与之交互的界面程序，使用HTML、CSS、JavaScript构建
在web中是以request对象存在的，就是发送了一个需求给服务器端处理，具体的使用方法可以查找JavaEE的ServletRequest以及其子类
服务器端
服务器端基础概念 - JoeYoung
在服务器中运行的部分，负责存储数据和处理应用逻辑
客户端发送的需求交给服务器端处理，是以response对象存在
Node 网站服务器
能够提供网站访问服务的机器就是网站服务器，它能够接受客户端的请求，能够对请求作出响应
下边各概念的例子
域名，网站名和URL区别 - mapc我
http://mail.163.com:80/index.html
http:// 协议名
mail 服务器名
www也是服务器名
163.com 域名
可以用IP地址代替域名
:80 端口号
mail.163.com 网站名，由服务器名加域名组成
/（index.html前的斜杠） 根目录
index.html 根目录下的默认网页
http://mail.163.com/index.html URL
到访问http://mail.163.com/时及访问根目录，但服务器不会把整个目录都返回，于是会在自己的目录下寻找默认的网页，一般是index.html
各种不同的传输协议分类
IP地址
Internet Protocol Address，互联网中设备的唯一标识
域名
由于 IP 地址难于记忆，所以就产生了域名的概念，所谓域名就是平时上网所使用的网址。
虽然在地址栏中输入的是网址，但是最终还是会将域名转换为IP才能访问到指定的网站服务器，互联网运营商（如移动）会将域名转化为IP，这也就是访问不到外网（如谷歌）的原因，应为运营商没有帮你转IP
各种不同翻墙机制的原理
端口
端口是计算机与外界通讯交流的出口，用来区分服务器提供的不同服务
默认端口号
通常我们遇到的URL都没有端口号是因为协议带有的默认端口号，如上别的例子可以不写端口号，因为http的默认端口号就是20
http
20
https
443
ftp
21
URL
统一资源定位符，又叫URL（Uniform Resource Location），是专为标识 Internet 网上资源位置而设的一种编址方式。我们平时所说的网页地址指的即是URL。
开发过程中访问本机的域名/IP
域名
localhost
IP
127.0.0.1
HTTP 协议
HTTP协议超级详解 - 爱文飞翔
超文本传输协议HTTP（HyperText Transfer Protocol）
超文本
HyperText及超文本：不仅仅能表示文本信息，还能表示音视频、格式等等信息
HTTP规定了如何从网站服务器传输超文本到本地浏览器。它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。
报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵循规定好的格式。
JavaWeb
表现数据
通过浏览器将数据表现出来
标记语言
HTML
概念
超文本标记语言（HyperText Markup Language）
基本结构
<html> <head> <meta charset=\"utf-8\" /> <title></title> </head> <body> </body></html>
主要标记(标签)
一般标签(包含开始标签和结束标签)
语义标签
HTML5语义元素
<h1~h2> 标题
字号越来越小
有加粗的效果
会自动换行
<p> 段落
有行高
自动换行
文本语义标签
<em> （被强调的文本）emphasis
<strong> （重要的文本）
<mark> （被标记的/高亮显示的文本）
<cite> （作品的标题）
<i> （定义与文本中其余部分不同的部分）
<q> 标签定义一个短的引用。
短语标签
如：<dfn> （一个定义项目）
<b>：粗体
<a> 超链接
href属性
超文本引用（hypertext reference)：描述链接的地址
target 属性
定义被链接的文档在何处显示
常用的target属性值
_blank(\t在新窗口中打开被链接文档。)
_self(默认。在相同的框架中打开被链接文档。)
锚点的定义
在herf属性中添加\"锚点名\"，后面的文档内容中添加属性id=\"锚点名\"；如果无锚点名，只写\"#\"，有置顶的功能
<table> 表格
table常用的一些标签
<thead>
<th>
colspan(合并列)
rowspan(合并行)
<tbody>
<tr> table row
<td> table data
table常用的一些属性
border
cellspacing
cellpadding
<form>表单
空标签<input>
type属性一些常用的值
text：默认单行文本
password
radio：单选
checkbox：复选框
date：日期
color：颜色
submit：表单提交按钮
reset：表单重置按钮
button：普通菜单
hidden：隐藏域
不显示在浏览器中，但只有写了name属性，就会提交
file：文件上传
搭配<form encype=\"mutipart/form-data\" method=\"post\">
<input>其他常用的属性
placeholder：提示性短语
readonly
required
disabled：禁用状态
<textarea>：多行文本
<select>：下拉菜单
<option>
属性
method：表单提交方式
get
表单默认提交方式，参数由name属性的值来提供
会携带参数的值，并显示在url中
post
会携带参数，但不显示在url中，比较安全
列表标记
<ul> unordered list
<ol> ordered list
<li> list item
<dl> definition list
<dt> definition term
<dd> definition description
无语义标签
<div>
division(block-level)
当前标记可设置宽高，默认宽度为视口的100%宽度
<span>
Specifies an inline text container，及行内容器，不可设置宽高
空标签
常用的空标签
HTML <!DOCTYPE> 声明
告知 Web 浏览器页面使用了哪种 HTML 版本。
br标签 换行
<img> 导入图片
源属性(src)
图像的 URL 地址
Alt属性(alt)
为图像定义一串预备的可替换的文本(在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。)
height(高度) 与 width(宽度)属性
加载图片是需要时间的，建议：慎用图片。
<link> 引用外部文档
作用：1. 定义文档与外部资源的关系；2. 链接样式表(最常用)。
rel属性：(relation)设置对象和连接资源间的关系
type属性：规定被链接文档/资源的 MIME(Multipurpose Internet Mail Extensions)类型
实例：<link rel=\"stylesheet\" type=\"text/css\" href=\"style_sheet_name.css\">
一般描述于开始标签
一些全局属性
全局属性手册
class
为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id
定义元素的唯一id
style
\t规定元素的行内样式（inline style）
title
\t描述了元素的额外信息 (作为工具条使用):鼠标悬浮时提示
字符实体
&entity_name; 或 &#entity_number;
常用的一些字符实体
空格 Non-breaking Space
大于 > greater than
小于 < less than
乘号×
CSS
由来
详细
随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化，维护代码很艰难，因为代码很混乱于是装饰网页样式的 CSS诞生了。
层叠样式表 (Cascading Style Sheets)：多个样式定义可层叠为一个，定义如何显示 HTML 元素，实现了内容与表现的分离，极大提高了工作效率
语法
选择器{ 声明}
选择器(需要改变样式的 HTML 元素)
选择器手册
id选择器：#id_name
class选择器：.class_name
伪类(Pseudo-classes)选择器
selector:pseudo-class {property:value;}
标签(元素)选择器：tag_name
伪元素选择器
属性选择器
attribute 属性中包含 value
~=
[attribute~=value] 属性中包含独立的单词为 value
*=
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行
attribute 属性以 value 开头
|=
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开
^=
[attribute^=value] 属性的前几个字母是 value 就可以
attribute 属性以 value 结尾
$=
[attribute$=value] 属性的后几个字母是 value 就可以
通配选择器：*
选择器的优先级
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定
详细见链接评论处
声明
每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
插入样式表
外部样式表(External style sheet)
<link rel=\"stylesheet\" type=\"text/css\" href=\"style_sheet_name.css\">
内部样式表(Internal style sheet)
使用 <style> 标签在文档头部定义内部样式表
内联样式(Inline style)
在相关的标签内使用样式（style）属性，Style 属性可以包含任何 CSS 属性
多重样式优先级
一般情况下，优先级如下：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
单位
绝对长度
px
像素或许被认为是最好的\"设备像素\"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。
此像素非彼像素：CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系
cm
相对单位
脚本语言
脚本语言（Script languages）是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言，脚本语言又被称为扩建的语言，或者动态语言，脚本语言是解释行语言，不需要编译直接运行
脚本语言是读一行执行一行、而无需关注下一行的语言，非脚本语言则是必须读取整个源程序内容、建立完执行环境后执行的语言。
JS（JavaScript）
给HTML网页加入动态功能
JQuery
为简化JS冗余代码的框架。
方便创作
各种前端框架
Layui
Bootstrap
ECharts
涵盖各行业图表，满足各种需求
总结
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
JQuery：为了简化JS冗余代码而生
方便创作：如果不是追求创新，使用独特新颖的网页界面，网上有很多模板：前端框架（前面只列出了当前比较流行的框架）
储充/传输数据
ML（Makeup Language），将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码
例子
什么是标记语言 - csdn_wpno1
在记事本中输入“带你出师、闯荡江湖！”，并设置相应的格式，但是在其它电脑上打开并没有显示同样的格式，说明其不包含任何格式信息。查看文件大小显示20字节；在word中输入同样的内容，同时设置格式，在另一个电脑上看到的是同样的内容和同样的格式，同时查看文件的大小为12kb，好家伙，一下大了600多倍说明word文档中除了存储内容，还存储了格式等信息（document.xfont color=\"#31a8e0\
XML（可扩展标记语言）
XML 系列教程 - W3Cschool
XML被设计用来结构化、存储以及传输信息。
例
<note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body></note>
详细介绍
XML 指可扩展标记语言（EXtensible Markup Language）XML 是一种标记语言，很类似 HTMLXML 的设计宗旨是传输数据，而非显示数据XML 标签没有被预定义。您需要自行定义标签。XML 被设计为具有自我描述性。XML 是 W3C 的推荐标准
XML 仅仅是纯文本
XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。不过，能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。
XML 无所不在
当我们看到 XML 标准突飞猛进的开发进度，以及大批的软件开发商采用这个标准的日新月异的速度时，真的是不禁感叹这真是令人叹为观止。目前，XML 在 Web 中起到的作用不会亚于一直作为 Web 基石的 HTML。XML 是各种应用程序之间进行数据传输的最常用的工具，并且在信息存储和描述领域变得越来越流行。
用途
XML 应用于 web 开发的许多方面，常用于简化数据的存储和共享。
XML 把数据从 HTML 分离
如果你需要在 HTML 文档中显示动态数据，那么每当数据改变时将花费大量的时间来编辑 HTML。通过 XML，数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示，并确保修改底层数据不再需要对 HTML 进行任何的改变。通过使用几行 JavaScript，你就可以读取一个外部 XML 文件，然后更新 HTML 中的数据内容。
XML 简化数据共享
XML 简化数据传输
XML 简化平台的变更
XML 使您的数据更有用
XML 用于创建新的 Internet 语言
DTD
文档类型定义（DTD：Document Type Definition）可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。DTD 可被成行地声明于 XML 文档中，也可作为一个外部引用
XSD
XML Schema Definition，DTD的替代者
非标记语言
YML
YML简介 - Kinsanity
YAML （YAML Ain't a Markup Language）不是一种标记语言，通常以.yml为后缀的文件，是一种直观的能够被电脑识别的数据序列化格式，并且容易被人类阅读，容易和脚本语言交互的，可以被支持YAML库的不同的编程语言程序导入，font color=\"#31a8e0\
k: v 表示键值对关系，冒号后面必须有一个空格
使用空格的缩进表示层级关系，空格数目不重要，只要是左对齐的一列数据，都是同一个层级的
大小写敏感
缩进时不允许使用Tab键，只允许使用空格
键值关系
普通值(字面量)
字符串默认不用加上单引号或者双引号
单引号：不会转义字符串里面的特殊字符
双引号：会转义特殊字符
name1: zhangsanname2: 'zhangsan \ lisi'name3: \"zhangsan \ lisi\"age: 18flag: true
日期
date: 2019/01/01
对象(属性和值)、Map(键值对)
分行写法
people: name: zhangsan age: 20
行内写法
数组、list、set
用- 来表示数组中的一个元素
pets: - dog - pig - cat
行内写法
对象数组、对象list、对象set
文档块
对于测试环境，预生产环境，生产环境可以使用不同的配置，如果只想写到一个文件中，yml与是支持的，每个块用---隔开
JSON
JSON - 菜鸟教程
JS Object Notation(JavaScript 对象表示法)，和YML类似
Servlet
sun公司制订的一种用于扩展web 服务器功能的组件规范，Servlet 为创建基于 web 的应用程序提供了基于组件、独立于平台的方法
Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。
前面这么多其实就是：Servlet中可以写HTML然后放到客户端（浏览器），客户端想要一个数据可以通过Servlet获取，如果只是改变一个数据，Servlet也是直接将HTML网页传入客户端，就导致客户端重新刷新，于是AJAX技术诞生了
Servlet生命周期
init()
执行必需的初始化
getServletConfig()
getServletInfo()
destroy()
配置Servlet
在WEB-INF/web.xml里创建以下条目
<web-app> <servlet> <servlet-name>HelloWorld</servlet-name> <servlet-class>HelloWorld</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloWorld</servlet-name> <url-pattern>/HelloWorld</url-pattern> </servlet-mapping></web-app>
在servlet3.0以后，我们可以不用再web.xml里面配置servlet，只需要加上@WebServlet注解就可以修改该servlet的属性了。
表单数据
GET 方法
GET 方法向页面请求发送已编码的用户信息。页面和已编码的信息中间用 ? 字符分隔，如下所示：http://www.test.com/hello?key1=value1&key2=value2
GET 方法是默认的从浏览器向 Web 服务器传递信息的方法，它会产生一个很长的字符串，出现在浏览器的地址栏中。如果您要向服务器传递的是密码或其他的敏感信息，请不要使用 GET 方法。GET 方法有大小限制：请求字符串中最多只能有 1024 个字符。这些信息使用 QUERY_STRING 头传递，并可以通过 QUERY_STRING 环境变量访问，Servlet 使用 doGet() 方法处理这种类型的请求。
POST 方法
另一个向后台程序传递信息的比较可靠的方法是 POST 方法。POST 方法打包信息的方式与 GET 方法基本相同，但是 POST 方法不是把信息作为 URL 中 ? 字符后的文本字符串进行发送，而是把这些信息作为一个单独的消息。消息以标准输出的形式传到后台程序，您可以解析和使用这些标准输出。Servlet 使用 doPost() 方法处理这种类型的请求。
使用 Servlet 读取表单数据
Servlet 处理表单数据，这些数据会根据不同的情况使用不同的方法自动解析：getParameter()：您可以调用 request.getParameter() 方法来获取表单参数的值。getParameterValues()：如果参数出现一次以上，则调用该方法，并返回多个值，例如复选框。getParameterNames()：如果您想要得到当前请求中的所有参数的完整列表，则调用该方法。
AJAX
AJAX：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一个不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容的技术
JSP
JSP - 菜鸟教程
Java Server Pages，为简化Servlet诞生，在Servlet中写HTML很不方便，于是JSP诞生了，在Servlet中是：Java中有HTML，JSP是HTML中有Java；最后运行时Servlet容器会先把JSP转化为Serclet，也就是说JSP本质还是Servlet。
使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束
JSTL
（JSP Standarded Tag Library），即JSP标准标签库，是由JCP（Java community Proces）所制定的标准规范，它主要提供给Java Web开发人员一个标准通用的标签库，并由Apache的Jakarta小组来维护。开发人员可以利用这些标签取代JSP页面上的Java代码，从而提高程序的可读性，降低程序的维护难度。
运行Web应用
方法一：在IDE工具中配置Web应用服务器
方法二：在pom.xml文件中配置Web应用服务器插件（推荐）
使用jetty插件教程
web.xml
存放位置
web.xml文件放在WEB-INF的根目录下
web.xml的加载过程
1. 启动一个web项目，web容器（如tomcat）先读取web.xml文件，读取其中的配置信息
2. 容器创建一个servlet上下文（servletContext），这个web项目所有部分共享这个上下文
3. 容器将<context-param>转换为键值对，交给servletContext
4. 容器创建<listener>中的监听器实例
5. 触发contextInitialized方法，listener被调用（当Servlet 容器启动或终止Web 应用时，会触发ServletContextEvent 事件，该事件由ServletContextListener 来处理。在ServletContextListener 接口中定义了处理ServletContextEvent 事件的两个方法contextInitialized、contextDestroyed，web.xml有contextLoaderListener监听器，spring等框架实现了本监听器的接口方法）
6. 调用完contextInitialized方法后，容器再对filter初始化
ServletContext -> context-param（无顺序）-> listener（无顺序）-> filter（书写顺序） -> servlet（load-on-startup优先级）
初学者容易困惑的关系
Servlet和Servlet容器的关系
Servlet是用于扩展web 服务器功能的组件规范（及Servlet-api中的接口，抽象类等制定的规范，它就是JavaSE的一个扩展包），因为只是规范所以必须有一个容器来实现，也正是由于容器使得无需建立main函数，new对象，调方法也可以运行Java代码；
Servlet和Java的关系
Servlet是一个三方包（jsp-api），也就是说其实是Java里的一些类，只是因为不在JavaSE中所以使用时需要导包
Servlet和JSP的关系
常用的servlet容器
Jetty
Tomcat
Apache开发的免费的开放源代码的Web 应用服务器，属于轻量级应用服务器
职业：本科
0 条评论
回复 删除
下一页
