Vue2基础九、路由

news2024/9/26 1:17:52

零、文章目录

Vue2基础九、路由

1、单页应用

（1）单页应用是什么

  • 单页面应用(SPA：Single Page Application): 所有功能在 一个html页面 上实现
  • 具体示例: 网易云音乐 https://music.163.com/

（2）单页面应用VS多页面应用

image-20230714163332441

  • 单页面应用优缺点

    • 优点：按需更新性能高，开发效率高，用户体验好

    • 缺点：学习成本，首屏加载慢，不利于SEO

（3）单页面应用应用场景

  • 单页面应用应用场景：系统类网站 / 内部网站 / 文档类网站 /移动端站点
  • 多页面应用应用场景：公司官网 / 电商类网站

（4）单页应用优势原理

  • 单页面应用程序，之所以开发效率高，性能高，用户体验好，最大的原因就是：页面按需更新
  • 要按需更新，首先就需要明确：访问路径 和 组件的对应关系！访问路径 和 组件的对应关系如何确定呢？ 路由

2、路由概念

（1）路由是什么

  • 路由是一种映射关系

（2）Vue中路由

  • Vue中路由：路径 和 组件 的 映射 关系

image-20230714170257903

3、基本使用

（1）简介

  • 目标：认识插件 VueRouter，掌握 VueRouter 的基本使用步骤
  • 作用：修改地址栏路径时，切换显示匹配的组件
  • 说明：Vue 官方的一个路由插件，是一个第三方包
  • 官网：https://v3.router.vuejs.org/zh/

（2）使用步骤

5个基础步骤 (固定)

  • ① 下载： 下载 VueRouter 模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5
  • ② 引入
import VueRouter from 'vue-router'
  • ③ 安装注册
Vue.use(VueRouter)
  • ④ 创建路由对象
const router = new VueRouter()
  • ⑤ 注入，将路由对象注入到new Vue实例中，建立关联
new Vue({
render: h => h(App),
router
}).$mount('#app')

2 个核心步骤

  • ① 创建需要的组件 (views目录)，配置路由规则(路径组件的匹配关系 )

image-20230716212234471

  • ② 配置导航，配置路由出口(路径匹配的组件显示的位置)

image-20230716212311192

（3）代码实现

  • 父组件App.vue
<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>
  • 子组件Find.vue
<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>
  • 子组件Friend.vue
<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

<script>
export default {
  name: 'MyFriend'
}
</script>

<style>

</style>
  • 子组件My.vue
<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

<script>
export default {
  name: 'MyMusic'
}
</script>

<style>

</style>
  • 入口main.js中注册路由
import Vue from 'vue'
import App from './App.vue'

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联

// 2个核心步骤
// 1. 建组件(views目录)，配规则
// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4、组件分类

（1）组件分类

  • 页面组件&复用组件

  • 都是 .vue文件 (本质无区别)

image-20230720204156487

（2）分类原因

分类开来 更易维护

  • src/views文件夹
    • 页面组件 - 页面展示 - 配合路由用
  • src/components文件夹
    • 复用组件 - 展示数据 - 常用于复用

（3）案例

  • 页面组件

image-20230720204254541

  • 复用组件

image-20230720204341997

5、路由模块封装

（1）路由封装好处

  • 问题：所有的路由配置都堆在main.js中合适么？
  • 目标：将路由模块抽离出来。
  • 好处：拆分模块，利于维护

（2）如何快速引入组件

  • @指代src目录，可以用于快速引入组件

（3）代码实现

  • 将路由部分放到router/index.js,main.js再引入这个文件，其他不变

image-20230720205549177

  • index.js
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

export default router
  • main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

6、声明式导航

（1）导航高亮

  • 需求：实现导航高亮效果

image-20230720210012234

  • vue-router 提供了一个全局组件 router-link (取代 a 标签)

    • ① 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #

    • ② 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

image-20230720220955235

（2）精确匹配&模糊匹配

  • 我们发现 router-link 自动给当前导航添加了 两个高亮类名
  • ① router-link-active 模糊匹配 (用的多)
    • to=“/my” 可以匹配 /my /my/a /my/b …
  • ② router-link-exact-active 精确匹配
    • to=“/my” 仅可以匹配 /my

image-20230720221636818

（3）自定义高亮类名

  • router-link 的 两个高亮类名太长了，我们希望能定制怎么办？

image-20230720222556736

  • 可以在router/index.js文件中配置自定义样式类名
    • linkActiveClass 模糊匹配 类名自定义
    • linkExactActiveClass 精确匹配 类名自定义
const router = new VueRouter({
	routes: [...],
	linkActiveClass: "类名1",
	linkExactActiveClass: "类名2"
})

image-20230720222652098

（4）导航链接传参

  • 在跳转路由时, 进行传值，有两种方式

    • 查询参数传参

    • 动态路由传参

  • 查询参数传参

    • ① 语法：to=“/path?参数名=值”
    • ② 对应页面组件接收传递过来的值：$route.query.参数名

  • 动态路由传参

    • ① 配置动态路由

    image-20230720223359337

    • ② 配置导航链接：to=“/path/参数值”
    • ③ 对应页面组件接收传递过来的值：$route.params.参数名

  • 两种传参方式的区别

    • 查询参数传参 (比较适合传多个参数)

      • ① 跳转：to=“/path?参数名=值&参数名2=值”

      • ② 获取：$route.query.参数名

    • 动态路由传参 (优雅简洁，传单个参数比较方便)

      • ① 配置动态路由：path: “/path/参数名”
      • ② 跳转：to=“/path/参数值”
      • ③ 获取：$route.params.参数名

（5）查询参数传参–代码演示

image-20230721144214534

  • Home.vue
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search?key=后端培训">后端培训</router-link>
      <router-link to="/search?key=前端培训">前端培训</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 250px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
  • Search.vue
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取
    console.log(this.$route.query.key);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

（6）动态路由传参–代码演示

image-20230721155736383

  • router/index.js中配置动态路由
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search/:words', component: Search }
  ]
})

export default router
  • Home.vue
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/后端培训">后端培训</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 250px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
  • Search.vue
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

（7）动态路由参数可选符

  • **问题：**配了路由 path: "/search/:words" 为什么按下面步骤操作，会匹配不到组件，显示空白？
  • 原因： /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符 "?"

image-20230721094803301

  • router/index.js配置可选参数
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search }
  ]
})

export default router
  • Home.vue不传参
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/">后端培训</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 250px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
  • Search.vue
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
  • 效果：传进去的值是空

image-20230721170820039

7、路由重定向

（1）路由重定向

  • **问题：**网页打开， url 默认是 / 路径，未匹配到组件时，会出现空白
  • **说明：**重定向 → 匹配path后, 强制跳转path路径
  • 语法： { path: 匹配路径, redirect: 重定向到的路径 }

image-20230721164127146

（2）路由404

  • **作用：**当路径找不到匹配时，给个提示页面
  • **位置：**配在路由最后
  • **语法：**path: “*” (任意路径) – 前面不匹配就命中最后这个

image-20230721220004472

image-20230721220027310

（3）路由模式

  • 问题: 路由的路径看起来不自然, 有#，能否切成真正路径形式?
    • hash路由(默认) 例如: http://localhost:8080/#/home
    • history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

image-20230721220145618

8、编程式导航

（1）基本跳转

  • 点击按钮跳转如何实现？用JS代码来进行跳转，两种语法:

    • ① path 路径跳转 (简易方便)

    image-20230721222853602

    • ② name 命名路由跳转 (适合 path 路径长的场景)

image-20230721222930163

  • 代码实现：Home.vue
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/后端培训">后端培训</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  methods: {
    goSearch () {
      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      // this.$router.push('/search')

      // (2) this.$router.push({     [完整写法]
      //         path: '路由路径' 
      //     })
      // this.$router.push({
      //   path: '/search'
      // })

      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //    })
      this.$router.push({
        name: 'search'
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 250px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

（2）路由传参

  • 两种传参方式：查询参数+动态路由传参，两种跳转方式，对于两种传参方式都支持

  • path 路径跳转

    • ① query传参

    image-20230723223552398

    • ② 动态路由传参 (需要配动态路由)

    image-20230723223603603

  • name 命名路由跳转

    • ① query传参

    image-20230723223617466

    • ② 动态路由传参 (需要配动态路由)

    image-20230723223629268

  • 代码实现

    • Home.vue传参
    <template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/后端培训">后端培训</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data () {
    return {
      inpValue: ''
    }
  },
  methods: {
    goSearch () {
      // 1. 通过路径的方式跳转
      // (1) this.$router.push('路由路径') [简写]
      //     this.$router.push('路由路径?参数名=参数值')
      // this.$router.push('/search')
      // this.$router.push(`/search?key=${this.inpValue}`)
      // this.$router.push(`/search/${this.inpValue}`)

      // (2) this.$router.push({     [完整写法] 更适合传参
      //         path: '路由路径'
      //         query: {
      //            参数名: 参数值,
      //            参数名: 参数值
      //         }
      //     })
      // this.$router.push({
      //   path: '/search',
      //   query: {
      //     key: this.inpValue
      //   }
      // })
      // this.$router.push({
      //   path: `/search/${this.inpValue}`
      // })



      // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
      //    this.$router.push({
      //        name: '路由名'
      //        query: { 参数名: 参数值 },
      //        params: { 参数名: 参数值 }
      //    })
      this.$router.push({
        name: 'search',
        // query: {
        //   key: this.inpValue
        // }
        params: {
          words: this.inpValue
        }
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 250px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
    • Search.vue接受参数
    <template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    // console.log(this.$route.params.words);
  }
}

</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

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

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

相关文章

角色权限的设置

角色权限的设置

1.先在登录页把角色存起来 2.然后分成普通管理员路由和超级管理员路由的动态路由 3.在导航栏这边接收循环路由以及文字等 4.给路由加属性看是否展示在导航栏ismenu 5.在templat标签上面循环 <template><div class"asders"><el-aside width"200…
阅读更多...
Mybatis-Flex

Mybatis-Flex

一、Mybatis-Flex是什么&#xff1f; Mybatis-Flex 是一个优雅的 Mybatis 增强框架&#xff0c;它非常轻量、同时拥有极高的性能与灵活性。我们可以轻松的使用 Mybaits-Flex 链接任何数据库&#xff0c;其内置的 QueryWrapper^亮点 帮助我们极大的减少了 SQL 编写的工作的同时…
阅读更多...
mfc140.dll丢失的多种解决方法分享，最全面的mfc140.dll文件修复手法

mfc140.dll丢失的多种解决方法分享，最全面的mfc140.dll文件修复手法

其实想要修复丢失的mfc140.dll文件&#xff0c;还是非常的简单的&#xff0c;我们需要针对其丢失的原因&#xff0c;去做针对性的修复&#xff0c;并不是所有的修复手段都是有用的&#xff01;这点我们必须了解清楚&#xff0c;好了下面我们一起来了解一下mfc140.dll丢失的多种…
阅读更多...
神码ai火车头伪原创插件怎么用【php源码】

神码ai火车头伪原创插件怎么用【php源码】

大家好&#xff0c;本文将围绕python绘制烟花特定爆炸效果展开说明&#xff0c;如何用python画一朵花是一个很多人都想弄明白的事情&#xff0c;想搞清楚用python画烟花的代码需要先了解以下几个事情。 1、表白烟花代码 天天敲代码的朋友&#xff0c;有没有想过代码也可以变得…
阅读更多...
SSH连接Windows「用户名与密码的坑」及解决方案

SSH连接Windows「用户名与密码的坑」及解决方案

文章目录 问题方案 问题 当我们想要通过 SSH 连接 Windows 来进行一些远程办公的时候&#xff0c;通常需要进行以下准备工作&#xff1a; 在 Windows 上安装 OpenSSH 服务器 在系统的「设置>应用>可选功能」中搜索关键词「SSH」即可找到该应用并下载安装 确定 Windows…
阅读更多...
java：匿名内部类

java：匿名内部类

匿名内部类 匿名内部类一般作为一个参数传递给方法 首先不作为参数 同时可以让代码更简化&#xff0c;直接调用go方法&#xff0c;将S1替换&#xff0c;也就是将内部类直接作为参数&#xff0c;传递给方法 内部类不是主动去实现而是被动实现的
阅读更多...
Zabbix下载安装过程中的报错问题与解决方案

Zabbix下载安装过程中的报错问题与解决方案

目录 系统环境1. switch-to 指令错误2. 缺少的组或模块 : php:7.4 / perl:5.26&#xff0c;以及衍生出来的一系列依赖模块缺少的问题3. 初始化架构和数据时缺失server.sql.gz&#xff0c;无法正常导入4. 启动Zabbix server和agent进程时无法正常启动&#xff0c;但也没有其他问…
阅读更多...
Date时间相关语句

Date时间相关语句

SimpleDateFormat格式化 Date date new Date(); /*注意&#xff0c;dd需要小写&#xff0c;另外&#xff0c;需要注意的是&#xff0c;匹配符字母不能随意写*/ /*获取date*/ SimpleDateFormat sdf1 new SimpleDateFormat("YYYY年MM月dd日 "); SimpleDateFormat sd…
阅读更多...
轻松构建数字孪生场景,限时有奖搜集用户体验活动

轻松构建数字孪生场景,限时有奖搜集用户体验活动

作为程序员或者技术开发者&#xff0c;无论是学习还是工作&#xff0c;前沿的技术的开发和学习是不可缺少的&#xff0c;在信息高速的发展越来越多的技术被发明和创造&#xff01; 我们应该与时俱进&#xff0c;去接触更多的科技技术&#xff0c;拓展自己的知识盲区&#xff0c…
阅读更多...
C# Assembly 反射动态加载程序集（动态加载Dll）Demo

C# Assembly 反射动态加载程序集（动态加载Dll）Demo

No1、本Demo 定义了一个接口IserviceToolFrame&#xff0c;接口中有一个方法Run。 No2、在另外两个工程中&#xff0c;分别定义两个类serviceToolCatComplete、serviceToolDogComplete实现接口IserviceToolFrame。 No3、控制台程序通过动态加载Dll的方式去调用IserviceToolFram…
阅读更多...
消息队列的两种消费模式

消息队列的两种消费模式

第一种&#xff1a;点对点模式 消息发送者生产消息发送到消息队列中&#xff0c;然后消息接收者从消息队列中取出并且消费消息。消息被消费以后&#xff0c;消息队列中不再有存储&#xff0c;所以消息接收者不可能消费到已经被消费的消息。 点对点模式特点&#xff1a; 每个消息…
阅读更多...
git的clone，上传与upstream同步

git的clone，上传与upstream同步

文章目录 clone同步 clone clone他人项目&#xff0c;git到自己的项目 rm -rf .git .git存放原始项目的日志信息&#xff0c;这里需要添加自己的日志信息&#xff0c;需要删除重写。也可手动删除 git init 初始化文件&#xff0c;依据本地日志信息生产.git文件 git add 目标文…
阅读更多...
生物信息学_玉泉路_课堂笔记_03 第三章 多序列比对与系统发生树构建

生物信息学_玉泉路_课堂笔记_03 第三章 多序列比对与系统发生树构建

&#x1f345; 课程&#xff1a;生物信息学_玉泉路_课堂笔记 中科院_2022秋季课 第一学期 &#x1f345; 个人笔记使用 &#x1f345; 2023/7/6 一、多序列比对简介 1.1 简介 1.2 多序列比对方法 1.2.1 启发式&#xff1a;渐进法 1.2.2 软件 ClustalW/X 1.2.3 启发式&…
阅读更多...
安装git创建版本库

安装git创建版本库

安装git 安装教程参考链接 https://blog.csdn.net/mukes/article/details/115693833 按照链接流程安装 安装完成后&#xff0c;还需要最后一步设置&#xff0c;在命令行输入&#xff1a; &#xff08;用户名和邮箱在账号中查找&#xff09; $ git config --global user.name “…
阅读更多...
一套Java/.Net+Vue前后端分离的低代码快速开发框架

一套Java/.Net+Vue前后端分离的低代码快速开发框架

项目简介 这是一个基于Java Boot/.Net Core构建的简单、跨平台快速开发框架。前后端封装了上千个常用类&#xff0c;方便扩展&#xff1b;集成了代码生成器&#xff0c;支持前后端业务代码生成&#xff0c;实现快速开发&#xff0c;提升工作效率&#xff1b;框架集成了表单、报…
阅读更多...
特定Adreno GPU的Android设备发生冻屏问题

特定Adreno GPU的Android设备发生冻屏问题

1&#xff09;特定Adreno GPU的Android设备发生冻屏问题 ​2&#xff09;Unity版本升级后&#xff0c;iOS加载UnityFramework bundle闪退 3&#xff09;关于RectTransfrom.rect在屏幕空间中表示的相关问题 4&#xff09;Unity Mesh泄露问题 这是第345篇UWA技术知识分享的推送&a…
阅读更多...
flex布局篇——justify-cont:center/space-between/space-around最后一行靠左

flex布局篇——justify-cont:center/space-between/space-around最后一行靠左

正常来说，用到 justify-cont:space-between时，最后一行元素是这样的 会向两端对齐。为了解决这个办法，可用gap与伪类进行纠正： <view class="box"><view class="bbox" wx:for="{{50}}" wx:key="this"><view class=…
阅读更多...
CitHub Copilot 基于GPT的代码生成模型

CitHub Copilot 基于GPT的代码生成模型

CitHub Copilot 基于GPT的代码生成模型 介绍 GitHub Copilot X 是 GitHub 与 OpenAI 合作创建的&#xff0c;这是世界上第一个使用 OpenAI Codex 模型开发的大规模生成式人工智能开发工具&#xff0c;可以作为vscode 和jetbrains 插件安装 价格 试用30天免费&#xff0c;10…
阅读更多...
3分钟学会设计模式 -- 单例模式

3分钟学会设计模式 -- 单例模式

►单例模式 ►使用场景 在编写软件时&#xff0c;对于某些类来说&#xff0c;只有一个实例很重要。例如&#xff0c;一个系统中可以存在多个打印任务&#xff0c;但是只能有一个正在工作的任务&#xff1b;一个系统中可以多次查询数据库&#xff0c;但是只需要一个连接&#x…
阅读更多...
rancher平台上强制删除pod服务操作

rancher平台上强制删除pod服务操作

背景&#xff1a; 在日常paas平台运维工作中需要对rancher平台进行巡检的工作&#xff0c;在巡检时发现在rancher管理界面无法删除异常的pod服务&#xff0c; 处理&#xff1a; 像这样的情况就是k8s集群的pod无法通过默认的方式去删除掉pod服务&#xff0c;这时候只能是手工强制…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023