React 是由 Facebook 開發(fā)的一個(gè)用于構(gòu)建用戶界面的 JavaScript 庫。以下是 React 快速入門的步驟：
安裝 React：可以通過命令行工具使用 npm 或者 yarn 安裝 React。
創(chuàng)建 React 應(yīng)用程序：可以使用腳手架工具（如 create-react-app）快速創(chuàng)建基本的 React 應(yīng)用程序。
編寫組件：React 的核心是組件，您需要編寫組件來構(gòu)建應(yīng)用程序。組件是一個(gè)可重復(fù)使用的代碼塊，它包含了 HTML 和 JavaScript 代碼。
渲染組件：使用 ReactDOM.render() 方法將組件渲染到頁面上。
處理事件：React 使用類似 HTML 的語法來處理事件。在組件中定義事件處理程序，例如 onClick 或者 onSubmit，并將其綁定到相應(yīng)的元素上。
狀態(tài)管理：React 允許您使用狀態(tài)來管理數(shù)據(jù)。您可以使用 setState() 方法更新組件的狀態(tài)，并在組件中讀取狀態(tài)以顯示不同的內(nèi)容。
生命周期：React 組件有生命周期方法，這些方法允許您在組件生命周期內(nèi)執(zhí)行操作。例如，componentDidMount() 方法在組件被掛載后執(zhí)行一次，用于初始化數(shù)據(jù)。
這些是 React 快速入門的基本步驟。要深入了解 React，請查閱相關(guān)文檔和教程。
React 生命周期指的是React組件在掛載（mounting）、更新（updating）和卸載（unmounting）等不同階段所經(jīng)歷的生命周期方法，包括：
其中，constructor()是組件實(shí)例化時(shí)第一個(gè)被調(diào)用的方法；static getDerivedStateFromProps()將props映射為state的方法；render()渲染組件的虛擬DOM；componentDidMount()在組件掛載后執(zhí)行；shouldComponentUpdate()控制組件是否需要重新渲染；getSnapshotBeforeUpdate()捕獲更新前的DOM狀態(tài)；componentDidUpdate()在組件更新后執(zhí)行；componentWillUnmount()在組件卸載前執(zhí)行清理操作。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
Vue組件實(shí)例在創(chuàng)建、更新和銷毀過程中，會(huì)依次觸發(fā)一些鉤子函數(shù)，這些鉤子函數(shù)稱為Vue生命周期函數(shù)。Vue的生命周期分為四個(gè)階段：創(chuàng)建階段、掛載階段、更新階段和銷毀階段。
在創(chuàng)建階段，Vue實(shí)例正在被創(chuàng)建，這個(gè)階段中包含了實(shí)例化、數(shù)據(jù)觀測、事件/鉤子初始化等過程。具體包括以下鉤子函數(shù)：
在這個(gè)階段，Vue實(shí)例將模板渲染成真實(shí)的DOM并進(jìn)行掛載到頁面上。具體包括以下鉤子函數(shù)：
在這個(gè)階段，當(dāng)Vue實(shí)例的數(shù)據(jù)變化時(shí)，它會(huì)重新渲染虛擬DOM并更新到頁面上。具體包括以下鉤子函數(shù)：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
使用layui實(shí)現(xiàn)前端換膚功能可以通過以下幾個(gè)步驟完成：
安裝layui：我們需要從官方網(wǎng)站下載安裝layui。你可以在https://www.layui.com/下載最新版本。
引入樣式文件：在HTML頁面中引入需要的樣式文件。我們可以使用layuicss提供的樣式表來實(shí)現(xiàn)各種外觀效果。如果您需要自定義樣式，請創(chuàng)建自己的CSS文件，并在HTML中引入。
創(chuàng)建主題顏色列表：我們需要?jiǎng)?chuàng)建一個(gè)包含所有可用主題顏色的列表。您可以使用數(shù)組或JSON對象來創(chuàng)建此列表。例如：
javascript復(fù)制代碼
var themeColors = [
{name: '默認(rèn)', color: '#009688'},
{name: '橙色', color: '#FFB800'},
{name: '墨綠', color: '#393D49'},
{name: '紫色', color: '#800080'},
{name: '深藍(lán)', color: '#285FD3'}
];
javascript復(fù)制代碼
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化顏色選擇器 colorpicker.render({ elem: '#theme-color-picker',
colors
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
Vue.js是一款非常流行的JavaScript框架，用于構(gòu)建單頁Web應(yīng)用程序（SPA）。它的設(shè)計(jì)目標(biāo)是簡單、靈活和易于使用。Vue.js提供了許多有用的功能，可以幫助開發(fā)人員更輕松地構(gòu)建響應(yīng)式、動(dòng)態(tài)的用戶界面。在本文中，我們將介紹Vue.js的基礎(chǔ)知識，以及如何使用Vue.js來創(chuàng)建一個(gè)簡單的Web應(yīng)用程序。
首先，讓我們來看一下Vue.js的核心思想。Vue.js采用了MVVM（Model-View-ViewModel）的架構(gòu)模式。這種模式將應(yīng)用程序分為三個(gè)部分：模型（Model）、視圖（View）和視圖模型（ViewModel）。模型表示應(yīng)用程序的數(shù)據(jù)，視圖表示UI，而視圖模型則是將兩者鏈接起來的橋梁。Vue.js的核心就是它的響應(yīng)式系統(tǒng)。當(dāng)模型的狀態(tài)發(fā)生改變時(shí)，視圖會(huì)自動(dòng)更新，反之亦然。這使得開發(fā)人員可以更加專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)，而不需要手動(dòng)處理DOM操作。
接下來，讓我們看一下Vue.js的基礎(chǔ)語法。Vue.js通過指令（Directive）來擴(kuò)展HTML。指令以v-開頭，并且在表達(dá)式中使用。例如，v-bind指令用于將一個(gè)屬性綁定到表達(dá)式上，v-model指令用于雙向綁定表單元素和應(yīng)用程序狀態(tài)之間的數(shù)據(jù)。Vue.js還提供了許多其他指令，
一、核心概念
模板語法：Vue.js使用了一種類似于HTML的模板語法來聲明渲染和組合DOM元素。模板語法被稱為Vue指令，可以通過{{ }}和v-前綴在模板中使用。其中{{ }}用于文本插值，而v-則用于Vue.js提供的各種指令。
數(shù)據(jù)綁定：Vue.js的核心是響應(yīng)式數(shù)據(jù)綁定系統(tǒng)，它能夠自動(dòng)跟蹤并響應(yīng)數(shù)據(jù)對象和視圖之間的變化。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)立即更新視圖以反映這些變化。
組件化：Vue.js允許我們將UI分解為可重用和獨(dú)立的組件。每個(gè)組件都有自己的狀態(tài)和行為，并且可以與其他組件組合使用。這種組件化方法使得代碼更容易維護(hù)、測試和復(fù)用。
生命周期鉤子函數(shù)：Vue.js提供了一組生命周期鉤子函數(shù)，在不同階段執(zhí)行自定義邏輯。這些鉤子函數(shù)包
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
layui是一款基于jQuery的前端UI框架，它的設(shè)計(jì)理念是“零門檻”，使得開發(fā)者可以快速地構(gòu)建出美觀、易用的界面。下面將從以下幾個(gè)方面介紹layui框架的使用。
你可以從layui官網(wǎng)下載最新版本的layui壓縮包，也可以使用npm進(jìn)行安裝。在HTML文件中，只需要引入layui.js和layui.css兩個(gè)文件即可開始使用：
html復(fù)制代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Webpage</title> <link rel="stylesheet" href="path/to/layui/css/layui.css"> </head> <body> <script src="path/to/layui/layui.js"></script> </body> </html>
layui提供了許多常用的UI組件，例如按鈕、表單、彈窗、選項(xiàng)卡等。這些組件可以通過簡單的html標(biāo)簽和屬性來創(chuàng)建。例如，如果您想要?jiǎng)?chuàng)建一個(gè)按鈕，只需要使用以下代碼：
html復(fù)制代碼
<button class="layui-btn">按鈕</button>
同時(shí)，layui還提供了一些特殊類型的按鈕，如次要按鈕、禁用按鈕、圓角按鈕等。
layui提供了一套默認(rèn)的主題風(fēng)格，但是如果您想要自定義樣式，layui同樣提供了很好的支持。您可以通過修改layui.css文件或者使用自定義CSS覆蓋默認(rèn)樣式，來實(shí)現(xiàn)您想要的效果。
layui 是一款基于 jQuery 的前端 UI 框架，它具有簡潔、易用和高效的特點(diǎn)，非常適合快速開發(fā)響應(yīng)式界面。下面是使用 layui 框架的示例。
首先，需要在 HTML 文件中引入 layui 的樣式文件和腳本文件：
復(fù)制代碼
<!-- 引入樣式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <!-- 引入腳本文件 --> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script>
接著，在 HTML 文件中編寫相應(yīng)的結(jié)構(gòu)和內(nèi)容，并使用 layui 提供的組件進(jìn)行布局和樣式設(shè)置。例如，可以使用 layui 的表格組件來展示數(shù)據(jù)：
復(fù)制代碼
<table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> <tr> <td>王五</td> <td>21</td> <td>男</td> </tr> </tbody> </table>
除了表格組件，layui 還提供了很多其他的組件，如按鈕、輸入等...
去年在博客中發(fā)了兩篇關(guān)于GIF動(dòng)態(tài)生成的博客，GIF圖像動(dòng)態(tài)生成-JAVA后臺生成和基于FFmpeg的Java視頻Mp4轉(zhuǎn)GIF初探，在這兩篇博客中都是采用JAVA語言在后臺進(jìn)行轉(zhuǎn)換。使用JAVA的同學(xué)經(jīng)過自己的改造和開發(fā)也可以應(yīng)用在項(xiàng)目上。前段時(shí)間有朋友私下問，有沒有不使用Java，甚至不依賴于后臺的，直接基于前端的GIF動(dòng)圖生成，有沒有這種技術(shù)方案。博主個(gè)人對前端不是很擅長，后來也是在github上自習(xí)搜索了一番，發(fā)現(xiàn)了一個(gè)比較有意思的，可以直接在前端使用的gif動(dòng)態(tài)圖生成組件。本文重點(diǎn)聊聊gif.js組件，介紹一下gif這個(gè)組件的基本原理，在生產(chǎn)中如何進(jìn)行使用。
gif.js在github的地址是：gif.js,打開它的官方網(wǎng)站，可以看到如下的介紹：
作為一款成熟的插件，在github上有4.5k的star，足以說明它的受歡迎程度。而且gif.js采用的是寬松的MIT協(xié)議，您可以隨意下載這個(gè)插件，再此基礎(chǔ)之上改造成自己的工具供別人使用。使用git clone將工程下載到本地后，可以看到gif.js的初始目錄。
打開工程目錄的package.json文件，這里定義了文件基礎(chǔ)依賴。打開后可以看到如下的定義信息：
在GIFEncoder.js文件中定義了gif.js對象了基本一些屬性，在上面的目錄中打開目標(biāo)文件后，可以看到屬性定義方法：
核心方法API說明：您可以使用構(gòu)造方法或者使用setOptions（）方法類設(shè)置相關(guān)的屬性。詳情可以看下面的說明：
|
Name |
Default |
Description |
|
repeat |
0 |
repeat count, -1 = no repeat, 0 = forever |
|
quality |
10 |
pixel sample interval, lower is better |
|
workers |
2 |
number of web workers to spawn |
|
workerScript |
gif.worker.js |
url to load worker script from |
|
background |
#fff |
background color where source image is transparent |
|
width |
null |
output image width |
|
height |
null |
output image height |
|
transparent |
null |
transparent hex color, 0x00FF00 = green |
|
dither |
false |
dithering method, e.g. FloydSteinberg-serpentine |
|
debug |
false |
whether to print debug information to console |
下面采用具體的代碼進(jìn)行一個(gè)實(shí)際例子的實(shí)踐。
這里以video2.html為例，在這個(gè)工程中引入了gif.js和gif.worker.js。工程目錄如下，Jquery.js作為非必須依賴。
-
<head>
-
<meta charset="utf-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
<title>視頻轉(zhuǎn)GIF</title>
-
<meta name="description" content="Full-featured JavaScript GIF encoder that runs in your browser.">
-
<meta name="keywords" content="gif, encoder, animation, browser, unicorn">
-
<meta name="viewport" content="width=device-width">
-
<meta property="og:title" content="gif.js">
-
<meta property="og:url" content="http://jnordberg.github.io/gif.js">
-
<meta property="og:description" content="Full-featured JavaScript GIF encoder that runs in your browser.">
-
<meta property="og:type" content="website">
-
<link rel="stylesheet" href="main.css">
-
<script src="gif.js?v=3"></script>
-
<script src="video.js?v=3"></script>
-
</head>
-
gif = new GIF({
-
workers: 4,
-
workerScript: 'gif.worker.js',
-
width: 600,
-
height: 337
-
});
定義好了gif對象之后，還需要定義相應(yīng)的響應(yīng)事件，如下代碼所示：
-
sample.addEvent('change', sampleUpdate);
-
-
button.addEvent('click', function() {
-
video.pause();
-
video.currentTime = 0;
-
gif.abort();
-
gif.frames = [];
-
return video.play();
-
});
-
-
gif.on('start', function() {
-
return startTime = now();
-
});
-
-
gif.on('progress', function(p) {
-
return info.set('text', "rendering: " + (Math.round(p * 100)) + "%");
-
});
-
-
gif.on('finished', function(blob) {
-
var delta, img;
-
img = document.id('result');
-
img.src = URL.createObjectURL(blob);
-
delta = now() - startTime;
-
console.log("done in\n" + ((delta / 1000).toFixed(2)) + "sec,\nsize " + ((blob.size / 1000).toFixed(2)) + "kb");
-
return info.set('text', "done in\n" + ((delta / 1000).toFixed(2)) + "sec,\nsize " + ((blob.size / 1000).toFixed(2)) + "kb");
-
});
代碼有點(diǎn)長，這里不一一列出，需要源代碼的可以私信。
使用nginx進(jìn)行靜態(tài)發(fā)布后，可以看到如下的效果：
點(diǎn)擊執(zhí)行按鈕后，在網(wǎng)頁下面生成gif動(dòng)態(tài)圖，如下所示：
實(shí)際生成的動(dòng)態(tài)圖會(huì)根據(jù)原始視頻的大小，畫質(zhì)質(zhì)量，清晰度等因素影響，執(zhí)行時(shí)間也會(huì)有影響。在實(shí)際項(xiàng)目中需要根據(jù)需要調(diào)整相應(yīng)的參數(shù)才可以。
以完成后渲染動(dòng)圖為例講解合成過程，
可以在變量區(qū)看到客戶端開啟了多個(gè)Worker進(jìn)行并行處理。
在這里進(jìn)行數(shù)據(jù)合并處理，如下：
最終合成gif圖片，在html中進(jìn)行dom渲染。
以上就是本文的主要內(nèi)容，本文重點(diǎn)介紹了一款前端基于Javascript的gif.js生成插件，分析了它的源碼結(jié)構(gòu)，最后通過一個(gè)實(shí)例進(jìn)行了案例講解，幫您快速的了解和掌握這個(gè)組件，文章行文倉促，如有錯(cuò)誤，請留言交流。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
在配置的過程中踩了很多坑，還是太菜，有些東西弄不明白什么意思。
運(yùn)行項(xiàng)目時(shí)的報(bào)錯(cuò)可直接到最下面看vite.config.js文件的注釋
目前項(xiàng)目用到的模塊并不多，package.json文件如下
-
{
-
"name": "PsWebV3Abb",
-
"version": "0.0.0",
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build"
-
},
-
"dependencies": {
-
"@vitejs/plugin-vue": "^1.0.0",
-
"axios": "^1.2.1",
-
"element-plus": "^2.2.26",
-
"vite": "^4.0.3",
-
"vue": "^3.0.4",
-
"vue-router": "^4.1.5"
-
},
-
"devDependencies": {
-
"@vue/compiler-sfc": "^3.0.4"
-
}
-
}
其實(shí)主要還是這些模塊的版本兼容問題
vite的版本最開始是1.0.0，后面很多地方搞不下去了才卸載了重裝新的版本
當(dāng)然還是建議仔細(xì)閱讀一下官方文檔，其實(shí)很多重要的點(diǎn)都講的很清楚，只不過是遇到問題的時(shí)候才會(huì)注意到。官方文檔請移步這里
下面簡單的說一下這個(gè)文件，
首先是文件的位置，放在其他位置是無效的：
運(yùn)行vite項(xiàng)目的時(shí)候，就會(huì)自動(dòng)解析根目錄下面的這個(gè)文件
我這里的主要目的還是解決項(xiàng)目運(yùn)行時(shí)的跨域問題
下面是封裝的一個(gè)簡單的請求示例，其中service是一個(gè)封裝好的axios實(shí)例，可以指定一下baseurl，以及請求和響應(yīng)攔截。
其他的API都可以像這樣通過給getItem添加方法的方式實(shí)現(xiàn)
-
import service from '../utils/requests.js'
-
-
const getItem = {}
-
-
getItem.getppitem = function (params) {
-
return service.get('api/AutoSimple/getdata', params)
-
}
-
-
export default getItem
vite.config.js 具體的配置如下
-
import { defineConfig } from 'vite'
-
import vue from '@vitejs/plugin-vue'
-
// import eslintPlugin from 'vite-plugin-eslint'
-
// https://vitejs.dev/config/
-
-
// 這個(gè)配置文件可能出現(xiàn)的問題：
-
// 首先是此文件放置的位置
-
// 1.未安裝 @vitejs/plugin-vue
-
// 處理方法：npm i @vitejs/plugin-vue@1.0.0
-
// 由于本項(xiàng)目vite版本1.0限制，只能用了plugin-vue的1.0.0版本,但在運(yùn)行的時(shí)候又導(dǎo)致了問題2，
-
// 于是直接卸載vite重新安裝最新的3.0.4,這個(gè)版本直接install plugin-vue仍然不行，還是要用1.0.0版本
-
// 2.顯示不存在函數(shù) defineConfig
-
// 在此之后npm run dev,又報(bào)了一個(gè)錯(cuò)：Cannot find module 'node:path'
-
// 在掘金上看到是和node版本有關(guān)，更新后就可以正常運(yùn)行了
-
-
export default defineConfig({
-
plugins: [
-
vue()
-
// 檢查代碼格式
-
// eslintPlugin({
-
// include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
-
// })
-
],
-
server: {
-
// 默認(rèn)打開的端口和本地
-
// host: '0.0.0.0',
-
port: 3000,
-
https: false, // 不支持https
-
proxy: {
-
'/api': {
-
target: 'http://10.200.20.80/BARCODESERVICE', // 實(shí)際請求地址
-
changeOrigin: true, // 是否跨域
-
rewrite: (path) => path.replace(/^\/api/, '') // 對什么類的服務(wù)器匹配
-
},
-
}
-
}
-
})
-
在部署生產(chǎn)環(huán)境時(shí)，又遇到了兩個(gè)問題：
客戶環(huán)境是IIS服務(wù)器，為了節(jié)省端口，在部署的時(shí)候選擇在同一個(gè)網(wǎng)站下添加多個(gè)應(yīng)用程序的方式，這就使得在部署時(shí)，需要添加公共的基礎(chǔ)路徑，這一點(diǎn)在官方文檔中有詳細(xì)的說明。
解決方案：
在package.json中配置
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build --base=/PsWebDand/ "
-
}
vite.config.js 中的server的proxy無效，此時(shí)跨域的問題需要通過在后端服務(wù)中配置來解決
IIS服務(wù)器
-
<httpProtocol>
-
<customHeaders>
-
<add name="Access-Control-Allow-Headers " value="Content-Type,api_key,Authorization" />
-
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
-
<add name="Access-Control-Allow-Origin" value="*" />
-
</customHeaders>
-
</httpProtocol>
定義 Proxy 代理對象的 set 的時(shí)候，
要返回 return true 。
特別是在嚴(yán)格模式下，否則，會(huì)報(bào)錯(cuò) 'set' on proxy: trap returned falsish for property 'message'
let handler = { get(obj, property) { }, set(obj, property, value) { return true; } } new Proxy({}, handler);
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
$emit，父組件傳data給子組件，子組件通過$emit來觸發(fā)父組件中綁定在子組件身上的事件，達(dá)到改變父組件中的data的方法。下面介紹$emit傳值的幾種方法：
一：$emit傳遞單值
子組件Test.vue：
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點(diǎn)擊我向父組件傳遞參數(shù)</button>
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
export default {
-
-
methods: {
-
-
changeFather() {
-
-
this.$emit("changeEvent",'1');
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
</style>
父組件：App.vue
-
<template>
-
-
<div id="app">
-
-
<p>這是父組件</p>
-
-
<div>{{myString}}</div>
-
-
<Test @changeEvent="changeMyString" />
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
import Test from "./components/Test";
-
-
export default {
-
-
name: "App",
-
-
components: { Test },
-
-
data: function() {
-
-
return {
-
-
myString: ''
-
-
};
-
-
},
-
-
methods: {
-
-
changeMyString(val) {
-
-
console.log(val);
-
-
this.myString=val;
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
#app {
-
-
font-family: Avenir, Helvetica, Arial, sans-serif;
-
-
-webkit-font-smoothing: antialiased;
-
-
-moz-osx-font-smoothing: grayscale;
-
-
text-align: center;
-
-
color: #2c3e50;
-
-
margin-top: 60px;
-
-
}
-
-
</style>
點(diǎn)擊按鈕效果如圖：
二：$emit傳遞多個(gè)值
子組件Test.vue:
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點(diǎn)擊我向父組件傳遞參數(shù)</button>
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
export default {
-
-
methods: {
-
-
changeFather() {
-
-
this.$emit("changeEvent",'1','2');
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
</style>
父組件App.vue:
-
<template>
-
-
<div id="app">
-
-
<p>這是父組件</p>
-
-
<div>{{myString}}</div>
-
-
<Test @changeEvent="changeMyString" />
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
import Test from "./components/Test";
-
-
export default {
-
-
name: "App",
-
-
components: { Test },
-
-
data: function() {
-
-
return {
-
-
myString: ''
-
-
};
-
-
},
-
-
methods: {
-
-
changeMyString(val0,val1) {
-
-
console.log(val0,val1);
-
-
this.myString=val0+val1;
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
#app {
-
-
font-family: Avenir, Helvetica, Arial, sans-serif;
-
-
-webkit-font-smoothing: antialiased;
-
-
-moz-osx-font-smoothing: grayscale;
-
-
text-align: center;
-
-
color: #2c3e50;
-
-
margin-top: 60px;
-
-
}
-
-
</style>
點(diǎn)擊按鈕，效果如下：
$emit傳遞多個(gè)值時(shí)，還可以采用數(shù)組的形式：
修改子組件Test.vue:
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點(diǎn)擊我向父組件傳遞參數(shù)</button>
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
export default {
-
-
methods: {
-
-
changeFather() {
-
-
this.$emit("changeEvent",['1','2']);
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
</style>
父組件App.vue:
-
<template>
-
-
<div id="app">
-
-
<p>這是父組件</p>
-
-
<div>{{myString}}</div>
-
-
<Test @changeEvent="changeMyString" />
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
import Test from "./components/Test";
-
-
export default {
-
-
name: "App",
-
-
components: { Test },
-
-
data: function() {
-
-
return {
-
-
myString: ''
-
-
};
-
-
},
-
-
methods: {
-
-
changeMyString(val) {
-
-
console.log(val);
-
-
this.myString=val[0]+val[1];
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
#app {
-
-
font-family: Avenir, Helvetica, Arial, sans-serif;
-
-
-webkit-font-smoothing: antialiased;
-
-
-moz-osx-font-smoothing: grayscale;
-
-
text-align: center;
-
-
color: #2c3e50;
-
-
margin-top: 60px;
-
-
}
-
-
</style>
點(diǎn)擊按鈕，效果如下：
三：子組件通過$emit傳遞給父組件傳遞值，并且父組件有自定義參數(shù)時(shí)：
子組件Test.vue:
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點(diǎn)擊我向父組件傳遞參數(shù)</button>
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
export default {
-
-
methods: {
-
-
changeFather() {
-
-
this.$emit("changeEvent",1,2);
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
</style>
父組件：App.vue
-
<template>
-
-
<div id="app">
-
-
<p>這是父組件</p>
-
-
<div>{{myString}}</div>
-
-
<Test @changeEvent="changeMyString('myParameter',...arguments)" />
-
-
</div>
-
-
</template>
-
-
-
-
<script>
-
-
import Test from "./components/Test";
-
-
export default {
-
-
name: "App",
-
-
components: { Test },
-
-
data: function() {
-
-
return {
-
-
myString: ''
-
-
};
-
-
},
-
-
methods: {
-
-
changeMyString(...args) {
-
-
console.log(args);
-
-
this.myString=args;
-
-
}
-
-
}
-
-
};
-
-
</script>
-
-
-
-
<style>
-
-
#app {
-
-
font-family: Avenir, Helvetica, Arial, sans-serif;
-
-
-webkit-font-smoothing: antialiased;
-
-
-moz-osx-font-smoothing: grayscale;
-
-
text-align: center;
-
-
color: #2c3e50;
-
-
margin-top: 60px;
-
-
}
-
-
</style>
點(diǎn)擊按鈕，效果圖如下：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
背景：項(xiàng)目中通過攝像機(jī)提供的rtsp流來顯示畫面，但是在編寫項(xiàng)目中，需要將rtsp實(shí)時(shí)流畫面?zhèn)鬏數(shù)絯eb前端頁面中。于是找了很多方法，都是后臺轉(zhuǎn)碼轉(zhuǎn)成rtmp來播放，現(xiàn)在大部分插件和瀏覽器都是支持使用rtmp播放視頻流。而rtsp隨著flash的退出而被復(fù)雜化了。網(wǎng)上都是1、通過ffmpeg轉(zhuǎn)碼后輸出，2、通過攝像機(jī)指定的web插件轉(zhuǎn)碼輔助播放，如?？担笕A攝像機(jī)；3、還有個(gè)猿大師播放器基于猿大師中間件提供的內(nèi)嵌網(wǎng)頁播放（沒用過，不知道行不行，原本想用現(xiàn)在這個(gè)方法行不行的，若不行就用這個(gè)猿大師了的）
安裝成功以后，你重新打開一個(gè)命令行終端，輸入：ffmpeg -h，如果能輸出 ffmpeg 的相關(guān)信息出來，則證明你的電腦安裝 ffmpeg 成功。
創(chuàng)建了一個(gè)vuecli（vue2）項(xiàng)目，名稱不要起rtsp2web，與src文件夾同級
下創(chuàng)建一個(gè)serve文件夾
-|public
|-favicon.ico
|-index.html
-|src
-|serve
-|.gittignore
-.....
npm init --yes
npm install rtsp2web
//index.js
const RTSP2web = require('rtsp2web')
//服務(wù)端的端口號，端口號可以自定義
const port = 8033
new RTSP2web({
port
)}
運(yùn)行命令：node index.js
在public的index.html中
其中jsmpeg.min.js通過src引入，可以用jsmpeg.js或者jsmpeg.min.js都行
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--v jsmpeg.min.js文件用在這 v-->
<script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
var rtsp = 'rtsp://username:password@ip:port/live'
window.onload = () => {
//這里的port要與index.js的port保持一致
new JSMpeg.Player("ws://localhost:8033/rtsp?url="+btoa(rtsp), {
canvas: document.getElementById("canvas")
})
}
</script>
</html>
#####在vue頁面中用canvas中播放視頻
如 在App.vue中這樣用：
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
</div>
</template>
為什么node index.js之后沒反應(yīng)？
—檢查端口號是否填寫對應(yīng)，index.js中的端口要與script里的端口保持一致
|
為什么長時(shí)間未顯示圖像？
—需要等待大概1-2分鐘，就會(huì)顯示畫面。至于這么長時(shí)間未顯示，小弟也不知道啊。。希望大佬指點(diǎn)。。
完事了就，這是我歷經(jīng)千辛萬苦找到的方法，弄這個(gè)vue中播放rtsp搞了好久，技術(shù)太拉了我，只能用這些小玩意來搞。原本打算用java或者python通過拉rtsp流解析成rtmp的，奈何能力不足，也懶得思考懶得搞懶得弄，所以擺爛了QAQ
若哪里有講的不妥和使用不當(dāng)?shù)牡胤竭€請您告知一下，萬分感謝大佬指點(diǎn)，小弟深表感謝<抱拳>
-----------------------------------------------------------------------------------------------------------
https://zhuanlan.zhihu.com/p/531899593 ??
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com