異常包括的主要關鍵字有try{}catch（）{}finally{} throw和throws五個關鍵字 。
下面我們來細說一下這五個關鍵字分別有什么用。
try catch關鍵字 這兩個關鍵字是連用的
1.如果try塊中的語句正常執行完畢，不會發生異常則catch塊中的語句都將會被忽略。
2.如果try語句塊在執行中遇到異常。并且這個異常與catch中聲明的異常類型相匹配，那么在try塊中其余剩下的代碼都將被忽略。
3.如果try語句塊在執行過程中遇到異常，而拋出的異常在catch塊中沒有被聲明，那么程序立刻退出。
finally關鍵字這個關鍵字中的代碼總能被執行（怎么我都要執行 ）
1.只要try中所有語句正常執行完畢，那么finally塊就會被執行。
2.如果try語句塊在執行過程中碰到異常，無論這種異常能否被catch塊捕獲到，都將執行finally塊中的代碼。
注：try—catch—finally結構中try塊是必需的catch和finally塊為可選，但兩者至少須出現其中之一。
如果catch中存在return，finally也會執行只不過執行的順序有一定差異 ，先執行catch里的代碼塊，之后執行finally里的代碼塊，最后執行return語句。
throw關鍵字拋出異常
throws關鍵字聲明捕捉異常
那么throw和throws有什么區別呢
1.作用不同：throw用于在程序中拋出異常；throws用于聲明在該方法內拋出異常。
2.使用的位置不同：throw位于方法體內部，可以作為單獨語句使用；throws必須跟在方法參數列表的后面，不能單獨使用。
3.內容不同：throw拋出一個異常對象，而且只能有一個；throws后面跟異常類，而且可以跟多個異常類。
知道了這五個關鍵字的用法下面我們來說一下幾個常用的異常代碼：
1.ArithmeticException 試圖除以0。
2.NullpointerException 當程序訪問一個空對象的成員變量或方法，訪問一個空數組的成員時發生。
3.ClassCastException 發生多態后，吐過強制轉換的并不是父類的子類時發生。編譯的時候可以通過，以為編譯的時候并不會檢查類型轉換的問題。
4.ArraylndwxOutOfBoundsException 訪問的元素下標超過數組長度
5.NumberFormatException 數字格式異常。
6.Exception 一般的異常都包括。
轉自：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
ES6中的let和const和解構賦值
什么是ES6?
ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。
為什么要使用ES6?
每一次標準的誕生都意味著語言的完善，功能的加強。js語言本身也有一些令人不滿的地方
1.變量提升特性增加了程序運行的不可預測性 。
變量提升可以簡單看以下代碼了解下:
console.log(a);
var a=1;
//console.log(a)會輸出undefined
這段代碼也可以這樣表示
var a;
console.log(a);
a=10;
//依舊輸出undefined
這就是變量提升!
2.語法過于松散，實現相同的功能，不同的人可以會寫出不同的代碼，閱讀性較低。
所以：ES6 ,目標是使JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。我們沒有理由不去學習ES6。
let關鍵字
ES6中新增的用于聲明變量的關鍵字。主要是替代var。
特征：1.let聲明的變量只在所處的塊級有效，具有塊級作用域！ 在ES6之前JS只有全局作用域和局部作用域。
塊級作用域：通俗來講就是在一對大括號中產生的作用域，塊級作用域中的變量只能在大括號中訪問，在大括號外面是訪問不到的。
可以看以下代碼：
if(true){
let a=10;
console.log(a);//輸出10
}
console.log(a);//報錯提示a沒有定義
{
let b=10;
console.log(b);//輸出10
}
console.log(b);//報錯提示b沒有定義
if(true){
let c=20;
console.log(c)//輸出20
if(true){
let d=30;
console.log(c)//輸出 20
}
console.log(d);//報錯d沒有定義
}
在for循環中也起到作用，根據不同的需求選擇let和var！
例如：
for(var i=0;i<10;i++){}
console.log(i) //輸出10
for(let j=0;j<10;j++){}
console.log(j) //報錯 j沒有定義
好處：在業務邏輯比較復雜的時候，可以放在內層變量覆蓋外層變量！
2.存在let 一開始就會形成封閉的作用域 使用let命名聲明變量前 ，變量不可用，必須先聲明后使用，不存在變量提升
例如:
if(true){
console.log(temp);//報錯
let temp=1;
}`
3.let 不允許重復聲明 在一個作用域內。
例如：
if(true){
let temp;
console.log(temp);//報錯Identifier 'temp' has already been declared
let temp=1;
}
if(true){
var temp=10;
let temp=5;
console.log(temp);//報錯 錯誤和上面一致
}
但是不在一個作用域內可以 例如：
{
let x=10;
console.log(x);//輸出10
}
{
let x=5;
console.log(5);//輸出5
}
const關鍵字
const一般用來聲明常量，聲明一個只讀的常量。
特征：1.一旦聲明其值不能改變必須立即初始化
例如：
const a; //這樣什聲明會直接報錯?。?！
1
這樣聲明沒有初始化會直接報錯！
2.對于對象：存的不是對象的本身， 而是對象的引用， 引用地址 ，地址不變， 對象可拓展！
例如：
const foo={y:10};
foo.x=100;
console.log(foo.x);//輸出100
1
2
3
對象可以擴展
但是對象不能改變
例如：foo={n:1000}; 會報錯！
作用域：
var v1=100;
function f1(){
console.log(v1,v2); //undefined no defined
var v1=110;
let v2=200;
function f2(){
let v3=300;
console.log(v1,v2,v3);//110 200 300
}
f2();
console.log(v1,v2,v3);// 110 200 no defined
}
f1();
console.log(v1,v2,v3);// 100 no defined no defined
可以向外面作用域找 不可以向里面作用域找 內層變量可能會覆蓋外層變量
let和var的本質區別：瀏覽器的頂層對象為window Node的為global，var定義的變量會關聯到頂層對象中，let和const不會！
例如：
var a =100;
console.log(window.a); // 100
let b=100;
console.log(window.b); //undefined
1
2
3
4
如何選擇const和let:數據需要變化用let 數據不需要變化用const
解構賦值：ES6中允許從數組中提值，按照對應位置，對變量賦值，對象也可以實現解構！
例如：
{
let a,b,c;
[a,b]=[1,2];
console.log(a,b,c); //輸出 1 2 undefined
}
{
let a,b,c;
[a,b,...c]=[1,2,3,4,5,6];
console.log(a);//輸出1
console.log(b);//輸出2
console.log(c);//輸出[3,4,5,6]
}
{
let a,b,c;
[a,b,c=3]=[1,2];
console.log(a,b,c);//輸出1 2 3
}
{
let a,b;
[a,b]=[1,2];
[a,b]=[b,a]
console.log(a,b);//輸出 2 1
}
{
let a,b;
({a,b}={a:1,b:2})
console.log(a,b);//輸出 1 2
}
{
function fun(){
return [1,2,3,4,5,6]
};
let a,b;
[a,,,,b]=fun();
console.log(a,b);//輸出1 5
}
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q);//輸出 42 true
}
{
let {a=10,b=5}={a:3};
console.log(a,b);//輸出 3 5
}
{
let metaData={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);//輸出abc test
}
解構賦值表達式右邊的部分表示解構的源；解構表達式左邊的部分表示解構的目標，如果左右兩邊對比成功就返回右邊的值，如果沒有對比成功就會undefined返回原來的值
除此之外還可以返回一些函數和方法
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
零基礎如何快速入「]前端?這個問題往往是沒有基礎會遇到的，想要快速入「門前端開發，簡單來說就是要把基礎的知識點掌握熟練，然后由淺入深的去學習，在這里根據我過來的經驗，為大家簡單介紹一下零基礎如何快速入門前端。
舉個可能不太恰當的例子:前端就好比如蓋房子，html就充當 了房子結構這部分，也是房子的基礎。css呢， 就好比咱們房子的裝修,墻面什么顏色，什么風格，什么地板等等，這些給房子改變風格,樣式的就是css。而Java呢，就好比這個房子的功能，房子需要制冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當于是Java。
一、前端工具（dreamwear/sublime/Photoshop/SVN等）
二、零基礎入門（HTML，CSS）
1、前端開發概況、代碼入門
頁面基本結構、文檔聲明、編碼聲明、css語法、style屬性、link和style標簽、id屬性、基本樣式、Border 、Background、 Font、盒模型、文本設置等等。
2、常用標簽集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…絕對路徑、相對路徑、標簽語義化、標簽嵌套規范、SEO…
3、常用選擇器&標簽類型劃分
d、class、類型選擇、包含選擇、群組選擇、通配符、選擇器優先級、標簽樣式初始化訂制方案、超鏈接及偽類劃分、標簽類型劃分及特性、inline、inline-block、block…
4、浮動進階
浮動的作用、浮動的特性、文檔流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件…
5、定位
relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、默認值、zIndex層級問題、margin負值、透明度…
6、表格和表單
表格標簽、表格樣式重置、單元格合并、表單元素、表單相關的屬性操作、表單默認樣式初始…
7、兼容性問題處理
兼容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標簽的支持、CssHack、條件注釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式…
8、整站進階
樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高布局、三列布局、未知寬高圖片在容器內水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…
9、css3入門
transition、屬性選擇器、nth-of-type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高級、H5表單新增屬性、E:not(s)、E:target、E::selection、
10、移動端布局
測試環境Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移動端布局相關問題、window.deviceorientationevent、橫豎屏判斷…
11、Animation和Transform
瀏覽器前綴、keyFrames、Animation調用、播放次數設置、動畫偶數次調用順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮放、translate位移、transform-origin、transform的執行順序問題…
12、Bootstrap前端開發框架
Html語法規范、CSS語法規范、Less 和 Sass 中的嵌套、class 命名、選擇器、Normalize.css、柵格系統、排版、代碼、響應式工具…
另外關于零基礎如何快速入門前端的問題，項目實戰這一點很重要，一定要學以致用，我的建議是，只有在實戰項目中多加練習才能真正的掌握這門技術！
轉自：csdn； 作者：hugo233
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
!DOCTYPE html
功能是：告知瀏覽以哪個版本來解析HTML的元素
注：必須放在第一行
DOCTYPE 文檔聲明定義
document 文檔
type 類型
charset
utf-8
字符編碼集
告訴瀏覽器用哪一個版本來解析文本（包括標點符號，文字）
viewport
視口（可視窗口）
title
標簽頁標題
HTML元素的組成部分
元素：起始標記、內容和結束標記
某些元素的起始標記內有屬性
屬性：屬性名和屬性值
例如:
<a href="/classroom/17">班級</a>
1
起始標記：
結束標記：
內容：班級
屬性：href="/classroom/17"
屬性名：href
屬性值："/classroom/17"
空元素
類似img元素
<img src="" alt="">
1
沒有元素內容和結束標記，稱之為：空元素、自閉合元素
亂序銘文
功能：批量生成文本
書寫格式：lorem數量（單詞個數）
p標簽
p標簽不能包含（嵌套）p標簽，也不能包含標題、div，語義化標簽
解析
將我們寫出的代碼，轉換成計算機可以看懂的語言
渲染
再將解析好的語言，通過瀏覽器渲染展示出來，給用戶看。
HTML
是用于定義文檔的結構內容（標題、圖片等）
HTML英文全稱：Hyper Text Markup Language
中文全稱：超文本標記語言
CSS
用于定義HTML文檔的樣式（外觀）
CSS英文全稱：Cascading Style Sheets
中文全稱：層疊樣式表
語義化結構
header 頁面的頭部或者某個區域的頭部，一個頁面可以使用多個header元素
nav 表示導航欄
article 代表文檔、頁面或其他可獨立部分，常用于定義一篇日志、一條新聞或用戶評論。
aside 用于表示當前頁面或文章相關的附屬信息，可包含該頁面或內容相關的引用、側邊欄、廣告、導航條等
section 用于表示一個整體的一部分主題
footer 用于表示頁面或者某個區域的腳注，可以包含所有放在頁面底部的內容
div與語義化結構的區別
div與語義化結構標簽的功能是一樣的，但是使用語義化結構標簽可以讓頁面結構更加清晰。
a標簽
元素書寫格式
<a href="目標">內容</a>
1
href屬性
頁面地址（路徑）
多個頁面中相互跳轉
錨點
可以在同一個頁面之間，相互跳轉
先將要跳轉的位置加上id屬性
<h1 id="title2">標題二</h1>
1
將#+屬性名
<a href="#title2">跳轉到標題二</a>
1
功能鏈接
打電話
<a href="tel：12345678910">給我打電話</a>
1
發郵件
<a href="mailto：123456789@163.com">給我發郵件</a>
1
返回頂部
<a href="#">返回頂部</a>
1
a標簽的打開方式
書寫方式：
<a target="_blank" href="目標"></a>
1
屬性 target
屬性值
_blank 新頁面打開
_self 當前頁面打開（默認值）
link外部引用的好處
批量修改
復用
絕對路徑和相對路徑
絕對路徑
從根目錄開始寫，寫到要找文件的位置
當網站部署到服務器后，網站中的所有資源都可以通過一個地址（路徑）訪問
書寫格式：協議：//域名/目錄
使用場景：
訪問站外資源時，只能使用絕對路徑
訪問站內資源時，若網站已部署到服務器，可以使用絕對路徑，并可以省略協議和域名。推薦使用相對路徑
相對路徑
相對路徑是相對于當前資源的位置，只能用于訪問站內資源
相對路徑的書寫格式為：./路徑
./ 表示當前資源所在的目錄，必須作為相對路徑的開始，可省略
…/ 表示返回上一級目錄 （…/…/可以返回上兩級目錄，寫幾次就可以返回幾次
轉自：csdn 作者：小王小王 輔助在行
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
HTML概念和元素（標簽）
什么是HTML
HTML(Hyper Text Markup Language),中文譯名為超文本標記語言，它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。簡單來說，就是我們用它所包含的一系列標簽來定義網頁的布局結構。
什么是HTML標簽（元素）
HTML 文檔是由 HTML 元素定義的，元素由三部分組成：開始標簽、元素內容、結束標簽。
HTML 元素以開始標簽起始，以結束標簽終止，元素的內容是開始標簽與結束標簽之間的內容。在VSCode中，使用標簽只需要輸入需要使用的標簽名，再按Tab鍵，編輯器會自動補齊開始標簽和結束標簽的樣式。
溫馨提示：
1.標簽的括號我們用的是尖括號，這也是HTML代碼和CSS（層疊樣式表）代碼的區別。
2.HTML 標簽對大小寫不敏感，也就是說不管我們用大寫還是小寫瀏覽器都能成功識別，但是為了統一標準，最好還是寫小寫。
元素的層次結構
大多數 HTML 元素可以包含其他 HTML 元素，形成嵌套結構
如圖，div元素內部包含一個p元素，形成嵌套。在嵌套結構中，p的上一級元素是div，我們稱div是p的父元素，p是div的子元素，他們之間是父子級關系。
若是如圖這樣body、div、p三個元素嵌套，p的上一級元素是div，div的上一級元素是body，那么div是body的子元素，body是div的父元素，body和div是父子關系。而p和body中間隔了一個div，那么p就是body的后代元素，body是p的祖先元素，他們是祖先和后代的關系。
若是兩個元素擁有一個共同的父元素，也就是兩個元素的上一級元素是同一個，那么這兩個元素互為兄弟元素。
需要注意的是，兩個元素之間不能相互嵌套
p的起始標簽在div內部，結束標簽卻在div外部，這樣的嵌套結構是錯誤的，瀏覽器在解析的時候會自動在p的起始標簽后補上結束標簽，在結束標簽前面補上起始標簽。
當我們打開瀏覽器檢查器之后就會發現div和p的層次結構已經發生了改變。
元素的屬性
屬性是元素的附加信息，比如超鏈鏈接的地址就是元素的附加信息，屬性一般寫在元素的起始標簽里。
這是一個a標簽，起始標簽的href="。
空元素（自閉合元素）
空元素沒有元素內容和結束標簽，只有起始標簽?？赵貎瓤梢约由蠈傩裕绮迦雸D片的img標簽
img標簽沒有元素內容和結束標簽，起始標簽內有屬性，屬性值是圖片地址。
一般情況下，圖片用空標簽，音頻視頻不適用空標簽
HTML注釋
注釋是對代碼功能的描述，一般是寫給開發者和維護者看的，瀏覽器并不會解析注釋里的內容。因為在代碼編寫的過程中，代碼繁多雜亂，寫上注釋能幫助我們快速理解當前代碼的功能，給維護提供方便。
VSCode注釋的寫法：在尖括號內寫上 !–和--，中間寫上注釋的內容，或者選中想要注釋的行，按下快捷鍵CTRL+？。
語義化標簽和div
div是無語義標簽，就是沒有含義的標簽。而所謂語義化標簽，就是有含義的標簽，一看就知道其內部含義。我們平時使用語義化標簽和div來劃分區域，他們在功能上是沒有任何區別的，只是語義化標簽能幫助開發者和維護者清晰地理解劃分的每個區域都是用來干嘛的。在HTML5之前都是用div來劃分區域，就會導致整篇代碼全是div，看得人眼花繚亂不易于閱讀，語義化標簽的出現就能解決這個問題。
在HTML5中新增了幾個語義化標簽：
header：用于表示頁面的頭部
nav：表示導航欄
article：表示文章或其他可獨立存在的頁面
section：表示一個整體的一部分主題
aside：表示跟周圍主題相關的附加信息
footer：表示頁面或某個區域的注腳
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
JS學習筆記
js和java的異同點
變量聲明
函數聲明
js中的變量提升和函數提升
為什么有變量提升
總結
js和java的異同點
首先，js的語法和kottlin的語法有些相似。比如var，方法聲明用
function 方法名稱 (參數名稱...){
//方法內部邏輯
}
還有變量類型聲明 :
數據類型 : 變量名=值
區別：一：js的數據類型和java類似。只不過js中的數據類型number將java中的int，double，float整合了。
二：js中可以不用聲明變量類型。變量不聲明數據類型的話，那么他的類型取決于當前的值是什么數據類型。舉例：
var num=0;
num-"lyyyyyyyyyyyyyy";
num=[];
num={};
三：js中的類型判斷：
判斷基本類型，返回一個字符串
1
console.log(typeof '');//string
console.log(typeof []);//object
console.log(typeof {});//object
console.log(typeof 1);//number
console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof true);//boolean
console.log(typeof function(){});//function
console.log(typeof /\d/);//object
檢查某個對象屬于哪個構造函數，返回true/false
1
function A(){};
function B(){};
let a = new A();
console.log(a instanceof A);
console.log(a instanceof B);
console.log([] instanceof Array);//true
console.log({} instanceof Object);//true
console.log(/\d/ instanceof RegExp);//true
console.log(function(){} instanceof Object);//true
console.log(function(){} instanceof Function);//true
變量聲明
js的變量聲明其實大體上可以分為三種：var聲明、let與const聲明和函數聲明。
函數聲明
doSomething();
function doSomething() {
console.log('doSomething');
}
var foodoSomething= 2;
你覺得上面會輸出什么？TypeError嗎？其實輸出的結果是foo。這就引出了我們的問題了，當函數聲明與其他聲明一起出現的時候，是以誰為準呢？答案就是，函數聲明高于一切，畢竟函數是js的第一公民。
那么，下面的例子呢？
doSomething();
function doSomething() {
console.log('1');
}
function doSomething() {
console.log('2');
}
當出現多個函數聲明，那怎么辦呢？以上代碼輸出結果為2。
因為有多個函數聲明的時候，是由最后面的函數聲明來替代前面的。
domeSomething();
var domeSomething= function() {
console.log('domeSomething');
}
var domeSomething = function() {}這種格式我們叫做函數表達式。
它其實也是分為兩部分，一部分是var foo,而一部分是foo = function() {}，參照例2，我們可以知道，這道題的結果應該是報了TypeError(因為foo聲明但未賦值，因此foo是undefined)。
js中的變量提升和函數提升
在js中對變量進行操作后打印值經常會出現undefined的現象。其實原因是因為js中有一個叫做變量提升的功能。舉例：
1
var data="lyyyyy";
getData();
function getData(){
//第一次打印
console.log("data值為: ", data);
var data="yyyyyyy";
//第二次打印
console.log("data值為: ", data);
}
打印的值第一個為undefined，而第二個打印的值為yyyyy.
原因：
在執行getData()方法的時候會在函數內部首先將變量的聲明提升到第一步。
然后再聲明函數內部的函數（如果函數內部有函數的話）。
之后才會按照方法內部的邏輯先后順序執行代碼。前兩步只是聲明！?。?br />
看到這里應該就已經知道為什么會有上面那樣的結果了。
實際的方法內部代碼執行順序應該是這樣的：
function getData(){
//一。聲明變量
var data;
//二。聲明函數（如果函數內部有函數的話）
//三。按照代碼的順序執行
console.log("data值為: ", data);
data="yyyyyyy";
//第二次打印
console.log("data值為: ", data);
}
看到拆分后的代碼執行順序對結果也就不迷茫了。
為什么有變量提升
那么為什么會出現變量提升這個現象呢?
其實js和其他語言一樣，都要經歷編譯和執行階段。而js在編譯階段的時候，會搜集所有的變量聲明并且提前聲明變量，而其他的語句都不會改變他們的順序，因此，在編譯階段的時候，第一步就已經執行了，而第二步則是在執行階段執行到該語句的時候才執行。
總結
1.js會將變量的聲明提升到js頂部執行，因此對于這種語句:var a = 2;其實上js會將其分為var a;和a = 2;兩部分，并且將var a這一步提升到頂部執行。
2.變量提升的本質其實是由于js引擎在編譯的時候，就將所有的變量聲明了，因此在執行的時候，所有的變量都已經完成聲明。
3.當有多個同名變量聲明的時候，函數聲明會覆蓋其他的聲明。如果有多個函數聲明，則是由最后的一個函數聲明覆蓋之前所有的聲明。
————————————————
版權聲明：本文為CSDN博主qq_45272690的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章目錄
原文鏈接：https://blog.csdn.net/zy1281539626/article/details/114934551
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
SpringBoot與Web開發（超詳細）
一、簡介
二、SpringBoot對靜態資源的映射規則
1、所有 /webjars/ ，都去 classpath:/META-INF/resources/webjars/ 找資源
2、"/" 訪問當前項目的任何資源，都去靜態資源的文件夾找映射
3、歡迎頁： 靜態資源文件夾下的所有index.html頁面，被"/"映射
三、模板引擎
1、引入Thymeleaf
2、Thymeleaf的使用
1、導入thymeleaf的名稱空間
2、使用thymeleaf語法
3、Thymeleaf的語法規則
四、SpringMVC自動配置
1、Spring MVC auto-configuration
2、擴展SpringMVC
原理
3、全面接管SpringMVC
原理
五、如何修改SpringBoot的默認配置
一、簡介
使用SpringBoot的步驟：
1、創建SpringBoot應用，選中我們需要的模塊。
2、SpringBoot已經默認將這些場景配置好了，只需要在配置文件中指定少量配置就可以運行起來。
3、自己編寫業務代碼。
自動配置原理：
xxxxAutoConfiguration：幫我們給容器中自動配置組件
xxxxProperties:配置類來封裝配置文件的內容
1
2
二、SpringBoot對靜態資源的映射規則
@ConfigurationProperties(prefix = "spring.resources", ignoreUnknownFields = false)
public class ResourceProperties implements ResourceLoaderAware {
//可以設置和靜態資源有關的參數，緩存時間等
1
2
3
WebMvcAuotConfiguration：
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
if (!this.resourceProperties.isAddMappings()) {
logger.debug("Default resource handling disabled");
return;
}
Integer cachePeriod = this.resourceProperties.getCachePeriod();
if (!registry.hasMappingForPattern("/webjars/")) {
customizeResourceHandlerRegistration(
registry.addResourceHandler("/webjars/**")
.addResourceLocations(
"classpath:/META-INF/resources/webjars/")
.setCachePeriod(cachePeriod));
}
String staticPathPattern = this.mvcProperties.getStaticPathPattern();
//靜態資源文件夾映射
if (!registry.hasMappingForPattern(staticPathPattern)) {
customizeResourceHandlerRegistration(
registry.addResourceHandler(staticPathPattern)
.addResourceLocations(
this.resourceProperties.getStaticLocations())
.setCachePeriod(cachePeriod));
}
}
//配置歡迎頁映射
@Bean
public WelcomePageHandlerMapping welcomePageHandlerMapping(
ResourceProperties resourceProperties) {
return new WelcomePageHandlerMapping(resourceProperties.getWelcomePage(),
this.mvcProperties.getStaticPathPattern());
}
//配置喜歡的圖標
@Configuration
@ConditionalOnProperty(value = "spring.mvc.favicon.enabled", matchIfMissing = true)
public static class FaviconConfiguration {
private final ResourceProperties resourceProperties;
public FaviconConfiguration(ResourceProperties resourceProperties) {
this.resourceProperties = resourceProperties;
}
@Bean
public SimpleUrlHandlerMapping faviconHandlerMapping() {
SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);
//所有 /favicon.ico
mapping.setUrlMap(Collections.singletonMap("/favicon.ico",
faviconRequestHandler()));
return mapping;
}
@Bean
public ResourceHttpRequestHandler faviconRequestHandler() {
ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
requestHandler
.setLocations(this.resourceProperties.getFaviconLocations());
return requestHandler;
}
}
1、所有 /webjars/ ，都去 classpath:/META-INF/resources/webjars/ 找資源
webjars：以jar包的方式引入靜態資源。WebJars
訪問localhost:8080/webjars/jquery/3.3.1/jquery.js的結果：
2、"/" 訪問當前項目的任何資源，都去靜態資源的文件夾找映射
"classpath:/META-INF/resources/",
"classpath:/resources/",
"classpath:/static/",
"classpath:/public/"
"/"：當前項目的根路徑
例子：訪問localhost:8080/abc 就是去靜態資源文件夾里面找abc
例如我們訪問js文件夾下的Chart.min.js：
訪問結果：
3、歡迎頁： 靜態資源文件夾下的所有index.html頁面，被"/"映射
編寫index.html文件。
訪問結果：
三、模板引擎
常見的模板引擎：JSP、Velocity、Freemarker、Thymeleaf（springboot推薦，語法更簡單，功能更強大）
1、引入Thymeleaf
Thymeleaf官網
在pom.xml中添加以下依賴：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2、Thymeleaf的使用
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");
private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
1
只要我們把HTML頁面放在classpath:/templates/，thymeleaf就能自動渲染。
success.html：
HelloController：
package com.keafmd.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/
Keafmd
@ClassName: HelloController
@Description:
@author: 牛哄哄的柯南
@date: 2021-03-04 19:54
*/
@Controller
public class HelloController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "Hello World";
}
@RequestMapping("/success")
public String success() {
return "success";
}
}
訪問success的結果：
1、導入thymeleaf的名稱空間
<html lang="en" xmlns:th=";
1
2、使用thymeleaf語法
HelloController：
package com.keafmd.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Map;
/*
Keafmd
@ClassName: HelloController
@Description:
@author: 牛哄哄的柯南
@date: 2021-03-04 19:54
/
@Controller
public class HelloController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "Hello World";
}
/*
查出一些數據在頁面顯示
@param map
@return
*/
@RequestMapping("/success")
public String success(Map<String,Object> map) {
map.put("hello","你好");
return "success";
}
}
success.html：
<!DOCTYPE html>
<html lang="en" xmlns:th=";
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>成功</h1>
<!--th:text 將div里面的文本內容設置為-->
<div th:text="${hello}"></div>
</body>
</html>
運行結果：
3、Thymeleaf的語法規則
1、th：任意html屬性，來替換原生屬性的值
th:text — 改變當前元素里面的文本內容
更多參考下圖：
2、表達式
Simple expressions:（表達式語法）
Variable Expressions: ${...}：獲取變量值；OGNL；
1）、獲取對象的屬性、調用方法
2）、使用內置的基本對象：
#ctx : the context object.
#vars: the context variables.
#locale : the context locale.
#request : (only in Web Contexts) the HttpServletRequest object.
#response : (only in Web Contexts) the HttpServletResponse object.
#session : (only in Web Contexts) the HttpSession object.
#servletContext : (only in Web Contexts) the ServletContext object.
${session.foo}
3）、內置的一些工具對象：
Selection Variable Expressions: {...}：選擇表達式：和${}在功能上是一樣；
補充：配合 th:object="${session.user}：
<div th:object="${session.user}">
<p>Name: <span th:text="{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="{nationality}">Saturn</span>.</p>
</div>
Message Expressions: #{...}：獲取國際化內容
Link URL Expressions: @{...}：定義URL；
@{/order/process(execId=${execId},execType='FAST')}
Fragment Expressions: ~{...}：片段引用表達式
<div th:insert="~{commons :: main}">...</div>
Literals（字面量）
Text literals: 'one text' , 'Another one!' ,…
Number literals: 0 , 34 , 3.0 , 12.3 ,…
Boolean literals: true , false
Null literal: null
Literal tokens: one , sometext , main ,…
Text operations:（文本操作）
String concatenation: +
Literal substitutions: |The name is ${name}|
Arithmetic operations:（數學運算）
Binary operators: + , - , * , / , %
Minus sign (unary operator): -
Boolean operations:（布爾運算）
Binary operators: and , or
Boolean negation (unary operator): ! , not
Comparisons and equality:（比較運算）
Comparators: > , < , >= , <= ( gt , lt , ge , le )
Equality operators: == , != ( eq , ne )
Conditional operators:條件運算（三元運算符）
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
Special tokens:
No-Operation: _
注意：內容過多，詳細內容參考官方文檔。
示例：↓
HelloController：
package com.keafmd.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Arrays;
import java.util.Map;
/*
Keafmd
@ClassName: HelloController
@Description:
@author: 牛哄哄的柯南
@date: 2021-03-04 19:54
/
@Controller
public class HelloController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "Hello World";
}
/*
查出一些數據在頁面顯示
@param map
@return
*/
@RequestMapping("/success")
public String success(Map<String,Object> map) {
map.put("hello","你好");
map.put("hello1","<h1>你好</h1>");
map.put("users", Arrays.asList("柯南","小蘭","基德"));
return "success";
}
}
success.html：
<!DOCTYPE html>
<html lang="en" xmlns:th=";
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>成功</h1>
<!--th:text 將div里面的文本內容設置為-->
<div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">這里的內容被覆蓋</div>
<hr/>
<div th:text="${hello1}"></div>
<div th:utext="${hello1}"></div>
<hr/>
<!--th:each 每次遍歷都會生成當前這個標簽-->
<h4 th:text="${user}" th:each="user:${users}"></h4>
<hr/>
<h4>
<span th:each="user:${users}"> [[${user}]] </span>
</h4>
</body>
</html>
效果：
四、SpringMVC自動配置
1、Spring MVC auto-configuration
參考官方文檔：點這里
Spring Boot 自動配置好了SpringMVC
以下是SpringBoot對SpringMVC的默認配置：（WebMvcAutoConfiguration）
Inclusion of ContentNegotiatingViewResolver and BeanNameViewResolver beans.
自動配置了ViewResolver（視圖解析器：根據方法的返回值得到視圖對象（View），視圖對象決定如何渲染（轉發？重定向？））
ContentNegotiatingViewResolver：組合所有的視圖解析器的。
如何定制：我們可以自己給容器中添加一個視圖解析器；自動的將其組合進來。
Support for serving static resources, including support for WebJars (see below).靜態資源文件夾路徑,webjars
Static index.html support. 靜態首頁訪問
Custom Favicon support (see below). favicon.ico
自動注冊了 of Converter, GenericConverter, Formatter beans.
Converter：轉換器； public String hello(User user)：類型轉換使用Converter
Formatter ：格式化器； 2017.12.17===Date
@Bean
@ConditionalOnProperty(prefix = "spring.mvc", name = "date-format")//在文件中配置日期格式化的規則
public Formatter<Date> dateFormatter() {
return new DateFormatter(this.mvcProperties.getDateFormat());//日期格式化組件
}
1
2
3
4
5
自己添加的格式化器轉換器，我們只需要放在容器中即可
Support for HttpMessageConverters (see below).
HttpMessageConverter：SpringMVC用來轉換Http請求和響應的；User—Json
HttpMessageConverters 是從容器中確定；獲取所有的HttpMessageConverter
自己給容器中添加HttpMessageConverter，只需要將自己的組件注冊容器中（@Bean,@Component）
Automatic registration of MessageCodesResolver (see below)：定義錯誤代碼生成規則
Automatic use of a ConfigurableWebBindingInitializer bean (see below).
我們可以配置一個ConfigurableWebBindingInitializer來替換默認的（添加到容器）
初始化WebDataBinder
請求數據=====JavaBean
1
2
org.springframework.boot.autoconfigure.web：web的所有自動場景
If you want to keep Spring Boot MVC features, and you just want to add additional MVC configuration (interceptors, formatters, view controllers etc.) you can add your own @Configuration class of type WebMvcConfigurerAdapter, but without @EnableWebMvc. If you wish to provide custom instances of RequestMappingHandlerMapping, RequestMappingHandlerAdapter or ExceptionHandlerExceptionResolver you can declare a WebMvcRegistrationsAdapter instance providing such components.
如果你想保持Spring Boot MVC 功能,你只是想添加額外的(MVC配置)(https://docs.spring.io/spring/docs/4.3.14.RELEASE/spring-framework-reference/htmlsingle MVC)(攔截器,格式器,視圖控制器等)您可以添加自己的@ configuration類WebMvcConfigurerAdapter類型,但沒有@EnableWebMvc。如果你想提供RequestMappingHandlerMapping, RequestMappingHandlerAdapter或ExceptionHandlerExceptionResolver的自定義實例，你可以聲明一個WebMvcRegistrationsAdapter實例來提供這樣的組件。
If you want to take complete control of Spring MVC, you can add your own @Configuration annotated with @EnableWebMvc.
如果你想完全控制Spring MVC，你可以添加你自己的@Configuration注解@EnableWebMvc。
2、擴展SpringMVC
實現如下功能：
<mvc:view-controller path="/hello" view-name="success"></mvc:view-controller>
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/hello"/>
<bean></bean>
</mvc:interceptor>
</mvc:interceptors>
做法：編寫一個配置類（@Configuration），是WebMvcConfigurerAdapter類型；不能標注@EnableWebMvc
特點：既保留了所有的自動配置，也能用我們擴展的配置。
在config包下創建個MyMvcConfig。
代碼實現：
package com.keafmd.springboot.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/*
Keafmd
@ClassName: MyMvcConfig
@Description:
@author: 牛哄哄的柯南
@date: 2021-03-17 20:26
/
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
//瀏覽器發送 /keafmd 請求 來到success頁面
registry.addViewController("/keafmd").setViewName("success");
}
}
原理
1、WebMvcAutoConfiguration是SpringMVC的自動配置類。
2、在做其他自動配置時會導入，@Import(EnableWebMvcConfiguration.class)。
@Configuration
public static class EnableWebMvcConfiguration extends DelegatingWebMvcConfiguration {
private final WebMvcConfigurerComposite configurers = new WebMvcConfigurerComposite();
//從容器中獲取所有的WebMvcConfigurer
@Autowired(required = false)
public void setConfigurers(List<WebMvcConfigurer> configurers) {
if (!CollectionUtils.isEmpty(configurers)) {
this.configurers.addWebMvcConfigurers(configurers);
//一個參考實現；將所有的WebMvcConfigurer相關配置都來一起調用；
@Override
// public void addViewControllers(ViewControllerRegistry registry) {
// for (WebMvcConfigurer delegate : this.delegates) {
// delegate.addViewControllers(registry);
// }
}
}
}
3、容器中所有的WebMvcConfigurer都會一起起作用。
4、我們的配置類也會被調用。
效果：SpringMVC的自動配置和我們的擴展配置都會起作用。
3、全面接管SpringMVC
SpringBoot對SpringMVC的自動配置不需要了，所有都是我們自己配置，所有的SpringMVC的自動配置都失效了。
做法：我們需要在配置類中添加@EnableWebMvc即可。
@EnableWebMvc
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
//瀏覽器發送 /keafmd 請求 來到success頁面
registry.addViewController("/keafmd").setViewName("success");
}
}
全面接管后，靜態資源失效。
不推薦這樣全面接管。
原理
加了@EnableWebMvc自動配置就失效了。
1、@EnableWebMvc的核心：
@Import({DelegatingWebMvcConfiguration.class})
public @interface EnableWebMvc {
2、DelegatingWebMvcConfiguration
@Configuration(
proxyBeanMethods = false
)
public class DelegatingWebMvcConfiguration extends WebMvcConfigurationSupport {
3、WebMvcAutoConfiguration
@Configuration(
proxyBeanMethods = false
)
@ConditionalOnWebApplication(
type = Type.SERVLET
)
@ConditionalOnClass({Servlet.class, DispatcherServlet.class, WebMvcConfigurer.class})
//容器中沒有這個組件的時候，這個自動配置類才生效
@ConditionalOnMissingBean({WebMvcConfigurationSupport.class})
@AutoConfigureOrder(-2147483638)
@AutoConfigureAfter({DispatcherServletAutoConfiguration.class, TaskExecutionAutoConfiguration.class, ValidationAutoConfiguration.class})
public class WebMvcAutoConfiguration {
4、@EnableWebMvc將WebMvcConfigurationSupport組件導入進來，自動配置類失效了。
5、導入的WebMvcConfigurationSupport只是SpringMVC最基本的功能。
五、如何修改SpringBoot的默認配置
1、SpringBoot在自動配置很多組件的時候，先看容器中有沒有用戶自己配置的（@Bean、@Component）如果有就用用戶配置的，如果沒有，才自動配置；如果有些組件可以有多個（ViewResolver）將用戶配置的和自己默認的組合起來。
2、在SpringBoot中會有非常多的xxxConfigurer幫助我們進行擴展配置。
3、在SpringBoot中會有很多的xxxCustomizer幫助我們進行定制配置。
以上就是SpringBoot與Web開發（超詳細）篇一的全部內容。
————————————————
版權聲明：本文為CSDN博主「牛哄哄的柯南」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43883917/article/details/114375472
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近看過我文章的都知道：我最近在負責一個微信小程序的項目，在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看著wxml文件中一堆wx:if/else和hidden突然很煩躁，先不說wx:if導致的性能問題，就是標簽上也是冗雜的。
接著上一篇文章【微信小程序自定義組件庫yPicker組件分析及省市區三級聯動實現】，在其中我分析了這么一個例子 —— 省市區三級聯動的自定義實現，在其中有詳細代碼這里就不多說，說說如何調用：
我當時是這么想的：一方面出于“不在JavaScript里寫太多東西”的考慮，另一方面，由于省、市、區我是分別用三個變量來實現的，所以JavaScript里就關注這三個變量，比如之間的空格或其它東西都拿到wxml文件里。就像這樣：
<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="placeholder depart_content befselect" wx:else>請選擇當前位置</view> <view class="desc">如有變動請修改后再次提交</view> </view>
（因為調用涉及到后來改動的只有在點擊彈窗里的“確認”按鈕時在事件中將那三個變量分別賦給這段代碼中出現的三個變量 —— 否則會只要改動不管是點取消還是確認已經發生改變了，這樣不妥?。?
其布局是這樣的：
.departments{ width: 100%; height: 96rpx; display: flex; align-items: center; font-size: 36rpx; font-weight: 347; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .location{ position: relative; border-bottom: 1rpx solid rgba(0,0,0,.009); display: flex; align-items: flex-start; padding-top: 20rpx; } .desc{ position: absolute; right: 19rpx; bottom: 4rpx; color: rgb(63,142,255); font-size: 23rpx; } .departments .depart_title{ width: 20%; } .departments .depart_content{ margin-left: 10%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .departments .placeholder{ width: 69%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
在決定了要替換這里的wx:if以后，你首先要想：用什么替換？
wx:if作用是判斷“是否存在”，如果不存在（條件不滿足）就切換到wx:else或是wx:elif的邏輯里！
OK，想到這里，你應該能想到一個css偽類：:empty ！它的作用和我們想要的效果一樣：判斷如果元素（內容）為空的話…
我迅速對代碼做了改動：
<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="desc">如有變動請修改后再次提交</view> </view>
然后在class - depart_content上加了這個偽類：
.placeholder:empty::before{ content: "請選擇當前位置"; color: rgba(0,0,0,.6); }
一片空白！
經過查閱資料：:empty偽類表示如果標簽內容為空，那么內容區域如果帶有空格，也是不會被匹配到的！
在寫標簽時一定要注意這一點：標簽內是否有空格或換行?。〒Q行常常被解析為一個空格）
遇到非單標簽一定注意閉合標簽！
最后解決辦法是：在js中將三個變量用空格相連接，再渲染到頁面上即可！
（其實這里是一個自定義的選擇器，而自動定位就是往高德地圖發送了請求獲取到省市區字段而已，代碼就不寫了。。。）
到這里我們會發現一個事：上面我們不僅用了empty偽類，還用了before偽元素！
其實這一點很平常 —— 畢竟只有empty是添加不了內容的（似乎縱觀css，只有before和after這樣偽元素可以向頁面中添加內容，不管是文字還是圖片之類的）
我認為更應該關注到的是兩個地方：
:before 和 :after 偽元素向標簽內插入內容、圖形，并不會影響empty偽類的匹配！
這個特性實用的一批。
由上，可見此偽類最大的用處就是“字段缺失提示”！這是非常實用的。而且把這項任務交給CSS也可以減輕許多“（布局）負擔”、體驗更好、維護起來也更方便！
比如：我在項目優化時就將所有有請求的字段都加上了統一類名：
.ym-empty:empty::before{ content: "暫無數據，請重試", display: block; text-align: center; color: rgba(0,0,0,.6); /** 其它定位、字體更改操作 */ }
作者：行舟客，轉載
隨著大數據產業的發展，越來越多的公司開始實現數據資源的管理和應用，尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時，用戶界面設計者需要呈現相應的視覺效果。
接下來為大家介紹大屏可視化的UI設計。
--大屏UI設計--
--大數據可視化ui設計賞析--
（圖片均來源于網絡）
點擊查看更多UI/UE設計案例??????
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
藍藍設計的小編 http://www.syprn.cn