Day32 bootstrap
Bootstrap is the most successful implementation of responsive layout. In order to be compatible with different browsers, jQuery is used , and in order to adapt to different terminals, CSS3 Media Query is used .
1.1.1 Grid system
l Help Manual: All CSS Styles / Grid Systems, http://v3.bootcss.com/css/#grid-options
l Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases.
l Grid features
n " row " must be contained in .container (fixed width) or .container-fluid ( 100% width)
n "column ( column )" can be used as a direct child element of " row ( row )".
Style " .row " for n rows and " col-*-* " for columns Content should be placed in "column ( column )"
When the n column is greater than 12 , it will be arranged in another row
n The grid class is suitable for devices with a screen width greater than or equal to the demarcation point size, and overrides the grid class for small screen devices.
lraster parameters: " col-*-* "
Day33 HTTP protocol and Tomcat server
1.1 What is the HTTP protocol
Protocol concept : In order for data to arrive at the destination from the source on the network, the participants in the network communication must follow the same rules. This set of rules is called the protocol ( protocol ), which is ultimately reflected in the format of the data packets transmitted on the network.
The vernacular : It is to stipulate the format of the content when communicating.
Hypertext Transfer Protocol : It is used to define the process of data interaction between WEB browser and WEB server .
In the field of computers , the most commonly used protocol is the http protocol . When we enter an address in the address bar and click Enter, we are actually sending a request to a computer . Then this computer will send the request we want. The content is returned to our browser through the network . In fact, the http protocol is a standard for client and server requests and responses
1.2 Detailed Explanation of HTTP Request Protocol (Key Points)
l request line ( understand )
For example: POST /day09/01.http/form.html HTTP/1.1
The request line must be the first line in the HTTP request format.
Request line format: request method resource path protocol / version
Request method: There are 7 types of protocols , two commonly used: GET and POST
GET request:
Appending request parameters to the URL is not safe. For example: form.html?username=jack&username=1234
The URL length limits the data size of the GET request method.
no request body
POST request
The request parameters are displayed in the request body, which is safer.
The request data size is not shown.
Only the form is set to method = " post " is a post request . Others are get requests.
Common GET requests: direct access to the address bar, <a href= ””> , <img src= ””> , etc.
l request header ( master )
For example: Host: localhost:8080
The request header starts on the second line and ends with the first blank line. and there is a blank line between the request header and the request body.
Request headers usually pass data in key-value pairs (key:value) .
key is a fixed value specified by the specification
value is the value corresponding to the key , usually a value, possibly a group.
| Common request headers |
Description (red master, other understand) |
| Referer |
The browser informs the server where the current request is coming from. If it is direct access, this header will not be present. Commonly used for: anti-theft chain |
| If-Modified-Since |
The browser notifies the server of the last change time of the local cache. Combined with another response header controls the caching of browser pages. |
| Cookie |
Session-related technologies used to store cookie information cached by browsers . |
| User-Agent |
The browser notifies the server, the client browser and operating system related information |
| Connection |
Stay connected. Keep-Alive connection, close has been closed |
| Host |
The requested server hostname |
| Content-Length |
the length of the request body |
| Content-Type |
If it is a POST request, there will be this header, the default value is application/x-www-form-urlencoded , indicating that the content of the request body is url encoded |
| Accept： |
The MIME types supported by the browser . A way of describing a file type. MIME format: big type / small type [; parameters ] E.g: text / html , html text text/css , css file text/javascript , js files image/* , all image files |
| Accept-Encoding |
The browser informs the server of the data compression formats supported by the browser. Such as: GZIP compression |
| Accept-Language |
The browser informs the server of the languages supported by the browser. Various languages (internationalized i18n ) |
l Request body (emphasis)
Under normal circumstances, only the post request method will use the request body. The request body is the data submitted by the user form. Each item of data uses a key-value pair ( k=v ), and multiple sets of values are connected by & .
For example; username=jack&password=1234
1.3 Detailed explanation of HTTP response protocol (emphasis)
l Response line ( emphasis )
For example: HTTP/1.1 200 OK
Format: Protocol / Version Status Code Status Code Description
Status Code: A fixed numeric number used by the server and browser to determine the status
1xx : Represents that the request has been accepted and needs to continue processing ( generally not used )
200 : The request was successful.
302 : Request redirection.
304 : The requested resource has not changed, access the local cache.
404 : The requested resource does not exist. Usually the user path is written incorrectly, or the server resource may have been deleted.
500 : Internal server error. Usually programs throw exceptions.
l Response header ( emphasis )
The response header also uses the key-value pair k:v
The server controls the browser's behavior through response headers, and browsers operate differently with different headers.
| Common request headers |
describe |
| Location |
Specifies the path of the response, which needs to be used in conjunction with the status code 302 to complete the jump. |
| Content-Type |
Type of response body ( MIME type) Value: text/html;charset=UTF-8 to deal with the problem of Chinese garbled characters in response |
| Content-Disposition |
Parse the body in download mode via browser Value: attachment;filename=xx.zip |
| Set-Cookie |
Session related technologies. The server writes a cookie to the browser |
| Content-Encoding |
Compression format used by the server Value: gzip |
| Content-length |
the length of the response body |
| Refresh |
Timed refresh, format: seconds ; url= path. The url can be omitted, the default value is the current page. Value: 3;url=www.itcast.cn // Refresh the page to www.itcast.cn in three seconds |
| Server |
指的是服务器名称，默认值：Apache-Coyote/1.1。可以通过conf/server.xml配置进行修改。<Connector port="8080" ... server="itcast"/> |
| Last-Modified |
服务器通知浏览器，文件的最后修改时间。与If-Modified-Since一起使用。 |
l 响应体
响应体，就是服务器发送给浏览器的正文。HTML文本、图片、文件等
1.4 软件架构
l C/S架构：Client/Server 客户端/服务器。要求客户端电脑安装一个客户端程序。
n 常见应用：QQ，迅雷，360，旺旺 等2
n 优点：
- 用户体验好，效果炫
- 对信息安全的控制较强
- 应用服务器运行数据负荷较轻，部分计算功能在客户端完成。
n 缺点：
- 占用硬盘空间
- 维护麻烦
- 安装使用依赖其他条件
l B/S架构：Browser/Server 浏览器/服务器 。通过浏览器与服务器交互，不需要安装其他程序
n 常见应用：网银系统，淘宝，京东 12306 等
n 优点：
- 维护和升级简单，无缝升级。
- 不用必须安装程序，操作系统内置了浏览器。
n 缺点：
- 动画效果受浏览器限制.
- 对信息安装控制较差。例如：网银就需要使用U盾，在浏览器端加密。
- 应用服务器运行数据负荷较重。大部分计算都在服务器端，增加服务器压力。使用Ajax可以改善部分用户体验。
静态资源：指web页面中供人们浏览的数据始终是不变。比如：HTML、CSS、JS、图片、多媒体。
动态资源：指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同。比如：JSP/Servlet、ASP、PHP
应用场景:
静态资源:网站首页
动态资源:登录页面、购物车
WEB服务器对JavaEE规范部分或全部支持（实现），也就是WEB服务器实现部分或全部接口。
221常见的WEB服务器：
- Tomcat：Apache组织提供一个免费的小型的服务器软件。支持Servlet和JSP规范。
- WebLogic：Bea公司的一个收费的大型的服务器软件，后被Oracle收购。支持EE的所有的规范
- WebSphere：IBM公司的一个收费的大型的服务器软件，支持EE的所有的规范。
- JBoss：是一个基于J2EE的开放源代码的应用服务器。JBoss是一个管理EJB的容器和服务器，JBoss核心服务不包括支持servlet/JSP的WEB容器，一般与Tomcat或JBoss绑定使用。