vue-router 的使用与基础篇解析
开篇
源码仓库为:https://gitee.com/wx_142da4773a/vue-router-demo.git
基础篇
起步
可以自己创建项目也可以从我的gitee上拉取代码进行练习~
我采用了vue create 来创建项目并选择了router特性。选择过程会询问以下问题
- vue create vue-router-demo 创建一个vue项目
- 请选择预置Please pick a preset: (Use arrow keys)
- default (babel, eslint)
- Manually select features
此处我们选择Manually select features
- 为项目选择所需特性 Check the features needed for your project: (Press to select, to toggle all, <i> to invert selection 按空格进行选择,a 全选,i反选)
- (*) Babel
- ( ) TypeScript
- ( ) Progressive Web App (PWA) Support
- ( ) Router我们需要选择的
- ( ) Vuex
- ( ) CSS Pre-processors
- (*) Linter / Formatter
- ( ) Unit Testing
- ( ) E2E Testing
- Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n),默认选Y,采用history模式
- Pick a linter / formatter config: (Use arrow keys)
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config 我选择了此项
- ESLint + Prettier
- Pick additional lint features: (Press to select, to toggle all, <i> to invert selection)
- (*) Lint on save 选择了此项,每次保存时都进行校验
- ( ) Lint and fix on commit
- Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
- In dedicated config files 选择了此项,单独文件存放配置
- In package.json
- Save this as a preset for future projects? (y/N) 选择y
- 安装完成后执行yarn run serve启动项目
如果是拉取我的源码进行学习,拉取代码后分别执行yarn install 和yarn run serve即可启动项目查看效果,如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nKELmjxS-1595501136903)(E67E80C4D17146A38BF15E8F939D204F)]
路由使用的基本步骤
- 配置路由规则并导出路由对象:在src/router/index.js中,可以看到如下代码:
import Vue from 'vue' // 导入vue
import VueRouter from 'vue-router' //导入vue-router 插件
import Index from '../views/Index.vue' //导入index组件// 1. 将VueRouter作为vue的插件,插件具体应该要如何用在最后会有总结
Vue.use(VueRouter)// 2. 定义路由规则
const routes = [{path: '/',name: 'Index',component: Index},{path: '/blog/:id/blogSecond/:sid',name: 'Blog',component: () => import(/* webpackChunkName: "blog" */ '../views/Blog.vue')},{path: '/photo',name: 'Photo',component: () => import(/* webpackChunkName: "photo" */ '../views/Photo.vue')}
]
// 3. 创建 router 对象
const router = new VueRouter({routes
})export default router
- 实例化路由对象:将路由挂载到vue的原型上:在main.js中可以看到如下代码
import Vue from 'vue'
import App from './App.vue'
import router from './router.js' const vm = new Vue({// 4. 注册 router 对象router,render: h => h(App)
}).$mount('#app')console.log(vm,'vm')
当上述配置完成后我们可以看到控制台的vm信息,如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSFSmlwm-1595501136906)(C84E142BEABC462782DB204837868DE2)]
可以看到vue实例上挂载了route和router,其中route主要存放当前路由信息如path、hash、name等,而router是路由对象,具体细节可参考 常见问题总结。
动态路由匹配
所谓动态路由是指页面或组件根据不同的参数展示不同的数据
主要使用场景为:比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态来进行参数获取,然后就可以进行网络请求以渲染不同的数据。所以可以得出一个结论就是组件相同但数据不同
动态路由如何配置
const User = {template: '<div>User</div>'
}const router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: '/user/:id/org/:orgId', component: User }]
})
总结来看
- 如何设置单个动态参数
- 设置:可以利用path:’/user/:id’这种形式设置id为动态参数
- 获取参数:我们可以在组件内通过this.$route.params.paramName来获取
- 当我们采用/user/xxx 这种形式访问时都会匹配到此路由规则
- 如何设置多个动态参数
- 设置:{path: ‘/user/:id/org/:orgId’,…}
- 获取参数:可以用this.route.params.orgId获取
- 当我们采用/user/123/org/456 这种形式访问时可以匹配到此路由规则
- 如果我们设置了动态路由但进行路由跳转时并未携带参数会造成路由匹配不成功
如下示例:
//组件
const User = {template: `<div><p>User</p></div>`
}//路由
const router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: '/user/:id/org/:orgId', component: User }]
})// 调用
<router-link to="/user/234/org">user</router-link>通过上述方法调用后正则并没有匹配到路由规则
动态路由的参数变化会是什么样的效果?
我们使用动态路由主要解决的是布局相同但数据不同的情况,如用户详情页。那么当我们的用户id发生变化如/user/8009 变为/user/8010时,组件是先销毁再加载进来还是复用呢?
动态路由的参数变化会导致原来已加载的组件实例被复用,因为两个路由指向同一个组件,比起销毁再创建,复用则显得更加高效。这意味着组件声明周期中的钩子函数不会再次触发。如created等
那我们现在想根据路由参数的变化进行接口请求然后进行数据渲染,应该如何操作呢?
路由变化时进行一些特定响应有两种办法:
- 使用watch监控$route对象变化
const User = {template: '...',watch:{$route(to,from){//当路由变化时可以进行接口请求等}}
}
- 或者使用beforeRouteUpdate 导航守卫
const User = {template: '...',beforeRouteUpdate (to, from, next) {//当路由变化时可以进行接口请求等处理//处理完成后不要忘记next()}
}
捕获所有路由或404路由
如果想匹配任意路径,可以使用通配符*
- path: ‘*’ 可以匹配所有路径
- path: ‘user-*’,可以匹配所有以user开头的路径
- 当使用通配符时请确保顺序正确,一般带通配符的都放在末尾。
- 我们访问一个路由地址时会安装从上至下的方式进行路由正则匹配,匹配到就结束
- 当我们采用通配符时,会自动向$route.params中增加一个叫pathMatch的参数说明匹配到的部分
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'
嵌套路由
嵌套路由的使用场景是什么样子?
我司的页面很多都是左侧导航菜单、顶部显示用户信息、机构信息、修改密码、全屏等小工具,中间才是真正的内容部分content,左侧和顶部是不变的,当点击左侧菜单时只有content部分变化。这种页面布局其实就是一个嵌套,那么我们的路由也可以用这种嵌套关系来实现。最外层是一个路由,然后内容区域用占位,到时候会根据路由匹配到的组件对占位区域进行动态替换。
嵌套路由如何配置
- 父路由通过使用children来进行嵌套
- children 是一个数组
- 子组件的位置需要使用进行占位
组件:
const User = {template: `<div class="user"><h2>User {{ $route.params.id }}</h2><router-view></router-view> //子组件</div>`
}
路由:
const router = new VueRouter({routes: [{ path: '/user/:id', component: User,children: [{// 当 /user/:id/profile 匹配成功,// UserProfile 会被渲染在 User 的 <router-view> 中path: 'profile',component: UserProfile},{// 当 /user/:id/posts 匹配成功// UserPosts 会被渲染在 User 的 <router-view> 中path: 'posts',component: UserPosts}]}]
})
编程式导航
声明式导航与编程式导航
- 声明式导航用在直接渲染到页面,如文字,最终会被解析为<a href="/userInfo">文字</a>
- 而编程式导航用于在js中处理逻辑后需要页面进行跳转
声明式导航使用
- 不带参数
<router-link to='/userInfo'></router-link><router-link :to="{path:'/userInfo'}"></router-link>
- 带参数
<router-link to="/userInfo?id=1"></router-link><router-link :to="'/url?id=' + a"></router-link><router-link :to="{path: '/userInfo', query: {id: 1}}"></router-link><router-link :to="{name: 'userInfo', params: {id: 1}}"></router-link>
总结发现,如果带参数时path需要与query配套使用,name需要与params配套使用,如果用path与params则会忽略params
编程式导航-$router.push
想要在js逻辑中切换 URL,则使用 $router.push 方法。这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 时,会在内部调用$router.push,所以说,点击 等同于调用 $router.push
使用方法同router-link,如下:
- 字符串格式
this.$router.push('/userInfo')this.$router.push('/userInfo?id=1')
- 对象格式
this.$router.push({path:'/userInfo'})this.$router.push({name:'userInfo'})this.$router.push({path: '/userInfo',query:{id:1}})this.$router.push({name: '/userInfo',params:{id:1}})
总结发现,如果带参数时path必须与query配套使用,name必须与params配套使用,如果用path与params则会忽略params
编程式导航-$router.replace
跟$router.push用法很像,只是它不会向history追加一条记录,而是替换掉当前的记录。
声明式指定使用replace:
编程式指定使用replace:$router.replace()
$router.go(n)
参数是一个整数,表情向前或向后退n步
router.go(1) :在浏览器记录中前进一步,等同于 history.forward()router.go(-1) 后退一步记录,等同于 history.back()
命名路由
给路由起一个别名,方便记忆
const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user', //给路由起了一个别名叫usercomponent: User}]
})
命名路由的使用:
- this.$router.push({name:‘user’,params:{userId:1}})
- 如果使用name需要传参请记得与params配套使用
命名视图
会进行视图占位,当加载到组件内容时进行替换
命名视图的使用场景是什么?
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLCcNADO-1595501136909)(4EFC37887D354C72B9259895026EE704)]
如果我们的页面如上图所示,我们在刚进入此页面的时候可以看做是三个组件一起被加载出来然后渲染成客户所需的页面。那就有一个问题:一个路由下如何加载多个组件?也就是我们说的命名视图
如何设置命名视图?
src\router\index.js中可以如下配置const routes = [{path: '/',name: 'Index',components: {default: Index,Photo: Photo,Blog: Blog}}
]app.vue页面中如下使用:
<router-view ></router-view>
<router-view name="Photo"></router-view>
<router-view name="Blog"></router-view>
- 如果是路由地址和组件的映射关系是一对一,则component: 单一组件即可
- 如果是路由地址和组件的映射关系是一对多,即一个路由地址要加载多个组件,可以用components:{key:value,key1:value1} 的形式对每个组件进行命名
- 使用的时候可以使用
- 如果我们有多个视图,其中有的可以匹配有的无法匹配则只关注匹配成功的显示
- 如果没有不指定视图名称,将采用default视图
以上述例子为基础,我们在app.vue中如下使用:
<router-view name="xx"></router-view>
<router-view name="Photo"></router-view>
<router-view name="Blog"></router-view>
则最终只能将后两个组件进行渲染到页面,因为没有名为xx的视图
重定向和别名
重定向
重定向是指当用户访问某一链接时URL将会被替换为重定向的链接
//redirect 可以指向一个path
const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' } ]
})//redirect 可以指向一个path,但path是动态路由
const router = new VueRouter({routes: [{ path: '/a:id', redirect: '/b:id' } ]
})//redirect 可以指向一个命名路由
const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }} ]
})//redirect 可以指向一个命名路由带参数
const router = new VueRouter({routes: [{ path: '/a:id', redirect: { name: 'foo',params:{id:id} }} ]
})//redirect 可以指向一个方法
const router = new VueRouter({routes: [{ path: '/a', redirect: to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象}}]
})const router = new VueRouter({routes: [{ path: '/a:id', redirect: to => {可以返回的格式如下:return { path: '/foo', query: {id: id} }return { name: 'baz', params: {id: id} }return '/with-params/:id'return '/bar'}}]
})
别名
/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。也就是访问path和alias是会加载相同的组件,但地址栏显示path和alisa,不进行地址替换
const router = new VueRouter({routes: [{ path: '/a', component: A, alias: '/b' }]
})
路由组件传参 prop
安装动态路由的方式,如果我们在组件中想要获取参数需要使用 route,就造成了页面与$route强耦合
为了解耦,我们可以在路由配置中利用prop进行解耦
- 布尔模式
const router = new VueRouter({routes: [{ path: '/blog:id', component: blog, props: true //会将动态路由的参数转换名称后传递给组件的props}]
})组件中使用参数应该如下:<template><div>这是 blog 页面{{this.id}}</div>
</template><script>export default {name: 'blog',props: ['id']
}
</script>
- 对象模式
const router = new VueRouter({routes: [{ path: '/user:id', component: A, props: { id: '222' } }]
})<template><div>这是 blog 页面{{this.id}} // 打印222</div>
</template><script>export default {name: 'blog',props: ['id']
}
</script>
- 函数模式
const router = new VueRouter({routes: [{ path: '/user:id', component: A, props:(route) => ({ query: route.query.q }) }]
})
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- OpenAI Gym初体验
STEP 1:miniconda新环境 python 3.7.7STEP 2:https://github.com/openai/gym安装openai gympip install gym报了两个包版本不兼容的error:ERROR: spyder 4.1.4 requires pyqtwebengine<5.13; python_version >= "3", which is not installed. ERROR: spyder 4…...
2024/4/16 3:47:39 - 习题4-6 水仙花数 (20分)
水仙花数是指一个N位正整数(N≥3),它的每个位上的数字的N次幂之和等于它本身。例如:153=1 3 +5 3 +3 3 。 本题要求编写程序,计算所有N位水仙花数。输入格式: 输入在一行中给出一个正整数N(3≤N≤7)。输出格式: 按递增顺序输出所有N位水仙花数,每个…...
2024/4/28 21:35:06 - 全局组件 无需import注册用组件
const path = require(path) const files = require.context(./, false, /\.vue$/) //引入当前文件夹下的所有Vue组件, const modules = {}files.keys().forEach(key => {const name = path.basename(key, .vue)modules[name] = files(key).default || files(key) })export…...
2024/4/27 16:41:27 - 浅谈笛卡尔树
题目链接 题意: 有n个宽a,高h的矩阵块有n个宽a,高h的矩阵块有n个宽a,高h的矩阵块 求最大的子矩阵面积求最大的子矩阵面积求最大的子矩阵面积 题解: 这道题可以用单调栈轻松解决这道题可以用单调栈轻松解决这道题可以用单调栈轻松解决 然而前两天多校新学习了笛卡尔树,碰巧…...
2024/4/8 21:55:04 - 嵌入式学习——2.2 shell初识
shell初识 1. shell介绍shell可以理解为软件系统提供给用户操作的命令行界面,是人机交互的一种方式可以使用shell和操作系统、uboot等软件系统交互,但是存在缺陷,例如创建多个文件时,单独touch a.c需要输入多次,为了简便,可以把创建过程写成一个shell脚本程序,执行这个程…...
2024/4/8 21:55:01 - css的一些问题解决
css的一些问题解决iconfont字体图标不能旋转button按钮点击时出现边框textarea和下一个元素之间间距处理问题当a需要设置宽高时,给a标签元素转元素类型时==>>转块级元素 iconfont字体图标不能旋转 问题:字体图为内联元素,添加css3的一些2D和3D效果不起作用 解决: 转为…...
2024/4/23 1:48:13 - 【统计学】【2018.05】【含源码】时间序列:以密度预测评价方法为中心的预测与评价方法
本文为挪威卑尔根大学(作者:Therese Grindheim)的硕士论文,共113页。 本文的研究重点是密度预测和相应的评价方法。密度预测是对预测值概率密度的估计。密度预测及相关的评价方法与点、区间预测相比,还没有得到充分的探索,因此我们选择了重点研究这一课题。本文详细介绍了…...
2024/4/26 14:50:44 - Harbor 2.0.1部署
1、Harbor安装文件下载Github地址:https://github.com/goharbor/harbor/releases/2、下载docker-composeGithub地址:https://github.com/docker/compose/releases/xiaz 下载后放置到Linux /usr/bin目录下,并重命名为docker-compose3、修改Harbor配置文件复制harbor.yaml.tmp…...
2024/4/9 2:03:07 - stm32 内部flash HAL库操作方法
github搜索stm32 eepom改自 https://github.com/nimaltd/ee/blob/ee.c#include "ee.h" #include "eeConfig.h" #include <string.h> #include <stm32f1xx_hal.h> #define PAGE 0 #define SECTOR 1#ifdef …...
2024/4/21 3:10:07 - Google Play 违反欺骗行为被下架,如何解决?
在Google Play上架的时候,有些开发者会收到APP被下架或暂停的邮件通知,登录开发者后台,看到应用已经被下架。需要重新建立新的APP才可以继续上架。我们先看下,大多数收到的邮件内容。邮件内容如下:Hi Developers at 『开发者名称』, After a recent review, 『应用标题』 …...
2024/4/28 10:56:41 - SSM整合 - 使用监听器动态获取路径
SSM整合 - 使用监听器动态获取路径 在项目里,不同的场景中,相对路径会发生改变 如: 前端路径:< a href="/test" >路径为:http://localhost:8080/test 后端路径:forword(“test.jsp”)路径为:http://localhost:8080/项目名称/test.jsp 这样会导致路径不统一…...
2024/4/26 19:44:34 - 本周知识分享会议总结
2020年7月第三周知识分享汇总DQ的项目经验分享项目过程的介绍项目中遇到的问题项目中的知识分享项目中的工具分享HXD的数据仓库知识分享数据仓库ETL的概念kettle的案例课程质量测试CPD的Kettle 案例分享什么是ETLETL的目的ETL实现方式Kettle案例GMR的FR知识分享帆软设计器服务器…...
2024/4/9 2:03:03 - windows下cuda的安装
windows下cuda的安装1. cuda的安装到 https://developer.nvidia.com/cuda-toolkit 去下载。在安装的时候一定要自定义安装,否则将会安装很多无用的东西。安装的选项,可以选择不更新驱动程序。或者下载离线文件安装安装,选择自定义安装。安装后,和英伟达cuda相关的程序如下图…...
2024/4/30 11:08:16 - mitmdump -s xxx.py里无法使用mongodb 报错
class MongoDB:def __init__(self):host = localhostself.client = pymongo.MongoClient(host)self.db = self.client.testself.collection = self.db.ceshiMongo = MongoDB()然后在这个类里面是实现你需要操作的方法就可以了...
2024/4/9 2:03:01 - antd pro学习入门笔记+todolist实例-老陈
AntD Pro零散笔记 antd pro 4.0是一个集成了前后端服务、mock模拟接口、dva容器、typescript、less的一个解决方案,有助于快速的二次开发(不过感觉脚手架真的很大) 文章目录AntD Pro零散笔记糟心的初始化记一下常用的目录和文件使用区块模板权限管理数据请求手动新建页面umi…...
2024/4/9 2:03:00 - 0.Java后端软件开发(个人)学习路线
1.简单概述 1)、此学习路线是我个人以前的学习路线,跟大神们抛出的路线会有些许出入,望能帮助同路人。 2)、从基础开始到中级,换一个说法就是Java后端中级软件开发的学习路线(但是太基础的东西就不写进这个博客了)。 2.学习路线 1)、路线图2)、建议一/二/三阶段都是可以同时…...
2024/4/28 12:01:13 - 天
今天谈谈天,天是存在的,他是我们的保护者,也是约束我们的存在,唯有超脱可得大自在。...
2024/4/10 3:01:26 - 18_Python基础_实战(一)_名片管理系统
1. 目标综合已经学过的知识点:变量函数模块流程控制 开发 名片管理系统2.系统需求3.开发步骤框架搭建新增名片显示所有名片查询名片查询后修改、删除名片 4.开发过程4.1 框架搭建目标:搭建系统框架准备文件,确定文件名,保证能够在需要位置编写代码编写 主运行循环,实现基本…...
2024/4/8 9:57:21 - 【JavaWeb】97:Redis五大数据类型
目录一、字符串类型二、Hash类型三、List类型四、Set类型五、Sorted set类型六、通用命令最后今天是刘小爱自学Java的第97天。 感谢你的观看,谢谢你。 话不多说,开始今天的学习:昨天了解并安装了Redis数据库,今天就实际操作使用一下Redis数据库。 因为Redis是非关系型数据库…...
2024/4/9 2:02:56 - centos安装rabbitMQ
1.创建erlang.repo库curl -s https://packagecloud.io/install/repositories/rabbitmq/erlang/script.rpm.sh | sudo bash2.安装erlangyum install erlang3.创建rabbitmq-server.repo库curl -s https://packagecloud.io/install/repositories/rabbitmq/rabbitmq-server/script.…...
2024/4/9 2:02:55
最新文章
- 如何判断第三方软件测试公司是否具有资质
在软件开发的过程中,软件测试是确保软件质量、稳定性和用户体验的关键环节。许多企业选择将软件测试工作交给专业的第三方软件测试公司来完成,以确保测试的准确性和公正性。但是,如何判断一个第三方软件测试公司是否具有资质呢?以…...
2024/5/1 21:15:55 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 如何注册midjourney账号
注册Midjourney账号比较简单,准备好上网工具,进入官网 Midjourney访问地址: https://www.midjourney.com/ 目前没有免费使用额度了,会员最低 10 美元/月,一般建议使用30美元/月的订阅方案。了解如何订阅可以查看订阅…...
2024/5/1 10:20:39 - vue3项目运行正常但vscode红色波浪线报错
以下解决办法如不生效,可尝试 重启 vscode 一、Vetur插件检测问题 vetur 是一个 vscode 插件,用于为 .vue 单文件组件提供代码高亮以及语法支持。但 vue 以及 vetur 对于 ts 的支持,并不友好。 1、原因 如下图:鼠标放到红色波浪…...
2024/5/1 13:10:52 - 腾讯云容器与Serverless的融合:探索《2023技术实践精选集》中的创新实践
腾讯云容器与Serverless的融合:探索《2023技术实践精选集》中的创新实践 文章目录 腾讯云容器与Serverless的融合:探索《2023技术实践精选集》中的创新实践引言《2023腾讯云容器和函数计算技术实践精选集》整体评价特色亮点分析Serverless与Kubernetes的…...
2024/4/30 17:11:00 - 416. 分割等和子集问题(动态规划)
题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义:dp[i][j]表示当背包容量为j,用前i个物品是否正好可以将背包填满ÿ…...
2024/5/1 10:25:26 - 【Java】ExcelWriter自适应宽度工具类(支持中文)
工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...
2024/5/1 13:20:04 - Spring cloud负载均衡@LoadBalanced LoadBalancerClient
LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon,直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件,我们讨论Spring负载均衡以Spring Cloud2020之后版本为主,学习Spring Cloud LoadBalance,暂不讨论Ribbon…...
2024/4/29 18:43:42 - TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案
一、背景需求分析 在工业产业园、化工园或生产制造园区中,周界防范意义重大,对园区的安全起到重要的作用。常规的安防方式是采用人员巡查,人力投入成本大而且效率低。周界一旦被破坏或入侵,会影响园区人员和资产安全,…...
2024/5/1 4:07:45 - VB.net WebBrowser网页元素抓取分析方法
在用WebBrowser编程实现网页操作自动化时,常要分析网页Html,例如网页在加载数据时,常会显示“系统处理中,请稍候..”,我们需要在数据加载完成后才能继续下一步操作,如何抓取这个信息的网页html元素变化&…...
2024/4/30 23:32:22 - 【Objective-C】Objective-C汇总
方法定义 参考:https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...
2024/4/30 23:16:16 - 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】
👨💻博客主页:花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】🌏题目描述🌏输入格…...
2024/5/1 6:35:25 - 【ES6.0】- 扩展运算符(...)
【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数࿰…...
2024/5/1 11:24:00 - 摩根看好的前智能硬件头部品牌双11交易数据极度异常!——是模式创新还是饮鸩止渴?
文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕,各大品牌纷纷晒出优异的成绩单,摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称,在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁,多个平台数据都表现出极度异常…...
2024/5/1 4:35:02 - Go语言常用命令详解(二)
文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令,这些命令可以帮助您在Go开发中进行编译、测试、运行和…...
2024/5/1 20:22:59 - 用欧拉路径判断图同构推出reverse合法性:1116T4
http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b,我们在 a i a_i ai 和 a i 1 a_{i1} ai1 之间连边, b b b 同理,则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然࿰…...
2024/4/30 22:14:26 - 【NGINX--1】基础知识
1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息,并安装一些有助于配置官方 NGINX 软件包仓库的软件包: apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...
2024/5/1 6:34:45 - Hive默认分割符、存储格式与数据压缩
目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限(ROW FORMAT)配置标准HQL为: ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...
2024/4/30 22:57:18 - 【论文阅读】MAG:一种用于航天器遥测数据中有效异常检测的新方法
文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中,传感器和控制器产生大量周…...
2024/4/30 20:39:53 - --max-old-space-size=8192报错
vue项目运行时,如果经常运行慢,崩溃停止服务,报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中,通过JavaScript使用内存时只能使用部分内存(64位系统&…...
2024/5/1 4:45:02 - 基于深度学习的恶意软件检测
恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞,例如可以被劫持的合法软件(例如浏览器或 Web 应用程序插件)中的错误。 恶意软件渗透可能会造成灾难性的后果,包括数据被盗、勒索或网…...
2024/5/1 8:32:56 - JS原型对象prototype
让我简单的为大家介绍一下原型对象prototype吧! 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象…...
2024/5/1 14:33:22 - C++中只能有一个实例的单例类
C中只能有一个实例的单例类 前面讨论的 President 类很不错,但存在一个缺陷:无法禁止通过实例化多个对象来创建多名总统: President One, Two, Three; 由于复制构造函数是私有的,其中每个对象都是不可复制的,但您的目…...
2024/5/1 11:51:23 - python django 小程序图书借阅源码
开发工具: PyCharm,mysql5.7,微信开发者工具 技术说明: python django html 小程序 功能介绍: 用户端: 登录注册(含授权登录) 首页显示搜索图书,轮播图࿰…...
2024/5/1 5:23:20 - 电子学会C/C++编程等级考试2022年03月(一级)真题解析
C/C++等级考试(1~8级)全部真题・点这里 第1题:双精度浮点数的输入输出 输入一个双精度浮点数,保留8位小数,输出这个浮点数。 时间限制:1000 内存限制:65536输入 只有一行,一个双精度浮点数。输出 一行,保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...
2024/5/1 20:56:20 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57