Vue 3集成海康Web插件实现视频监控

​🌈个人主页：前端青山
🔥系列专栏：组件封装篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来组件封装篇专栏内容:Vue 3集成海康Web插件实现视频监控

引言

最近在项目中使用了 Vue 3 结合海康Web插件来实现视频监控功能，过程中遇到了一些挑战和解决方案。为了帮助开发小伙伴们更好地理解和应用这一技术栈，特此分享一下我们的经验和代码实现。

目录

项目背景

准备工作

1. 官网下载

2.安装插件

3.插件js文件引入vue项目

子组件结构

1. 模板部分

2. 脚本部分

2.1 导入依赖

2.2 定义属性和事件

2.3 定义变量

2.4 RSA加密

2.5 初始化插件

2.6 获取公钥

2.7 初始化视频播放

2.8 播放视频

2.9 隐藏和显示窗口

2.10 监听窗口关闭和调整大小

2.11 处理节点点击事件

2.12 暴露方法

3. 样式部分

父组件调用

1. 模板部分

2. 脚本部分

3. 样式部分

项目背景

在当前的项目中，我们需要实现一个视频监控系统，能够展示多个监控点的实时视频流，并支持用户通过树形结构选择不同的监控点。为了实现这一需求，我们选择了 Vue 3 作为前端框架，并集成了海康Web插件来处理视频流的播放和管理。

准备工作

1. 官网下载

在官网海康开放平台下载视频web插件

2.安装插件

3.插件js文件引入vue项目

将这3个js文件引入vue项目中的public文件夹下新建文件夹放入

然后在index.html文件中根路径引入配置文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端青山</title></head><body><div id="screen"></div><!-- 连接内网部署离线天地图 --><script src="/h5player/h5player.min.js"></script><script src="/webControl/jquery-1.12.4.min.js"></script><script src="/webControl/jsencrypt.min.js"></script><script src="/webControl/web-control_1.2.5.min.js"></script><script type="module" src="/src/main.ts"></script><script src="/src/utils/d3/d3.js" charset="utf-8"></script><script src="/src/utils/d3/D3SvgOverlay.js"></script></body>
</html>

最后我们开始构建本次所需要调用的组件封装功能

子组件结构

1. 模板部分

<template><div class="play_windows" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)"><div class="tree-form"><el-treeref="tree":data="dataTree":props="defaultProps":highlight-current="true"@node-click="pitchOns"><template #default="{ node, data }"><span class="custom-tree-node">{{ data.name }}</span></template></el-tree></div><div class="videosp" ref="videosp"><div id='corpvideo' ref="corpvideo"></div></div></div>
</template>

  • <div class="play_windows">: 主容器，包含视频树形结构和视频播放区域。

  • <el-tree>: Element Plus 的树形组件，用于展示视频监控点的层级结构。

  • <div class="videosp">: 视频播放区域，包含一个 id 为 corpvideo 的 div，用于嵌入海康Web插件。

2. 脚本部分

2.1 导入依赖
<script setup lang="ts">
import { ref, onMounted, nextTick, defineProps, defineExpose, defineEmits, watch, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus'
import { videoallList } from '@/api/screenVideo/index'
import { getGetByCode } from "@/api/videoSurveillance/index";

  • ref: Vue 3 的响应式变量。

  • onMounted: 生命周期钩子，组件挂载后执行。

  • nextTick: 在 DOM 更新后执行。

  • defineProps: 定义组件接收的属性。

  • defineEmits: 定义组件触发的事件。

  • watch: 监听数据变化。

  • onBeforeUnmount: 组件卸载前执行。

2.2 定义属性和事件
const emit = defineEmits(["handleSpjkPOIClick"]);
const props = defineProps({playURL: String, // 视频urlsplitNum: Number, // 分屏播放，默认最大分屏4*4dataTree: Object, // 树 数据defaultProps: Object
});

  • props: 定义组件接收的属性，包括 playURL、splitNum、dataTree 和 defaultProps。

  • emit: 定义组件触发的事件，如 handleSpjkPOIClick。

2.3 定义变量
let dataTree = ref<any>(props.dataTree);
let defaultProps = ref<any>(props.defaultProps);
let loading = ref<Boolean>(false);
const corpvideo = ref<any>();
const videosp = ref<any>(null);
let width: any = 0;
let height: any = 0;
let oWebControl: any = null;
let initCount: any = 0;
let pubKey: any = '';

  • dataTree: 树形结构的数据。

  • defaultProps: 树形组件的默认属性。

  • loading: 加载状态。

  • corpvideo: 视频播放容器的引用。

  • videosp: 视频播放区域的引用。

  • width 和 height: 视频播放区域的宽度和高度。

  • oWebControl: 海康Web插件的实例。

  • initCount: 初始化计数器。

  • pubKey: RSA公钥。

2.4 RSA加密
const setEncrypt = (value: any) => {let encrypt = new JSEncrypt();encrypt.setPublicKey(pubKey);return encrypt.encrypt(value);
}

  • setEncrypt: 使用 JSEncrypt 库进行 RSA 加密。

2.5 初始化插件
const initPlugin = () => {nextTick(() => {width = videosp.value.offsetWidth;height = videosp.value.offsetHeight;oWebControl = new webControl({szPluginContainer: "corpvideo",iServicePortStart: 15900,iServicePortEnd: 15900,szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",cbConnectSuccess: function () {oWebControl.JS_StartService("window", {dllPath: "./VideoPluginConnect.dll"}).then(function () {oWebControl.JS_CreateWnd("corpvideo", width, height).then(function () {init();});}, function () {});},cbConnectError: function () {oWebControl = null;webControl.JS_WakeUp("VideoWebPlugin://");initCount++;if (initCount < 3) {setTimeout(function () {initPlugin();}, 3000);} else {console.log("插件启动失败，请检查插件是否安装！");}},cbConnectClose: function (bNormalClose: any) {oWebControl = null;webControl.JS_WakeUp("VideoWebPlugin://");initCount++;if (initCount < 3) {setTimeout(function () {initPlugin();}, 3000);} else {console.log("插件启动失败，请检查插件是否安装！");}}});});
}

  • initPlugin: 创建海康Web插件实例，并设置连接成功、连接失败和连接关闭的回调函数。

  • cbConnectSuccess: 连接成功后启动服务并创建视频播放窗口。

  • cbConnectError: 连接失败后尝试重新连接。

  • cbConnectClose: 连接关闭后尝试重新连接。

2.6 获取公钥
const getPubKey = (callback: any) => {oWebControl.JS_RequestInterface({funcName: "funcName",argument: JSON.stringify({keyLength: 1024})}).then((oData: any) => {if (oData.responseMsg.data) {pubKey = oData.responseMsg.data;callback();}});
}

  • getPubKey: 请求公钥并调用回调函数。

2.7 初始化视频播放
const init = () => {getPubKey(() => {appkey = "appkey ";secret = setEncrypt("secret");ip = "ip ";playMode = 0;port = 443;snapDir = "D:\\SnapDir";videoDir = "D:\\VideoDir";layout = "1x1";enableHTTPS = 1;encryptedFields = 'secret';showToolbar = 1;showSmart = 1;buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";oWebControl.JS_RequestInterface({funcName: "init",argument: JSON.stringify({appkey: appkey,secret: secret,ip: ip,playMode: playMode,port: port,snapDir: snapDir,videoDir: videoDir,layout: layout,enableHTTPS: enableHTTPS,encryptedFields: encryptedFields,showToolbar: showToolbar,showSmart: showSmart,buttonIDs: buttonIDs})}).then((oData: any) => {oWebControl.JS_Resize(width, height);});});
}

  • init: 使用公钥加密敏感信息，并请求初始化视频播放。

2.8 播放视频
const JSRequestInterface = (code: any) => {cameraIndexCode = code.replace(/(^\s*)/g, "").replace(/(\s*$)/g, "");oWebControl.JS_RequestInterface({funcName: "startPreview",argument: JSON.stringify({cameraIndexCode: cameraIndexCode,streamMode: streamMode,transMode: transMode,gpuMode: gpuMode,wndId: wndId})});
}

  • JSRequestInterface: 请求播放指定监控点的视频。

2.9 隐藏和显示窗口
const JSHideWnd = () => {oWebControl.JS_HideWnd();oWebControl.JS_DestroyWnd().then(function () {}, function () {});
}const JSShowWnd = () => {initPlugin();oWebControl.JS_ShowWnd();
}

  • JSHideWnd: 隐藏并销毁视频播放窗口。

  • JSShowWnd: 重新初始化并显示视频播放窗口。

2.10 监听窗口关闭和调整大小
window.addEventListener('unload', JSHideWnd);
const getElementPosition = () => {width = window.innerWidth * 0.3;height = window.innerHeight * 0.56;oWebControl.JS_Resize(width, height);
};
window.addEventListener('resize', getElementPosition);

  • window.addEventListener('unload', JSHideWnd): 监听窗口关闭事件，隐藏并销毁视频播放窗口。

  • getElementPosition: 获取窗口大小并调整视频播放窗口的尺寸。

  • window.addEventListener('resize', getElementPosition): 监听窗口调整大小事件，动态调整视频播放窗口的尺寸。

2.11 处理节点点击事件
const pitchOns = (e: any) => {if (!e || !e.self) {if (e.equipmentCoding) {handleAddChild(e);}return;}if (e.children) {emit("handleSpjkPOIClick", e.self.indexCode, '');return;} else {handleAddChild(e);}
}const handleAddChild = (e: any) => {if (!e || !e.self) {if (e.equipmentCoding) {videoUrl(e.equipmentCoding);}return;}if (e.self.indexCode) {let params = {UnitIndexCode: e.self.indexCode,};videoallList(params).then((res: any) => {if (res.data.rows.length == 0) {emit("handleSpjkPOIClick", e.self.indexCode, '');} else {e.children = e.children || [];res.data.rows = res.data.rows.map((child: any) => ({...child,name: child.equipmentName,}));res.data.rows.forEach((child: any) => {e.children.push(child);});(e as any).expanded = true;}});}
}const videoUrl = (equipmentCoding: string) => {let params = {equipmentCoding: equipmentCoding,};JSRequestInterface(equipmentCoding)
}

  • pitchOns: 处理树形节点点击事件，根据节点类型调用相应的方法。

  • handleAddChild: 处理节点的子节点加载，请求子节点数据并展开节点。

  • videoUrl: 请求指定监控点的视频URL并播放视频。

2.12 暴露方法

defineExpose({initPlugin,JSHideWnd,JSShowWnd,JSRequestInterface
})

  • defineExpose: 暴露组件的方法，供外部调用。

3. 样式部分

<style scoped lang="scss">
// 公共element样式
@import '@/styles/eleCustomize.scss';/* 样式 */
.play_windows {display: flex;width: 100% !important;.tree-form {width: 18vw;height: 28vw;overflow: auto;padding: 0;}
}
.videosp {width: 32vw;height: 60vh !important;#corpvideo {width: 100% !important;height: 100% !important;margin-top: 0.5vh;}#player-container-0 {width: 100% !important;height: 100% !important;}
}/* 屏幕宽度超过1920px时应用 */
@media (min-width: 8000px) {.play_windows {.tree-form {width: 10vw;height: 18vw;}}.videosp {width: 45vw;}
}::v-deep(.el-radio-button__inner) {width: 2vw;height: 1vw;display: flex;justify-content: center;align-items: center;font-size: 0.6vw;
}.video-button {width: 3vw;height: 1vw;display: flex;justify-content: center;align-items: center;font-size: 0.6vw;
}::v-deep(.el-radio-button__inner) {background: transparent !important;color: white !important;border: 0 !important;display: flex;align-items: center;height: 3.5vh !important;color: white !important;margin: 0.2vw;font-size: 1.6vh !important;background: transparent !important;border: 0.1vw solid #009392 !important;border-radius: 0.2vw !important;
}::v-deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {background: linear-gradient(90deg, rgba(0, 96, 204, 0.2) 0%, rgba(0, 165, 189, 0.6) 100%) !important;color: white !important;border-color: none !important;
}
</style>

子组件 ScreenMonitoring 主要实现了监控点的树形结构展示和视频播放控制。通过 el-tree 组件展示监控点的树形结构，并在节点被点击时调用视频播放插件的初始化和播放方法。子组件提供了 JSRequestInterface 方法请求视频流，initialize 方法初始化视频播放，以及 JSHideWnd 方法停止视频播放，确保视频监控功能的完整性和可控性。

父组件调用

1. 模板部分

<template><screenVideoDialog v-model="dialogVideo" title="公安监控" width="55%"  @close="onCloseDialog" @open="onOpenDialog":draggable="false"><div class="my_dialog_slot" style="height:60vh;" v-if="dialogVideo"><ScreenMonitoring ref="screenmonitoring" :dataTree="dataTree" :defaultProps="defaultProps" @handleSpjkPOIClick="handleSpjkPOIClick"  /></div></screenVideoDialog>
</template>

  • <screenVideoDialog>: 这是一个自定义的对话框组件，用于显示视频监控内容。通过 v-model 绑定 dialogVideo 变量来控制对话框的显示和隐藏。

  • @close="onCloseDialog": 当对话框关闭时，调用 onCloseDialog 方法。

  • @open="onOpenDialog": 当对话框打开时，调用 onOpenDialog 方法。

  • <div class="my_dialog_slot">: 包含 ScreenMonitoring 子组件的容器，设置高度为 60vh，并使用 v-if 指令确保只有在 dialogVideo 为 true 时才渲染。

  • <ScreenMonitoring>: 子组件，用于显示视频监控内容。通过 ref 绑定 screenmonitoring 变量，以便在父组件中调用子组件的方法。传递 dataTree 和 defaultProps 属性，并监听 handleSpjkPOIClick 事件。

2. 脚本部分

<script setup lang="ts">
import { ref } from 'vue';
import screenVideoDialog from '@/components/Dialog/screenVideoDialog.vue';
import ScreenMonitoring from '@/components/Dialog/screenMonitoring.vue';const dialogVideo = ref(false);
const dataTree = ref([// 树形结构数据
]);
const defaultProps = ref({children: 'children',label: 'label'
});
const screenmonitoring = ref<InstanceType<typeof ScreenMonitoring> | null>(null);// 处理监控点点击事件
const handleSpjkPOIClick = (poiId: string, coord: string) => {let params = {UnitIndexCode: poiId};screenmonitoring.value?.JSRequestInterface(poiId);// getGetByCodes(params).then(res => {//   setTimeout(() => {//     screenmonitoring.value?.initialize(res.data.urls[0], res.data.urls);//   }, 1000);// });
};// 关闭对话框时停止视频
const onCloseDialog = (e: any) => {screenmonitoring.value?.JSHideWnd();
};// 打开对话框时初始化视频
const onOpenDialog = (e: any) => {screenmonitoring.value?.initPlugin();
};
</script>

  • dialogVideo: 一个响应式变量，用于控制对话框的显示和隐藏。

  • dataTree: 树形结构的数据，用于传递给 ScreenMonitoring 子组件。

  • defaultProps: 树形组件的默认属性，用于传递给 ScreenMonitoring 子组件。

  • screenmonitoring: 一个响应式变量，用于存储 ScreenMonitoring 子组件的实例，以便在父组件中调用其方法。

  • handleSpjkPOIClick: 处理监控点点击事件的方法。当用户点击某个监控点时，会调用子组件的 JSRequestInterface 方法，并传递 poiId 参数。注释掉的部分是获取视频 URL 的逻辑，可以根据实际需求启用。

  • onCloseDialog: 当对话框关闭时调用的方法。调用子组件的 JSHideWnd 方法，停止视频播放。

  • onOpenDialog: 当对话框打开时调用的方法。调用子组件的 initPlugin 方法，初始化视频播放。

3. 样式部分

<style scoped>
.my_dialog_slot {display: flex;justify-content: center;align-items: center;height: 100%;
}
</style>

  • .my_dialog_slot: 设置对话框内容的样式，确保内容居中显示。

通过上述代码，我们在父组件中实现了视频监控对话框的显示和隐藏，并在对话框打开和关闭时调用子组件的相应方法，以控制视频的播放和停止。

本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能。通过定义属性、事件、变量，以及编写初始化、播放视频、处理节点点击事件等方法，我们成功实现了视频监控系统的前端部分。同时，通过样式部分的定制，确保了良好的用户体验。希望本文对读者在开发类似项目时有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/886894.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Maven】nexus 配置私有仓库配置【转】

【Maven】nexus 配置私有仓库配置【转】

介绍&#xff1a;【Maven】Nexus几个仓库的介绍-CSDN博客 一、仓库类型 proxy 远程仓库的代理&#xff0c;比如说nexus配置了一个central repository的proxy,当用户向这个proxy请求一个artifact的时候&#xff0c;会现在本地查找&#xff0c;如果找不到&#xff0c;则会从远程…
阅读更多...
Python学习------第十天

Python学习------第十天

数据容器-----元组 定义格式&#xff0c;特点&#xff0c;相关操作 元组一旦定义&#xff0c;就无法修改 元组内只有一个数据&#xff0c;后面必须加逗号 """ #元组 (1,"hello",True) #定义元组 t1 (1,"hello") t2 () t3 tuple() prin…
阅读更多...
Spring Web入门练习

Spring Web入门练习

加法计算器 约定前后端交互接⼝ 约定 "前后端交互接⼝" 是进⾏ Web 开发中的关键环节. 接⼝⼜叫 API&#xff08;Application Programming Interface), 我们⼀般讲到接⼝或者 API&#xff0c;指的都是同⼀个东西. 是指应⽤程序对外提供的服务的描述, ⽤于交换信息…
阅读更多...
uniapp微信小程序接入airkiss插件进行WIFI配网

uniapp微信小程序接入airkiss插件进行WIFI配网

本文可参考uniapp小程序插件 一.申请插件 微信公众平台设置页链接&#xff1a;微信公众平台 登录您的小程序微信公众平台&#xff0c;进入设置页&#xff0c;在第三方设置->插件管理->添加插件中申请AiThinkerAirkissforWXMini插件&#xff0c;申请的插件appId为【wx6…
阅读更多...
蓝队技能-应急响应篇日志自动采集日志自动查看日志自动化分析Web安全内网攻防工具项目

蓝队技能-应急响应篇日志自动采集日志自动查看日志自动化分析Web安全内网攻防工具项目

知识点&#xff1a; 1、应急响应-系统日志收集-项目工具 2、应急响应-系统日志查看-项目工具 3、应急响应-日志自动分析-项目工具 演示案例-蓝队技能-工具项目-自动日志采集&自动日志查看&自动日志分析 系统日志自动采集-观星应急工具(Windows系统日志) SglabIr_Co…
阅读更多...
类和对象——static 成员，匿名对象（C++）

类和对象——static 成员，匿名对象（C++）

1.static成员 a&#xff09;⽤static修饰的成员变量&#xff0c;称之为静态成员变量&#xff0c;静态成员变量⼀定要在类外进行初始化。 b&#xff09;静态成员变量为所有类对象所共享&#xff0c;不属于某个具体的对象&#xff0c;不存在对象中&#xff0c;存放在静态区。 …
阅读更多...
node.js中express的基本了解

node.js中express的基本了解

定义 Express是基于Node.js平台&#xff0c;快速、开放、极简的Web开发框架。 本质 Express是一个npm上的第三方包&#xff0c;提供了快速创建Web服务器的便捷方法。 作用 与Node.js内置的http模块类似&#xff0c;Express也是专门用来创建Web服务器的&#xff0c;但它极大地简…
阅读更多...
Django实现智能问答助手-基础配置

Django实现智能问答助手-基础配置

设置 Django 项目、创建应用、定义模型和视图、实现问答逻辑&#xff0c;并设计用户界面。下面是一步一步的简要说明&#xff1a; 目录&#xff1a; QnAAssistant/ # 项目目录 │ ├── QnAAssistant/ # 项目文件夹 │ ├── init.py # 空文件 │ ├── settings.py # 项目配…
阅读更多...
Spring工作流程

Spring工作流程

&#xff08;3&#xff09;案例工作流程 启动服务器初始化过程 1.服务器启动&#xff0c;执行ServletContainersInitConfig类&#xff0c;初始化web容器功能类似于以前的web.xml 2.执行createServletApplicationContext方法&#xff0c;创建了WebApplicationContext对象 该方法…
阅读更多...
C语言第13节：指针(3)

C语言第13节：指针(3)

1. 回调函数 回调函数的基本思想是&#xff0c;将函数指针作为参数传递给另一个函数&#xff0c;并在需要时通过这个函数指针调用对应的函数。这种方式允许一个函数对执行的内容进行控制&#xff0c;而不需要知道具体的实现细节。 回调函数在以下场景中尤为有用&#xff1a; …
阅读更多...
用pyspark把kafka主题数据经过etl导入另一个主题中的有关报错

用pyspark把kafka主题数据经过etl导入另一个主题中的有关报错

首先看一下我们的示例代码 import os from pyspark.sql import SparkSession import pyspark.sql.functions as F """ ------------------------------------------Description : TODO&#xff1a;SourceFile : etl_stream_kafkaAuthor : zxxDate : 2024/11/…
阅读更多...
STM32芯片EXIT外部中断的配置与原理以及模板代码(标准库)

STM32芯片EXIT外部中断的配置与原理以及模板代码(标准库)

配置EXIT外部中断其实就是把GPIO刀NVIC的各个外设配置好 第一步&#xff1a;配置RCC&#xff0c;把我们涉及到的外设的时钟都打开 &#xff08;此处EXTI是默认打开的&#xff0c;而NVIC是内核外设无需配置&#xff09; 第二步&#xff1a;配置GPIO,选择端口为输入模式 第三…
阅读更多...
misc设备驱动

misc设备驱动

MISC 理解 简化创建设备号&#xff0c;cdev&#xff0c;class&#xff0c;device 的步骤。 设备树 代码 模块初始化和退出 平台下驱动匹配和移除 MiSC 结构体 文件描述符的处理函数 其他
阅读更多...
layui合并table相同内的行

layui合并table相同内的行

<table border"1" id"table1" class"layui-table"><thead><tr><th><b>姓名</b></th><th><b>项目</b></th><th><b>任务</b></th><th><b>…
阅读更多...
java ssm 羽绒服商城网站 在线商城 在线服饰销售网站 源码 jsp

java ssm 羽绒服商城网站 在线商城 在线服饰销售网站 源码 jsp

一、项目简介 本项目是一套基于SSM的羽绒服商城网站&#xff0c;主要针对计算机相关专业的和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本、软件工具等。 项目都经过严格调试&#xff0c;确保可以运行&#xff01; 二、技术实现 ​后端技术&#xff…
阅读更多...
程序里sendStringParametersAsUnicode=true的配置导致sql server cpu使用率高问题处理

程序里sendStringParametersAsUnicode=true的配置导致sql server cpu使用率高问题处理

一 问题描述 近期生产环境几台sql server从库cpu使用率总是打满&#xff0c;发现抓的带变量值的慢sql&#xff0c;手动代入变量值执行并不慢&#xff0c;秒级返回&#xff0c;不知道问题出在哪里。 二 问题排查 用扩展事件或者sql profiler抓慢sql&#xff0c;抓到了变量值&…
阅读更多...
OpenAI震撼发布：桌面版ChatGPT，Windows macOS双平台AI编程体验！

OpenAI震撼发布：桌面版ChatGPT，Windows macOS双平台AI编程体验！

【雪球导读】 「OpenAI推出ChatGPT桌面端」 OpenAI重磅推出ChatGPT桌面端&#xff0c;全面支持Windows和macOS系统&#xff01;这款新工具为用户在日常生活和工作中提供了前所未有的无缝交互体验。对于那些依赖桌面端进行开发工作的专业人士来说&#xff0c;这一更新带来了令人…
阅读更多...
湘潭大学软件工程算法设计与分析考试复习笔记（四）

湘潭大学软件工程算法设计与分析考试复习笔记（四）

回顾 湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;一&#xff09;湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;二&#xff09;湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;三&#xff09; 前言 现在是晚上十一点&#xff0c;我平时是十…
阅读更多...
Python学习29天

Python学习29天

二分查找 # 定义函数冒泡排序法从大到小排列 def bbble_sort(list):# i控制排序次数for i in range(len(list) - 1):# j控制每次排序比较次数for j in range(len(list) - 1 - i):if list[j] < list[j 1]:list[j], list[j 1] list[j 1], list[j] # 定义二分查找函数 def…
阅读更多...
(Linux)搭建静态网站——基于http/https协议的静态网站

(Linux)搭建静态网站——基于http/https协议的静态网站

简单了解nginx配置文件 1.下载并开启nginx服务 下载 [rootlocalhost ~]# dnf install nginx -y开启 [rootlocalhost ~]# systemctl restart nginx 1.(1)搭建静态网站——基于http协议的静态网站 实验1&#xff1a;搭建一个web服务器&#xff0c;访问该服务器时显示“hello w…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023