【vue】vue-router_ vue3路由管理器

news2024/10/17 11:26:33

代码获取

vue-router_ vue3路由管理器

⼀、基本介绍

1. 单⻚应⽤程序介绍

1.1 概念

单⻚应⽤程序：SPA(Single Page Application)是指所有的功能都在⼀个HTML⻚⾯上实现

1.2 具体⽰例

单⻚应⽤⽹站： ⽹易云⾳乐 https://music.163.com/

多⻚应⽤⽹站： 京东 https://jd.com/

1.3 单⻚应⽤ VS 多⻚应⽤
开发分类实现方式页面性能开发效率用户体验学习成本首屏加载SEO
单页一个 Html 页面按需更新
性能高		高非常好高慢差
多页多个 Html 页面整页更新
性能低		中等一般中等快优

单⻚应⽤类⽹站：系统类⽹站 / 内部⽹站 / ⽂档类⽹站 / 移动端站点

多⻚应⽤类⽹站：公司官⽹ / 电商类⽹站

1.4 总结
  1. 什么是单⻚⾯应⽤程序?

​ 答：所有的功能都在⼀个html⻚⾯上

  1. 单⻚⾯应⽤优缺点?

​ 答：1、优点：体验好、开发效率⾼

​ 2、缺点：⾸屏加载相对较慢、不利于SEO

  1. 单⻚应⽤场景？

​ 答： 系统类⽹站 / 内部⽹站 / ⽂档类⽹站 / 移动端站点

2. 路由介绍

2.1 路由的介绍

⽣活中的路由：设备和ip的映射关系

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

单⻚⾯应⽤程序, 之所以开发效率⾼, 性能好, ⽤⼾体验好， 最⼤的原因就是: ⻚⾯按需更新

⽐如当点击【发现⾳乐】和【关注】时, 只是局部更新内容, 对于头部是不更新的，要按需更新, ⾸先就需要明确: 访问路径 和 组件的对应关系！访问路径和⻚⾯的对应关系如何确定呢？ 路由

2.2 如何实现路由

借助 vue3 的好基友 vue-router, 当修改地址栏路径时，切换显⽰的组件

2.3 介绍vue-router

官网

2.4 总结
  1. 什么是路由？

​ 答：⼀种映射(对应)关系

  1. Vue中的路由是什么

​ 答：路径和⻚⾯的映射关系

  1. vue-router是什么？

​ 答：vue的官⽅路由

3. 组件存放⽬录

3.1 组件分类

⼈为的把 .vue ⽂件分为两类, 仅仅是为了便于理解和管理, 但⼆者本质⽆区别

  • ⻚⾯组件: 配合路由切换, 展⽰整个⻚⾯, 不复⽤的•

  • 复⽤组件: ⽤于组装⻚⾯组件, 可复⽤的

3.2 存放⽬录
  1. ⻚⾯组件 - ⻚⾯展⽰ - 配合路由使⽤

​ 放置在 src/views ⽬录下

  1. 复⽤组件 - ⽤于组装⻚⾯组件

​ 放置在 src/components ⽬录下

3.3 总结
  1. 组件分为哪两类？分类的⽬的？

​ 答：⻚⾯组件、复⽤组件; 便于管理

  1. 不同分类的组件应该放在什么⽂件夹？作⽤分别是什么？

​ 答： 1、 ⻚⾯组件 -> src/views -> 配合路由切换

​ 2、 复⽤组件 -> src/components -> 组装⻚⾯组件

⼆、基本使⽤和模块封装

1. 基本使⽤(4+2)

1.1 四个固定步骤

如下4个固定的步骤

  1. 下载 VueRouter 模块
yarn add vue-router
  1. 导⼊相关函数
import { createRouter, createWebHashHistory } from 'vue-router'
  1. 创建路由实例
const router = createRouter({
    // 哈希模式, 路径带 #
    history: createWebHashHistory(),
    routes: [
        // 路由表规则, 即 path 与 component 的对应关系
    ]
})
  1. 注册, 将路由实例注册到应⽤中, 让规则⽣效
app.use(router)

当完以上 4 步之后, 就可以看到浏览器地址栏中的路径变成了 /#/的形式。

表⽰项⽬的路由已经被 Vue-Router 管理了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.2 两个核⼼步骤
  1. views⽬录下, 创建需要的⻚⾯组件，并配置路由规则

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

views/Find.vue

<script setup></script>

<template>
    <div class="find">
        <p>发现⾳乐</p>
        <p>发现⾳乐</p>
        <p>发现⾳乐...</p>
    </div>
</template>

<style scoped></style>

views/My.vue

<script setup></script>

<template>
    <div class="my">
        <p>我的⾳乐</p>
        <p>我的⾳乐</p>
        <p>我的⾳乐...</p>
    </div>
</template>

<style scoped></style>

views/Friend.vue

<script setup></script>

<template>
    <div class="friend">
        <p>朋友</p>
        <p>朋友</p>
        <p>朋友...</p>
    </div>
</template>

<style scoped></style>

main.js

// 导⼊两个相关函数
// createRouter(): 创建路由实例
// createWebHashHistory(): 创建哈希模式的路由, 路径带 #
import { createRouter, createWebHashHistory } from 'vue-router'

// 导⼊ 3 个⻚⾯组件
import Find from '@/views/Find.vue'
import Friend from '@/views/Friend.vue'
import My from '@/views/My.vue'

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/find',
            component: Find
        }, {
            path: '/my',
            component: My
        }, {
            path: '/friend',
            component: Friend
        }
    ]
})

// 注册
app.use(router)
  1. 给路由出⼝(路径匹配的组件, 显⽰的位置)

App.vue

<script setup></script>
<template>
	<!-- 路由出⼝ -->
	<router-view />
</template>
1.3 路由运作原理

当浏览器url改变时, 匹配路由表数组中的path值，如果命中了，

则把相应的component渲染到 <router-view /> 的位置；否则显⽰空⽩

1.4 总结
  1. 如何实现 路径改变，对应组件 切换,应该使⽤哪个插件?

​ 答： vue-router

  1. vue-router的使⽤步骤是什么(4+2)?

​ 答：下载->导⼊->创建->注册-> 配置规则表->给出⼝

2. 抽离封装路由模块

2.1 问题

路由配置代码都写在 main.js 中合适吗？显然不合适, 会让 main.js 代码变得臃肿

2.2 ⽬标

将路由模块抽离出来。 好处：利于管理和维护

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 代码⽰例

新建 router/index.js

// 添加路由功能配置
import { createRouter, createWebHashHistory } from "vue-router";
// 注意: 脚⼿架环境下 @ 代指 src ⽬录，可以⽤于快速引⼊组件
// 导入 3 个页面组件
import Find from "@/views/Find.vue";
import Friend from "@/views/Friend.vue";
import My from "@/views/My.vue";

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/find",
            component: Find
        },
        {
            path: "/friend",
            component: Friend
        },
        {
            path: "/my",
            component: My
        }
    ]
})
// 导出路由实例
export default router;

main.js

import App from "./App.vue";
import { createApp } from "vue";
import router from "./router/index.js";

// 创建应用实例
const app = createApp(App);

// 注册
app.use(router);

app.mount("#app");

2.4 总结

  1. 封装抽离路由模块的好处是什么？

​ 答：便于管理、维护

  1. 以后如何快速引⼊组件？

​ 答：可以借助 @ 代指 src ⽬录

三、声明式导航与传参

1. 声明式导航

1.1 问题

要⼿动输⼊地址，切换⻚⾯，不合理吧？能否点击链接进⾏跳转

1.2 解决⽅案

vue-router 提供了⼀个全局组件 router-link, ⽤于点击跳转，需添加 to 属性指定路径 ,

其本质还是 a 标签

语法： <router-link to=“path值”> xxx </router-link>

<!-- App.vue -->

<script setup></script>
<template>
	<nav>
		<router-link to="/find">发现⾳乐</router-link>
		<router-link to="/my">我的⾳乐</router-link>
		<router-link to="/friend">朋友</router-link>
	</nav>
	<!-- ⼀级路由出⼝ -->
	<router-view />
</template>
<style>
nav a {
	color: #333;
	text-decoration: none;
}

nav a:nth-child(2) {
	margin: 0 80px;
}

nav a.router-link-active {
	background: red;
	color: #fff;
}
</style>
1.3 ⾃带⾼亮类名

使⽤router-link跳转后，我们发现。当前点击的链接默认加了两个class的值router-link-exact-active 和 router-link-active ,

我们可以给任意⼀个class属性添加⾼亮样式即可实现功能

1.4 总结
  1. router-link是什么？

​ 答： 声明式导航 , 点击跳转路由的

  1. router-link怎么⽤？

​ 答：添加 to 属性

  1. router-link的好处是什么？

​ 答：⾃带 激活类名 , ⽅便实现⾼亮样式

2. 两个类名

当我们使⽤跳转时，⾃动给当前导航加了两个类名

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.1 router-link-active

模糊匹配

只要是以/find开头的路径都可以和 to="/find"匹配到

2.2 router-link-exact-active

精确匹配

to=“/find” 仅可以匹配 /find

2.3 总结
  1. router-link 会⾃动给当前导航添加两个类名，有什么区别呢？

​ 答：1、 router-link-active : 模糊匹配

​ 2、 router-link-exact-active : 精确匹配

3. 声明式导航-传查询参

3.1 ⽬标

在跳转路由时，进⾏传参, ⽐如：现在我们在发现⾳乐⻚, 点击去朋友⻚, 并携带id, ⽅便后续查询详情,

如何传参？

3.2 跳转传参

我们可以通过两种⽅式，在跳转的时候把所需要的参数传到其他⻚⾯中

  1. 查询参数传参

  2. 动态路由传参

3.3 查询参数传参

传参(有2种格式)

a. 字符串

<router-link to="/path?参数名=值"> xxx </router-link>

b. 对象

	<router-link :to="{
		path: '/path',
		query: {
			参数名: 值
		...
		}
	}"> xxx </router-link>
3.4 代码⽰例

App.vue

	<!-- 字符串 -->
	<router-link to="/friend?id=10086"> 朋友 </router-link>
	<!-- 对象 -->

	<router-link :to="{
		path: '/friend',
		query: {
			id: 10086
		}
	}"> 朋友 </router-link>

Friend.vue

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id)
</script>
3.5 总结
  1. 路由查询参数如何传递？

​ 答：字符串: “/path?参数名=值” 或 对象: path+query

  1. 查询参如何接收？

​ 答： route.query.参数名

4. 声明式导航-传动态参

4.1 动态路由传参⽅式

  • 配置动态路由

  • 动态路由后⾯的参数可以随便起名，但要有语义

routes: [
    {
        path: "/find/:id",
        component: Find
    }
]
  • 传递参数(有2种格式)

a. 字符串

<router-link to="/path/具体值"> xxx </router-link>

b. 对象

	<router-link :to="{
		name: 'Friend',
		params: {
			参数名: 具体值
		}
	}"> xxx </router-link>
  • 接收参数
<script setup>
	import { useRoute } from 'vue-router'
	const route = useRoute()
	// 获取动态路由参数
	console.log(route.params)
</script>
4.2 总结
  1. 路由动态参数如何传递？

​ 答：1、 /:参数名 先占位

​ 2、 字符串: “/path/具体值” 或 对象: name+params

  1. 查询参如何接收？

​ 答： route.params.参数名

5. 查询参 VS 动态参

5.1 对⽐
  1. 查询参数传参 (⽐较适合传多个参数)

​ a. 跳转：to=“/path?参数名=值&参数名2=值”

​ b. 获取：route.query.参数名

  1. 动态路由传参 (优雅简洁，传单个参数⽐较⽅便)

​ a. 配置动态路由：path: “/path/:参数名”

​ b. 跳转：to=“/path/参数值”

​ c. 获取：route.params.参数名

  1. 注意：动态路由也可以传多个参数，但⼀般只传⼀个

四、更多配置

1. 重定向

1.1 问题

⽹⻚打开时, url 默认是 / 路径, 未匹配到组件时, 会出现空⽩

1.2 解决⽅案

重定向: 匹配 / 后, ⽐如强制跳转 /find 路径, 避免⻚⾯空⽩

1.3 语法
{ path: 匹配路径, redirect: 要重定向的路径 }
1.4 代码⽰例
// 访问 / , ⾃动跳转到 /find
{ path: '/', redirect: '/find'},

2. 404

2.1 作⽤

当路径找不到匹配时，给个提⽰⻚⾯

2.2 位置

404的路由，虽然配置在任何⼀个位置都可以，但⼀般都配置在其他路由规则的最后⾯

2.3 语法

path: “*” (任意路径) ‒ 前⾯不匹配就命中最后这个

2.4 代码

views/404.vue

<script setup></script>

<template>
    <div>
        <h3>404</h3>
        <p> 你访问的⻚⾯去了⽉球 </p>
        <router-link to="/"> 去⾸⻚ </router-link>
    </div>
</template>

router/index.js

// 添加路由功能配置
import { createRouter, createWebHashHistory } from "vue-router";

import _404 from "@/views/404.vue";
// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        ...
        ,
        {
            path: "/:pathMatch(.*)*",
            component: _404
        }
    ]
})
// 导出路由实例
export default router;

3. 模式

3.1 问题

路由的路径看起来不好看, 有#, 能否切成真正路径形式?

hash路由(默认) 例如: http://localhost:5173/#/find

history路由(常⽤) 例如: http://localhost:8080/find (上线需要服务器端⽀持，开发环境Vite给规避掉了history模式的问题)

3.2 语法
// 添加路由功能配置
import { createRouter, createWebHashHistory,createWebHistory } from "vue-router";

// 创建路由实例
const router = createRouter({
    // history: createWebHashHistory(), // hash 模式 URL 地址带 # 号
    history: createWebHistory(), // history 模式 URL 地址不带 # 号
    routes: [
        ...
    ]
})
// 导出路由实例
export default router;

五、编程式导航与传参

1. 编程式导航

1.1 问题

如何主动做路由跳转？⽐如：登录成功⾃动跳转⾄⾸⻚

1.2 解决⽅案

编程式导航： ⽤JS代码来进⾏跳转

1.3 语法

路由实例 router.push(路径)

<script setup>
    import { useRouter } from 'vue-router'
    const router = useRouter()
    router.push(字符串)
    router.push(对象)
</script>
1.4 代码⽰例

Find.vue

<script setup>
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
// 组件挂载后, 延迟 2 秒, 自动跳转到 find
const router = useRouter();
onMounted(() =>{
    setTimeout(() => {
        // 1. 通过 router.push() 方法跳转到 find
        router.push('/find');

        // 2. 对象
        // router.push({ path: '/find' });

        // 3. 命名路由
        // router.push({ name: 'find' });

    }, 2000);
});
</script>

<template>
    <div class="friend">
        <p>朋友</p>
        <p>朋友</p>
        <p>朋友...</p>
    </div>
</template>

<style scoped></style>
1.5 总结
  1. 编程式导航如何做路由跳转？

​ 答： router.push(字符串/对象)

2. 编程式导航传参

2.1 问题

编程式导航如何传参呢？

2.2 语法

与 声明式导航<router-link> 传参和接参⽅式完全⼀样，既⽀持字符串, 也⽀持对象

router.push('/path?参数名=值')

router.push({
    path: '/path',
    query：{
    参数名: 值
...
}
})

router.push({
    name: '路由名称',
    params: {
        参数名: 值
    }
})
2.3 代码⽰例
2.3.1 查询参数

router/index.js

createRouter({
    routes: [
        { path: '/friend', component: Friend }
    ]
})

Find.vue

router.push('/friend?fid=110')

router.push({
    path: '/friend',
    query: {
        fid: 101
    }
})

Friend.vue

<script setup>
    import {useRoute} from 'vue-router'

    const route = useRoute()
    console.log(route.query.fid)
</script>
2.3.2 动态参数

router/index.js

createRouter({
    routes: [{
        // 命名路由
        name: 'Friend',
        path: '/friend/:id',
        component: Friend
    }]
})

Find.vue

router.push({
    name: 'Friend',
    params: {
        id: 101
    }
})

Friend.vue

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>
2.4 总结
  1. 编程式导航如何传参和接参？

​ 答：同声明式导航完全⼀样, router.push(字符串/对象)

六、嵌套与守卫

1. 嵌套

1.1 问题

能否在⼀个路由⻚⾯中，再进⾏⼀套路由的切换呢？⽐如 ⽹易云⾳乐 的发现⾳乐⻚

1.2 效果图
image-20241015215133572
1.3 步骤

  1. 创建3个⼆级路由⻚⾯组件(Recommend、Ranking、SongList)

  2. 路由表数组中, 在相应的⼀级路由规则中, 配置 children 规则

  3. 在相应的⼀级路由⻚⾯组件中, 给⼆级路由 出⼝和导航链接

注意：

1、 ⼆级路由的 path 推荐 不加 /

2、 做路由跳转的时候要写 完整路径(⽗路径+当前路径)

3、 防⽌⼆级路由⻚⾯空⽩, 给默认显⽰的⼀级路由 添加重定向

1.4 代码⽰例

views/Recommend.vue

<script setup></script>

<template>
    <div class="recommend">
        <h5>推荐</h5>
        <h5>推荐</h5>
        <h5>推荐</h5>
    </div>
</template>

<style scoped></style>

views/Ranking.vue

<script setup></script>

<template>
    <div class="ranking">
        <h5>排⾏榜</h5>
        <h5>排⾏榜</h5>
        <h5>排⾏榜</h5>
    </div>
</template>

<style scoped></style>

views/SongList.vue

<script setup></script>

<template>
    <div class="songlist">
        <h5>歌单</h5>
        <h5>歌单</h5>
        <h5>歌单</h5>
    </div>
</template>

<style scoped></style>

router/index.js

// 添加路由功能配置
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
// 注意: 脚⼿架环境下 @ 代指 src ⽬录，可以⽤于快速引⼊组件
// 导入 3 个页面组件
import Find from "@/views/Find.vue";
import Friend from "@/views/Friend.vue";
import My from "@/views/My.vue";
import _404 from "@/views/404.vue";
import Recommend from "@/views/Recommend.vue";
import SongList from "@/views/SongList.vue";
import Ranking from "@/views/Ranking.vue";
// 创建路由实例
const router = createRouter({
    // history: createWebHashHistory(), // hash 模式 URL 地址带 # 号
    history: createWebHistory(), // history 模式 URL 地址不带 # 号
    routes: [
        {
            path: "/",
            redirect: "/find"
        },
        {
            path: "/find",
            component: Find,
            // 重定向, 防⽌⼆级路由空⽩
            redirect: "/find/recommend",
            // 嵌套路由
            children: [
                {
                    path: "recommend",
                    component: Recommend
                },
                {
                    path: "ranking",
                    component: Ranking
                },
                {
                    path: "songList",
                    component: SongList
                },
            ]
        },
        {
            path: "/friend",
            component: Friend
        },
        {
            path: "/my",
            component: My
        },
        {
            path: "/:pathMatch(.*)*",
            component: _404
        }
    ]
})
// 导出路由实例
export default router;

views/Find.vue

<script setup></script>
<template>
    <div class="router2">
        <nav>
            <router-link to="/find/recommend">推荐</router-link>
            <router-link to="/find/ranking">排行榜</router-link>
            <router-link to="/find/songList">歌单</router-link>
        </nav>
        <!-- 二级路由 -->
        <router-view />
    </div>


</template>
<style scoped>

.router2 {
    padding: 20px;
    background: #5177c7;
}


nav a {
    color: #333;
    text-decoration: none;
}

nav a:nth-child(2) {
    margin: 0 80px;
}

nav a.router-link-active {
    background: red;
    color: #fff;
}
</style>
1.5 总结
  1. 如何配置路由嵌套？

​ 答：配 children ，给路由 出⼝<router-view/>

  1. 需要注意什么？

​ 答：⼆级 path 不加 / ; 跳转要写完成路径; 避免空⽩、要添加重定向

2. 路由守卫

2.1 问题

能否在访问某个路由前, 添加权限判断? ⽐如 我的⾳乐⻚, 只有登录了才可以访问

2.2 解决⽅案

路由(导航)全局前置守卫: 每个路由在跳转前都会触发回调函数

router.beforeEach((to, from) => {
    // to: 即将要进⼊的路由
    // from: 当前正要离开的路由
    // false 取消导航(不发⽣跳转)
    return false
    // 正常放⾏、正常跳转
    return undefined | true
    // 重定向到指定的路由
    return '/路径'
})
2.3 代码⽰例
// ⽤来模拟是否登录
const isLogin = true
router.beforeEach((to, from) => {
    // 如果没有登录, 并且还要去 我的⾳乐⻚
    if (!isLogin && to.path === '/my') {
        // 进⾏提⽰

        alert('请先登录')
        // 不放⾏(不跳转)
        return false
    }
    // 正常放⾏
    return true
})
2.4 总结
  1. 如何在访问路由前添加权限校验？

​ 答： 全局前置守卫 router.beforeEach((to, from) => { })

  1. 参数 to、from 和 回调函数返回值 都表⽰什么？
to：即将进⼊的路由
from：正要离开的路由
回调函数返回值：
    return false: 不放⾏
    return true/undefined: 放⾏
    return 路径: 重定向到指定路由

nav a.router-link-active {
background: red;
color: #fff;
}


#### 1.5 总结

1. 如何配置路由嵌套？

​		答：配 children ，给路由 出⼝\<router-view/>

2. 需要注意什么？

​		答：⼆级 path 不加 / ; 跳转要写完成路径; 避免空⽩、要添加重定向

### 2. 路由守卫

#### 2.1 问题

能否在访问某个路由前, 添加权限判断? ⽐如 我的⾳乐⻚, 只有登录了才可以访问

#### 2.2 解决⽅案

路由(导航)全局前置守卫: 每个路由在跳转前都会触发回调函数

```js
router.beforeEach((to, from) => {
    // to: 即将要进⼊的路由
    // from: 当前正要离开的路由
    // false 取消导航(不发⽣跳转)
    return false
    // 正常放⾏、正常跳转
    return undefined | true
    // 重定向到指定的路由
    return '/路径'
})
2.3 代码⽰例
// ⽤来模拟是否登录
const isLogin = true
router.beforeEach((to, from) => {
    // 如果没有登录, 并且还要去 我的⾳乐⻚
    if (!isLogin && to.path === '/my') {
        // 进⾏提⽰

        alert('请先登录')
        // 不放⾏(不跳转)
        return false
    }
    // 正常放⾏
    return true
})
2.4 总结
  1. 如何在访问路由前添加权限校验？

​ 答： 全局前置守卫 router.beforeEach((to, from) => { })

  1. 参数 to、from 和 回调函数返回值 都表⽰什么？
to：即将进⼊的路由
from：正要离开的路由
回调函数返回值：
    return false: 不放⾏
    return true/undefined: 放⾏
    return 路径: 重定向到指定路由

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

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

相关文章

【Python语言进阶(二)】

【Python语言进阶(二)】

一、函数的使用方式 将函数视为“一等公民” 函数可以赋值给变量函数可以作为函数的参数函数可以作为函数的返回值 高阶函数的用法&#xff08;filter、map以及它们的替代品&#xff09; items1 list(map(lambda x: x ** 2, filter(lambda x: x % 2, range(1, 10)))) # filter…
阅读更多...
K8s简介和安装部署

K8s简介和安装部署

一、 Kubernetes 简介及部署方法 1、应用部署方式演变 Kubernetes简称为K8s&#xff0c;是用于自动部署、扩缩和管理容器化应用程序的开源系统&#xff0c;起源于Google 集群管理工具Borg。 传统部署 &#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上 优…
阅读更多...
python yolov8半自动标注

python yolov8半自动标注

首先标注一部分图片&#xff0c;进行训练&#xff0c;生成模型&#xff0c;标注文件为xml方便后面统一做处理。 1、标注数据&#xff08;文件为xml, 转为txt用于训练&#xff0c;保留xml标签文件&#xff09; 2、模型训练&#xff08;训练配置、训练代码、&#xff09; 3、使用…
阅读更多...
400行程序写一个实时操作系统（八）：（必看！）使用gdb调试错误的程序

400行程序写一个实时操作系统（八）：（必看！）使用gdb调试错误的程序

上一篇笔者讲完了内存管理算法的完整实现&#xff0c;不过差点忘了&#xff0c;直接上这一部分是不是有点不友好&#xff0c;要知道笔者当初写内存算法可是调试得死去活来&#xff0c;奇奇怪怪的问题不断出现。 就比如笔者当初写了一个内存池算法&#xff0c;结果奇葩的事情发…
阅读更多...
大模型之三十二-语音合成TTS(coqui) 之二 fine-tune

大模型之三十二-语音合成TTS(coqui) 之二 fine-tune

在 大模型之三十-语音合成TTS(coqui)[shichaog CSDN]中提到了xttsv2的fine-tune。 数据情况&#xff1a; 我是从bilibili up主小Lin说提取了一些视频&#xff0c;然后进行了重新的fine-tune。 训练结果 如下图所示&#xff0c;上面波形幅度较大的是xttsv2原始模型的结果&am…
阅读更多...
u盘被写保护怎么解除？u盘写保护怎么去掉？

u盘被写保护怎么解除？u盘写保护怎么去掉？

我们平时在使用U盘的过程中&#xff0c;可能会遇到U盘无法写入文件、删除数据或是格式化的情况。同时还可能收到提示“改磁盘已写保护”。U盘被写保护可能是有意的设置&#xff0c;也可能是无疑的操作。那么U盘被写保护了该怎么解除呢&#xff1f;本期内容&#xff0c;我们将介…
阅读更多...
最新版 Winows下如何安装Redis？

最新版 Winows下如何安装Redis？

最新版 Winows下如何安装Redis&#xff1f; 一、Redis介绍 Redis是一个广泛使用的开源非关系型数据库&#xff0c;它在现代软件开发中扮演着重要角色。**作为一个基于内存的数据库&#xff0c;Redis的底层代码是用ANSI C编写的&#xff0c;这使得它在性能上非常出色。**Redis…
阅读更多...
【AIF-C01认证】亚马逊云科技生成式 AI 认证正式上线啦

【AIF-C01认证】亚马逊云科技生成式 AI 认证正式上线啦

文章目录 一、AIF-C01简介二、考试概览三、考试知识点3.1 AI 和 ML 基础知识3.2 生成式人工智能基础3.3 基础模型的应用3.4 负责任 AI 准则3.5 AI 解决方案的安全性、合规性和监管 四、备考课程4.1 「备考训练营」 在线直播课4.2 「SkillBuilder」学习课程 五、常见问题六、参考…
阅读更多...
前端开发攻略---使用ocr识别图片进行文字提取功能

前端开发攻略---使用ocr识别图片进行文字提取功能

1、引入资源 通过链接引用 <script src"https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script> npm或其他方式下载 npm i tesseract 2、示例 <!DOCTYPE html> <html lang"en"><head><meta…
阅读更多...
从纸质到云端：3C产品说明书的电子化进程与影响

从纸质到云端：3C产品说明书的电子化进程与影响

在科技日新月异的今天&#xff0c;3C产品&#xff08;计算机类、通信类和消费类电子产品&#xff09;作为现代生活不可或缺的一部分&#xff0c;其说明书的演变也见证了技术进步的足迹。从最初的纸质文档到如今的电子说明书&#xff0c;这一转变不仅仅是物理形态的转换&#xf…
阅读更多...
UE5 圆周运动、贝塞尔曲线运动、贝塞尔曲线点

UE5 圆周运动、贝塞尔曲线运动、贝塞尔曲线点

圆周运动 贝塞尔曲线路径运动 蓝图函数库创建贝塞尔曲线点 // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "Kismet/BlueprintFunctionLibrary.h" #include "MyBlu…
阅读更多...
文件IO知识梳理及练习

文件IO知识梳理及练习

1> 使用fread和fwrite完成两个文件的拷贝&#xff0c;要求源文件和目标文件由外界输入 #include <myhead.h> typedef struct sockaddr_in addr_in_t; typedef struct sockaddr addr_t; typedef struct sockaddr_un addr_un_t; int main(int argc, const char *argv[])…
阅读更多...
使用OpenCV实现基于FisherFaces的人脸识别

使用OpenCV实现基于FisherFaces的人脸识别

引言 随着人工智能技术的发展&#xff0c;人脸识别已经成为日常生活中不可或缺的一部分。在众多的人脸识别算法中&#xff0c;FisherFaces 方法因其简单易用且具有良好的识别效果而备受青睐。本文将详细介绍如何使用Python和OpenCV库实现基于FisherFaces的人脸识别系统&#x…
阅读更多...
Flink On kubernetes

Flink On kubernetes

Apache Flink 是一个分布式流处理引擎&#xff0c;它提供了丰富且易用的API来处理有状态的流处理应用&#xff0c;并且在支持容错的前提下&#xff0c;高效、大规模的运行此类应用。通过支持事件时间&#xff08;event-time&#xff09;、计算状态&#xff08;state&#xff09…
阅读更多...
知道ip地址怎么看网络地址

知道ip地址怎么看网络地址

在计算机网络的世界里&#xff0c;IP地址是设备之间通信的基础。然而&#xff0c;仅仅知道一个设备的IP地址并不足以完全理解它在网络中的位置和作用。网络地址&#xff0c;作为IP地址的一个重要组成部分&#xff0c;为我们提供了关于设备所属网络的更多信息。本文将深入探讨如…
阅读更多...
从零开始搭建：基于在线教育系统源码的线上网校开发详解

从零开始搭建：基于在线教育系统源码的线上网校开发详解

本文将通过详细的技术分析&#xff0c;帮助你了解如何基于在线教育系统源码搭建线上网校&#xff0c;从而帮助你更好地构建稳定且高效的线上教育平台。 一、为什么选择在线教育系统源码&#xff1f; 在搭建线上网校时&#xff0c;使用成熟的在线教育系统源码是一个快速且高效…
阅读更多...
【LwIP源码学习3】TCP协议栈分析——数据接收流程

【LwIP源码学习3】TCP协议栈分析——数据接收流程

前言 本文介绍代码在lwip的tcp_in.c文件中&#xff0c;主要介绍TCP协议栈中数据的接收流程。 正文 1、一个正常的TCP数据&#xff0c;首先会传入到 tcp_input(struct pbuf *p, struct netif *inp)函数&#xff0c;其中指针p指向传入的数据流。 2、从数据流中获取TCP头部 …
阅读更多...
mysql的一点理解

mysql的一点理解

1、mysql B树 B树非叶子结点中的key存储的是页的用户记录中最小/最大的主键值&#xff0c;之前不知道非叶子结点中的key存的是最小/最大&#xff0c;以为随便存的一个。 2、mysql范围查询 如果对多个列都进行范围查询&#xff0c;只有对索引最左边的那个列索引才生效。 比如…
阅读更多...
字符串和字符数组

字符串和字符数组

1.字符串和\0 c语言中有字符类型&#xff0c;但没有字符串类型&#xff0c;c语言中字符串就是由双引号引起来的一串字符&#xff0c;比如&#xff1a;“abcdef” 字符串常量在末尾隐藏了一个’\0’的转义字符&#xff0c;\0’是作为字符串的结束标志存在的 库函数printf与str…
阅读更多...
隔离器“芯”实力，华普微荣获“2024年度硬核信号链芯片奖”

隔离器“芯”实力，华普微荣获“2024年度硬核信号链芯片奖”

10月14日&#xff0c;由深圳市芯师爷科技有限公司和慕尼黑华南电子展携手主办&#xff0c;深圳市半导体行业协会支持的“第六届硬核芯生态大会暨颁奖典礼”&#xff0c;已于深圳国际会展中心&#xff08;宝安新馆&#xff09;成功举办。值此盛会之际&#xff0c;华普微受邀参会…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023