㈠ webuploader分片上傳的實現代碼（前後端分離）

本文介紹了webuploader分片上傳的實現代碼（前後端分離），分享給大家，具體如下：
WebUploader是由Bai
WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS
6+,
android
4+。兩套運行時，同樣的調用方式，可供用戶任意選用。採用大文件分片並發上傳，極大的提高了文件上傳效率。(這個是從官網上直接的解釋)
功能描述
1、webuploader是網路研發的上傳組件，文檔不是特別規整，但是也夠用了。
2、前端使用官網的上傳圖片demo，在此基礎上代碼略微調整做分片。既可以上傳圖片也可以上傳文件。文件超過分片大小才啟用分片。
3、分片上傳已做md5校驗，達到秒傳的效果。分片以後需要合並，可以先分片後合並，也可以邊分片邊合並，本示例採用的是邊分片邊合並的方案。
4、後端用springboot做框架搭建。springMVC做rest服務，開啟跨域訪問。
5、容器用springboot內置的tomcat插件，運行Application的main方法即可啟動服務；
顯示效果
關鍵代碼前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，則跳過上傳
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
實例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'點擊選擇文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的區域
paste:
'#uploader',
//指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上傳的個數
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制單個文件的大小
50
M
});
後端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上傳之前校驗(整個文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校驗
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳過",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校驗
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳過",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
沒有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
當前片
Long
chunks
=
uploadVO.getChunks();//
總共多少片
//
分片目錄創建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上傳
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上傳出錯",
e);
return
RETURN.fail("分片上傳出錯",
1);
}
//
合並分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合並失敗：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合並失敗",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
刪除分片文件夾
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上傳成功",
1);
}
else
{
return
RETURN.fail("上傳中...",
1);
}
}
/**
*
未分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上傳
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上傳目錄
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上傳成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上傳出錯",
e);
return
RETURN.fail("文件上傳出錯",
0);
}
}
return
RETURN.fail("上傳失敗",
0);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue2.0結合webuploader實現文件分片上傳功能使用WebUploader實現分片斷點上傳文件功能（二）webuploader在springMVC+jquery+Java開發環境下的大文件分片上傳的實例代碼jQuery
webuploader分片上傳大文件

㈡ web前端開之網站搭建框架之vue詳解

網站搭建框架之vue

Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。

對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。

引入vue.js的寫法

Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入

，而v-html則會對標簽進行編譯，只顯示標簽內的內容。

至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。

V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟

而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。

V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。

除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中

通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。

（組件書寫格式）

（組件整合）

（注冊路由）

路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。

而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。

通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。

通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。

㈢ Web前端學習之Javascript繼承的常用4種方法

今天小編要跟大家分享的文章是關於Javascript繼承的常用4種方法。相信很多學習web前端開發技術的小夥伴在學習前端開發的javascript部分的時候，在面向對象的部分就很難走下去了，主要的原因還是邏輯更加復雜了，需要理解的內容比直觀的開發布局難一點。

在面向對象編程里，封裝和繼承是比較重要的，這中間，繼承是相對而言比較難理解的，因為javascript的繼承方式比較多，也有不同的優缺點。今天小編為大家帶來這篇文章就是來和大家一起說一說Javascript繼承的常用4種方法，希望能夠對你有所幫助。


1、原型鏈繼承


核心：將父類的實例作為子類的原型


缺點：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了

2、構造繼承


基本思想


借用構造函數的基本思想就是利用call或者apply把父類中通過this指定的屬性和方法復制(借用)到子類創建的實例中。


因為this對象是在運行時基於函數的執行環境綁定的。也就是說，在全局中，this等於window，而當函數被作為某個對象的方法調用時，this等於那個對象。


call、apply方法可將一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象。


所以，這個借用構造函數就是，new對象的時候(new創建的時候，this指向創建的這個實例)，創建了一個新的實例對象，並且執行Parent裡面的代碼，而Parent裡面用call調用了Person，也就是說把this指向改成了指向新的實例，所以就會把Person裡面的this相關屬性和方法賦值到新的實例上，而不是賦值到Person上面,所以所有實例中就擁有了父類定義的這些this的屬性和方法。


因為屬性是綁定到this上面的，所以調用的時候才賦到相應的實例中，各個實例的值就不會互相影響了。


核心：使用父類的構造函數來增強子類實例，等於是復制父類的實例屬性給子類(沒用到原型)


缺點：方法都在構造函數中定義，
只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法，無法實現函數復用，每個子類都有父類實例函數的副本，影響性能

3、組合繼承


組合繼承(所有的實例都能擁有自己的屬性，並且可以使用相同的方法，組合繼承避免了原型鏈和借用構造函數的缺陷，結合了兩個的優點，是最常用的繼承方式)


核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後再通過將父類實例作為子類原型，實現函數復用


缺點：調用了兩次父類構造函數，生成了兩份實例(子類實例將子類原型上的那份屏蔽了)

4、寄生組合繼承


核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點


缺點：堪稱完美，但實現較為復雜

以上就是小編今天為大家分享的關於web前端學習之Javascript繼承的常用4種方法的文章，希望本篇文章能夠對正在學習web前端技術的小夥伴們有所幫助。想要了解更多web前端知識記得關注北大青鳥web培訓官網。


文章轉載自公眾號：前端研究所

㈣ web前端開發，怎麼處理css3中邊框倒角屬性

CSS3 使用border-radius屬性設置圓角效果
該屬性可以通過設置圖片或塊級元素四個角的圓角半徑像素數來實現該效果。W3C規定該屬性的可能取值為：
none，默認值，表示元素沒有圓角效果
length，由浮點數字和單位標識組成的長度值
%，由百分比設置的圓角值
該屬性可以分別設置元素的四個圓角效果，採用下列格式來實現。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四個方向的角半徑均採用length取值來實現，該取值必須為浮點數字和單位標識共同組成。同時規定，該取值不得取負數。
例1：利用整數來實現圓角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述實例設置了一個div塊級元素，其寬度為200px，高度為150px。為了能夠看到其圓角效果，增加了顏色為#ff5857的背景顏色，並且添加了1px大小的邊框，其邊框為實線，邊框顏色為#aaaaaa。最後設置其圓角效果，左上角和右下角均為10px，右上角和左下角均為5px。
例2：查看下列CSS代碼。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四組代碼中，只有組（1）提供了完全符合格式的四個數據，其他三組均只提供了小於四個的數據。這種情況下，數據依然按照「左上角 右上角 右下角 左下角」的順序進行排列，沒有涉及到的角方向按照其對角的圓角數據進行設置。
因此，組（2）的數據表示：左上角為10px，右上角為5px，右下角為15像素，左下角為右上角的像素設置，即5px。請同學們根據這樣的方法，理解一下組（3）的圓角含義。
組（4）就設置了一個數據，這表示四個方向的角半徑均為10px。
二、獨立設置元素的四個圓角效果：
若只想設置一個塊級元素右上角的圓角效果，該如何實現呢？這里W3C為border-radius屬性派生出了表示四個方向的獨立圓角效果的子屬性。
border-top-left-radius, 定義左上角的圓角效果
border-top-right-radius, 定義右上角的圓角效果
border-bottom-right-radius, 定義右下角的圓角效果
border-bottom-left-radius, 定義左下角的圓角效果
上述四個子屬性的取值規則和border-radius屬性的取值規則是完全相同的。
例3：設置p標記的圓角效果，其中左下角沒有圓角效果，其他三個方向角的圓角效果均為25px。
方法1：利用border-radius屬性統一設置。
p{border-radius: 25px 25px 25px 0;}
方法2：利用border-radius屬性的派生子屬性設置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3：利用border-radius屬性設置所有角方向均為25px，再利用border-radius屬性的派生子屬性設置左下角沒有圓角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}

㈤ 初學者如何迅速學習web前端開發

學習web前端不怕沒喲基礎，就怕沒有方向，推薦給你web前端學習的路線圖：

階段1.前端核心基礎

HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和

BOM編程、jQuery框架

階段2.HTML5 + CSS3 + 移動端核心

HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練

階段3.移動端

移動端核心、移動端適配、移動端特效

階段4.伺服器端

伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發

階段5.JavaScript高級

JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、

JavaScript函數式編程JavaScript設計模式

階段6.前端必備

性能優化、版本控制工具、模塊化、項目構建工具

階段7.高級框架

React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析

階段8.小程序

原生小程序入門、原生小程序API使用、小程序框架Mpvue

web前端學習方向

這個學習的路線路你按照從上到下這個順序學習就可以的，不管是報培訓班還是自學，都是可以的，現在web前端還是有不錯的視頻，你可以根據自己的實際情況看看這些視頻，希望對你有所幫助。

㈥ 04《Spring Boot 入門教程》使用模板引擎開發 Web 項目

模板引擎這個詞，咋聽起來，有點高大上的意味。

實際上，模板引擎是非常平易近人的技術。譬如大家可能都比較熟悉的 JSP ，就是一種比較典型的模板引擎。

當瀏覽器將請求拋給控制器，控制器處理好數據後，就跳轉 JSP 等模板引擎頁面。注意在跳轉的同時，還會將數據組裝好，也交給模板引擎處理。

模板引擎會根據數據，和模板引擎的規則，動態生成 HTML 頁面，最後返回給瀏覽器顯示。

我們使用 Spring Boot 開發 Web 項目，大體上有兩種方式。

第一種方式，是後端服務化的方式，也是當前的主流方式。前端是靜態的 HTML 頁面，通過 Ajax 請求 Spring Boot 的後端介面。 Spring Boot 返回數據一般採用 JSON 格式，前端接收後將數據顯示。

第二種方式，是採取模板引擎的方式。前端的請求，到達 Spring Boot 的控制器後，控制器處理請求，然後將返回數據交給模板引擎。模板引擎負責根據數據生成 HTML 頁面，最後將 HTML 返回給瀏覽器。

我個人比較推薦第一種方式，說一下該方式的幾個優點：

本篇是講模板引擎，也得說說模板引擎的優點，王婆賣瓜不能光誇草莓啊。模板引擎開發的頁面，對搜索引擎 SEO 比較友好；還有就是簡單的頁面，如果用模板引擎開發速度比較快，畢竟模板化的方法，目的就是減少重復提高效率。

Spring Boot 支持的模板引擎種類很多，常見的有 FreeMarker 、 Thymeleaf 、 JSP 。

因為這些模板引擎使用的用戶都不少，所以我們逐一介紹下其實現過程。

至於孰優孰劣，請各位看官自行評價。正所謂：尺有所短，寸有所長，各取所愛，萬物生長！

本篇我們開發一個商品瀏覽項目實例。

此處說一個我個人的經驗：在做一個項目或一個模塊的時候，不要一開始就動手寫代碼，最好是謀定而後動。

我們作為程序員，實際上是整個程序世界的總指揮。應該先整體規劃，再實現局部。這種總分型的開發方法便於我們理順思路，提高編碼效率！

好的，我們來思考下，實現商品瀏覽項目實例的整體流程：

整體流程

可以看到，我們是先建立了控制器方法和頁面，再去實現其中的具體細節。這樣可以讓我們的思維保持連貫性和整體性，在做一些頁面和方法較多的項目時，會感覺更加順暢。

我們按整體流程，使用 FreeMarker 模板引擎，來實現商品瀏覽功能。

使用 Spring Initializr 創建項目，Spring Boot 版本選擇 2.2.5 ， Group 為 com.imooc ， Artifact 為 spring-boot-freemarker ，生成項目後導入 Eclipse 開發環境。

引入 Web 項目及 FreeMarker 模板相關的依賴項，代碼如下：

實例：

創建控制器類，由於是商品相關的控制器，所以命名為 GoodsController ，代碼如下：

實例：

我們具體解釋下該類的作用。

我們 resource/templates 目錄下新建商品頁面 goods.ftl ，先不必實現具體功能，代碼如下：

實例：

此時我們啟動項目，然後訪問 http://127.0.0.1:8080/goods ，即可顯示對應頁面內容。

定義商品類 GoodsDo 用來描述商品信息，注意 Do 表示數據模型對象（Data Object），代碼如下：

實例：

然後我們編寫服務類 GoodsService ，提供獲取商品列表的方法。注意此處僅僅是演示模板引擎，並不需要訪問資料庫，直接返回一個指定內容的商品列表。

實例：

此時，我們的控制器就可以注入 GoodsService 類型的組件，然後調用其方法了。

實例：

注意 model.addAttribute("goodsList", goodsService.getGoodsList()); ，我們將商品列表相關的數據交給模板引擎去處理。

此時我們可以根據 FreeMarker 模板引擎，按模板規則顯示商品信息了。

實例：

注意我們通過 FreeMarker 的模板語法，輸出了商品列表信息。關於 FreeMarker 模板引擎更多的語法規則，感興趣的同學可以後續查閱更多資料。

啟動項目，打開瀏覽器訪問 http://127.0.0.1:8080/goods ，即可查看輸出結果。

Thymeleaf 和 FreeMarker ，都是模板引擎，使用方法基本類似。此處我們僅僅是給出一個範例，不再做過多的解釋。

使用 Spring Initializr 創建項目， Spring Boot 版本選擇 2.2.5 ， Group 為 com.imooc ， Artifact 為 spring-boot-thymeleaf ，生成項目後導入 Eclipse 開發環境。

引入 Web 項目及 Thymeleaf 模板相關的依賴項。

實例：

創建控制器類， GoodsController ， Thymeleaf 直接使用 HTML 作為模板頁面，故代碼如下：

實例：

我們在 resource/templates 目錄下新建商品頁面 goods.html ，先不必實現具體功能，代碼如下：

實例：

此時我們啟動項目，然後訪問 http://127.0.0.1:8080/goods ，即可顯示對應頁面內容。

商品類 GoodsDo ，服務類 GoodsService ，這兩個類與上面沒有區別直接放出代碼。

實例：

實例：

好的，此時我們的控制器就可以注入 GoodsService 類型的組件，然後調用其方法了。

實例：

此時我們可以根據 Thymeleaf 模板引擎，按模板規則顯示商品信息了。

實例：

注意我們通過 Thymeleaf 的模板語法，輸出了商品列表信息。關於 Thymeleaf 模板引擎更多的語法規則，感興趣的同學可以後續查閱更多資料。

啟動項目，打開瀏覽器訪問 http://127.0.0.1:8080/goods ，即可查看輸出結果。

到此，大家基本上也能發現，這兩種方式除了模板頁面文件內容不同，其他地方基本都是一模一樣的。

也就是說，模板引擎主要負責通過一些模板標簽，將控制器返回的數據解析為網頁。

注意 Spring Boot 官方已經不推薦使用 JSP 了，確實操作起來也比較麻煩。但是由於 JSP 用戶體量還是比較大的，所以此處還是簡單演示下，開發步驟與 FreeMarker / Thymeleaf 基本一致。

使用 Spring Initializr 創建項目， Spring Boot 版本選擇 2.2.5 ， Group 為 com.imooc ， Artifact 為 spring-boot-jsp ，生成項目後導入 Eclipse 開發環境。

引入 Web 項目及 JSP 模板相關的依賴項。

實例：

創建控制器類， GoodsController ，代碼如下：

實例：

手工添加 src/main/webapp 及子目錄如下，同時目錄下放一個 goods.jsp 用於測試。注意該目錄是一個 Source Folder 源代碼目錄，不是普通文件夾目錄。

spring-boot-jsp 項目結構

實例：

注意，我們還需要添加一個視圖解析器，實現 JSP 頁面往指定目錄跳轉。

實例：

此時我們啟動項目，然後訪問 http://127.0.0.1:8080/goods ，即可顯示對應頁面內容。

商品類 GoodsDo ，服務類 GoodsService ，這兩個類與上面沒有區別直接放出代碼。

實例：

實例：

好的，此時我們的控制器就可以注入 GoodsService 類型的組件，然後調用其方法了。

實例：

此時我們可以根據 JSP 模板引擎，按模板規則顯示商品信息了。

實例：

注意我們通過 JSP 的模板語法，輸出了商品列表信息。關於 JSP 模板引擎更多的語法規則，感興趣的同學可以後續查閱更多資料。

啟動項目，打開瀏覽器訪問 http://127.0.0.1:8080/goods ，即可查看輸出結果。

最後大家應該也發現了， FreeMarker 和 Thymeleaf 的用法幾乎是一模一樣的，而 JSP 還需要手工添加一些目錄和配置。

三種方式各有優劣， FreeMarker 模板語法比較簡潔， Thymeleaf 可以直接使用 HTML 作為模板文件， JSP 用戶群體廣泛。

但是三種方式，都是一種模板引擎而已，將控制器返回數據轉化為 HTML 頁面顯示，本質上沒啥區別，大家對模板引擎有一個了解即可。

㈦ Web前端工程師要了解的html+css基礎知識

今天小編要跟大家分析的文章是關於Web前端工程師要了解的html+css基礎知識。正在從事Web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對正在從事Web前端工作和學習的小夥伴們有所幫橡鎮助。

一、什麼是HTML？


HTML即超文本標記語言(HyperTextMarkupLanguage)，是用來描述網頁的一種語言。
超文本標記語言的結構包括"頭"部分（外語：Head）、和"主體"部分（外語：Body），其中"頭"部提供關於網頁的信息，"主體"部分提供網頁的具體內容。
標記語言是一套標記標簽(markuptag)
HTML使用標記標簽來描述網頁


如下代碼：

MyFirstHeading

Myfirstparagraph.

例子解釋:


與之間的文本描述網頁
與之間的文本是可見的頁面內容

與

之間的文本被顯示為標題

與

之間的文本被顯示為段落


二、HTML元素


HTML文檔是由HTML元素定義的。


HTML元素指的是從開始標簽（starttag）到結束標簽（end
tag）的所有代碼。


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


開始標簽
元素內容
結束標簽

Thisisaparagraph

href="default.htm">
Thisisalink注釋：啟梁開始標簽常被稱為開放標簽（openingtag），結束標簽常稱為閉合標簽（closingtag），大多數HTML元素可擁有屬性。


空的HTML元素：


沒有內容的HTML元素被稱為空元素。在XHTML、XML以及未來版本的HTML中，所有元素都必須被關閉。


在開始標簽中添加斜杠，比如:
就是沒有關閉標簽的空元素,而
是關閉空元素的正確方法，HTML、XHTML和XML都接受這種方式。


即使
在所有瀏覽器中都是有效的，但使用
其實是更長遠的保障。


HTML提示：使用小寫標簽


HTML標簽對大小寫不敏感：

等同於

。許多網站都使用大寫的HTML標簽。


W3School使用的是小寫標簽，因為萬維網聯盟（W3C）在HTML4中推薦使用小寫，而在未來(X)HTML版本中強制使用小寫。


三、HTML屬性


HTML標簽可以擁有屬性。屬性提供了有關HTML元素的更多的信息。


屬性總是以名稱/值對的形式出現，比如：name="value"。


屬性總是在HTML元素的開始標簽中規定。


屬性實例:


HTML鏈接由標簽定義。鏈接的地址在href屬性梁旁粗中指定：


Thisisa
link


注釋：屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name='Bill"HelloWorld"Gates'。


HTML提示：使用小寫屬性


屬性和屬性值對大小寫不敏感。


不過，萬維網聯盟在其HTML4推薦標准中推薦小寫的屬性/屬性值。


而新版本的(X)HTML要求使用小寫屬性。


一些常見HTML屬性:


td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}


屬性
值
描述


class
classname
規定元素的類名（classname）


id
id
規定元素的唯一id


style
style_definition
規定元素的行內樣式（inline
style）


title
text
規定元素的額外信息（可在工具提示中顯示）


四、HTML編輯器


使用Notepad或TextEdit來編寫HTML


可以使用專業的HTML編輯器來編輯HTML：


AdobeDreamweaver


MicrosoftExpressionWeb


CoffeeCupHTMLEditor


五、HTML標題


標題（Heading）是通過

-

等標簽進行定義的。

Thisisaheading

定義最大的標題。

Thisisaheading

定義最小的標題。


注釋：瀏覽器會自動地在標題的前後添加空行。


注釋：默認情況下，HTML會自動地在塊級元素前後添加一個額外的空行，比如段落、標題元素前後。


以上就是小編今天為大家分享的關於Web前端工程師要了解的html+css基礎知識的文章，希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助，想要了解更多Web前端相關知識記得關注北大青鳥Web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的Web前端工程師。