整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
B / S : 瀏覽器(Browser)-服務(wù)器(Server)模式
BS模式中,Server又分為Web Server, Application Server
Web Server以Apache, Nginx為代表, 它的職能是接受瀏覽器請(qǐng)求并返回響應(yīng)給瀏覽器。
Application Server以Apache Tomcat為代表, 它的職能是運(yùn)行應(yīng)用程序, 返回動(dòng)態(tài)生成的html給Web Server. Application Server又稱為Web容器(Container)。
Tomcat可以看作既是WebServer又是ApplicationServer.
C / S : 客戶端(Client)-服務(wù)器(Server)模式
相對(duì)來說, B/S模式的應(yīng)用程序更便于部署,維護(hù),升級(jí)。
通常, html, css, js 這樣的資源文件稱為靜態(tài)資源.
通過Application動(dòng)態(tài)生成的頁面稱為動(dòng)態(tài)網(wǎng)頁, 常見的動(dòng)態(tài)網(wǎng)頁技術(shù)有: Servlet, JSP, PHP, ASP, CGI, FastCGI ...
免費(fèi)的應(yīng)用服務(wù)器：
Tomcat: web服務(wù)器（SSH、SSM、BOOT……）
Jboss: (EJB)
Jetty
收費(fèi)的應(yīng)用服務(wù)器：
Weblogic
Websphere
TongWeb（國產(chǎn)）
tomcat-home
|- bin/啟動(dòng)停止tomcat的腳本如:startup.bat/shutdown.bat
|- conf/配置文件
|- lib/jar包
|- logs/日志
|- temp/臨時(shí)文件
|- webapps/部署到tomcat中的application
|-ROOT 項(xiàng)目發(fā)布目錄(項(xiàng)目放置ROOT中，訪問就可以省略項(xiàng)目名稱和web目錄）
|- work/運(yùn)行過程中產(chǎn)生的一些永久性文件(jsp編譯的目錄)
通過conf/server.xml可以更改tomcat監(jiān)聽的端口號(hào)、域名等
應(yīng)用程序開發(fā)完成后部署到webapps目錄下,可以被瀏覽器訪問
project -Name
|-.idea idea的默認(rèn)的配置文件目錄(不要?jiǎng)?
|-out 編碼文件 (不動(dòng))
|-Artifacts artifact是一種用于裝載項(xiàng)目資產(chǎn)以便于測(cè)試，部署，或者分布式軟件的解決方案。
|-production 主要用于存放編譯后的java文件(.class文件)
|-src 存放java源碼或者配置文件(xml……)
|-web 存放靜態(tài)資源目錄(css、html、js、jquery、bootstrap……)
|-WEB-INF 安全目錄，不能直接訪問里邊的資源文件。
|-web.xml 項(xiàng)目的核心配置文件，切記不能刪除。
|-lib 存放項(xiàng)目所需要引入的jar驅(qū)動(dòng)包
部署到容器(tomcat)中后, 目錄結(jié)構(gòu)如下:
project-name
|- META-INF
|- WEB-INF
|- classes
|- lib
|- web.xml
|- 其它例如html,css,img,js,jsp等資源文件/文件夾
瀏覽器請(qǐng)求webapp時(shí), 要注意使用的是該web項(xiàng)目的Context Root(上下文根路徑名稱), 而不是項(xiàng)目名稱. 只是大多情況下, 項(xiàng)目名稱 == Context Root。
注意：在idea中創(chuàng)建web項(xiàng)目不需要加項(xiàng)目名，如：http://localhost:8080/register.html
瀏覽器通過URL來標(biāo)識(shí)要請(qǐng)求的資源
URL, Uniform Resource Locator, 統(tǒng)一資源定位符
URL組成:
[協(xié)議] [服務(wù)器名稱:端口] [資源路徑]
[http://] [localhost:8080] [/register.html]
請(qǐng)求(request)是一個(gè)動(dòng)作, 也是一個(gè)對(duì)象.
請(qǐng)求(request)的構(gòu)成:
1.請(qǐng)求行: [請(qǐng)求方法] [URL] [協(xié)議]
2.請(qǐng)求頭: 包含對(duì)請(qǐng)求的描述(是否緩存, 接受什么類型的響應(yīng), 接受什么語言, ...)
3.請(qǐng)求體: 用戶希望提交給服務(wù)器的數(shù)據(jù)
請(qǐng)求體的格式: param1=value1?m2=value2&...
響應(yīng)(response)也由3部分構(gòu)成:
1. 狀態(tài)行: [協(xié)議] [HTTP狀態(tài)碼]
2. 響應(yīng)頭: 對(duì)響應(yīng)內(nèi)容的描述性信息
3. 響應(yīng)體: 服務(wù)器發(fā)送給瀏覽器的內(nèi)容
1xx : 請(qǐng)求被接受,需要繼續(xù)處理
2xx : Success!
3xx : 告知瀏覽器, 需要重新請(qǐng)求另一個(gè)URL, 這稱為重定向.
4xx : 客戶端請(qǐng)求有誤
5xx : 服務(wù)端發(fā)生了錯(cuò)誤
200 : OK
302 : 告知瀏覽器, 重新請(qǐng)求另一個(gè)URL, 另一個(gè)URL的地址在響應(yīng)頭 Location中給出
304 : 告知瀏覽器, 你所請(qǐng)求的資源沒有更新的版本, 請(qǐng)從瀏覽器本地緩存中載入.
404 : Not Found 客戶端所請(qǐng)求的資源找不到
400 : Bad Request 告知瀏覽器,你這次請(qǐng)求的語法不正確
401 : 告知瀏覽器, 用戶未授權(quán).
403 : 告知瀏覽器, 你所請(qǐng)求的資源禁止你訪問.
405 : Method Not Allowd 這次請(qǐng)求所使用的方法(GET,POST...)不被支持
500 : Server Error 服務(wù)端程序出現(xiàn)錯(cuò)誤
同步請(qǐng)求（阻塞）：
1、 在地址欄中輸入U(xiǎn)RL地址訪問，同步請(qǐng)求，而且還是get請(qǐng)求。
http://localhost:8080/register.do?userName=fdsf&userPwd=fsd2、 通過form表單的get或者post請(qǐng)求，也是同步請(qǐng)求。
<form action="register.do" method="get">3、 通過超級(jí)鏈接方式，也是同步請(qǐng)求，而且還是get請(qǐng)求。
<a href="register.do?userName=lisi&userPwd=123">提交了</a>
異步請(qǐng)求（非阻塞）：
Ajax方式
注意：區(qū)別同步或異步請(qǐng)求，是看是否阻塞。
get 非安全 url地址參數(shù)顯示 傳輸?shù)臄?shù)據(jù)量少
post 安全 url地址參數(shù)不顯示 傳輸?shù)臄?shù)據(jù)量大
很多瀏覽器開始不支持flash技術(shù)，所以，我們需要不依賴flash技術(shù)的JavaScript方法來實(shí)現(xiàn)瀏覽器端的剪貼板操作。今天給大家介紹的就是用純JavaScript實(shí)現(xiàn)的解決方案：clipboard.js。
這個(gè)clipboard.js 里提供的“復(fù)制的剪貼板”API非常的簡(jiǎn)潔方便，下面就是它的一些用法：
用JavaScript拷貝、剪貼Textarea和Input里的數(shù)據(jù)
拷貝元素的innerHTML內(nèi)容
Target和Text的用法
事件關(guān)聯(lián)
接下來給大家演示一下：
html
css
js
切圖 qietu(.com) 前端外包首選
個(gè)春節(jié)剛剛過去，現(xiàn)在我們用所學(xué)的知識(shí)來制作一個(gè)小案列，利用html+css+js來制作一個(gè)距離下一個(gè)春節(jié)還有多少天。
首先我們還是準(zhǔn)備代碼編輯器：
這款為國產(chǎn)代碼編輯器 HBuilder
此款為國外好用的Sublime編輯器 同樣免費(fèi)
分別建立三個(gè)文件 html css js
第一個(gè)是html結(jié)構(gòu)文件：命名為 index.html 代表首頁。
第二個(gè)是css樣式文件：命名為wp_style.css和pc_style.css，兩個(gè)文件，因?yàn)樯婕暗诫娔X端運(yùn)行和手機(jī)端運(yùn)行。
第三個(gè)是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年春節(jié)倒計(jì)時(shí)</title>
</head>
<body>
<div class="container">
<h2><span id="title">癸卯兔年</span>距離2023年春節(jié)還有</h2>
<!-- <h3><span id="title">距離下一年春節(jié)還有</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: '時(shí)';
}
.countdown #minute:before {
content: '分';
}
.countdown #second:before {
content: '秒';
}
}這是css樣式的代碼：手機(jī)端
* {
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: '時(shí)';
}
.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 = '節(jié)';
document.getElementById('minute').innerText = '快';
document.getElementById('second').innerText = '樂';
}
var time = setInterval(() => {
show_runtime();
if (stop === true) {
newyear();
clearInterval(time);
}
}, 1000);
window.onload = downTime;這是從代碼編輯器上運(yùn)行瀏覽器
在PC瀏覽器上運(yùn)行 倒計(jì)時(shí)代碼 效果
手機(jī)瀏覽器上運(yùn)行倒計(jì)時(shí)代碼的效果
好了，一個(gè)簡(jiǎn)單的小案列就展示到這，喜歡的同學(xué)們可以動(dòng)手試一下，不懂的同學(xué)可以在我的視頻課程中去學(xué)習(xí)，希望能夠幫到您們，新的一年相遇就是緣分，很高興認(rèn)識(shí)你們，祝愿您們新的一年里順順利利，好事連連！！！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
