整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
JQuery 是將 JS 的一些代碼塊進行封裝，方便使用。
1.JQ的引入
（1）link 導入
先進入 https://www.bootcdn.cn/ 網站進行查找，找到后復制到一個 js 中，進行引用。
（2）直接復制標簽
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>1. JQ 獲取元素
$('.p1').eq(1).text('今天天氣真好')
$('.p1').html('<h>天氣真熱</h>')2.JS 轉 JQ
$(ap1).text('天好冷')3. JQ 轉 JS
var ap3=$('.p1')
ap3[0].innerText='金地是'
ap3.get(1).innerText='多少金幣' //get() 傳下標4. JQ JS 都可用
$('ul li').each(function (){
console.log($(this).text());
// console.log(this.innerText);
console.log($(this).index()); //jq 獲取下標
})<button>添加</button>
<button>刪除</button>1. 添加 class
//添加class
$("button").eq(0).click(function (){
$("div").addClass("div1")
})2. 刪除 class
（1）removeClass
//刪除class
$("button").eq(1).click(function (){
$("div").removeClass("div1")
})（2）removeAttr
//刪除屬性和屬性值
$("button").eq(1).click(function (){
$("div").removeAttr("class")3. 修改 class
（1）toggleclass
//無則增 有則增
$("button").eq(0).click(function (){
$("div").toggleClass("div1")（2）attr
//無則增 有則改
$("button").eq(0).click(function (){
$("div").attr("class","div1")
$("div").attr("class","div2")
})4.獲取 value
$("input").eq(0).val('666');1. 獲取盒子寬高
（1）獲取寬
console.log($("div").width());（2）獲取內邊框加寬
$("div").innerWidth()（3）獲取內邊框，邊框外邊距和寬的寬度
$("div").outerWidth()2. JQ 修改 CSS
// jq修改css
$("div").css("background","blue")
$("div").css({
"background":"pink",
"width":"150px"
})3.定位元素（父級元素一定要有定位）
$(".div2").position()4.定位瀏覽器窗口
$(".div2").offset()1.單擊事件
$("div").click(function (){
console.log(1);
})2.雙擊事件
$("div").dblclick(function (){
console.log(2);
})3.劃入事件
$("div").mouseenter(function (){
console.log(3);
})4.劃出事件
$("div").mouseout(function (){
console.log(4);
})5.劃入劃出事件
$("div").hover(
function (){
console.log(3);
},function (){
console.log(5);
}
)6.綁定事件
$("button").click(function (){
$("p").on("click",function (){
$("p").css('background','red')
})
})7.綁定多個事件
$("p").on({
"mouseenter":function (){
$(this).css('background','yellow')
},
"mouseout":function (){
$(this).css('background','blue')
}
})8.清除事件
$("button").click(function (){
$("p").off()
})1. 隱藏
$("button").eq(0).click(function (){
// $("div").hide(1000)
$("div").slideUp(1000)
})2.顯示
$("button").eq(1).click(function (){
$("div").show(1000)
// $("div").slideDown(1000)
})3.取反
$("button").eq(2).click(function (){
$("div").slideToggle(1000)
// $("div").slideDown(1000)
})4.淡出事件
$("button").eq(3).click(function (){
$("div").fadeOut(1000)
})5.淡入事件
$("button").eq(4).click(function (){
$("div").fadeIn(1000)
})6.淡入淡出取反事件
$("button").eq(5).click(function (){
$("div").fadeToggle(1000)
})7.動畫效果
$("button").eq(6).click(function (){
$("div").delay(100).animate({
"width":"130px",
"height":"130px",
"top":"50px",
"left":"20px",
})
})8.停止
$("button").eq(7).click(function (){
$("div").stop(1000)
})附（今日份學習）：
比Python，JavaScript才是更適合寫爬蟲的語言。原因有如下三個方面：
一、任務：爬取用戶在Github上的repo信息
通過實例的方式學習爬蟲是最好的方法，先定一個小目標：爬取github repo信息。入口URL如下，我們只需要一直點擊next按鈕就能夠遍歷到用戶的所有repo。
https://github.com/{{username}}?tab=repositories
獲取repo之后，可以做什么？
二、爬蟲雙股劍：axios和jQuery
axios是JavaScript中很常用的異步網絡請求庫，相比jQuery，它更輕量、更專業。既能夠用于瀏覽器端，也可以用于Node。它的語法風格是promise形式的。在本任務中，只需要了解如下用法就足夠了：
axios.get(url).then((resp)=> {
請求成功，處理resp.data中的html數據
}).catch((err)=> {
請求失敗，錯誤處理
})
請求之后需要處理回復結果，處理回復結果的庫當然是用jQuery。實際上，我們有更好的選擇：cheerio。
在node下，使用jQuery，需要使用jsdom庫模擬一個window對象，這種方法效率較低，四個字形容就是：笨重穩妥。
如下代碼使用jQuery解析haha.html文件
fs=require("fs")
jquery=require('jquery')
jsdom=require('jsdom') //fs.readFileSync()返回結果是一個buffer，相當于byte[]
html=fs.readFileSync('haha.html').toString('utf8')
dom=new jsdom.JSDOM(html)
$=jquery(dom.window) console.log($('h1'))
cheerio只實現了jQuery中的DOM部分，相當于jQuery的一個子集。cheerio的語法和jQuery完全一致，在使用cheerio時，幾乎感覺不到它和jQuery的差異。在解析HTML方面，毫無疑問，cheerio是更好的選擇。如下代碼使用cheerio解析haha.html文件。
cheerio=require('cheerio')
html=require('fs').readFileSync("haha.html").toString('utf8')
$=cheerio.load(html)
console.log($('h1'))
只需20余行，便可實現簡單的github爬蟲，此爬蟲只爬取了一頁repo列表。
var axios=require("axios")
var cheerio=require("cheerio")
axios.get("https://github.com/weiyinfu?tab=repositories").then(resp=> {
var $=cheerio.load(resp.data)
var lis=$("#user-repositories-list li")
var repos=[]
for (var i=0; i < lis.length; i++) {
var li=lis.eq(i)
var repo={
repoName: li.find("h3").text().trim(),
repoUrl: li.find("h3 a").attr("href").trim(),
repoDesc: li.find("p").text().trim(),
language: li.find("[itemprop=programmingLanguage]").text().trim(),
star: li.find(".muted-link.mr-3").eq(0).text().trim(),
fork: li.find(".muted-link.mr-3").eq(1).text().trim(),
forkedFrom: li.find(".f6.text-gray.mb-1 a").text().trim()
}
repos.push(repo)
}
console.log(repos)
})
三、更豐富的功能
爬蟲不是目的，而是達成目的的一種手段。獲取數據也不是目的，從數據中提取統計信息并呈現給人才是最終目的。
在github爬蟲的基礎上，我們可以擴展出更加豐富的功能：使用echarts等圖表展示結果。
要想讓更多人使用此爬蟲工具獲取自己的github統計信息，就需要將做成一個網站的形式，通過搜索頁面輸入用戶名，啟動爬蟲立即爬取github信息，然后使用echarts進行統計展示。網站肯定也要用js作為后端，這樣才能和js爬蟲無縫銜接，不然還要考慮跨語言調用。js后端有兩大web框架express和koa，二者API非常相似，并無優劣之分，但express更加流行。
如上設計有一處用戶體驗不佳的地方：當啟動爬蟲爬取github信息時，用戶可能需要等待好幾秒，這個過程不能讓用戶干等著。一種解決思路是：讓用戶看到爬蟲爬取的進度或者爬取過程。可以通過websocket向用戶推送爬取過程信息并在前端進行展示。展示時，使用類似控制臺的界面進行展示。
如何存儲爬取到的數據呢？使用MongoDB或者文件都可以，最好實現兩種存儲方式，讓系統的存儲方式變得可配置。使用MongoDB時，用到js中的連接池框架generic-pool。
整個項目用到的庫包括：
試用地址：
https://weiyinfu.cn/githubstatistic/search.html?
案例地址：https://github.com/weiyinfu/GithubStatistic
原文鏈接：https://zhuanlan.zhihu.com/p/53763115
者：小不點啊
來源：www.cnblogs.com/leeSmall/p/9356535.html
一、Nginx Rewrite 規則
Rewrite規則含義就是某個URL重寫成特定的URL（類似于Redirect），從某種意義上說為了美觀或者對搜索引擎友好，提高收錄量及排名等。
語法：
rewrite <regex> <replacement> [flag]
關鍵字 || 正則 || 替代內容 || flag標記
Rewrite規則的flag標記主要有以下幾種：
last和break用來實現URL重寫，瀏覽器地址欄URL地址不變
a) 例如用戶訪問www.dbspread.com，想直接跳轉到網站下面的某個頁面，www.dbspread.com/new.index.html如何來實現呢？我們可以使用Nginx Rewrite 來實現這個需求，具體如下：在server中加入如下語句即可：
效果圖如下：
rewrite ^/$ http://www.dbspread.com/new.index.html permanent;
對應如下語法：
rewrite <regex> <replacement> [flag];
關鍵字 正則 替代內容 flag標記正則表達式說明：
*代表前面0或更多個字符 +代表前面1或更多個字符
？代表前面0或1個字符 ^代表字符串的開始位置
$代表字符串結束的位置 。為通配符，代表任何字符b)例如多個域名跳轉到同一個域名，nginx rewrite規則寫法如下：
格式：
rewrite <regex> <replacement> [flag];
關鍵字 || 正則 || 替代內容 || flag標記
說明：
比如http://www.dbspread.com/download/av123.rmvb 這個視頻下載地址被其他網站引用，比如在www.test.com的index.html引用download/av123.rmvb就叫盜鏈，我們要禁止這種引用就叫做防盜鏈
在nginx的nginx.conf的server里面配置如下代碼
三、Nginx 動靜分離
Nginx動靜分離是讓動態網站里的動態網頁根據一定規則把不變的資源和經常變的資源區分開來，動靜資源做好了拆分以后，我們就可以根據靜態資源的特點將其做緩存操作，這就是網站靜態化處理的核心思路。
1). WEB項目開發時要注意，將靜態資源盡量放在一個static文件夾2). 將static靜態資源文件夾放到Nginx可以取到的位置3). 頁面要建立全局變量路徑，方便修改路徑4). 修改nginx.conf的location， 匹配靜態資源請求
body {
margin: 10px 20px;
text-align: center;
font-family: Arial, sans-serif;
background-color: red;
}4.4 在nginx的nginx.conf中server節點新增靜態資源分離的配置
對于Nginx基礎配置，推薦之前的：后端實踐：Nginx日志配置（超詳細）
4.5 訪問頁面查看效果
Keepalived軟件起初是專為LVS負載均衡軟件設計的，用來管理并監控LVS集群系統中各個服務節點的狀態，后來又加入了可以實現高可用的VRRP (Virtual Router Redundancy Protocol ,虛擬路由器冗余協議）功能。因此，Keepalived除了能夠管理LVS軟件外，還可以作為其他服務（例如：Nginx、Haproxy、MySQL等）的高可用解決方案軟件
管理LVS負載均衡軟件實現LVS集群節點的健康檢查作為系統網絡服務的高可用性（failover）
Keepalived高可用服務之間的故障切換轉移，是通過 VRRP 來實現的。在 Keepalived服務正常工作時，主 Master節點會不斷地向備節點發送（多播的方式）心跳消息，用以告訴備Backup節點自己還活著，當主 Master節點發生故障時，就無法發送心跳消息，備節點也就因此無法繼續檢測到來自主 Master節點的心跳了，于是調用自身的接管程序，接管主Master節點的 IP資源及服務。而當主 Master節點恢復時，備Backup節點又會釋放主節點故障時自身接管的IP資源及服務，恢復到原來的備用角色。
說明：keepalived的主從切換和redis的主從切換是不一樣的，keepalived的主節點掛了以后，從節點變為主節點，之前的主節點恢復以后繼續做主節點。redis的主節點掛了以后，重新恢復以后變為從節點
說明：
虛擬ip(VIP):192.168.152.200，對外提供服務的ip，也可稱作浮動ip192.168.152.130：nginx + keepalived master 主192.168.152.129：nginx + keepalived backup 從192.168.152.129：tomcat-8080192.168.152.129：tomcat-8081
環境準備：
centos6、jdk
虛擬ip(VIP):192.168.152.200，對外提供服務的ip，也可稱作浮動ip
192.168.152.130：nginx + keepalived master 主
192.168.152.129：nginx + keepalived backup 從
192.168.152.129：tomcat-8080
192.168.152.129：tomcat-8081
nginx和tomcat的環境準備請查看我的前一篇關于nginx的文章
注：192.168.152.129（keepalived從節點） 與 192.168.152.130（keepalived主節點）先安裝好nginx + keepalived
下載壓縮包：
wget www.keepalived.org/software/keepalived-1.3.5.tar.gz
解壓縮：
tar -zxvf keepalived-1.3.5.tar.gz
進入解壓縮以后的文件目錄：
cd keepalived-1.3.5
編譯安裝：./configure --prefix=/usr/local/keepalived系統提示警告 *** WARNING - this build will not support IPVS with IPv6. Please install libnl/libnl-3 dev libraries to support IPv6 with IPVS.yum -y install libnl libnl-devel再次執行./configure --prefix=/usr/local/keepalived系統提示錯誤 configure: error: libnfnetlink headers missingyum install -y libnfnetlink-devel再次執行./configure --prefix=/usr/local/keepalived
make && make install
到此keepalived安裝完成，但是接下來還有最關鍵的一步，如果這一步沒有做后面啟動keepalived的時候會報找不到配置文件的錯誤
Configuration file '/etc/keepalived/keepalived.conf' is not a regular non-executable file
安裝完成后，進入安裝目錄的etc目錄下，將keepalived相應的配置文件拷貝到系統相應的目錄當中。keepalived啟動時會從/etc/keepalived目錄下查找keepalived.conf配置文件
mkdir /etc/keepalived
cp /usr/local/keepalived/etc/keepalived/keepalived.conf /etc/keepalived
5.3 修改keepalived從節點192.168.152.129的/etc/keepalived/keepalived.conf配置文件
5.4 檢查nginx是否啟動的shell腳本
/usr/local/src/check_nginx_pid.sh
#!/bin/bash
#檢測nginx是否啟動了
A=`ps -C nginx --no-header |wc -l`
if [ $A -eq 0 ];then #如果nginx沒有啟動就啟動nginx
/usr/local/nginx/sbin/nginx #重啟nginx
if [ `ps -C nginx --no-header |wc -l` -eq 0 ];then #nginx重啟失敗，則停掉keepalived服務，進行VIP轉移
killall keepalived
fi
fi5.5 192.168.152.130（keepalived主節點）和 192.168.152.129（keepalived從節點）的nginx的配置文件nginx.conf
user root root; #使用什么用戶啟動NGINX 在運行時使用哪個用戶哪個組
worker_processes 4; #啟動進程數，一般是1或8個，根據你的電腦CPU數，一般8個
worker_cpu_affinity 00000001 00000010 00000100 00001000; #CPU邏輯數——把每個進程分別綁在CPU上面，為每個進程分配一個CPU
#pid /usr/local/nginx/logs/nginx.pid
worker_rlimit_nofile 102400; #一個進程打開的最大文件數目，與NGINX并發連接有關系
#工作模式及連接數上限
events
{
use epoll; #多路復用IO 基于LINUX2.6以上內核，可以大大提高NGINX的性能 uname -a查看內核版本號
worker_connections 102400; #單個worker process最大連接數,其中NGINX最大連接數＝連接數*進程數,一般1GB內存的機器上可以打開的最大數大約是10萬左右
multi_accept on; #盡可能多的接受請求，默認是關閉狀態
}
#處理http請求的一個應用配置段
http
{
#引用mime.types,這個類型定義了很多，當web服務器收到靜態的資源文件請求時，依據請求文件的后綴名在服務器的MIME配置文件中找到對應的MIME #Type，根據MIMETYPE設置并response響應類型（Content-type）
include mime.types;
default_type application/octet-stream; #定義的數據流，有的時候默認類型可以指定為text,這跟我們的網頁發布還是資源下載是有關系的
fastcgi_intercept_errors on; #表示接收fastcgi輸出的http 1.0 response code
charset utf-8;
server_names_hash_bucket_size 128; #保存服務器名字的hash表
#用來緩存請求頭信息的，容量4K，如果header頭信息請求超過了，nginx會直接返回400錯誤，先根據client_header_buffer_size配置的值分配一個buffer，如果##分配的buffer無法容納request_line/request_header，那么就會##再次根據large_client_header_buffers配置的參數分配large_buffer，如果large_buffer還是無#法容納，那么就會返回414（處理request_line）/400（處理request_header）錯誤。
client_header_buffer_size 4k;
large_client_header_buffers 4 32k;
client_max_body_size 300m; #允許客戶端請求的最大單文件字節數 上傳文件時根據需求設置這個參數
#指定NGINX是否調用這個函數來輸出文件，對于普通的文件我們必須設置為ON，如果NGINX專門做為一個下載端的話可以關掉，好處是降低磁盤與網絡的IO處理數及#系統的UPTIME
sendfile on;
#autoindex on;開啟目錄列表訪問，適合下載服務器
tcp_nopush on; #防止網絡阻塞
#非常重要，根據實際情況設置值，超時時間，客戶端到服務端的連接持續有效時間，60秒內可避免重新建立連接，時間也不能設太長，太長的話，若請求數10000##，都占用連接會把服務托死
keepalive_timeout 60;
tcp_nodelay on; #提高數據的實時響應性
client_body_buffer_size 512k; #緩沖區代理緩沖用戶端請求的最大字節數（請求多）
proxy_connect_timeout 5; #nginx跟后端服務器連接超時時間（代理連接超時）
proxy_read_timeout 60; #連接成功后，后端服務器響應時間(代理接收超時)
proxy_send_timeout 5; #后端服務器數據回傳時間(代理發送超時)
proxy_buffer_size 16k; #設置代理服務器（nginx）保存用戶頭信息的緩沖區大小
proxy_buffers 4 64k; #proxy_buffers緩沖區，網頁平均在32k以下的話，這樣設置
proxy_busy_buffers_size 128k; #高負荷下緩沖大小
proxy_temp_file_write_size 128k; #設定緩存文件夾大小，大于這個值，將從upstream服務器傳
gzip on; #NGINX可以壓縮靜態資源，比如我的靜態資源有10M，壓縮后只有2M，那么瀏覽器下載的就少了
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 2; #壓縮級別大小,最小1,最大9.值越小,壓縮后比例越小,CPU處理更快,為1時,原10M壓縮完后8M,但設為9時,壓縮完可能只有2M了。一般設置為2
gzip_types text/plain application/x-javascript text/css application/xml; #壓縮類型:text,js css xml 都會被壓縮
gzip_vary on; #作用是在http響應中增加一行目的是改變反向代理服務器的緩存策略
#日志格式
log_format main '$remote_addr - $remote_user [$time_local] "$request" ' #ip 遠程用戶 當地時間 請求URL
'$status $body_bytes_sent "$http_referer" ' #狀態 發送的大小 響應的頭
'"$http_user_agent" $request_time'; #客戶端使用的瀏覽器 頁面響應的時間
#動態轉發
upstream web1 {
#每個請求按訪問ip的hash結果分配,這樣每個訪客固定訪問一個后端服務器,可以解決session的問題。配置了ip_hash就沒有負載均衡的效果了，每次訪問的都是同一個tomcat
#ip_hash;
#轉發的后端的tomcat服務器,weight表示轉發的權重,越大轉發的次數越多,機器性能不一樣配置的weight值不一樣
server 192.168.152.129:8080 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.152.129:8081 weight=1 max_fails=2 fail_timeout=30s;
}
upstream web2 {
server 192.168.152.129:8090 weight=1 max_fails=2 fail_timeout=30s;
server 192.168.152.129:8091 weight=1 max_fails=2 fail_timeout=30s;
}
server {
listen 80; #監聽80端口
server_name www.dbspread.com; #域名
#rewrite規則
index index.jsp index.html index.htm;
root /usr/local/nginx/html; #定義服務器的默認網站根目錄位置
#重定向
if ($host != 'www.dbspread.com' ){
rewrite ^/(.*)$ http://www.dbspread.com/$1 permanent;
}
#防盜鏈
location ~* \.(rmvb|jpg|png|swf|flv)$ { #rmvb|jpg|png|swf|flv表示對rmvb|jpg|png|swf|flv后綴的文件實行防盜鏈
valid_referers none blocked www.dbspread.com; #表示對www.dbspread.com此域名開通白名單，比如在www.test.com的index.html引用download/av123.rmvb,無效
root html/b;
if ($invalid_referer) { #如果請求不是從www.dbspread.com白名單發出來的請求，直接重定向到403.html這個頁面或者返回403
#rewrite ^/ http://www.dbspread.com/403.html;
return 403;
}
}
#監聽完成以后通過斜桿(/)攔截請求轉發到后端的tomcat服務器
location /
{
#如果后端的服務器返回502、504、執行超時等錯誤，自動將請求轉發到upstream負載均衡池中的另一臺服務器，實現故障轉移。
proxy_next_upstream http_502 http_504 error timeout invalid_header;
proxy_set_header Host $host; #獲取客戶端的主機名存到變量Host里面,從而讓tomcat取到客戶端機器的信息
proxy_set_header X-Real-IP $remote_addr; #獲取客戶端的主機名存到變量X-Real-IP里面,從而讓tomcat取到客戶端機器的信息
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#rewrite ^/$ http://www.dbspread.com/new.index.html permanent;#用戶訪問www.dbspread.com，想直接跳轉到網站下面的某個頁面:www.dbspread.com/new.index.html
proxy_pass http://web1; #跳轉到對應的應用web1
}
# location ~ .*\.(php|jsp|cgi|shtml)?$ #動態分離 ~匹配 以.*結尾（以PHP JSP結尾走這段）
# {
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_pass http://jvm_web2;
# }
#靜態分離 ~匹配 以.*結尾（以html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css結尾走這段），當然不是越久越好，如果有10000個用戶在線，都保存幾個月，系統托跨
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
{
root /var/local/static; #靜態資源存放在nginx的安裝機器上
#proxy_pass http://www.static.com; #靜態資源也可存放在遠程服務器上
expires 30d;
}
#日志級別有[debug|info|notice|warn|error|crit] error_log 級別分為 debug, info, notice, warn, error, crit 默認為crit, 生產環境用error
#crit 記錄的日志最少,而debug記錄的日志最多
access_log /usr/local/logs/web2/access.log main;
error_log /usr/local/logs/web2/error.log crit;
}
}到這一步環境準備已完成，相關的配置也修改完成，下面我們來查看效果
5.6 配置hosts域名映射
192.168.152.200 www.dbspread.com注意：這里192.168.152.200 是keepalived里面virtual_ipaddress配置的虛擬ip
virtual_ipaddress {
192.168.152.200 # 定義虛擬ip(VIP)，可多設，每行一個
}到這一步環境準備已完成，相關的配置也修改完成，下面我們來查看效果
5.7 分別啟動192.168.152.129的兩個tomcat
5.8 分別啟動192.168.152.130（keepalived主節點）和
192.168.152.129（keepalived從節點）的keepalived的
啟動命令：
/usr/local/keepalived/sbin/keepalived
可以看到keepalived和nginx都啟動了
在瀏覽器輸入www.dpspread.com域名訪問
可以看到從節點變為主節點了
在瀏覽器輸入地址www.dpspread.com訪問，可以看到訪問正常
可以看到主節點重新啟動以后變為主節點了
之前變為主節點的從節點又變回從節點了
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
