如何基於EasyCVR視訊+AI智慧技術，提高河湖水利視覺化監管效率？
阿新 • • 發佈：2022-03-15
大前端進階
Node.js
Node.js就是執行在服務端的JavaScript，基於Google的V8引擎
httpserver服務
// 匯入模組 require 類似與import Java.io const http = require('http'); // 1、建立一個httpserver服務 http.createServer(function(requsest, response) { // 設定瀏覽器可以識別hello server!!! response.writeHead(200, {"content-type":'text/plain'}); // 以text-plain的方式解析 //response.writeHead(200, {"content-type":'text/html'}); // 以text-html的方式解析 // 給瀏覽器輸出內容 response.end("hello server!!!") //response.end("<strong>hello server!!!</strong>") }).listen(8888); // 2、監聽一個埠 8888 console.log("你啟動的服務是：http://localhost:8888，已啟動成功"); // 3、啟動執行服務 node httpserver.js // 4、在瀏覽器訪問http://localhost:8888
操作MYSQL資料庫
// npm install mysql // 1、匯入mysql依賴包，mysql屬於第三方的模組，相當於java.sql var mysql = require("mysql"); // 2、建立一個mysql的Connection物件 // 3、配置資料連線的資訊 var connection = mysql.createConnection({ host: "127.0.0.1", user: "root", port: 3306, password: "w6b2y7", database: "testdb" }) // 4、開啟連線 connection.connect(); // 5、執行curd connection.query("select * from kss_user", function(error, results, fields) { // 如果查詢出錯，直接丟擲 if (error)throw error; // 查詢成功 console.log("results= " + JSON.stringify(results)); // results= [{"id":1,"name":"abc"},{"id":2,"name":"def"},{"id":3,"name":"ghi"}] }); // 6、關閉連線 connection.end(); // 執行 node db.js
ES6
let 和 const
<!DOCTYPE html> <html lang="en"> <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"> <title>Demo01</title> </head> <body> <script> // 傳統定義變數和常量 var name = "xiaoming"; var link = "https://www.baidu.com"; var PI = Math.PI; console.log(name); console.log(link); console.log(PI); // ES6定義的方式 let name2 = "xiaohong"; let link2 = "https://www.bilibili.com" const PI2 = Math.PI; console.log(name2); console.log(link2); console.log(PI2); // let 和 const的作用 // 1、解決var穿透問題 // 2、常量修改問題 for(var i = 0; i < 5; i++) { console.log(i); } console.log(i); // 這裡就出現了變數穿透 </script> </body> </html>
模板字串
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo02</title>
</head>
<body>
<script>
let name = "小明";
let msg1 = "你好，" + name
console.log(msg1); // 你好，小明
let msg2 = `你好，${name}`;
console.log(msg2); // 你好，小明
</script>
</body>
</html>
函式預設值引數
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo03</title>
</head>
<body>
<script>
// 函式預設引數
function sum(a, b) {
return a + b;
}
var result = sum(100, 100);
console.log("result= " + result); // result= 200
var result2 = sum(100); // a -> 100 b -> undefined
console.log("result2= " + result2); // result2= NaN
// 可以給a,b設定預設引數
function sum2(a = 100, b = 50) {
return a + b;
}
var result3 = sum2(200, 200);
console.log("result3= " + result3); // result3= 400
var result4 = sum2(10);
console.log("result4= " + result4); // result4= 60
</script>
</body>
</html>
箭頭引數
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo04</title>
</head>
<body>
<script>
// 箭頭函式
// 傳統寫法
var sum = function(a,b) {
return a + b;
}
// ES6新寫法1
var sum = (a, b) => {
return a + b;
}
// ES6新寫法2
var sum = (a, b) => a + b;
// function可以去掉
// 在形參後加箭頭 =>
// 如果形參只有一個變數，可以去掉括號 ()
// 如果出return外沒有其他結構體，可以去掉return
var arr = [1, 2, 3, 4, 5, 6];
var newarr = arr.map(function(obj) {
return obj * 2;
})
console.log(newarr);
var newarr2 = arr.map(obj => obj * 2);
console.log(newarr2);
</script>
</body>
</html>
物件初始化簡寫
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo05</title>
</head>
<body>
<script>
// 傳統定義物件
let info = {
title: "標題",
link: "https://www.baidu.com",
go: function() {
console.log("出去玩~");
}
};
console.log(info);
info.go();
// ES6簡寫物件
let title = "標題";
let link = "https://www.baidu.com";
let info2 = {
title, // 如果物件內一個key和變數的命名相同，可以直接寫變數名
link,
go() { // function可以去掉
console.log("出去玩~");
}
}
console.log(info2);
info2.go();
</script>
</body>
</html>
物件解構
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo06</title>
</head>
<body>
<script>
var title = "標題";
var link = "https://www.baidu.com";
let info = {
title, // 如果物件內一個key和變數的命名相同，可以直接寫變數名
link,
go() { // function可以去掉
console.log("出去玩~");
}
}
console.log(info);
info.go();
// 傳統獲取物件屬性和方法
// 通過 . 的方式
console.log(info.title);
console.log(info.link);
info.go();
// 通過 [] 的方式
console.log(info["title"]);
console.log(info["link"]);
info["go"]();
// [] 和 . 的區別
// 通過.的方式獲取屬性值 ，key是靜態的
// 通過[]的方式獲取屬性值，key是動態的，可以是字串，也可以是數字，還可以是變數
var obj = {name1:"張三", 2:"李四"};
var v1 = obj.name1; //張三， 使用點的方式
//var v2 = obj.2 //報錯，不能使用點的方式
var v3 = obj[2]; //李四，使用中括號的方式
var key = "name1"
//var v4 = obj.key //undefined，不能使用點的方式
var v5 = obj[key] //張三， key是一個變數，使用中括號的方式
// ES6物件解構 - 快速獲取物件屬性和方法
var {title,link,go} = info;
// 還原
// var title = info.title;
// var link = info.link;
console.log(title,link);
go();
</script>
</body>
</html>
傳播操作符
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo07</title>
</head>
<body>
<script>
// 物件傳播操作符
var person = {
name: "xiaoming",
addres: "瀋陽",
link: "https://www.baidu.com",
phone: 1234567,
go() {
console.log("執行~");
}
}
// 解構 ...rest 代表除了已定義的引數（eg. name,addres）之外的所有引數，是一個數組
var {name, addres, ...rest} = person;
console.log(name);
console.log(addres);
console.log(rest);
</script>
</body>
</html>
Map
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo08</title>
</head>
<body>
<script>
// 要對arr陣列每個元素 *2
var arr = [1,2,3,4,5,6,7];
// 傳統方法
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr.push(arr[i] * 2);
}
console.log(newarr);
// ES6 map方法
// 自帶迴圈，並把處理後的值回填到對應的位置
var newarr2 = arr.map(ele => ele * 2);
console.log(newarr2);
// map 處理物件的資料
var users = [{age: 10, name: "xiaohong"},{age: 12, name: "xiaoming"},{age: 15, name: "xiaoli"}];
users = users.map(ele => ele.age += 1)
console.log(users);
</script>
</body>
</html>
Reduce
<!DOCTYPE html>
<html lang="en">
<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">
<title>Demo09</title>
</head>
<body>
<script>
// ES6 reduce
// reduce() 累加器，將一個數組中每項元素（由左至右）相加，將陣列化為單一值（即總和）
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// total 已累加的和 num 待相加的元素
var results = arr.reduce((total, num) => total + num);
console.log(results); // 55
</script>
</body>
</html>
NPM包管理
NPM (Node Package Manager) ，相當於Java的Maven
作用：
- 快速構建node.js工程
- 快速安裝和依賴第三方模組
構建node.js工程
- npm init (初始化) / npm init -y
- 得到package.json
相當於 pom.xml 檔案，管理依賴
——————————————————————————————————————————————————————————————————
{
"name": "npm", // 工程名
"version": "1.0.1", // 版本
"description": "node工程", // 描述
"main": "index.js", // 入口js
"scripts": { // 執行指令碼
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"node"
],
"author": "BY0627", // 開發者
"license": "ISC" // 授權協議
}
——————————————————————————————————————————————————————————————————
- 快速安裝和依賴第三方模組
npm install xxxx 或者 npm i xxxx
-
安裝的模組會放入專案的node_modules資料夾中
-
匯入模組
const redis = require("redis");
const mysql = require("mysql");
- 模組和package.json的關係
"dependencies": {
"jquery": "^3.6.0",
"mysql": "^2.18.1",
"redis": "^4.0.4",
"vue": "^3.2.31"
}
通過npm install xxx 安裝的模組會記錄在package.json這個檔案中
作用：複用
通過npm install可以直接自動下載全部package.json依賴的模組，避免重複下載
- 通過cnpm加快模組安裝速度
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install xxx
- 解除安裝
npm uninstall xxx
Babel
Babel是一個廣泛使用的轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行
手動轉碼
- 安裝
npm install -g babel-cli
# 檢查版本號
babel --v
- 初始化專案
專案資料夾 > npm init -y
- 建立檔案 src/example.js ，示例程式碼（ES6）：
// example.js
// 轉碼前
// ES6
let name = "xiaoming";
const title = "標題";
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newarr = arr.map(a => a * 2);
console.log(name);
console.log(title);
console.log(newarr); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
- 配置 .babelrc
Babel的配置檔案是.babelrc，存放在專案的根目錄下，該檔案用來設定轉碼規則和外掛，基本格式如下
{
"presets": [],
"plugins": []
}
presets欄位設定轉碼規則，將es2015規則加入 .babelrc
{
"presets": ["es2015"],
"plugins": []
}
- 安裝轉碼器，在專案資料夾中安裝
npm install --save-dev babel-preset-es2015
- 轉碼
# 轉碼單個js檔案
# babel 原目錄/原檔案 -o 目標目錄/目標檔案
babel src/example.js -o dist/example_babel.js
# 轉碼整個檔案目錄
# babel 原資料夾 -d 目標資料夾
babel src -d dist # src\example.js -> dist\example.js
# 轉換單個檔案可以重新命名，轉換整個資料夾只會按原檔名輸出
// example_babel.js
// 轉碼後
// ES2015
"use strict";
var name = "xiaoming";
var title = "標題";
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var newarr = arr.map(function (a) {
return a * 2;
});
console.log(name);
console.log(title);
console.log(newarr); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
自定義指令碼轉碼
- 改寫package.json
{
// ...
"scripts": {
// ...
"dev": "babel src -d dist"
},
// ...
}
- 執行
專案資料夾 >npm run dev
模組化規範
CommonJS
// Demo01.js
// 定義工具類
const sum = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const di = (a, b) => a / b;
// 匯出
module.exports = {
sum,
sub,
mul,
di
}
// Demo02.js
// 匯入並使用Demo01.js寫好的工具類
// require
const tool = require('./Demo01.js');
console.log(tool.sum(1,2)); // 3
console.log(tool.sub(1,2)); // -1
console.log(tool.mul(1,2)); // 2
console.log(tool.di(1,2)); // 0.5
ES6
常規寫法
// src/userApi.js
export function getList() {
console.log("獲取資料列表");
};
export function save() {
console.log("儲存資料");
};
// src/userTest.js
import {getList, save} from './userApi.js'
getList();
save();
// 直接 node userTest.js無法執行
// 因為預設不支援ES6語法的import
// ==需要通過babel轉碼==
轉碼後
// dist/userApi.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getList = getList;
exports.save = save;
function getList() {
console.log("獲取資料列表");
};
function save() {
console.log("儲存資料");
};
// dist/userTest.js
'use strict';
var _userApi = require('./userApi.js');
(0, _userApi.getList)();
(0, _userApi.save)();
// 直接 node userTest.js無法執行
// 因為預設不支援ES6語法的import
// 需要通過babel轉碼
執行
node .\dist\userTest.js
常用寫法
// src/userApi.js
export default {
getList() {
console.log("獲取資料列表");
},
view() {
console.log("檢視資料");
}
}
// src/userTest.js
import user from './userApi.js'
user.getList();
user.view();
// 直接 node userTest.js無法執行
// 因為預設不支援ES6語法的import
// 需要通過babel轉碼
轉碼後
// dist/userApi.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
getList: function getList() {
console.log("獲取資料列表");
},
view: function view() {
console.log("檢視資料");
}
};
// dist/userTest.js
'use strict';
var _userApi = require('./userApi.js');
var _userApi2 = _interopRequireDefault(_userApi);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_userApi2.default.getList();
_userApi2.default.view();
// 直接 node userTest.js無法執行
// 因為預設不支援ES6語法的import
// 需要通過babel轉碼
執行
node .\dist\userTest.js
Webpack
-
Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。
-
Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態檔案，減少了頁面的請求。
安裝
cnpm install -g webpack webpack-cli
# 檢視版本號
webpack -v
打包JS
- 建立src目錄，在src下建立以下三個JS檔案
// src/common.js
// 輸出
exports.info = function(str) {
// 控制檯輸出
console.log(str);
//瀏覽器輸出
document.write(str);
}
// src/util.js
// 相加
exports.add = (a, b) => a + b;
// src/main.js
// 匯入 util.js common.js
const util = require('./util.js');
const common = require('./common.js');
common.info("Hello World, " + util.add(1011, 1011));
- 建立webpack配置檔案webpack.config.js
const path = require("path"); //Node.js內建模組
module.exports = {
entry: './src/main.js', //配置入口檔案
output: {
path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前檔案所在路徑
filename: 'bundle.js' //輸出檔案
}
}
- 手動編譯打包
專案資料夾 >webpack
-
自定義指令碼打包
改寫package.json
{
// ...
"scripts": {
// ...
"dev": "webpack"
},
// ...
}
執行
專案資料夾 >npm run dev
- 在src下建立index.html， 引用bundle.js，檢視效果
<!DOCTYPE html>
<html lang="en">
<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">
<title>index</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
打包CSS
- 安裝style-loader和 css-loader
Webpack 本身只能處理 JavaScript 模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。
Loader 可以理解為是模組和資源的轉換器
css-loader 是將 css 裝載到 javascript
style-loader 是讓 javascript 認識css
npm install --save-dev style-loader css-loader
- 安裝後package.json會顯示已安裝兩個轉換器
{
"name": "webpack",
// ...
// ...
"devDependencies": {
"css-loader": "^6.7.1",
"style-loader": "^3.3.1"
}
}
- 修改webpack.config.js
const path = require("path");
module.exports = {
// ...
// ...
module: {
rules: [{
test: /\.css$/, // 把專案中所有的.css結尾的檔案進行打包
use: ["style-loader", "css-loader"]
}]
}
}
- 在src下建立style.css
body{
background: yellow;
}
- 修改main.js，引入style.css
// 匯入 util.js common.js
const util = require('./util.js');
const common = require('./common.js');
// 匯入css
require('./style.css');
common.info("Hello World, " + util.add(1011, 1011));
- 執行
專案資料夾 >npm run dev
- 在瀏覽器中開啟index.html，檢視效果