React 是由 Facebook 開發的一個用于構建用戶界面的 JavaScript 庫。以下是 React 快速入門的步驟：
安裝 React：可以通過命令行工具使用 npm 或者 yarn 安裝 React。
創建 React 應用程序：可以使用腳手架工具（如 create-react-app）快速創建基本的 React 應用程序。
編寫組件：React 的核心是組件，您需要編寫組件來構建應用程序。組件是一個可重復使用的代碼塊，它包含了 HTML 和 JavaScript 代碼。
渲染組件：使用 ReactDOM.render() 方法將組件渲染到頁面上。
處理事件：React 使用類似 HTML 的語法來處理事件。在組件中定義事件處理程序，例如 onClick 或者 onSubmit，并將其綁定到相應的元素上。
狀態管理：React 允許您使用狀態來管理數據。您可以使用 setState() 方法更新組件的狀態，并在組件中讀取狀態以顯示不同的內容。
生命周期：React 組件有生命周期方法，這些方法允許您在組件生命周期內執行操作。例如，componentDidMount() 方法在組件被掛載后執行一次，用于初始化數據。
這些是 React 快速入門的基本步驟。要深入了解 React，請查閱相關文檔和教程。
React 生命周期指的是React組件在掛載（mounting）、更新（updating）和卸載（unmounting）等不同階段所經歷的生命周期方法，包括：
其中，constructor()是組件實例化時第一個被調用的方法；static getDerivedStateFromProps()將props映射為state的方法；render()渲染組件的虛擬DOM；componentDidMount()在組件掛載后執行；shouldComponentUpdate()控制組件是否需要重新渲染；getSnapshotBeforeUpdate()捕獲更新前的DOM狀態；componentDidUpdate()在組件更新后執行；componentWillUnmount()在組件卸載前執行清理操作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Vue組件實例在創建、更新和銷毀過程中，會依次觸發一些鉤子函數，這些鉤子函數稱為Vue生命周期函數。Vue的生命周期分為四個階段：創建階段、掛載階段、更新階段和銷毀階段。
在創建階段，Vue實例正在被創建，這個階段中包含了實例化、數據觀測、事件/鉤子初始化等過程。具體包括以下鉤子函數：
在這個階段，Vue實例將模板渲染成真實的DOM并進行掛載到頁面上。具體包括以下鉤子函數：
在這個階段，當Vue實例的數據變化時，它會重新渲染虛擬DOM并更新到頁面上。具體包括以下鉤子函數：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
使用layui實現前端換膚功能可以通過以下幾個步驟完成：
安裝layui：我們需要從官方網站下載安裝layui。你可以在https://www.layui.com/下載最新版本。
引入樣式文件：在HTML頁面中引入需要的樣式文件。我們可以使用layuicss提供的樣式表來實現各種外觀效果。如果您需要自定義樣式，請創建自己的CSS文件，并在HTML中引入。
創建主題顏色列表：我們需要創建一個包含所有可用主題顏色的列表。您可以使用數組或JSON對象來創建此列表。例如：
javascript復制代碼
var themeColors = [
{name: '默認', color: '#009688'},
{name: '橙色', color: '#FFB800'},
{name: '墨綠', color: '#393D49'},
{name: '紫色', color: '#800080'},
{name: '深藍', color: '#285FD3'}
];
javascript復制代碼
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化顏色選擇器 colorpicker.render({ elem: '#theme-color-picker',
colors
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Vue.js是一款非常流行的JavaScript框架，用于構建單頁Web應用程序（SPA）。它的設計目標是簡單、靈活和易于使用。Vue.js提供了許多有用的功能，可以幫助開發人員更輕松地構建響應式、動態的用戶界面。在本文中，我們將介紹Vue.js的基礎知識，以及如何使用Vue.js來創建一個簡單的Web應用程序。
首先，讓我們來看一下Vue.js的核心思想。Vue.js采用了MVVM（Model-View-ViewModel）的架構模式。這種模式將應用程序分為三個部分：模型（Model）、視圖（View）和視圖模型（ViewModel）。模型表示應用程序的數據，視圖表示UI，而視圖模型則是將兩者鏈接起來的橋梁。Vue.js的核心就是它的響應式系統。當模型的狀態發生改變時，視圖會自動更新，反之亦然。這使得開發人員可以更加專注于業務邏輯的實現，而不需要手動處理DOM操作。
接下來，讓我們看一下Vue.js的基礎語法。Vue.js通過指令（Directive）來擴展HTML。指令以v-開頭，并且在表達式中使用。例如，v-bind指令用于將一個屬性綁定到表達式上，v-model指令用于雙向綁定表單元素和應用程序狀態之間的數據。Vue.js還提供了許多其他指令，
一、核心概念
模板語法：Vue.js使用了一種類似于HTML的模板語法來聲明渲染和組合DOM元素。模板語法被稱為Vue指令，可以通過{{ }}和v-前綴在模板中使用。其中{{ }}用于文本插值，而v-則用于Vue.js提供的各種指令。
數據綁定：Vue.js的核心是響應式數據綁定系統，它能夠自動跟蹤并響應數據對象和視圖之間的變化。當數據發生變化時，Vue會立即更新視圖以反映這些變化。
組件化：Vue.js允許我們將UI分解為可重用和獨立的組件。每個組件都有自己的狀態和行為，并且可以與其他組件組合使用。這種組件化方法使得代碼更容易維護、測試和復用。
生命周期鉤子函數：Vue.js提供了一組生命周期鉤子函數，在不同階段執行自定義邏輯。這些鉤子函數包
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
layui是一款基于jQuery的前端UI框架，它的設計理念是“零門檻”，使得開發者可以快速地構建出美觀、易用的界面。下面將從以下幾個方面介紹layui框架的使用。
你可以從layui官網下載最新版本的layui壓縮包，也可以使用npm進行安裝。在HTML文件中，只需要引入layui.js和layui.css兩個文件即可開始使用：
html復制代碼
<!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組件，例如按鈕、表單、彈窗、選項卡等。這些組件可以通過簡單的html標簽和屬性來創建。例如，如果您想要創建一個按鈕，只需要使用以下代碼：
html復制代碼
<button class="layui-btn">按鈕</button>
同時，layui還提供了一些特殊類型的按鈕，如次要按鈕、禁用按鈕、圓角按鈕等。
layui提供了一套默認的主題風格，但是如果您想要自定義樣式，layui同樣提供了很好的支持。您可以通過修改layui.css文件或者使用自定義CSS覆蓋默認樣式，來實現您想要的效果。
layui 是一款基于 jQuery 的前端 UI 框架，它具有簡潔、易用和高效的特點，非常適合快速開發響應式界面。下面是使用 layui 框架的示例。
首先，需要在 HTML 文件中引入 layui 的樣式文件和腳本文件：
復制代碼
<!-- 引入樣式文件 --> <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 文件中編寫相應的結構和內容，并使用 layui 提供的組件進行布局和樣式設置。例如，可以使用 layui 的表格組件來展示數據：
復制代碼
<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 還提供了很多其他的組件，如按鈕、輸入等...
去年在博客中發了兩篇關于GIF動態生成的博客，GIF圖像動態生成-JAVA后臺生成和基于FFmpeg的Java視頻Mp4轉GIF初探，在這兩篇博客中都是采用JAVA語言在后臺進行轉換。使用JAVA的同學經過自己的改造和開發也可以應用在項目上。前段時間有朋友私下問，有沒有不使用Java，甚至不依賴于后臺的，直接基于前端的GIF動圖生成，有沒有這種技術方案。博主個人對前端不是很擅長，后來也是在github上自習搜索了一番，發現了一個比較有意思的，可以直接在前端使用的gif動態圖生成組件。本文重點聊聊gif.js組件，介紹一下gif這個組件的基本原理，在生產中如何進行使用。
gif.js在github的地址是：gif.js,打開它的官方網站，可以看到如下的介紹：
作為一款成熟的插件，在github上有4.5k的star，足以說明它的受歡迎程度。而且gif.js采用的是寬松的MIT協議，您可以隨意下載這個插件，再此基礎之上改造成自己的工具供別人使用。使用git clone將工程下載到本地后，可以看到gif.js的初始目錄。
打開工程目錄的package.json文件，這里定義了文件基礎依賴。打開后可以看到如下的定義信息：
在GIFEncoder.js文件中定義了gif.js對象了基本一些屬性，在上面的目錄中打開目標文件后，可以看到屬性定義方法：
核心方法API說明：您可以使用構造方法或者使用setOptions（）方法類設置相關的屬性。詳情可以看下面的說明：
|
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 |
下面采用具體的代碼進行一個實際例子的實踐。
這里以video2.html為例，在這個工程中引入了gif.js和gif.worker.js。工程目錄如下，Jquery.js作為非必須依賴。
-
<head>
-
<meta charset="utf-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
<title>視頻轉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對象之后，還需要定義相應的響應事件，如下代碼所示：
-
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");
-
});
代碼有點長，這里不一一列出，需要源代碼的可以私信。
使用nginx進行靜態發布后，可以看到如下的效果：
點擊執行按鈕后，在網頁下面生成gif動態圖，如下所示：
實際生成的動態圖會根據原始視頻的大小，畫質質量，清晰度等因素影響，執行時間也會有影響。在實際項目中需要根據需要調整相應的參數才可以。
以完成后渲染動圖為例講解合成過程，
可以在變量區看到客戶端開啟了多個Worker進行并行處理。
在這里進行數據合并處理，如下：
最終合成gif圖片，在html中進行dom渲染。
以上就是本文的主要內容，本文重點介紹了一款前端基于Javascript的gif.js生成插件，分析了它的源碼結構，最后通過一個實例進行了案例講解，幫您快速的了解和掌握這個組件，文章行文倉促，如有錯誤，請留言交流。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
在配置的過程中踩了很多坑，還是太菜，有些東西弄不明白什么意思。
運行項目時的報錯可直接到最下面看vite.config.js文件的注釋
目前項目用到的模塊并不多，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"
-
}
-
}
其實主要還是這些模塊的版本兼容問題
vite的版本最開始是1.0.0，后面很多地方搞不下去了才卸載了重裝新的版本
當然還是建議仔細閱讀一下官方文檔，其實很多重要的點都講的很清楚，只不過是遇到問題的時候才會注意到。官方文檔請移步這里
下面簡單的說一下這個文件，
首先是文件的位置，放在其他位置是無效的：
運行vite項目的時候，就會自動解析根目錄下面的這個文件
我這里的主要目的還是解決項目運行時的跨域問題
下面是封裝的一個簡單的請求示例，其中service是一個封裝好的axios實例，可以指定一下baseurl，以及請求和響應攔截。
其他的API都可以像這樣通過給getItem添加方法的方式實現
-
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/
-
-
// 這個配置文件可能出現的問題：
-
// 首先是此文件放置的位置
-
// 1.未安裝 @vitejs/plugin-vue
-
// 處理方法：npm i @vitejs/plugin-vue@1.0.0
-
// 由于本項目vite版本1.0限制，只能用了plugin-vue的1.0.0版本,但在運行的時候又導致了問題2，
-
// 于是直接卸載vite重新安裝最新的3.0.4,這個版本直接install plugin-vue仍然不行，還是要用1.0.0版本
-
// 2.顯示不存在函數 defineConfig
-
// 在此之后npm run dev,又報了一個錯：Cannot find module 'node:path'
-
// 在掘金上看到是和node版本有關，更新后就可以正常運行了
-
-
export default defineConfig({
-
plugins: [
-
vue()
-
// 檢查代碼格式
-
// eslintPlugin({
-
// include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
-
// })
-
],
-
server: {
-
// 默認打開的端口和本地
-
// host: '0.0.0.0',
-
port: 3000,
-
https: false, // 不支持https
-
proxy: {
-
'/api': {
-
target: 'http://10.200.20.80/BARCODESERVICE', // 實際請求地址
-
changeOrigin: true, // 是否跨域
-
rewrite: (path) => path.replace(/^\/api/, '') // 對什么類的服務器匹配
-
},
-
}
-
}
-
})
-
在部署生產環境時，又遇到了兩個問題：
客戶環境是IIS服務器，為了節省端口，在部署的時候選擇在同一個網站下添加多個應用程序的方式，這就使得在部署時，需要添加公共的基礎路徑，這一點在官方文檔中有詳細的說明。
解決方案：
在package.json中配置
-
"scripts": {
-
"dev": "vite",
-
"build": "vite build --base=/PsWebDand/ "
-
}
vite.config.js 中的server的proxy無效，此時跨域的問題需要通過在后端服務中配置來解決
IIS服務器
-
<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 的時候，
要返回 return true 。
特別是在嚴格模式下，否則，會報錯 'set' on proxy: trap returned falsish for property 'message'
let handler = { get(obj, property) { }, set(obj, property, value) { return true; } } new Proxy({}, handler);
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
$emit，父組件傳data給子組件，子組件通過$emit來觸發父組件中綁定在子組件身上的事件，達到改變父組件中的data的方法。下面介紹$emit傳值的幾種方法：
一：$emit傳遞單值
子組件Test.vue：
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點擊我向父組件傳遞參數</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>
點擊按鈕效果如圖：
二：$emit傳遞多個值
子組件Test.vue:
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點擊我向父組件傳遞參數</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>
點擊按鈕，效果如下：
$emit傳遞多個值時，還可以采用數組的形式：
修改子組件Test.vue:
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點擊我向父組件傳遞參數</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>
點擊按鈕，效果如下：
三：子組件通過$emit傳遞給父組件傳遞值，并且父組件有自定義參數時：
子組件Test.vue:
-
<template>
-
-
<div>
-
-
<div>子組件</div>
-
-
<button @click="changeFather">點擊我向父組件傳遞參數</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>
點擊按鈕，效果圖如下：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
背景：項目中通過攝像機提供的rtsp流來顯示畫面，但是在編寫項目中，需要將rtsp實時流畫面傳輸到web前端頁面中。于是找了很多方法，都是后臺轉碼轉成rtmp來播放，現在大部分插件和瀏覽器都是支持使用rtmp播放視頻流。而rtsp隨著flash的退出而被復雜化了。網上都是1、通過ffmpeg轉碼后輸出，2、通過攝像機指定的web插件轉碼輔助播放，如?？担笕A攝像機；3、還有個猿大師播放器基于猿大師中間件提供的內嵌網頁播放（沒用過，不知道行不行，原本想用現在這個方法行不行的，若不行就用這個猿大師了的）
安裝成功以后，你重新打開一個命令行終端，輸入：ffmpeg -h，如果能輸出 ffmpeg 的相關信息出來，則證明你的電腦安裝 ffmpeg 成功。
創建了一個vuecli（vue2）項目，名稱不要起rtsp2web，與src文件夾同級
下創建一個serve文件夾
-|public
|-favicon.ico
|-index.html
-|src
-|serve
-|.gittignore
-.....
npm init --yes
npm install rtsp2web
//index.js
const RTSP2web = require('rtsp2web')
//服務端的端口號，端口號可以自定義
const port = 8033
new RTSP2web({
port
)}
運行命令：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之后沒反應？
—檢查端口號是否填寫對應，index.js中的端口要與script里的端口保持一致
|
為什么長時間未顯示圖像？
—需要等待大概1-2分鐘，就會顯示畫面。至于這么長時間未顯示，小弟也不知道啊。。希望大佬指點。。
完事了就，這是我歷經千辛萬苦找到的方法，弄這個vue中播放rtsp搞了好久，技術太拉了我，只能用這些小玩意來搞。原本打算用java或者python通過拉rtsp流解析成rtmp的，奈何能力不足，也懶得思考懶得搞懶得弄，所以擺爛了QAQ
若哪里有講的不妥和使用不當的地方還請您告知一下，萬分感謝大佬指點，小弟深表感謝<抱拳>
-----------------------------------------------------------------------------------------------------------
https://zhuanlan.zhihu.com/p/531899593 ??
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://www.syprn.cn