给我 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小时内与您取得联系。

整合营销服务商