如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、跨域科普
跨域，即跨站HTTP請求(Cross-site HTTP request)，指發起請求的資源所在域不同于請求指向資源所在域的HTTP請求。
二、如何產生跨域
當使用前后端分離，后端主導的開發方式進行前后端協作開發時，常常有如下情景：
a、后端開發完畢在服務器上進行部署并給前端API文檔。
三、解決方案
1、JQuery+ajax+jsonp 跨域訪問
下面給出例子：
html 前端代碼：
服務器端：
2、通過注解的方式允許跨域
在Controller類或其方法上加@CrossOrigin注解，來使之支持跨域。
其中origins為CrossOrigin的默認參數，即跨域來源，*即任何來源，也可以是其他域名。即可以以以下形式：
該注解用于方法上，寫法相同，處理時，SpringMVC會對類上標簽和方法上標簽進行合并。
3、通過配置文件的方式允許跨域
在web.xml中添加如下配置：
b、前端在本地進行開發并向遠程服務器上部署的后端發送請求。
c、在這種開發過程中，如果前端想要一邊開發一邊測試接口，就需要使用跨域的方式。
[html] view plain copy
[java] view plain copy
[java] view plain copy
[java] view plain copy
使用這個Filter即可讓整個服務器全局允許跨域。
[html] view plain copy
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在用2.x開發時有的地方的顏色樣式是通過添加 color="primary" 屬性的形式設置的，但是升級3.x之后這種方式除了一些自帶的color屬性的組件、標簽（eg: ）可以生效，其他的都失效了。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
XML 不是 HTML 的替代。
XML 和 HTML 為不同的目的而設計：
HTML 旨在顯示信息，而 XML 旨在傳輸信息
xml的用途:
XML 簡化數據共享
XML 簡化數據傳輸
<?xml version="1.0" encoding="UTF-8"?> 聲明
以及根元素 子元素 以及定義根元素結尾
如例
聲明
<?xml version="1.0" encoding="UTF-8"?>
根元素
<note>
子元素
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
定義根元素結尾
命名的規范
在 Windows 應用程序中，換行通常以一對字符來存儲：回車符（CR）和換行符（LF）。
在 Unix 和 Mac OSX 中，使用 LF 來存儲新行。
在舊的 Mac 系統中，使用 CR 來存儲新行。
XML 以 LF 存儲換行。
什么是xml, xml有什么作用？
XML 是獨立于軟件和硬件的信息傳輸工具
XML 和 HTML 之間的差異
XML 把數據從 HTML 分離
XML 簡化平臺變更
XML 使您的數據更有用
XML 用于創建新的互聯網語言
所有的 XML 元素都必須有一個關閉標簽
XML 標簽對大小寫敏感、
XML 必須正確嵌套
XML 屬性值必須加引號
實體引用
XML 以 LF 存儲換行
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
下載地址：https://v3.bootcss.com/
1. 下載Bootstrap
進入后下載這個標題的Bootstrap
下載完成后，將所需的css,js復制到工程中即可
2. 拷貝官方的模塊文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 頁面添加組件
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后將二者結合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的結果如下：
Left Middle Right
至此你就可以簡單的用前端框架做出美觀的界面了！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
彈性布局（Flexbox）確實為我們構建復雜、靈活的布局帶來了很大的便利，但是它的兼容性確實讓人很頭痛，下面是我遇到的一個問題：
理想效果：
IE11效果：
html大概結構：
這里大致說一下css，input-container寬高沒設死，由input決定，并設置position: relative;相對定位，并采用display: flex;彈性布局。tooltip設置絕對定位，通過top調整垂直位置，由input-container的彈性布局屬性設置水平居中（是不是覺得我很作死，為什么不直接用絕對定位就把垂直水平都搞定了。哈哈，一切源于一顆裝B+傻B的心，不過，能實際體會一下flexbox帶來的問題，我覺得也挺好的）。
結果在chrome下正常，IE11下就成上圖那樣了，我上MDN Web看了一下，說彈性布局是支持IE11的（下圖），但是從上圖來看，IE下垂直方向是對的，但是水平方向卻不對，說明flexbox還是沒被支持，我也嘗試著添加了各種前綴，還是不行。
[html] view plain copy
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
浮動是什么？
浮動元素會脫離文檔流進行左浮或者右浮，直到碰到父級元素或者其他的浮動元素。
為什么清除浮動：浮動會導致父元素高度坍塌，因為浮動脫離文檔流，浮動以后不占文檔流的位置，撐開的父元素高度肯定會坍塌。
清除浮動的八種方法：
1、父級div給出固定的高度。手動定義height，這樣就解決了父級元素獲取不到高度的問題。
優點：代碼量少，簡單容易掌握。
缺點：只適合高度固定的布局，如果高度和父級div不同會出現問題。
2、overflow，設置overflow：hidden。
優點：代碼少，瀏覽器支持。
缺點：會把超出的部分隱藏起來，而且不能配合position使用
3、額外標簽，添加一個新的標簽，如div，或者br，并且設置標簽的屬性clear：both；清除浮動，讓父級能自動獲得高度。
優點：代碼少，瀏覽器支持，不會各種問題。
缺點：會有很多空的div或者br。
4、使用單偽類after和zoom，使用方法：
.clearfloat:after{
content:"";//設置內容為空
height:0;//高度為0
line-height:0;//行高為0
display:block;//將文本轉為塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
}
.clearfloat{
zoom:1;為了兼容IE
}
優點：瀏覽器支持好，大型的瀏覽器都在使用，建議使用。
缺點：代碼多，需要after和zoom都要使用才能兼容主流的瀏覽器。
5、雙偽類清除浮動。使用方法：
.clearfloat:before,.clearfloatafter {
content: "";
display: block;
clear: both;
}
.clearfloat {
zoom: 1;
}
缺點：不嚴謹不建議使用
6、父級div跟著浮動，所有代碼一起浮動就會形成一個整體，
缺點：會產生新的問題，不建議使用。
7、父級定義display：table；將div屬性變成的表格。
缺點：產生新的問題，而且影響布局。
8、overflow：auto；需要設置width，不設置height，瀏覽器會自動檢測浮動區的高度。
缺點：容易生成滾動條。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.vue的生命周期，主要的介紹官網（https://cn.vuejs.org/v2/api/）上都有。
主要說的是created和mounted。之前在寫項目的過程中，需要對DOM節點進行操作（但是在vue里面盡量不要獲取節點進行操作。vue主要是對數據進行操作），在created里面這些操作并不能實現，但是在mounted里面是可以的。
主要原因就是：created是vm實例已經創建但是未完成掛載，而mounted已經部分完成掛載，這么說的原因是，mounted不承諾所有的子組件都會被掛載，如果你希望等到的是整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉mounted.
$nextTick是下次DOM更新循環結束之后執行的回調函數。
2.vue里點擊按鈕，彈框的實現。
通過在父組件上綁定一個show，type為boolean，在子組件用props接收傳過來的show值，show值為true時彈出框顯示，false時不顯示。
父組件：
子組件：
3.v-show與v-if的區別？
v-if與v-show都屬于條件渲染，意思就是根據不同的條件使用不同的模板。
在vue中，v-show只是簡單的修改了樣式，DOM節點是真實存在的，只是隱藏了。
v-if是真實的條件渲染，值為false是不編譯不渲染，當值為true時，才開始編譯。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
下載地址：https://v3.bootcss.com/
1. 下載Bootstrap
進入后下載這個標題的Bootstrap
下載完成后，將所需的css,js復制到工程中即可
2. 拷貝官方的模塊文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 頁面添加組件
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后將二者結合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的結果如下：
Left Middle Right
至此你就可以簡單的用前端框架做出美觀的界面了！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
