当前位置: 首页 > news >正文

Vue全家桶之前端路由

Vue全家桶之前端路由

文章目录

  • Vue全家桶之前端路由
    • 1.路由的基本概念与原理
      • 1.1 路由
        • 1.1.1 后端路由
        • 1.1.2 SPA
        • 1.1.3 前端路由
        • 1.1.4 实现简易前端路由
      • 1.2 Vue Router
    • 2.vue-router的基本使用
      • 2.1 基本使用步骤
      • 2.2路由重定向
    • 3. vue-router嵌套路由
      • 3.1嵌套路由用法
    • 4.vue-router动态路由匹配
      • 4.1动态匹配路由的基本用法
      • 4.2路由组件传递参数
    • 5. vue-router命名路由
      • 5.1命名路由的配置规则
    • 6.vue-router编程式导航
      • 6.1页面导航的两种方式
      • 6.2编程式导航基本用法
      • 6.3编程式导航参数规则
    • 7.基于vue-router的案例:后台管理路由案例

1.路由的基本概念与原理

1.1 路由

路由是一个比较广义和抽象的概念,路由的本质就是对应关系,请求什么响应什么

在开发中,路由分为后端路由前端路由

1.1.1 后端路由

概念:根据不同的用户URL 请求,返回不同的内容

本质:URL 请求地址与服务器资源之间的对应关系

后端路由根据不同的URL地址分发不同的资源

在这里插入图片描述

1.1.2 SPA

由于后端渲染存在性能问题以及Ajax前端渲染不支持浏览器的前进后退操作,所以出现SPA技术

SPA(Single Page Application)单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作

只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中

SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)

在实现SPA过程中,最核心的技术点就是前端路由

1.1.3 前端路由

概念:根据不同的用户事件,显示不同的页面内容

本质:用户事件与事件处理函数之间的对应关系

前端路由负责事件监听,触发事件后通过事件函数渲染不同内容

在这里插入图片描述

1.1.4 实现简易前端路由

实现前端路由:基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

在这里插入图片描述

//监听window的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称window.onhashchange = function() {// 通过location.hash 获取到最新的hash
}	
//1.模拟路由.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script></head><body><div id="app"><!-- 切换组件的超链接 --><a href="#/zhuye">主页</a><a href="#/keji">科技</a><a href="#/caijing">财经</a><a href="#/yule">娱乐</a><!-- 根据 :is 属性指定的组件名称,把对应的组件渲染到 component 标签所在的位置 --><!-- 可以把 component 标签当做是【组件的占位符】 --><component :is="comName"></component></div><script>// 定义需要被切换的 4 个组件// 主页组件const zhuye = {template: "<h1>主页信息</h1>",};// 科技组件const keji = {template: "<h1>科技信息</h1>",};// 财经组件const caijing = {template: "<h1>财经信息</h1>",};// 娱乐组件const yule = {template: "<h1>娱乐信息</h1>",};// vue 实例对象const vm = new Vue({el: "#app",data: {comName: "zhuye",},// 注册私有组件components: {zhuye,keji,caijing,yule,},});// 监听window的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称window.onhashchange = function () {//通过location.hash获取到最新的hash值console.log(location.hash); //  #/zhuye slice(1)从第二个位置提取字符串即/zhuye//switch(表达式){  case 值1: 表达式的值和值1匹配上了,需要执行的代码;break;}switch (location.hash.slice(1)) {case "/zhuye":vm.comName = "zhuye";break;case "/keji":vm.comName = "keji";break;case "/caijing":vm.comName = "caijing";break;case "/yule":vm.comName = "yule";break;}};</script></body>
</html>

在这里插入图片描述

1.2 Vue Router

Vue Router是Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成,可以非常方便的用于SPA应用程序的开发。

Vue Router 包含的功能有:

  • 支持HTML5 历史模式或hash 模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

2.vue-router的基本使用

2.1 基本使用步骤

  1. 引入相关的库文件
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到Vue 根实例中

1.引入相关的库文件

//导入vue 文件,为全局window 对象挂载Vue构造函数
<script src="./lib/vue_2.5.22.js"></script>
//导入vue-router 文件,为全局window 对象挂载VueRouter构造函数
<script src="./lib/vue-router_3.0.2.js"></script>

2.添加路由链接

//router-link 是vue 中提供的标签,默认会被渲染为a标签
//to 属性默认会被渲染为href 属性
//to 属性的值默认会被渲染为# 开头的hash 地址
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

3.添加路由填充位

//路由填充位(也叫做路由占位符)
//将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置
<router-view></router-view>

4.定义路由组件

var User = {
template: '<div>User</div>'
}
var Register = {template: '<div>Register</div>'
}'
  1. 配置路由规则并创建路由实例
//创建路由实例对象
var router= new VueRouter({// routes 是路由规则数组routes: [//每个路由规则都是一个配置对象,其中至少包含path和component两个属性://path 表示当前路由规则匹配的hash 地址//component 表示当前路由规则对应要展示的组件{path:'/user',component: User},{path:'/register',component: Register}]
})

6.把路由挂载到Vue 根实例中

new Vue({el: '#app',// 为了能够让路由规则生效,必须把路由对象挂载到vue实例对象router
});
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><div id="app"><!-- 添加路由链接 --><router-link to="/user">用户</router-link><router-link to="/register">注册</router-link><!-- 添加路由占位符 --><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置 --><router-view></router-view></div><!-- 导入vue文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script><script type="text/javascript">//定义路由组件var User = {template: `<h1>用户你好</h1>`,};var Register = {template: `<h1>请注册</h1>`,};//创建路由实例对象const router = new VueRouter({//配置路由规则routes: [//path 表示当前路由规则匹配的hash 地址 和to属性对应//component 表示当前路由规则对应要展示的组件//如果用户访问/user hash地址,则展示User实例对象{ path: "/user", component: User },{ path: "/register", component: Register },],});const app = new Vue({el: "#app",data: {},methods: {},//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象//router:routerrouter,});</script></body>
</html>

在这里插入图片描述

2.2路由重定向

路由重定向:用户在访问地址A 的时候,强制用户跳转到地址C ,从而展示特定的组件页面;

通过路由规则的redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:

var router= new VueRouter({routes: [// path 表示需要被重定向的原地址,redirect 表示将要被重定向到的新地址{path:'/', redirect: '/user'},{path:'/user',component: User},{path:'/register',component: Register}]
})

3. vue-router嵌套路由

3.1嵌套路由用法

1.嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容

2.父路由组件模板

  • 父级路由链接
  • 父组件路由填充位
<p><router-link to="/user">User</router-link><router-link to="/register">Register</router-link>
</p>
<div>
//控制组件的显示位置
<router-view></router-view>
</div>

3.子级路由模板

  • 子级路由链接
  • 子级路由填充位
const Register = {template: `<div><h1>Register 组件</h1><hr/><router-link to="/register/tab1">Tab1</router-link><router-link to="/register/tab2">Tab2</router-link><!--子路由填充位置--><router-view/></div>`
}

4.嵌套路由配置

父级路由通过children属性配置子级路由

const router = new VueRouter({routes: [{ path: '/user', component: User },{path: '/register',component: Register,// 通过children 属性,为/register 添加子路由规则children: [{ path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2 }]}]
})
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><div id="app"><!-- 添加路由链接 --><router-link to="/user">用户</router-link><router-link to="/register">注册</router-link><!-- 添加路由占位符 --><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置 --><router-view></router-view></div><!-- 导入vue文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script><script type="text/javascript">//定义父路由组件var User = {template: `<h1>用户你好</h1>`,};var Register = {template: `<div><h1>请注册</h1><!-- 子路由链接--><router-link to="/register/tab1">访问子组件1</router-link><router-link to="/register/tab2">访问子组件2</router-link><!-- 子路由的占位符 --><router-view></router-view></div>`,};//定义子路由组件var Tab1 = {template: `<h2>子组件1</h2>`,};var Tab2 = {template: `<h2>子组件2</h2>`,};//创建路由实例对象const router = new VueRouter({//配置路由规则routes: [//path 表示当前路由规则匹配的hash 地址 和to属性对应//component 表示当前路由规则对应要展示的组件//如果用户访问/user hash地址,则展示User实例对象{ path: "/user", component: User },{path: "/register",component: Register,//父级路由通过children属性配置子级路由children: [{ path: "/register/tab1", component: Tab1 },{ path: "/register/tab2", component: Tab2 },],},],});const app = new Vue({el: "#app",data: {},methods: {},//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象//router:routerrouter,});</script></body>
</html>

在这里插入图片描述

4.vue-router动态路由匹配

4.1动态匹配路由的基本用法

**思考?**
//有如下3个路由链接
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
// 定义如下三个对应的路由规则,是否可行???
{ path: '/user/1', component: User }
{ path: '/user/2', component: User }
{path: '/user/3', component: User }

应用场景:通过动态路由参数的模式进行路由匹配

var router = new VueRouter({routes: [// 动态路径参数以冒号开头{ path: '/user/:id', component: User }]
})
const User = {// 路由组件中通过$route.params获取路由参数template: '<div>User {{ $route.params.id }}</div>'
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><div id="app"><!-- 添加路由链接 --><router-link to="/user/1">用户1</router-link><router-link to="/user/2">用户2</router-link><router-link to="/user/3">用户3</router-link><router-link to="/register">注册</router-link><!-- 添加路由占位符 --><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置 --><router-view></router-view></div><!-- 导入vue文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script><script type="text/javascript">//定义路由组件var User = {//路由组件中通过$route.params获取路由参数 如$route.params={ "id": "1" }template: `<h1>用户---{{$route.params.id}}---你好</h1>`,};var Register = {template: `<h1>请注册</h1>`,};//创建路由实例对象const router = new VueRouter({//配置路由规则routes: [//path 表示当前路由规则匹配的hash 地址 和to属性对应//component 表示当前路由规则对应要展示的组件//如果用户访问/user hash地址,则展示User实例对象// 动态路径参数以冒号开头 后面加任意定义参数{ path: "/user/:id", component: User },{ path: "/register", component: Register },],});const app = new Vue({el: "#app",data: {},methods: {},//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象//router:routerrouter,});</script></body>
</html>

在这里插入图片描述

4.2路由组件传递参数

耦合:模块与模块之间的依赖程度

$route与对应路由形成高度耦合,不够灵活,所以可以使用props将组件和路由解耦,用来传递参数

1. props的值为布尔类型

const router = new VueRouter({routes: [// 如果props 被设置为true,route.params 将会被设置为组件属性{ path: '/user/:id', component: User, props: true }]
})
const User = {props: ['id'], // 使用props 接收路由参数template: '<div>用户ID:{{ id}}</div>'// 使用路由参数
}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><div id="app"><!-- 添加路由链接 --><router-link to="/user/1">用户1</router-link><router-link to="/user/2">用户2</router-link><router-link to="/user/3">用户3</router-link><router-link to="/register">注册</router-link><!-- 添加路由占位符 --><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置 --><router-view></router-view></div><!-- 导入vue文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script><script type="text/javascript">//定义路由组件var User = {//使用props接受路由参数props: ["id"],template: `<h1>用户---{{id}}---你好</h1>`,};var Register = {template: `<h1>请注册</h1>`,};//创建路由实例对象const router = new VueRouter({//配置路由规则routes: [//path 表示当前路由规则匹配的hash 地址 和to属性对应//component 表示当前路由规则对应要展示的组件//如果用户访问/user hash地址,则展示User实例对象//如果props 被设置为true,route.params 将会被设置为组件属性{ path: "/user/:id", component: User, props: true },{ path: "/register", component: Register },],});const app = new Vue({el: "#app",data: {},methods: {},//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象//router:routerrouter,});</script></body>
</html>

在这里插入图片描述

2.props的值为对象类型

const router = new VueRouter({routes: [// 如果props 是一个对象,它会被按原样设置为组件属性{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }}]
})
const User = {props: ['uname', 'age'],template:<div>用户信息:{{ uname + '---' + age}}</div>'
}

在这里插入图片描述

3.props的值为函数类型

const router = new VueRouter({routes: [// 如果props 是一个函数,则这个函数接收route 对象为自己的形参{ path: '/user/:id', component: User, props: route=> ({ uname: 'zs', age: 20, id: route.params.id})}]
})
const User = {props: ['uname', 'age', 'id'],template: `<div>用户信息:{{ uname + '---' + age + '---' + id}}</div>`
}

在这里插入图片描述

5. vue-router命名路由

5.1命名路由的配置规则

命名路由:为了更加方便的表示路由的路径,可以给路由规则起一个别名

const router = new VueRouter({routes: [{path: '/user',name: 'user',component: User}]
})
<--!不仅可以通过path路径跳转,还可以通过name值进行跳转-->
<router-link :to="{ name: 'user'}">User</router-link>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><div id="app"><!-- 添加路由链接 --><!-- <router-link to="/user">用户</router-link> --><router-link :to="{name: 'user'}">用户</router-link><router-link to="/register">注册</router-link><!-- 添加路由占位符 --><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置 --><router-view></router-view></div><!-- 导入vue文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script><script type="text/javascript">//定义路由组件var User = {template: `<h1>用户你好</h1>`,};var Register = {template: `<h1>请注册</h1>`,};//创建路由实例对象const router = new VueRouter({//配置路由规则routes: [//path 表示当前路由规则匹配的hash 地址 和to属性对应//component 表示当前路由规则对应要展示的组件//如果用户访问/user hash地址,则展示User实例对象{ path: "/user", name: "user", component: User },{ path: "/register", component: Register },],});const app = new Vue({el: "#app",data: {},methods: {},//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象//router:routerrouter,});</script></body>
</html>

6.vue-router编程式导航

6.1页面导航的两种方式

  • 声明式导航:通过点击链接实现导航的方式 例如:普通网页中的<a></a>链接或vue 中的<router-link></router-link>
  • 编程式导航:通过调用JavaScript形式的API实现导航的方式 例如:普通网页中的location.href

6.2编程式导航基本用法

常用的编程式导航API :

跳转: this.$router.push(‘hash地址’)

前进或后退: this.$router.go(n)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title></title></head><body><div id="app"><!-- 添加路由链接 --><router-link to="/user">用户</router-link><router-link to="/register">注册</router-link><!-- 添加路由占位符 --><!-- 将来通过路由规则匹配到的组件,将会被渲染到router-view 所在的位置 --><router-view></router-view></div><!-- 导入vue文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script><script type="text/javascript">//定义路由组件var User = {template: `<div><h1>用户你好</h1><button @click="goRegister">跳转到注册页面</button></div>`,methods: {goRegister: function () {// 用编程的方式控制路由跳转this.$router.push("/register");},},};var Register = {template: `<div><h1>请注册</h1><button @click="goBack">后退</button></div>`,methods: {goBack: function () {// 用编程的方式控制路由跳转this.$router.go(-1);},},};//创建路由实例对象const router = new VueRouter({//配置路由规则routes: [//path 表示当前路由规则匹配的hash 地址 和to属性对应//component 表示当前路由规则对应要展示的组件//如果用户访问/user hash地址,则展示User实例对象{ path: "/user", component: User },{ path: "/register", component: Register },],});const app = new Vue({el: "#app",data: {},methods: {},//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象//router:routerrouter,});</script></body>
</html>

在这里插入图片描述

6.3编程式导航参数规则

router.push() 方法的参数规则

// 字符串(路径名称)
router.push('/home')
// 对象
router.push({ path: '/home' })
// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
// 带查询参数,变成/register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' }})

7.基于vue-router的案例:后台管理路由案例

在这里插入图片描述

用到的路由技术要点:

  • 路由的基础用法
  • 嵌套路由
  • 路由重定向
  • 路由传参
  • 编程式导航

根据项目的整体布局划分好组件结构,通过路由导航控制组件的显示

1.抽离并渲染App 根组件

2.将左侧菜单改造为路由链接

3.创建左侧菜单对应的路由组件

4.在右侧主体区域添加路由占位符

5.添加子路由规则

6.通过路由重定向默认渲染用户组件

7.渲染用户列表数据

8.编程式导航跳转到用户详情页

9.实现后退功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>基于vue-router的案例</title><link rel="stylesheet" href="后代管理路由案例.css" /><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 要被 vue 实例所控制的区域 --><div id="app"><!-- 路由占位符 --><router-view></router-view></div><script>// 定义 APP 根组件const App = {template: `<div><!-- 头部区域 --><header class="header">后台管理系统</header><!-- 中间主体区域 --><div class="main"><!-- 左侧菜单栏 --><div class="content left"><ul><li><router-link to="/users">用户管理</router-link></li><li><router-link to="/rights">权限管理</router-link></li><li><router-link to="/goods">商品管理</router-link></li><li><router-link to="/orders">订单管理</router-link></li><li><router-link to="/settings">系统设置</router-link></li></ul></div><!-- 右侧内容区域 --><div class="content right"><div class="main-content"><!--子组件路由占位符 --><router-view><router-view/></div></div></div><!-- 尾部区域 --><footer class="footer">版权信息</footer></div>`,};//用户管理组件const Users = {data() {return {userlist: [{ id: 1, name: "张三", age: 10 },{ id: 2, name: "李四", age: 20 },{ id: 3, name: "王五", age: 30 },{ id: 4, name: "赵六", age: 40 },],};},template: `<div><h3>用户管理区域</h3><table><thead><tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr v-for="item in userlist" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><a href="javascript:;" @click="goDetail(item.id)">详情</a></td></tr></tbody></table></div>`,methods: {goDetail(id) {// 用编程的方式实现路由跳转用户详情页 并传递id值this.$router.push("/userinfo/" + id);},},};//用户详情页组件const UserInfo = {//使用props接受路由参数props: ["id"],template: `<div> <h3> 用户详情页</h3><h5> 用户Id为:{{id}}</h5><button @click="goback()">后退</button></div>`,methods: {goback() {// 实现后退功能this.$router.go(-1);},},};//权限管理组件const Rights = {template: `<div><h3>权限管理区域</h3></div>`,};//商品管理组件const Goods = {template: `<div><h3>商品管理区域</h3></div>`,};//订单管理组件const Orders = {template: `<div><h3>订单管理区域</h3></div>`,};//系统设置组件const Settings = {template: `<div><h3>系统设置区域</h3></div>`,};// 创建路由对象const router = new VueRouter({routes: [{path: "/",component: App,//路由地址为/ 调转到APP组件,同时路由重定向到user组件redirect: "/users",// 父级路由通过children属性配置子级路由children: [{ path: "/users", component: Users },//动态路径参数以冒号开头 $route.params获取路由参数 若props设置为true,route.params将会被设置为组件属性{ path: "/userinfo/:id", component: UserInfo, props: true },{ path: "/rights", component: Rights },{ path: "/goods", component: Goods },{ path: "/orders", component: Orders },{ path: "/settings", component: Settings },],},],});const vm = new Vue({el: "#app",router,});</script></body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

boost::geometry::model::multi_polygon用法的测试程序

boost::geometry::model::multi_polygon用法的测试程序 实现功能C++实现代码实现功能 boost::geometry::model::multi_polygon用法的测试程序 C++实现代码 #include <algorithms/area/test_area.hpp> #include <boost/geometry/geometries/geometries.hpp> #inc…...

Ant Design Vue实现a-table表格单元格合并

Ant Design Vue实现a-table表格单元格合并 参考Ant design Vue官网关于行和列合并api https://antdv.com/components/table-cn/ 下面官网对表格合并这块的描述 &#xff01;&#xff01;&#xff01;注意注意注意重要事情说三遍&#xff1a;很多同学都习惯性的将columns写在d…...

Cookie的介绍和使用

1、Cookie简介 是由服务器端生成&#xff0c;发送给User-Agent(一般指浏览器)&#xff0c;浏览器将cookie信息以键值对的形式保存到某个目录下的文本文件内。下次请求该网站时就把保存的cookie信息发送回服务器。&#xff08;cookie就是一个小文件&#xff0c;浏览器对其大小一…...

【CoppeliaSim】Solidworks中模型导出模型到V-REP

一、下载安装插件 插件名称&#xff1a;sw2urdfSetup 下载地址&#xff1a;https://github.com/ros/solidworks_urdf_exporter/releases/tag/1.6.0 下载后直接安装即可。安装成功后&#xff0c;可在SolidWorks的菜单栏中看到&#xff1a;工具-Tools-Export as URDF 二、导出…...

css中id和class的区别

css中id和class的区别ID是唯一的类不是唯一的语法区别ID是唯一的 每个元素仅可以有一个ID每个页面仅可以有一个元素拥有这个ID 类不是唯一的 你可以在多个元素中使用相同的类你可以使用多个类在一个元素中 语法区别 id对应css是用样式选择符“#”&#xff08;井号&#xff…...

程序员如何快速成长

如何快速成长 每个程序员都是从菜鸟成长过来&#xff0c;我自己也不例外。以下是我个人一些总结和结合网上别人的经验&#xff0c;希望对大家有帮助&#xff01; 主动学习 保持危机感 35岁后你能做什么&#xff1f;为何同龄人已经是行业专家&#xff1f; 对知识保持好奇心 多…...

配置minio支持https

官网文档&#xff1a;https://docs.min.io/docs/how-to-secure-access-to-minio-server-with-tls.html 在${HOME}.minio/certs文件夹下 1、生成私钥 openssl genrsa -out private.key 2048 2、生成自签名证书 创建一个以openssl.conf以下内容命名的文件。设置IP.1和/或DNS.…...

力扣刷题:动态规划篇

目录322. 零钱兑换题目介绍题目实现5. 最长回文子串题目介绍题目实现518. 零钱兑换 II题目介绍题目实现53. 最大子序和题目介绍题目实现63. 不同路径 II题目介绍[62. 不同路径](https://leetcode-cn.com/problems/unique-paths/)题目实现70. 爬楼梯题目介绍题目实现72. 编辑距离…...

Java面试list 和 set 区别

List和Set的区别 List:&#xff1a;有序&#xff0c;按对象进入的的序保存对象&#xff0c;可可允许多个Null元素对象&#xff0c;可以使用lterator迭取出所有元素。在逐一便历&#xff0c;也可以使用get(int index)获取指定下标的元素 Set&#xff1a;无序&#xff0c;不可重复…...

诚意分享:这里有份超全Java体系化进阶学习图谱

摘要 Apache Kafka是一个分布式消息发布订阅系统。它最初由LinkedIn公司基于独特的设计实现为一个分布式的提交日志系统( a distributed commit log)&#xff0c;之后成为Apache项目的一部分。 成千上万的企业都在使用Kafka&#xff0c;三分之一的世界500强公司也在其中&…...

论文解读:3D U-Net: Learning Dense Volumetric Segmentation from Sparse Annotation

要点 1. 提出了3D U-Net&#xff1a;从稀疏标注的体素图像中学习的立体分割网络。 2. 有两个方案&#xff1a;第一是&#xff0c;在待分割立体图像中标注其中的一些切片&#xff0c;网络从这些标注中学习&#xff0c;再为这个空间提供密集的3D分割&#xff1b;第二是&#xff…...

基于51单片机的温度报警系统

目录 前言 一、温控系统是什么&#xff1f; 二、设计目的 1.环境需求 2.设计基础 三、设计 1.C51程序设计 2.Proteus仿真 &#xff08;1&#xff09;.元器件如下 &#xff08;2&#xff09;.原理图。 总结 前言 微型计算器自20世纪70年代诞生以来&#xff0c;得以迅…...

requests+re爬取猫眼电影排行

import requests from requests.exceptions import RequestException import re,json,timedef get_one_page(url):#获取网页信息try:headers {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/53…...

StringBoot编程式事务与声明式事务,附详细答案

前言 互联网时代&#xff0c;瞬息万变。一个小小的走错&#xff0c;就有可能落后于别人。我们没办法去预测任何行业、任何职业未来十年会怎么样&#xff0c;因为未来谁都不能确定。只能说只要有互联网存在&#xff0c;程序员依然是个高薪热门行业。只要跟随着时代的脚步&#…...

Twitter教程:如何下载Twitter数据副本?

Twitterrific Mac破解版是一款非常现代化优秀的桌面Twitter客户端,这款软件不仅看起来惊人,它的表现也是非常棒的,本文给大家的带来了如何下载Twitter数据副本的教程。 教程如下 在 iPhone 或 iPad 上打开“Twitter”。&#xff08;您也可以使用 Twitter.com 网站&#xff09…...

Android面试必刷的200道真题,吐血整理

&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;&am...

4-1 Python常用内置算法与数据结构常考题

一、你使用过哪些常用内置算法和数据结构 仔细回想一下你用过哪些内置的算法数据结构&#xff1f; 1.sorted 2.dict/list/set/tuple… 3.问题&#xff1a;想的不全或者压根没了解和使用过 数据结构/算法语言内置内置库线性结构list(列表)/tuple(元组)array(数组&#xff0c;不…...

【内网学习笔记】8、powercat 的使用

1、下载安装 powercat powercat 可以视为 nc 的 powershell 版本&#xff0c;因此也可以和 nc 进行连接。 powercat 可在 github 进行下载&#xff0c;项目地址为&#xff1a;https://github.com/besimorhino/powercat 下载下来 powercat.ps1 文件后&#xff0c;直接导入即可…...

栈和队列(二) : 用栈实现队列

leetcode232.用栈实现队列 https://leetcode-cn.com/problems/implement-queue-using-stacks/ 使用栈实现队列的下列操作&#xff1a; push(x) – 将一个元素放入队列的尾部。 pop() – 从队列首部移除元素。 peek() – 返回队列首部的元素。 empty() – 返回队列是否为空。…...

手撕JS面试题大全一

冒泡排序 /* 两两比较 */ function bubleSort(arr) {var len arr.lengthfor (let outer len; outer > 2; outer--) {for (let inner 0; inner < outer - 1; inner) {if (arr[inner] > arr[inner 1]) {[arr[inner], arr[inner 1]] [arr[inner 1], arr[inner]]}}…...

MySQL安装教程

文章目录.msi安装下载.msi安装包安装配置环境变量登陆MySQLzip archive 免安装版下载zip配置文件启动MySQL数据库登陆MySQL并修改密码MySQL有两种安装方式&#xff0c;一是通过.msi来安装&#xff0c;一是zip archive免安装版。 官网链接&#xff1a;https://www.mysql.com/dow…...

CentOS7.8搭建Kubernetes集群(kubeadm方式)

Kubernetes集群的架构图 Kubernetes集群的搭建方式选择 1、minikube学习体验方式 minikube与 kind 类似&#xff0c;minikube 是一个工具&#xff0c; 能让你在本地运行 Kubernetes。 minikube 在你本地的个人计算机&#xff08;包括 Windows、macOS 和 Linux PC&#xff09;运…...

在java.library.path中找不到允许在生产环境中实现最佳性能的基于APR的Apache Tom.....

在java.library.path中找不到允许在生产环境中实现最佳性能的基于APR的Apache Tom… 2021-6-2 19:55:17 org.apache.catalina.core.AprLifecycleListener init 信息: The APR based Apache Tomcat Native library which allows optimal performance in production environment…...

windows下安装Redis

下载安装 运行 下载安装 Redis 官方不建议在 windows 下使用 Redis&#xff0c;所以官网没有 windows 版本可以下载。还好微软团队维护了开源的 windows 版本 Github仓库&#xff1a;https://github.com/microsoftarchive/redis 但是&#xff0c;4年前的微软开源团队只维护到…...

Docker 之搭建私有仓储

环境 192.168.200.165 :正常服务器 192.168.200.164:私有仓库 部署私有仓储 1. 下载镜像registry docker pull registry2. 运行registry容器 docker run -itd -v /data/registry:/var/lib/registry -p 5000:5000 --restart=always --name registry registry:latest3. 查看…...

《Mask TextSpotter》论文阅读笔记

Mask TextSpotter 读该论文的目的&#xff0c;之前读了MaskTextSpotterV3论文&#xff0c;然后又读了MaskRCNN论文&#xff0c;所以想阅读下这篇论文&#xff0c;想看看如何把MaskRCNN网络应用到文字识别检测这个方向的。 文章目录Mask TextSpottermake decisionstep1:读摘要s…...

实验3-1 求一元二次方程的根 (20 分)

本题目要求一元二次方程ax^2&#xff0b;bx&#xff0b;c&#xff1d;0的根&#xff0c;结果保留2位小数。 输入格式: 输入在一行中给出3个浮点系数a、b、c&#xff0c;中间用空格分开。 输出格式: 根据系数情况&#xff0c;输出不同结果&#xff1a; 1)如果方程有两个不相等…...

HTTP与HTTPS(详谈TLS秘钥协商过程)

目录1. 简单http服务器2. 状态码2.1 网页重定向3. http与https3.1 http缺陷3.2 https与http的区别3.3 对称加密3.4 非对称加密1. 简单http服务器 #pragma once #include<iostream> #include<sys/types.h> #include<sys/socket.h> #include<unistd.h> …...

CentOS 7.6下 docker 从安装到简易部署演示SpringBoot项目

目标服务器安装docker并配置 #安装 yum install docker#检验安装是否成功 [rootlocalhost opt]# docker --version Docker version 1.13.1, build 7f2769b/1.13.1#启动 systemctl start docker#换镜像源 sudo vim /etc/docker/daemon.json 内容如下&#xff1a; {"regist…...

Tapdata 实时数据融合平台解决方案(五):落地

作者介绍&#xff1a;TJ&#xff0c;唐建法&#xff0c;Tapdata 钛铂数据 CTO&#xff0c;MongoDB中文社区主席&#xff0c;原MongoDB大中华区首席架构师&#xff0c;极客时间MongoDB视频课程讲师。 通过前面几篇文章&#xff0c;我们从企业数据整合与分享的痛点&#xff0c;以…...

LabVIEW编程LabVIEW开发天平MS16001L例程与相关资料

LabVIEW编程LabVIEW开发天平MS16001L例程与相关资料 MS16001L是梅特勒-托利多公司秤台精密天平&#xff0c;其量程为16200 g 量程&#xff0c;精度0.1 g 。比较适合实验室使用。梅特勒-托利多的产品也是业内的标杆。可选范围广、精度高&#xff0c;资料丰富。 这是一个科研项目…...

【券商报告】21年1季度债券市场展望:摇摆的天平——附下载链接

来源 | 兴业证券 20年4季度&#xff1a;大类资产表现&#xff0c;从股商品强势债弱到资产普涨&#xff0c;永煤事件爆发是转折点&#xff0c;流动性悲观预期的改善是主要 推手。20年债市曲线&#xff1a;牛陡&#xff08;1-4月&#xff09;—熊平&#xff08;5-11月中&#xf…...

元宇宙七层产业链

构建元宇宙需要多项技术支撑&#xff0c;据此我们可以将元宇宙的产业链分为7个层次。体验层 主要指的用户层面&#xff0c;元宇宙构建之后&#xff0c;用户可以在这个世界中进行非物质化的体验&#xff0c;比如玩游戏、进行社交、听音乐、看电影等等。 发现层 主要指的是用户可…...

供应链中台

最近几年供应链的概念很火&#xff0c;人人都在谈供应链&#xff0c;人人都需要供应链&#xff0c;尤其是今年2020年&#xff0c;肺炎驱动直播电商&#xff0c;再驱动供应链&#xff0c;那么从游侠的视角&#xff0c;怎么看待供应链呢&#xff1f; 一般我们会设想为什么需要供…...

dp:失衡天平

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 首先不难发现&#xff0c;对于任意次操作&#xff0c;其都可以在一次操作内完成&#xff0c;只不过需要改变一下左右顺序之类的东西而已。 所以我们可以建立一个dp数组[i][j],表示前i的物品&#xff0c;在差值为j的情况…...

7-9 用天平找小球

题目 三个球A、B、C&#xff0c;大小形状相同且其中有一个球与其他球重量不同。要求找出这个不一样的球。 链接 https://pintia.cn/problem-sets/14/problems/789https://pintia.cn/problem-sets/14/problems/789 输入格式 输入在一行中给出3个正整数&#xff0c;顺序对应…...

中国实验室分析天平行业市场供需与战略研究报告

出版商&#xff1a;贝哲斯咨询 获取报告样本&#xff1a; 企业竞争态势 该报告涉及的主要国际市场参与者有Intelligent-Count、A&D、Adam Equipment Inc.、Mettler、Sartorius、Ohaus、Radwag、METTLER、DENVER等。这些参与者的市场份额、收入、公司概况和SWOT分析都包含…...

百度超级链牵头制定P3203跨链国际标准,推动万链互联时代到来

近日&#xff0c;百度超级链牵头启动区块链跨链国际标准—P3203跨链互操作命名协议标准制定&#xff0c;P3203 Standard for Blockchain Interoperability – Naming Protocol&#xff08;跨链互操作命名协议&#xff09;&#xff0c;又称跨链寻址协议标准。随着区块链应用场景…...

区块链华山论剑:百度、微众、趣链大咖共话“跨链”

随着区块链技术进一步发展&#xff0c;其应用场景得到拓展&#xff0c;链间价值流通、数据交换的需求骤增。5月26日&#xff0c;在“跨链技术价值与应用生态”主题线上沙龙中&#xff0c;来自百度、微众银行、趣链的三位技术负责人开启了新一轮“华山论剑”&#xff0c;就技术难…...

【问链财经-区块链基础知识系列】 第二十九课 区块链的世界:中国向左 美国向右

世界有两大互联网生态&#xff0c;一个是美国构筑的&#xff0c;当中的互联网公司有苹果、谷歌、亚马逊、脸书、雅虎等&#xff1b;另一个是中国构筑的&#xff0c;当中互联网公司有阿里、腾讯、百度、京东、今日头条等。这两大生态占据了全球互联网十强。 其实在互联网发展的…...

数字共享平台赋能船舶行业数字化转型——CSBC,搭建行业数字生态链

2020年7月15日&#xff0c;中国船级社&#xff08;CCS&#xff09;设计研发的船舶行业数据交换共享平台CSBC正式上线。该平台的推出&#xff0c;将有效促进国家大数据战略在船舶行业落地&#xff0c;助力企业高质量发展。 搭建行业数字生态链 2020年4月9日&#xff0c;《中共中…...

UVa 1354 天平难题

题目链接 题目大意&#xff1a;给出房间的宽度r和s个挂坠的重量&#xff0c;设计一个尽量宽&#xff08;但不超过房间的宽度r)的天平。 解决问题点&#xff1a;由于节点的数目少&#xff0c;可以将整个天平&#xff08;当作二叉树&#xff09;枚举出来&#xff0c;然后计算宽…...

底层链全面进入主网时代,新一轮洗牌开始

2018 年&#xff0c;TPS 一度成为了考核一个公链项目好坏的核心标准&#xff0c;追求 TPS 的时期也并没有持续多久。最后行业得出了新的结论&#xff0c;TPS 并非公链发展的最大难题&#xff0c;公链的新路径是考虑如何建立一个更完整的生态、获取用户。文 | 昕楠 运营 | 盖遥…...

【谈谈知识点】重链剖分

前言 好久没写博客了上来水一发 当年调板子的时候调到天昏地暗头脑发晕 但是写顺手之后太~ 爽 ~啦&#xff01;&#xff08;x 然而光是求lca还是建议倍增&#xff0c;树剖常数太大哩&#xff08;悲 Part 0 引入 对于序列上的区间加减&#xff0c;大家想必有很多解决的方式了…...

运维必备的DevOps工具链大盘点

本篇文章中将介绍一些能够帮助你实现 DevOps 目标的核心技术类别和具体技术。 1关于 DevOps 及其工具 关于 DevOps 及其工具&#xff0c;需要记住&#xff1a; 持续改进是目标&#xff1b; DevOps 不是花钱买来的&#xff1b; 分阶段采用工具。 2计划工具 为什么计划工具…...

Libra天平币项目机制原理与节点功能测试

Facebook主导的区块链项目&#xff0c;Libra 是一种建立在“Libra 区块链”的基础上的货币&#xff0c;面向全球提供金融服务。本文进行Libra原理机制的论述&#xff0c;并进行节点运行和功能测试。 更多区块链技术应用内容分类&#xff1a; 区块链应用 区块链开发 以太坊 |…...

公链vs联盟链,哈耶克与凯恩斯之争

哈耶克与凯恩斯 凯恩斯与哈耶克是二十世纪的两位重要经济学家&#xff0c;两人在1930年代曾发生过一场理论论战。这场论战推进了人类对具有越来越复杂的金融和货币市场体系的现代市场经济运行的认识&#xff0c;也实际上催生了经济学理论中的“凯恩斯革命”&#xff0c;从而产生…...

教链一周谈20200222

本期看点&#xff1a;一、黑客巧妙利用闪电贷获利35万美元二、Fcoin暴雷&#xff0c;因为不懂费雪方程式惹的祸&#xff1f;三、EOS创始人BM不当言论&#xff0c;称让新冠病人去死可以避免经济损失四、OpenNode集成Apple Pay&#xff0c;为什么这才是正确的姿势五、Crypto AG幕…...

(转载)互联网鄙视食物链大全

在鄙视已经变得公然、无畏、无所顾忌的当下&#xff0c;似乎不鄙视无以证明自己的优秀、高端与成功。你鄙视我&#xff0c;我鄙视他&#xff0c;鄙视食物链将消弭的等级制度再次建构&#xff0c;竖中指、翻白眼就是隔开自恋、自卑的“宫墙”。   鄙视像条食物链&#xff0c;是…...

史上最全!springboot责任链模式

微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务&#xff0c;这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇&#xff0c;很多互联网行业巨头、开源社区等都开始了微服务的讨论和实践。 微服务落地存在的问题 虽…...