給我 20 分鐘，我教你快速掌握JavaWeb和Http

eb相關概念

B / S : 瀏覽器(Browser)-服務器(Server)模式

BS模式中,Server又分為Web Server, Application Server

Web Server以Apache, Nginx為代表, 它的職能是接受瀏覽器請求并返回響應給瀏覽器。
Application Server以Apache Tomcat為代表, 它的職能是運行應用程序, 返回動態生成的html給Web Server. Application Server又稱為Web容器(Container)。

Tomcat可以看作既是WebServer又是ApplicationServer.

C / S : 客戶端(Client)-服務器(Server)模式

相對來說, B/S模式的應用程序更便于部署,維護,升級。

通常, html, css, js 這樣的資源文件稱為靜態資源.

通過Application動態生成的頁面稱為動態網頁, 常見的動態網頁技術有: Servlet, JSP, PHP, ASP, CGI, FastCGI ...

免費的應用服務器：
Tomcat: web服務器（SSH、SSM、BOOT……）
Jboss: (EJB)
Jetty
收費的應用服務器：
Weblogic
Websphere
TongWeb（國產）

tomcat目錄結構

tomcat-home
|- bin/啟動停止tomcat的腳本如:startup.bat/shutdown.bat
|- conf/配置文件
|- lib/jar包
|- logs/日志
|- temp/臨時文件
|- webapps/部署到tomcat中的application
|-ROOT 項目發布目錄(項目放置ROOT中，訪問就可以省略項目名稱和web目錄）
|- work/運行過程中產生的一些永久性文件(jsp編譯的目錄)

通過conf/server.xml可以更改tomcat監聽的端口號、域名等

應用程序開發完成后部署到webapps目錄下,可以被瀏覽器訪問

idea項目結構認識

project -Name
|-.idea idea的默認的配置文件目錄(不要動)
|-out 編碼文件 (不動)
|-Artifacts artifact是一種用于裝載項目資產以便于測試，部署，或者分布式軟件的解決方案。
|-production 主要用于存放編譯后的java文件(.class文件)
|-src 存放java源碼或者配置文件(xml……)
|-web 存放靜態資源目錄(css、html、js、jquery、bootstrap……)
|-WEB-INF 安全目錄，不能直接訪問里邊的資源文件。
|-web.xml 項目的核心配置文件，切記不能刪除。
|-lib 存放項目所需要引入的jar驅動包

部署到容器(tomcat)中后, 目錄結構如下:

project-name
|- META-INF
|- WEB-INF
|- classes
|- lib
|- web.xml
|- 其它例如html,css,img,js,jsp等資源文件/文件夾
瀏覽器請求webapp時, 要注意使用的是該web項目的Context Root(上下文根路徑名稱), 而不是項目名稱. 只是大多情況下, 項目名稱 == Context Root。

注意：在idea中創建web項目不需要加項目名，如：http://localhost:8080/register.html

HTTP協議

瀏覽器通過URL來標識要請求的資源

URL, Uniform Resource Locator, 統一資源定位符

URL組成:

[協議] [服務器名稱:端口] [資源路徑]

[http://] [localhost:8080] [/register.html]

請求(request)是一個動作, 也是一個對象.

請求(request)的構成:

1.請求行: [請求方法] [URL] [協議]

2.請求頭: 包含對請求的描述(是否緩存, 接受什么類型的響應, 接受什么語言, ...)

3.請求體: 用戶希望提交給服務器的數據

請求體的格式: param1=value1?m2=value2&...

響應(response)也由3部分構成:

1. 狀態行: [協議] [HTTP狀態碼]

2. 響應頭: 對響應內容的描述性信息

3. 響應體: 服務器發送給瀏覽器的內容

HTTP狀態碼:

1xx : 請求被接受,需要繼續處理

2xx : Success!

3xx : 告知瀏覽器, 需要重新請求另一個URL, 這稱為重定向.

4xx : 客戶端請求有誤

5xx : 服務端發生了錯誤

200 : OK

302 : 告知瀏覽器, 重新請求另一個URL, 另一個URL的地址在響應頭 Location中給出

304 : 告知瀏覽器, 你所請求的資源沒有更新的版本, 請從瀏覽器本地緩存中載入.

404 : Not Found 客戶端所請求的資源找不到

400 : Bad Request 告知瀏覽器,你這次請求的語法不正確

401 : 告知瀏覽器, 用戶未授權.

403 : 告知瀏覽器, 你所請求的資源禁止你訪問.

405 : Method Not Allowd 這次請求所使用的方法(GET,POST...)不被支持

500 : Server Error 服務端程序出現錯誤

請求方式-重點

同步請求（阻塞）：

1、在地址欄中輸入URL地址訪問，同步請求，而且還是get請求。

http://localhost:8080/register.do?userName=fdsf&userPwd=fsd

2、通過form表單的get或者post請求，也是同步請求。

<form action="register.do" method="get">

3、通過超級鏈接方式，也是同步請求，而且還是get請求。

<a href="register.do?userName=lisi&userPwd=123">提交了</a>

異步請求（非阻塞）：

Ajax方式

注意：區別同步或異步請求，是看是否阻塞。

get與post區別

get 非安全 url地址參數顯示傳輸的數據量少
post 安全 url地址參數不顯示傳輸的數據量大

很多瀏覽器開始不支持flash技術，所以，我們需要不依賴flash技術的JavaScript方法來實現瀏覽器端的剪貼板操作。今天給大家介紹的就是用純JavaScript實現的解決方案：clipboard.js。

這個clipboard.js 里提供的“復制的剪貼板”API非常的簡潔方便，下面就是它的一些用法：

用JavaScript拷貝、剪貼Textarea和Input里的數據

拷貝元素的innerHTML內容

Target和Text的用法

事件關聯

接下來給大家演示一下：

html

css

切圖 qietu(.com) 前端外包首選

個春節剛剛過去，現在我們用所學的知識來制作一個小案列，利用html+css+js來制作一個距離下一個春節還有多少天。

首先我們還是準備代碼編輯器：

給大家介紹我個人比較喜歡的2款免費代碼編輯器

這款為國產代碼編輯器 HBuilder

此款為國外好用的Sublime編輯器同樣免費

進入正題

分別建立三個文件 html css js

第一個是html結構文件：命名為 index.html 代表首頁。

第二個是css樣式文件：命名為wp_style.css和pc_style.css，兩個文件，因為涉及到電腦端運行和手機端運行。

第三個是js也就是JavaScript邏輯文件：命名為script.js。

直接上代碼：

這是html頁面的代碼

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/wp_style.css">
    <link rel="stylesheet" href="css/pc_style.css">
    <title>2023年春節倒計時</title>
  </head>
  <body>
    <div class="container">
      <h2><span id="title">癸卯兔年</span>距離2023年春節還有</h2>
	  <!-- <h3><span id="title">距離下一年春節還有</span></h3> -->
      <div class="countdown">
        <div id="day">--</div>
        <div id="hour">--</div>
        <div id="minute">--</div>
        <div id="second">--</div>
      </div>
    </div>
      <script  src="js/script.js"></script>
  </body>
</html>

這是css樣式的代碼：電腦端

@media screen and (max-width: 1025px) {
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background-color: #CC0033;
		background-size: cover;
		background-position: center center;
		height: 100%;
	}
	.container {
		margin: 0;
		color: #fff;
		line-height: normal;
		position: absolute;
		align-items: center;
		left: 5%;
		right: 5%;
	}
	.container h2 {
		font-size: 2em;
		text-align: center;
		margin: 10% 0;
		color: #fff;
	}
	.container h2 span {
		color: #fff;
		display: block;
		text-align: center;
		font-size: 2.3em;
		font-weight: 800;
		letter-spacing: 2px;
	}
	.countdown {
		display: flex;
		justify-content: space-around;
		margin: 0;
	}
	.countdown div {
		width: 20%;
		height: 13vw;
		margin: 0 10px;
		line-height: 13vw;
		font-size: 2em;
		position: relative;
		text-align: center;
		background: #444444;
		color: #ffffff;
		font-weight: 500;
		border-radius: 10px 10px 0 0;
	}
	.countdown div:before {
		content: '';
		position: absolute;
		bottom: -30px;
		left: 0;
		width: 100%;
		height: 30px;
		background: #fff;
		color: #CC0000;
		font-size: 0.4em;
		line-height: 30px;
		font-weight: 400;
		border-radius: 0 0 10px 10px;
	}
	.countdown #day:before {
		content: '天';
	}
	.countdown #hour:before {
		content: '時';
	}
	.countdown #minute:before {
		content: '分';
	}
	.countdown #second:before {
		content: '秒';
	}
}

這是css樣式的代碼：手機端

* {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
}
@media screen and (min-width: 1025px) {
	body {
		background-color: #CC0033;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
	}
	.container {
		position: absolute;
		top: 80px;
		left: 100px;
		right: 100px;
		bottom: 80px;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		box-shadow: 0 50px 50px rgba(0, 0, 0, 0.8),
			0 0 0 100px rgba(0, 0, 0, 0.3);
	}
	.container h2 {
		text-align: center;
		font-size: 4em;
		line-height: 1.5em;
		color: #ffffff;
		margin-top: -80px;
	}
	.container h2 span {
		display: block;
		font-weight: 400;
		letter-spacing: 6px;
		font-size: 1em;
	}
	.countdown {
		display: flex;
		margin-top: 50px;
	}
	.countdown div {
		position: relative;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		background: #333;
		color: #fff;
		margin: 0 15px;
		font-size: 3em;
		font-weight: 500;
		border-radius: 10px 10px 0 0;
	}
	.countdown div:before {
		content: '';
		position: absolute;
		bottom: -30px;
		left: 0;
		width: 100%;
		height: 35px;
		background: #b00000;
		color: #ffffff;
		font-size: 0.35em;
		line-height: 35px;
		font-weight: 300;
		border-radius: 0 0 10px 10px;
	}
	.countdown #day:before {
		content: '天';
	}
	.countdown #hour:before {
		content: '時';
	}
	.countdown #minute:before {
		content: '分';
	}
	.countdown #second:before {
		content: '秒';
	}
}
canvas {
	width: 100%;
	height: 100%;
}
::-webkit-scrollbar {
	display: none;
}
#btn{
  margin: 40px;
  width: 100px;
  height: 30px;
  background: pink;
  text-align: center;
  color: darkred;
  line-height: 30px;
}

最后是邏輯JS代碼

class Snowflake {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.radius = 0;
    this.alpha = 0;
    this.reset();
  }
  reset() {
    this.x = this.randBetween(0, window.innerWidth);
    this.y = this.randBetween(0, -window.innerHeight);
    this.vx = this.randBetween(-3, 3);
    this.vy = this.randBetween(2, 5);
    this.radius = this.randBetween(1, 4);
    this.alpha = this.randBetween(0.1, 0.9);
  }
  randBetween(min, max) {
    return min + Math.random() * (max - min);
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.y + this.radius > window.innerHeight) {
      this.reset();
    }
  }
}
class Snow {
  constructor() {
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    document.body.appendChild(this.canvas);
    window.addEventListener('resize', () => this.onResize());
    this.onResize();
    this.updateBound = this.update.bind(this);
    requestAnimationFrame(this.updateBound);
    this.createSnowflakes();
  }
  onResize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height;
  }
  createSnowflakes() {
    const flakes = window.innerWidth / 4;
    this.snowflakes = [];
    for (let s = 0; s < flakes; s++) {
      this.snowflakes.push(new Snowflake());
    }
  }
  update() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    for (let flake of this.snowflakes) {
      flake.update();
      this.ctx.save();
      this.ctx.fillStyle = '#FFF';
      this.ctx.beginPath();
      this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
      this.ctx.closePath();
      this.ctx.globalAlpha = flake.alpha;
      this.ctx.fill();
      this.ctx.restore();
    }
    requestAnimationFrame(this.updateBound);
  }
}
new Snow();
var stop = false;
function show_runtime() {
  var newDay = '2023/1/21 00:00:00';
  var countDate = new Date(newDay);
  var now = new Date().getTime();
  gap = countDate - now;
  var second = 1000;
  var minute = second * 60;
  var hour = minute * 60;
  var day = hour * 24;
  var d = Math.floor(gap / day);
  var h = Math.floor((gap % day) / hour);
  var m = Math.floor((gap % hour) / minute);
  var s = Math.floor((gap % minute) / second);
  if ((d, h, m, s < 0)) {
    stop = true;
  } else {
    document.getElementById('day').innerText = d;
    document.getElementById('hour').innerText = h;
    document.getElementById('minute').innerText = m;
    document.getElementById('second').innerText = s;
  }
}
function newyear() {
  document.getElementById('title').innerText = 'Happy Spring Festival';
  document.getElementById('day').innerText = '春';
  document.getElementById('hour').innerText = '節';
  document.getElementById('minute').innerText = '快';
  document.getElementById('second').innerText = '樂';
}
var time = setInterval(() => {
  show_runtime();
  if (stop === true) {
    newyear();
    clearInterval(time);
  }
}, 1000);
window.onload = downTime;

將代碼寫好后在瀏覽器上運行一下效果

這是從代碼編輯器上運行瀏覽器

在PC瀏覽器上運行倒計時代碼效果

手機瀏覽器上運行倒計時代碼的效果

好了，一個簡單的小案列就展示到這，喜歡的同學們可以動手試一下，不懂的同學可以在我的視頻課程中去學習，希望能夠幫到您們，新的一年相遇就是緣分，很高興認識你們，祝愿您們新的一年里順順利利，好事連連！！！

在線咨詢

上一篇：前端自動化系列之jade預編譯html
下一篇：你想知道的CSS3選擇器，全在這里

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商