整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
方式一、pdf文件理論上可以在瀏覽器直接打開預(yù)覽但是需要打開新頁面。在僅僅是預(yù)覽pdf文件且UI要求不高的情況下可以直接通過a標(biāo)簽href屬性實(shí)現(xiàn)預(yù)覽
<a href="文檔地址"></a>
方式二、通過jquery插件jquery.media.js實(shí)現(xiàn) 這個插件可以實(shí)現(xiàn)pdf預(yù)覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。 實(shí)現(xiàn)方式： js代碼：
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.media.js"></script> 復(fù)制代碼
html結(jié)構(gòu)：
<body> <div id="handout_wrap_inner"></div> </body> 復(fù)制代碼
調(diào)用方式：
<script type="text/javascript">
$('#handout_wrap_inner').media({
width: '100%',
height: '100%',
autoplay: true,
src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
});
</script>
復(fù)制代碼
方式三、直接通過頁面內(nèi)嵌iframe
$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復(fù)制代碼
此外還可以在iframe標(biāo)簽之間提供一個提示類似這樣
<iframe :src="previewUrl" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a> </iframe> 復(fù)制代碼
方式四、通過標(biāo)簽嵌入內(nèi)容
<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">
此標(biāo)簽h5特性中包含四個屬性：高、寬、類型、預(yù)覽文件src！ 與< iframe > < / iframe > 不同，這個標(biāo)簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標(biāo)簽的內(nèi)容什么都看不到！
方式五、標(biāo)簽和iframe使用差別較小
<object :src="previewUrl" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a> </object> 復(fù)制代碼
除方式二以外其他都是直接通過標(biāo)簽將內(nèi)容引入頁面實(shí)現(xiàn)預(yù)覽
方式六、PDFObject
PDFObject實(shí)際上也是通過標(biāo)簽實(shí)現(xiàn)的直接上代碼
<!DOCTYPE html>
<html>
<head>
<title>Show PDF</title>
<meta charset="utf-8" />
<script type="text/javascript" src='pdfobject.min.js'></script>
<style type="text/css">
html,body,#pdf_viewer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
if(PDFObject.supportsPDFs){
// PDF嵌入到網(wǎng)頁
PDFObject.embed("index.pdf", "#pdf_viewer" );
} else {
location.href = "/canvas";
}
</script>
</html>
還可以通過以下代碼進(jìn)行判斷是否支持PDFObject預(yù)覽
if(PDFObject.supportsPDFs){
console.log("Yay, this browser supports inline PDFs.");
} else {
console.log("Boo, inline PDFs are not supported by this browser");
}
復(fù)制代碼
方式七、PDF.js
PDF.js可以實(shí)現(xiàn)在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強(qiáng)大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負(fù)責(zé)API解析，一個負(fù)責(zé)核心解析。
word、ppt、xls文件實(shí)現(xiàn)在線預(yù)覽的方式比較簡單可以直接通過調(diào)用微軟的在線預(yù)覽功能實(shí)現(xiàn) (預(yù)覽前提：資源必須是公共可訪問的)
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'> </iframe> 復(fù)制代碼
src就是要實(shí)現(xiàn)預(yù)覽的文件地址 具體文檔看這微軟接口文檔
補(bǔ)充：google的文檔在線預(yù)覽實(shí)現(xiàn)同微軟（資源必須是公共可訪問的）
<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe> 復(fù)制代碼
3、word文件
XDOC可以實(shí)現(xiàn)預(yù)覽以DataURI表示的DOC文檔，此外XDOC還可以實(shí)現(xiàn)文本、帶參數(shù)文本、html文本、json文本、公文等在線預(yù)覽，具體實(shí)現(xiàn)方法請看官方文檔
下面這種方式可以實(shí)現(xiàn)快速預(yù)覽word但是對文件使用的編輯器可能會有一些限制
<a target="_blank" rel="nofollow">XDOC</a> 復(fù)制代碼
4、excel文件
目前excel文件已經(jīng)有了類似pdf.js那樣的解析sheet.js
總結(jié)：
1、免費(fèi)純前端方式實(shí)現(xiàn)在線預(yù)覽word、excel、ppt最優(yōu)選擇微軟在線預(yù)覽（不可編輯）
2、利用后端將文件轉(zhuǎn)為圖片，前端以圖片形式預(yù)覽（可行方案）
3、購買在線預(yù)覽服務(wù)例如百度DOC文檔服務(wù)、永中、I DOC VIEW等
著名：文章內(nèi)容是從網(wǎng)上搜集資料所得；在次發(fā)表只為自己以及頭條程序員兄弟日后使用圖個方便。
覺得有用記得收藏轉(zhuǎn)發(fā)！
揭秘knife4j：一招教你用JS實(shí)現(xiàn)全局參數(shù)實(shí)時刷新的實(shí)戰(zhàn)攻略
前言
在前后端分離的大潮下，API接口文檔的管理與調(diào)試變得尤為重要。Knife4j（原名Swagger-bootstrap-ui）作為一款優(yōu)秀的 Swagger UI 實(shí)現(xiàn)方案，以其豐富的功能和友好的界面深受開發(fā)者喜愛。本文將針對其強(qiáng)大的全局參數(shù)實(shí)時刷新功能進(jìn)行深入探討，通過JavaScript實(shí)現(xiàn)這一功能的實(shí)戰(zhàn)操作，幫助您提升工作效率。
1.1 Knife4j 簡介
Knife4j 是一個基于 Swagger2 和 OpenAPI 規(guī)范的第三方 UI 實(shí)現(xiàn)，它對原有的 Swagger UI 進(jìn)行了大量優(yōu)化與增強(qiáng)，提供了一種更為高效、易用的方式來管理和調(diào)試 RESTful API。
1.2 全局參數(shù)概念
在 Knife4j 中，全局參數(shù)是指在所有接口請求中都會使用的公共參數(shù)，如用戶身份令牌（Token）、版本號等。全局參數(shù)的實(shí)時刷新意味著每當(dāng)這些參數(shù)值發(fā)生變化時，無需手動更新，所有關(guān)聯(lián)接口的請求結(jié)果會自動隨之改變。
2.1 配置全局參數(shù)
java
@Bean
public Docket createRestApi() {
ParameterBuilder tokenPar = new ParameterBuilder();
List<Parameter> pars = new ArrayList<>();
tokenPar.name("token").description("認(rèn)證token").modelRef(new ModelRef("string")).parameterType("header").required(false).build();
pars.add(tokenPar.build());
return new Docket(DocumentationType.SWAGGER_2)
.globalOperationParameters(pars) // 設(shè)置全局參數(shù)
// ...其他配置
}
在Java后端項目中，通常通過 Swagger2 的 `Docket` 類配置全局參數(shù)：
2.2 刷新機(jī)制原理
雖然Knife4j本身并不直接支持全局參數(shù)的實(shí)時刷新，但我們可以利用瀏覽器緩存、前端輪詢或WebSocket等技術(shù)實(shí)現(xiàn)實(shí)時更新。以下我們將采用JavaScript實(shí)現(xiàn)一個簡單的模擬示例。
3.1 前端監(jiān)聽輸入變化
javascript
document.querySelector('#tokenInput').addEventListener('input', function() {
refreshGlobalParams();
});
首先，我們需要在Knife4j的全局參數(shù)輸入框上添加事件監(jiān)聽器，當(dāng)參數(shù)值發(fā)生改變時觸發(fā)刷新動作。
3.2 刷新全局參數(shù)方法
javascript
function refreshGlobalParams() {
// 獲取當(dāng)前全局參數(shù)值
const tokenValue = document.querySelector('#tokenInput').value;
// 假設(shè)我們有一個接口列表，這里僅做演示
const apiList = ['/api/user', '/api/product'];
apiList.forEach(api => {
// 使用Ajax或者Fetch發(fā)起請求，實(shí)際應(yīng)用中請?zhí)鎿Q為你的請求庫
fetch(api, { headers: { 'Authorization': `Bearer ${tokenValue}` } })
.then(response => response.json())
.then(data => console.log(`Refreshed data from ${api}:`, data))
.catch(error => console.error('Error refreshing:', error));
});
}
定義一個`refreshGlobalParams`函數(shù)，該函數(shù)負(fù)責(zé)重新發(fā)起所有接口請求，獲取最新的數(shù)據(jù)。
通過上述步驟，我們已經(jīng)實(shí)現(xiàn)了全局參數(shù)在前端的實(shí)時刷新。然而在真實(shí)場景中，可能還需要考慮性能優(yōu)化，例如采用節(jié)流或防抖策略來控制刷新頻率，以及結(jié)合WebSocket等技術(shù)實(shí)現(xiàn)實(shí)時推送更新。
盡管Knife4j本身并未內(nèi)置全局參數(shù)實(shí)時刷新的功能，但借助前端JavaScript的強(qiáng)大能力，我們依然可以靈活地滿足這一需求。希望本篇攻略能助你在API管理與調(diào)試過程中更進(jìn)一步，提高開發(fā)效率，享受更好的開發(fā)體驗(yàn)。后續(xù)我們將持續(xù)探索更多 Knife4j 的高級玩法，敬請期待！
今天筆者要來給大家介紹一下接口，廢話不多說我們直接進(jìn)入正文哈。
接口一般來說有兩種，一種是程序內(nèi)部的接口，一種是系統(tǒng)對外的接口。
系統(tǒng)對外的接口：比如你要從別的網(wǎng)站或服務(wù)器上獲取資源或信息，別人肯定不會把數(shù)據(jù)庫共享給你，他只能給你提供一個他們寫好的方法來獲取數(shù)據(jù)，你引用他提供的接口就能使用他寫好的方法，從而達(dá)到數(shù)據(jù)共享的目的，比如說咱們用的app、網(wǎng)址這些它在進(jìn)行數(shù)據(jù)處理的時候都是通過接口來進(jìn)行調(diào)用的。
程序內(nèi)部的接口：方法與方法之間，模塊與模塊之間的交互，程序內(nèi)部拋出的接口，比如bbs系統(tǒng)，有登錄模塊、發(fā)帖模塊等等，那你要發(fā)帖就必須先登錄，要發(fā)帖就得登錄，那么這兩個模塊就得有交互，它就會拋出一個接口，供內(nèi)部系統(tǒng)進(jìn)行調(diào)用。
1、webService接口：是走soap協(xié)議通過http傳輸，請求報文和返回報文都是xml格式的，我們在測試的時候都用通過工具才能進(jìn)行調(diào)用，測試。可以使用的工具有SoapUI、jmeter、loadrunner等；
2、http api接口：是走h(yuǎn)ttp協(xié)議，通過路徑來區(qū)分調(diào)用的方法，請求報文都是key-value形式的，返回報文一般都是json串，有g(shù)et和post等方法，這也是最常用的兩種請求方式。可以使用的工具有postman、RESTClient、jmeter、loadrunner等；
在說接口測試之前，我們先來搞清楚這兩個概念，前端和后端。
前端是什么呢，對于web端來說，咱們使用的網(wǎng)頁，打開的網(wǎng)站，這都是前端，這些都是html、css寫的；對于app端來說呢，它就是咱們用的app，android或者object-C（開發(fā)ios上的app）開發(fā)的，它的作用就是顯示頁面，讓我們看到漂亮的頁面，以及做一些簡單的校驗(yàn)，比如說非空校驗(yàn)，咱們在頁面上操作的時候，這些業(yè)務(wù)邏輯、功能，比如說你購物，發(fā)微博這些功能是由后端來實(shí)現(xiàn)的，后端去控制你購物的時候扣你的余額，發(fā)微博發(fā)到哪個賬號下面，那前端和后端是怎么交互的呢，就是通過接口。
前面說的你可能不好理解，你只需記住：前端負(fù)責(zé)貌美如花，后端負(fù)責(zé)掙錢養(yǎng)家。
接口測試是測試系統(tǒng)組件間接口的一種測試。接口測試主要用于檢測外部系統(tǒng)與系統(tǒng)之間以及內(nèi)部各個子系統(tǒng)之間的交互點(diǎn)。測試的重點(diǎn)是要檢查數(shù)據(jù)的交換，傳遞和控制管理過程，以及系統(tǒng)間的相互邏輯依賴關(guān)系等。
OK，上面是百度百科上說的，下面才是我說的
其實(shí)我覺得接口測試很簡單，比一般的功能測試還簡單，現(xiàn)在找工作好多公司都要求有接口測試經(jīng)驗(yàn)，也有好多人問我（也就兩三個人）什么是接口測試，本著不懂也要裝懂的態(tài)度，我會說：所謂接口測試就是通過測試不同情況下的入?yún)⑴c之相應(yīng)的出參信息來判斷接口是否符合或滿足相應(yīng)的功能性、安全性要求。
我為啥說接口測試比功能測試簡單呢，因?yàn)楣δ軠y試是從頁面輸入值，然后通過點(diǎn)擊按鈕或鏈接等傳值給后端，而且功能測試還要測UI、前端交互等功能，但接口測試沒有頁面，它是通過接口規(guī)范文檔上的調(diào)用地址、請求參數(shù)，拼接報文，然后發(fā)送請求，檢查返回結(jié)果，所以它只需測入?yún)⒑统鰠⒕托辛耍鄬碚f簡單了不少。
首先，接口文檔應(yīng)該包含以下內(nèi)容：
1、接口說明
2、調(diào)用url
3、請求方法（get\post）
4、請求參數(shù)、參數(shù)類型、請求參數(shù)說明
5、返回參數(shù)說明
由接口文檔可知，接口至少應(yīng)有請求地址、請求方法、請求參數(shù)（入?yún)⒑统鰠ⅲ┙M成，部分接口有請求頭header。
標(biāo)頭 (header)：是服務(wù)器以HTTP協(xié)議傳HTML資料到瀏覽器前所送出的字串，在標(biāo)頭與 HTML 文件之間尚需空一行分隔，一般存放cookie、token等信息
有同學(xué)問我header和入?yún)⒂惺裁搓P(guān)系？它們不都是發(fā)送到服務(wù)器的參數(shù)嗎？
OK，首先，它們確實(shí)都是發(fā)送到服務(wù)器里的參數(shù)，但它們是有區(qū)別的，header里存放的參數(shù)一般存放的是一些校驗(yàn)信息，比如cookie，它是為了校驗(yàn)這個請求是否有權(quán)限請求服務(wù)器，如果有，它才能請求服務(wù)器，然后把請求地址連同入?yún)⒁黄鸢l(fā)送到服務(wù)器，然后服務(wù)器會根據(jù)地址和入?yún)矸祷爻鰠ⅰＲ簿褪钦f，服務(wù)器是先接受header信息進(jìn)行判斷該請求是否有權(quán)限請求，判斷有權(quán)限后，才會接受請求地址和入?yún)⒌摹?/span>
大家都知道，接口其實(shí)就是前端頁面或APP等調(diào)用與后端做交互用的，所以好多人都會問，我功能測試都測好了，為什么還要測接口呢？OK，在回答這個問題之前，先舉個栗子：
比如測試用戶注冊功能，規(guī)定用戶名為6~18個字符，包含字母（區(qū)分大小寫）、數(shù)字、下劃線。首先功能測試時肯定會對用戶名規(guī)則進(jìn)行測試時，比如輸入20個字符、輸入特殊字符等，但這些可能只是在前端做了校驗(yàn)，后端可能沒做校驗(yàn)，如果有人通過抓包繞過前端校驗(yàn)直接發(fā)送到后端怎么辦呢？試想一下，如果用戶名和密碼未在后端做校驗(yàn)，而有人又繞過前端校驗(yàn)的話，那用戶名和密碼不就可以隨便輸了嗎？如果是登錄可能會通過SQL注入等手段來隨意登錄，甚至可以獲取管理員權(quán)限，那這樣不是很恐怖？
所以，接口測試的必要性就體現(xiàn)出來了：
①、可以發(fā)現(xiàn)很多在頁面上操作發(fā)現(xiàn)不了的bug
②、檢查系統(tǒng)的異常處理能力
③、檢查系統(tǒng)的安全性、穩(wěn)定性
④、前端隨便變，接口測好了，后端不用變
在進(jìn)行接口測試前，還需要了解：
1）GET和POST請求：
如果是get請求的話，直接在瀏覽器里輸入就行了，只要在瀏覽器里面直接能請求到的，都是get請求，如果是post的請求的話，就不行了，就得借助工具來發(fā)送。
GET請求和POST請求的區(qū)別：
1、GET使用URL或Cookie傳參。而POST將數(shù)據(jù)放在BODY中。
2、GET的URL會有長度上的限制，則POST的數(shù)據(jù)則可以非常大。
3、POST比GET安全，因?yàn)閿?shù)據(jù)在地址欄上不可見。
4、一般get請求用來獲取數(shù)據(jù)，post請求用來發(fā)送數(shù)據(jù)。
其實(shí)上面這幾點(diǎn)，只有最后一點(diǎn)說的是比較靠譜的，第一點(diǎn)post請求也可以把數(shù)據(jù)放到url里面，get請求其實(shí)也沒長度限制，post請求看起來參數(shù)是隱式的，稍微安全那么一些些，但是那只是對于小白用戶來說的，就算post請求，你通過抓包也是可以抓到參數(shù)的。所以上面這些面試的時候你說出來就行了。
2）http狀態(tài)碼
每發(fā)出一個http請求之后，都會有一個響應(yīng)，http本身會有一個狀態(tài)碼，來標(biāo)示這個請求是否成功，常見的狀態(tài)碼有以下幾種：
1、200 2開頭的都表示這個請求發(fā)送成功，最常見的就是200，就代表這個請求是ok的，服務(wù)器也返回了。
2、300 3開頭的代表重定向，最常見的是302，把這個請求重定向到別的地方了，
3、400 400代表客戶端發(fā)送的請求有語法錯誤，401代表訪問的頁面沒有授權(quán)，403表示沒有權(quán)限訪問這個頁面，404代表沒有這個頁面
4、500 5開頭的代表服務(wù)器有異常，500代表服務(wù)器內(nèi)部異常，504代表服務(wù)器端超時，沒返回結(jié)果
接下來再說接口測試怎么測：
1）、通用接口用例設(shè)計
①、通過性驗(yàn)證：首先肯定要保證這個接口功能是好使的，也就是正常的通過性測試，按照接口文檔上的參數(shù)，正常傳入，是否可以返回正確的結(jié)果。
②、參數(shù)組合：現(xiàn)在有一個操作商品的接口，有個字段type，傳1的時候代表修改商品，商品id、商品名稱、價格有一個是必傳的，type傳2的時候是刪除商品，商品id 是必傳的，這樣的，就要測參數(shù)組合了，type傳1的時候，只傳商品名稱能不能修改成功，id、名稱、價格都傳的時候能不能修改成功。
③、接口安全：
1、繞過驗(yàn)證，比如說購買了一個商品，它的價格是300元，那我在提交訂單時候，我把這個商品的價格改成3元，后端有沒有做驗(yàn)證，更狠點(diǎn)，我把錢改成-3，是不是我的余額還要增加？
2、繞過身份授權(quán)，比如說修改商品信息接口，那必須得是賣家才能修改，那我傳一個普通用戶，能不能修改成功，我傳一個其他的賣家能不能修改成功
3、參數(shù)是否加密，比如說我登陸的接口，用戶名和密碼是不是加密，如果不加密的話，別人攔截到你的請求，就能獲取到你的信息了，加密規(guī)則是否容易破解。
4、密碼安全規(guī)則，密碼的復(fù)雜程度校驗(yàn)
④、異常驗(yàn)證：
所謂異常驗(yàn)證，也就是我不按照你接口文檔上的要求輸入?yún)?shù)，來驗(yàn)證接口對異常情況的校驗(yàn)。比如說必填的參數(shù)不填，輸入整數(shù)類型的，傳入字符串類型，長度是10的，傳11，總之就是你說怎么來，我就不怎么來，其實(shí)也就這三種，必傳非必傳、參數(shù)類型、入?yún)㈤L度。
2）、根據(jù)業(yè)務(wù)邏輯來設(shè)計用例
根據(jù)業(yè)務(wù)邏輯來設(shè)計的話，就是根據(jù)自己系統(tǒng)的業(yè)務(wù)來設(shè)計用例，這個每個公司的業(yè)務(wù)不一樣，就得具體的看自己公司的業(yè)務(wù)了，其實(shí)這也和功能測試設(shè)計用例是一樣的。
舉個例子，拿bbs來說，bbs的需求是這樣的：
1、登錄失敗5次，就需要等待15分鐘之后再登錄
2、新注冊的用戶需要過了實(shí)習(xí)期才能發(fā)帖
3、刪除帖子扣除積分
4、......
像這樣的你就要把這些測試點(diǎn)列出來，然后再去造數(shù)據(jù)測試對應(yīng)的測試點(diǎn)。
接口測試的工具很多，比如 postman、RESTClient、jmeter、loadrunner、SoapUI等，首推的測試工具是postman和jmeter（測試框架的話，可以選擇Robot Framework Pytest等），接下來就簡單介紹下如何使用這兩款工具進(jìn)行接口測試，其他工具本次暫不介紹。
1）Postman是谷歌的一款接口測試插件，它使用簡單，支持用例管理，支持get、post、文件上傳、響應(yīng)驗(yàn)證、變量管理、環(huán)境參數(shù)管理等功能，可以批量運(yùn)行，并支持用例導(dǎo)出、導(dǎo)入。
2）jmeter是一款100%純Java編寫的免費(fèi)開源的工具，它主要用來做性能測試，相比loadrunner來說，它內(nèi)存占用小，免費(fèi)開源，輕巧方便、無需安裝，越來越被大眾所喜愛。
今天的分享就到這里了，喜歡的可以點(diǎn)贊收藏，加關(guān)注喲，關(guān)注我不迷路。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
