最近寫小程序,但是小程序的接口得通過https的形式訪問,所以用nginx轉發了一下。想到Google搜索引擎會提高https網站的權重,索性把我的網站改造成同時支持http和https了。看效果
http形式訪問
https形式訪問
我是用LET’S ENCRYPT來生成證書的,這個應該是用的最多的一個工具,也很方便。
我直接參考了官方文檔上關于在CentOS 7上用nginx來讓網站支持https的教程
https://certbot.eff.org/lets-encrypt/centosrhel7-nginx
1.下載
sudo yum install certbot python2-certbot-nginx
2.執行命令
默認修改/usr/local/nginx/conf目錄下的nginx.conf文件
certbot --nginx -d www.erlie.cc
如果不在這個目錄可以用–nginx-server-root這個參數來指定
certbot --nginx --nginx-server-root=/yourpath -d www.erlie.cc
如果要為多個域名生成的話
-d 域名1 -d 域名2
或者每次指定一個,執行多次
過程中會有2個選項1和2
如果選 1,則通過 HTTP 和 HTTPS 都可以訪問。
如果選 2,則所有通過 HTTP 來的請求,都會被 301 重定向到 HTTPS
中途中可能會遇到各種環境問題,Google解決即可。
我說一個我遇到的坑,我原來編譯的時候沒有選擇SSL module,所以我得重新編譯一下,編譯完成之后我是用如下命令重啟的
nginx -s reload
結果https訪問一直有問題,后來我才意識到。sbin目錄下重新生成的nginx得重啟才能生效。
nginx -s reload只是熱部署配置文件,二進制文件nginx并不生效
此時http://www.erlie.cc和https://www.erlie.cc就都可以訪問了
server {
listen 80;
server_name www.erlie.cc;
#charset koi8-r;
access_log /usr/local/nginx/logs/access.log combined;
location=/ {
root /product/new-blog-fe/dist/view;
index index.html;
}
location ~ .*\.html$ {
root /product/new-blog-fe/dist/view;
index index.html;
}
location / {
proxy_pass http://127.0.0.1:8080/;
}
location ~ .*\.(gif|jpeg|png|bmp|swf|flv|ico)$ {
root /product/new-blog-fe;
if (-f $request_filename) {
expires 1d;
break;
}
}
location ~ .*\.(js|css)?$ {
root /product/new-blog-fe;
if (-f $request_filename) {
expires 1d;
break;
}
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location=/50x.html {
root html;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/www.erlie.cc/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/www.erlie.cc/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
最后面的5行就是前面的命令自動幫你生成的,非常方便,都不用自己配置。
可以看到我把接口的請求都轉發到本地http://127.0.0.1:8080/,你應該猜到了這是一個Spring Boot項目
為了讓前端在訪客通過http方式訪問的時候調用http接口。通過https訪問的時候調用https接口,我是這樣做的
nb.js
var conf={
serverHot : window.location.origin
};
var _nb={
request: function (param) {
var _this=this;
$.ajax({
type : param.method || 'get',
url : param.url || '',
dataType : param.type || 'json',
data : param.data || '',
xhrFields : {withCredentials: true},
crossDomain: true,
contentType: param.contentType || 'application/x-www-form-urlencoded;charset=UTF-8',
success: function (res) {
typeof param.success==='function' && param.success(res.data, res.msg);
},
error: function (err) {
typeof param.error==='function' && param.error(err.statusText);
}
})
},
// 獲取服務器地址
getServerUrl : function(path) {
return conf.serverHot + path;
}
}
module.exports=_nb;
123456789101112131415161718192021222324252627282930
window.location.origin為拿到https://www.erlie.cc類似這樣的請求地址,可以在瀏覽器自己試一下
user-service.js請求用戶相關的接口
var _nb=require('util/nb.js');
var _user={
// 用戶登錄
login : function(userInfo, resolve, reject){
_nb.request({
url : _nb.getServerUrl('/user/login'),
data : userInfo,
method : 'POST',
success : resolve,
error : reject
});
}
}
module.exports=_user;
123456789101112131415
userInfo為請求參數
resolve為調用成功后執行的函數
reject為調用失敗后執行的函數
Let’s Encrypt 的證書90天就過期了,所以,你還要設置上自動化的更新腳本,最容易的莫過于使用 crontab 了。使用 crontab -e 命令加入如下的定時作業(每個月都強制更新一下)輸入
0 0 * * * certbot renew
鑒于很多人問我要付費專欄pdf版本,因為專欄不能在電腦閱讀,索性直接開源了,希望能幫助到各位小伙伴
免費領取
免費領取
免費領取
重要的事情說三遍。點擊我的頭像私信專欄即可
如何學習
SEO搜索引擎優化
規范:在<style></style>中寫CSS代碼
CSS的注釋是/**/
選擇器 {
聲明1;
聲明2;
}
在CSS文件里不用寫<style>標簽
CSS的優勢:
作用:選擇頁面上的某一個或者某一類元素
偽類:就是有一些條件
1.選擇第一個子元素
ul li:first-child {
}
2.選擇最后一個子元素
ul li:last-child {
}
3.選擇當前元素的父級元素的子元素的第一個,且是p,在本例中。這個是按照類型進行選擇
p:nth-child(1) {
}
4.選中父元素下的p元素的第二個,這個是按照順序選擇
p:nth-of-type(1) {
}
屬性選擇器的格式
1.屬性名:存在id屬性的元素 a[id]{
}
2.屬性名=屬性值:a[id=first]{
}
注意:=是絕對等于 *=是包含這個元素
3.a中href中以http開頭的 a[href^=http]{
}
注意:可以使用正則表達式
span標簽:重點要突出的字使用span標簽括起來
1.字體 font-family:字體1, 字體2,...;
2.字體大小 font-size:20px;
3.字體粗細 font-wigth:bold或者使用數字最大是900;
4.字體的顏色 color:顏色;
5.字體風格 font-style:italic;
綜合寫法:
font:字體粗細, 字體大小/字體行高, 字體, 字體顏色, 字體的;
1. 顏色 color
2. 文本對齊方式 text-slign:center;
3. 首行縮進 text-indent:2em;//1em代表一個字符
4. 行高 line-height:200px;行高和塊的高度一致,就可以上下居中
5. 下劃線 text-decoration: underline;
6. 中劃線 text-decoration: line-through;
7. 上劃線 text-decoration: overline;
8. 超鏈接偽類
a{
默認顏色
}
a:hover {
鼠標觸及的顏色
}
a:active {
鼠標點擊未釋放的顏色
}
9. 文本陰影 text-shadow:顏色 水平偏移 垂直偏移 模糊半徑;
<style>
li {
list-style:nonoe; //列表去掉點
}
</style>
背景圖片
background-image:url("path");
默認是平鋪的
background-repeat: ;
background-position:x y;
綜合寫法:
background:背景顏色 url("") x方向位置 y方向位置 平鋪
背景顏色漸變
<style>
form{
border: 1px red solid;
}
</style>
綜合寫法:
margin:上 下 左 右;
外邊距的妙用:居中元素
margin:0 auto;居中 前提:外面的元素是個塊元素,塊元素有固定的寬度
內邊距一樣
盒子的計算方式,你這個元素到底多大?
元素的大小=margin +border + 內容的寬度
border-radius: 左上 右上 右下 左下;
box-shadow:陰影樣子, x偏移量, y偏移量, 模糊半徑, 陰影顏色;
自上而下的排布
行內元素可以被包含在塊級元素中,反之不可以
1.浮動:會使元素向左或向右移動,其周圍的元素也會重新排列。
元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動,下面的文本流將環繞在它左邊:
2.相鄰的浮動元素:如果你把幾個浮動的元素放到一起,如果有空間的話,它們將彼此相鄰。
3.清除浮動:元素浮動之后,周圍的元素會重新排列,為了避免這種情況,使用 clear 屬性。clear 屬性指定元素兩側不能出現浮動元素。這樣既有浮動的效果,也有塊元素的效果
clear:right;右側不允許有浮動
clear:left;左側不允許有浮動
clear:both;兩側都不允許有浮動
float:right;右浮動
float:left;左浮動
浮動后,元素不在父級元素里
解決方案:
相對于自己原來的位置,進行偏移
position: relative;
top: -20px;
botom: 20px;
left: 20px;
right: 20px;
相對定位的話,他原來的位置會被保留,不會脫離標準文檔流
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
絕對定位后,他不在文檔標準流,原來的位置不保留
position: fixed;
top: 10px;
bottom: 10px;
left: 20 px;
right: 20px;
相對于瀏覽器的位置,固定不動
就是把圖層置頂、置地
opacity:0.5;設置透明度
filter:alpha(opacity=0.5);
@keyframes規則是創建動畫,規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式
示例:
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
使用@keyframes創建動畫,把他綁定到一個選擇器上,否則動畫不會有效果,指定至少把這兩個CSS3的動畫屬性綁定向一個選擇器:
1.規定動畫名稱
2.規定動畫的時長 不指定時長,動畫無效,因為默認的時長為0
示例:
把myfirst動畫綁定到div元素上,動畫時長5秒
div {
animation: myfirst 5s;
}
屬性 | 描述 | CSS |
@keyframes | 規定動畫。 | 3 |
animation | 所有動畫屬性的簡寫屬性。 | 3 |
animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 |
animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | 3 |
animation-fill-mode | 規定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應用到元素的樣式。 | 3 |
animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | 3 |
animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 |
animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 |
CSS3中,我們為了添加某種效果可以從一種樣式轉變到另一個的時候
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點,必須規定兩項內容:
示例:
div {
transition: width 2s;
}
div {
transition: width 2s, height 2s transfrom 2s;
}
屬性 | 描述 | CSS |
transition | 簡寫屬性,用于在一個屬性中設置四個過渡屬性。 | 3 |
transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。
轉換的效果是讓某個元素改變形狀,大小和位置。
1.translate(): translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動。
示例:
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
2.rotate():在一個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉。
示例:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
3.scale():該元素增加或減少的大小,取決于寬度(X軸)和高度(Y軸)的參數
示例:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 標準語法 */
4.skew(): 包含兩個參數值,分別表示X軸和Y軸傾斜的角度,如果第二個參數為空,則默認為0,參數為負表示向相反方向傾斜。
示例:
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
1.rotateX():圍繞其在一個給定度數X軸旋轉的元素。
示例:
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 與 Chrome */
}
2.rotateY():圍繞其在一個給定度數Y軸旋轉的元素。
示例:
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}
3.轉換屬性
屬性 | 描述 | CSS |
transform | 向元素應用 2D 或 3D 轉換。 | 3 |
transform-origin | 允許你改變被轉換元素的位置。 | 3 |
transform-style | 規定被嵌套元素如何在 3D 空間中顯示。 | 3 |
perspective | 規定 3D 元素的透視效果。 | 3 |
perspective-origin | 規定 3D 元素的底部位置。 | 3 |
backface-visibility | 定義元素在不面對屏幕時是否可見。 | 3 |
序列 | 術語 |
1 | 容器和項目是容器的子元素,容器為父元素(container / item) |
2 | 主軸與交叉軸(main-axis / cross-arxis) |
3 | 起始線與結束線(flex-start / flex-end) |
序號 | 屬性 | 描述 |
1 | flex-direction | 設置容器中的主軸方向:行/水平方向,列/垂直方向 |
2 | flex-wrap | 是否允許創建多行容器,即flex項目一行排列不下時,是否允許換行 |
3 | flex-flow | 簡化flex-direction和flex-wrap屬性 |
4 | justify-content | 設置flex項目在主軸上的對齊方式 |
5 | align-items | 設置flex項目在交叉軸上的對齊方式 |
6 | align-content | 多行容器中,項目在交叉軸上的對齊方式 |
序號 | 屬性 | 描述 |
1 | flex-basis | 項目寬度:項目分配主軸剩余空間之前,項目所占據的主軸空間高度 |
2 | flex-grow | 項目的寬度擴展:將主軸上的剩余空間按比例分配給指定項目 |
3 | flex-shrink | 項目的寬度收縮:將項目上多出空間按比例在項目間進行縮減 |
4 | flex | 上面三個屬性的簡化縮寫flex: flex-grow flex-shrink flex-basis |
5 | align-self | 單獨定義某個項目在交叉軸上的對齊方式 |
6 | order | 自定義項目在主軸上的排列順序,默認為0書寫順序,值越小位置越靠前 |
序號 | 屬性 | 描述 |
1 | flex-direction | 設置主軸方向 |
2 | flex-wrap | 設置多行容器 |
3 | flex-flow | flex-direction和flex-wrap縮寫 |
1.flex-direction屬性值
序號 | 屬性 | 描述 |
1 | row | 默認:主軸為水平方向(從左到右) |
2 | row-reverse | 主軸為水平方向(從右到左反序) |
3 | column | 設置主軸為垂直方向(從上到下) |
4 | column-reverse | 設置主軸為垂直方向(從下到上) |
2.flex-wrap屬性值
序號 | 屬性 | 描述 |
1 | nowrap | 默認:不換行,此時忽略項目尺寸 |
2 | wrap | 允許換行此時項目尺寸有效,即允許創建多行容器 |
3.flex-flow屬性值
flex-flow: 主軸方向 多行容器
主軸上要有剩余空間對齊才有效
序號 | 屬性值 | 描述 |
1 | flex-start | 默認:所有項目與主軸起始線對齊 |
2 | flex-end | 所有項目與主軸終止線對齊 |
3 | center | 所有項目與主軸中間線對齊,居中對齊 |
4 | space-between | 兩端對齊:剩余空間在頭尾項目之外的項目平均分配 |
5 | spcae-around | 分散對齊:剩余空間在每個項目兩側平均分配,每個項目兩邊的空間一樣 |
6 | space-evenly | 平均對齊:剩余空間在每個項目之間平均分配 |
序號 | 屬性值 | 描述 |
1 | flex-start | 默認所有項目與交叉軸起始線對齊 |
2 | flex-end | 所有項目與交叉軸終止線對齊 |
3 | center | 所有項目與交叉軸中間線對齊,居中對齊 |
注意
屬性:align-content
序號 | 屬性值 | 描述 |
1 | stretch | 默認:項目拉伸占據整個交叉軸 |
2 | flex-start | 所有項目與交叉軸起始線(頂部)對齊 |
3 | flex-end | 所有項目與交叉軸終止線對齊 |
4 | center | 所有項目與交叉軸中間線對齊:居中對齊 |
5 | space-between | 兩端對齊:剩余空間在頭尾項目之外的項目間平均分配 |
6 | space-around | 分散對齊:剩余空間在每個項目兩側平均分配 |
7 | space-evenly | 平均分配:剩余空間在每個項目之間平均分配 |
注意:多行容器中,交叉軸上可能會有多個項目,剩余空間在項目之間分配才有意義
多行容器也只是只有一個主軸和一個交叉軸,只是在主軸上放不下了換行形成的
屬性:align-self
序號 | 屬性值 | 描述 |
1 | auto | 默認值:auto,繼承align-items屬性值 |
2 | flex-start | 與交叉軸起始線對齊 |
3 | flex-end | 與交叉軸終止線對齊 |
4 | center | 與交叉軸中間線對齊:居中對齊 |
5 | stretch | 在交叉軸方向上拉伸 |
6 | baseline | 與基線對齊 |
用來調整每個項目在主軸上排列順序
屬性值為0,默認值按書寫順序顯式,屬性值為值越大越靠后顯示
flex-grow屬性
flex-shrink屬性
flex-basis屬性
優先級:項目大小<flex-basis<min-width/height
網站添加了https證書后,當http方式訪問網站時就會報404錯誤,所以需要做http到https的強制跳轉設置.
---------------一、采用nginx的rewrite方法---------------------
下面是將所有的http請求通過rewrite重寫到https上。
例如將所有的www.nihao.com域名的http訪問強制跳轉到https。
下面配置均可以實現:
server {
listen 80;
server_name www.nihao.com;
index index.html index.php index.htm;
access_log /usr/local/nginx/logs/8080-access.log main;
error_log /usr/local/nginx/logs/8080-error.log;
#重點在此
if ($host ~* "^nihao.com$") {
rewrite ^/(.*)$ https://www.nihao.com/ permanent;
}
location ~ / {
root html;
index index.html index.php index.htm;
}
}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。