【Vue2手录13】路由Vue Router

一、Vue Router 基础概念与核心原理

1.1 路由本质与核心要素

  • 本质定义：路由是URL路径与页面组件的对应关系，通过路径变化控制视图切换，实现单页应用（SPA）的无刷新页面切换。
  • 核心三要素：
    1. router-link：声明式导航组件，替代原生<a>标签（避免页面刷新），通过to属性指定目标路径。
    2. router-view：路由视图出口，匹配路径的组件会渲染到该标签位置（路由有几级嵌套，就需要几个router-view）。
    3. 路由实例：通过new VueRouter()创建，配置路径与组件的映射规则（routes数组）。

1.2 路由模式对比（hash vs history）

路由模式决定URL的表现形式和底层实现逻辑，是面试高频考点，需重点区分：

对比维度hash模式（默认）history模式（推荐）
URL表现带#号（如http://localhost:8080/#/home）无#号（如http://localhost:8080/home）
实现原理基于window.onhashchange事件监听#后路径变化基于HTML5 History API（pushState/popState）
后端依赖纯前端实现，#后路径不发送到后端，无需配置路径会完整发送到后端，刷新可能触发404
404问题解决无此问题需后端配置（如Nginx）：未匹配路径返回index.html
适用场景简单Demo、无需美观URL的项目生产环境、对URL美观度和SEO有要求的项目
后端Nginx配置示例（解决history模式404）
location / {root   /usr/share/nginx/html; # 项目打包后的目录index  index.html index.htm;try_files $uri $uri/ /index.html; # 核心配置：未匹配路径返回index.html
}

1.3 路由注册机制

  • Vue.use(VueRouter)的必要性：
    Vue Router是Vue生态专属插件，需通过Vue.use()显式注册，否则路由功能无法生效（类比“插座与插头”，必须配套使用）。
    注意：通用工具库（如Axios）无需此步骤，仅Vue专属插件（Vue Router、Vuex）需注册。
  • 注册原理：Vue.use()会调用插件内部的install方法，将路由实例注入Vue全局，使所有组件可通过this.$router访问路由实例。

二、路由核心配置流程（Vue 2 + Vue Router 3.x）

路由配置需遵循“模块化”原则，避免与main.js混杂，标准流程如下：

2.1 标准配置步骤（五步走）

步骤1：创建路由目录与文件

在src下新建router文件夹，创建index.js（路由配置主文件，Webpack默认优先查找index.js）。

步骤2：引入依赖并注册插件
// src/router/index.js
import Vue from 'vue' // 引入Vue核心
import VueRouter from 'vue-router' // 引入Vue Router
Vue.use(VueRouter) // 注册路由插件（必须步骤）
步骤3：定义路由规则（routes数组）

routes是路由配置的核心，每个路由对象包含path（路径）、component（对应组件）等属性：

// 1. 引入组件（支持懒加载，优化首屏性能）
const Home = () => import('@/views/Home.vue') // 懒加载写法
const About = () => import('@/views/About.vue')
const User = () => import('@/views/User.vue')// 2. 定义路由规则
const routes = [{path: '/', // 默认路径redirect: '/home' // 重定向到首页（避免空白页面）},{path: '/home',name: 'Home', // 路由名称（可选，用于命名路由跳转）component: Home},{path: '/about',name: 'About',component: About},{path: '/user/:id', // 动态路由：:id为动态参数name: 'User',component: User}
]
步骤4：创建路由实例并导出
const router = new VueRouter({mode: 'history', // 路由模式：hash/history（默认hash）routes // 注入路由规则（ES6简写，等同于routes: routes）
})export default router // 导出路由实例，供main.js引入
步骤5：注入根实例并添加router-view
  1. 在main.js中引入路由实例：
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由实例（自动找router/index.js）new Vue({router, // 注入路由实例（使所有组件可访问$router/$route）render: h => h(App)
}).$mount('#app')
  1. 在App.vue中添加router-view（指定组件渲染位置）：
<!-- src/App.vue -->
<template><div id="app"><!-- 1. 路由导航 --><nav><router-link to="/home">首页</router-link><router-link to="/about">关于我们</router-link></nav><!-- 2. 路由视图出口：匹配的组件会渲染到这里 --><router-view></router-view></div>
</template>

2.2 routes数组核心属性详解

属性作用与说明示例
path路由路径（必须以/开头，子路由可省略/自动拼接父路径）/home（一级路由）、child（子路由）
component路径对应的组件（支持懒加载() => import()和直接引入）Home、() => import('@/views/Home.vue')
name路由名称（唯一，用于命名路由跳转，解耦路径变化）name: 'Home'
children子路由配置数组（实现嵌套路由，每个子路由结构与父路由一致）children: [{ path: 'child', component: Child }]
redirect重定向（访问当前路径时自动跳转到目标路径，支持字符串/name对象）redirect: '/home'、redirect: { name: 'Home' }
alias路由别名（给路由多个访问路径，地址栏显示别名，组件不变）alias: '/index'（访问/index等同于/home）

三、路由进阶特性（实战必备）

3.1 嵌套路由（多级路由）

嵌套路由用于实现“父组件包含子组件”的层级结构（如后台管理系统的“侧边栏+内容区”），核心是children配置和多级router-view。

1. 配置示例（后台管理系统）
// src/router/index.js
const Layout = () => import('@/views/Layout.vue') // 父布局组件
const Dashboard = () => import('@/views/Dashboard.vue') // 子组件1
const Settings = () => import('@/views/Settings.vue') // 子组件2const routes = [{path: '/admin',name: 'Layout',component: Layout,// 子路由配置：path不加/，自动拼接父路径（/admin/dashboard）children: [{path: '', // 子路由默认路径（访问/admin时渲染Dashboard）component: Dashboard},{path: 'settings', // 子路由路径：完整路径为/admin/settingsname: 'Settings',component: Settings}]}
]
2. 父组件（Layout.vue）添加子路由视图
<!-- src/views/Layout.vue -->
<template><div class="layout"><!-- 侧边栏（固定父组件内容） --><aside><router-link :to="{ name: 'Dashboard' }">数据看板</router-link><router-link :to="{ name: 'Settings' }">系统设置</router-link></aside><!-- 子路由视图出口：子组件（Dashboard/Settings）渲染到这里 --><main><router-view></router-view></main></div>
</template>
关键注意点
  • 子路由path不加/：自动拼接父路由路径（如settings → /admin/settings）；加/则为绝对路径（需写完整路径，如/admin/settings）。
  • 每级路由需对应router-view：父路由组件放父级router-view，子路由组件放子级router-view（路由有几级，就需要几个router-view）。

3.2 动态路由（路径参数）

动态路由用于“多个路径对应同一个组件”的场景（如用户详情页/user/1、/user/2均渲染User组件），核心是通过:声明动态参数。

1. 配置示例（用户详情页）
// src/router/index.js
const User = () => import('@/views/User.vue')const routes = [{// :id为动态参数，可自定义名称（如:userId）path: '/user/:id', name: 'User',component: User,// 可选：通过props将params参数注入组件（避免在组件中写$route.params）props: true }
]
2. 组件中获取动态参数
<!-- src/views/User.vue -->
<template><div><!-- 方式1：直接通过$route.params获取 --><h1>用户ID：{{ $route.params.id }}</h1><!-- 方式2：通过props接收（需路由配置props: true） --><h1>用户ID（props）：{{ id }}</h1></div>
</template>
<script>
export default {name: 'User',props: ['id'], // 接收路由注入的params参数// 监听参数变化（组件复用场景，如从/user/1跳转到/user/2）watch: {$route(to, from) {console.log('用户ID变化：', to.params.id)}}
}
</script>
3. 动态路由跳转方式
跳转方式代码示例说明
路径字符串this.$router.push('/user/123')简单直接，适合固定路径
path对象this.$router.push({ path: '/user/123' })路径需完整拼接，不支持单独传params
name+paramsthis.$router.push({ name: 'User', params: { id: 123 } })推荐：解耦路径，params自动拼接路径

3.3 查询参数（query）

查询参数用于“非路径必需的临时数据传递”（如列表筛选、分页），格式为URL?key=value&key2=value2，无需预配置路由。

1. 跳转与参数获取示例
<!-- 跳转组件（如Home.vue） -->
<template><button @click="goProductList">查看商品列表</button>
</template>
<script>
export default {methods: {goProductList() {// 方式1：path对象+querythis.$router.push({path: '/product',query: { category: 'phone', page: 1 } // 查询参数})// 方式2：name对象+query（推荐，解耦路径）// this.$router.push({//   name: 'Product',//   query: { category: 'phone', page: 1 }// })}}
}
</script>
<!-- 目标组件（Product.vue）获取参数 -->
<template><div><h1>筛选分类：{{ $route.query.category }}</h1><h1>当前页码：{{ $route.query.page }}</h1></div>
</template>
2. 动态路由 vs 查询参数（核心区别）
对比维度动态路由（params）查询参数（query）
路径表现是路径的一部分（/user/123）附加在URL后（/product?category=phone）
路由配置需预定义动态参数（/user/:id）无需预配置
参数必要性必选（不传递参数会导致路由匹配失败）可选（不传递也能匹配路由）
数据用途标识资源（如用户ID、商品ID）筛选、排序、分页等临时数据
参数获取$route.params$route.query

3.4 通配符与404页面

通配符*用于匹配所有未明确定义的路由，常用来实现404页面（提升用户体验，替代空白页面）。

1. 配置示例
// src/router/index.js
const NotFound = () => import('@/views/NotFound.vue') // 404组件const routes = [// 其他路由配置...// 通配符路由：必须放在最后（确保优先匹配明确路由）{path: '*',component: NotFound}
]
2. 404组件示例（NotFound.vue）
<template><div class="not-found"><h1>404 - 页面走丢了！</h1><p>您访问的路径：{{ $route.params.pathMatch }}</p> <!-- 获取无效路径 --><router-link to="/home">返回首页</router-link></div>
</template>
<style scoped>
.not-found {text-align: center;margin-top: 50px;color: #666;
}
</style>
关键注意点
  • 通配符位置：必须放在路由配置最后（旧版Vue Router 3.x严格要求，新版虽优化，但保持习惯可兼容）。
  • pathMatch参数：通配符匹配时，$route.params.pathMatch会自动包含用户访问的无效路径，可用于页面提示。

3.5 重定向与别名

1. 重定向（redirect）

重定向是“访问A路径时自动跳转到B路径”，地址栏会显示B路径的URL，适合旧路径兼容、默认页面跳转。

重定向方式代码示例适用场景
字符串路径redirect: '/home'简单固定跳转
name对象redirect: { name: 'Home' }依赖路由名称，路径变化无需修改
动态函数redirect: to => '/home'复杂逻辑（如根据参数动态跳转）
2. 别名（alias）

别名是“给路由多个访问路径”，访问别名路径时，组件不变且地址栏显示别名，适合隐藏真实路由结构、兼容旧URL。

const routes = [{path: '/home',name: 'Home',component: Home,alias: '/index' // 访问/index等同于访问/home，地址栏显示/index}
]
重定向 vs 别名（核心区别）
  • 重定向：URL会变化（A→B），本质是“跳转”；
  • 别名：URL不变（访问别名路径），本质是“同一资源的多个入口”。

四、补充重点知识（性能与实战技巧）

4.1 路由懒加载（性能优化）

路由懒加载通过“按需加载组件”减少首屏加载时间，核心是component: () => import('组件路径')语法（Webpack动态导入）。

1. 配置示例
// 懒加载写法（推荐）
const Home = () => import('@/views/Home.vue')
// 对比：普通导入（首屏会加载所有组件，性能差）
// import Home from '@/views/Home.vue'const routes = [{ path: '/home', component: Home }
]
2. 优势
  • 首屏加载体积减小：仅加载当前路径的组件，而非所有组件；
  • 提升首屏渲染速度：避免因组件过多导致的白屏时间过长。

4.2 路径别名@的使用

@是Webpack默认配置的路径别名，代表src目录，可避免复杂的相对路径（如../../views/Home.vue）。

1. 使用示例
// 普通相对路径（繁琐，易出错）
import Home from '../../views/Home.vue'
// @别名路径（简洁，项目结构变化无需修改）
import Home from '@/views/Home.vue'
2. 原理

Webpack配置中通过resolve.alias定义：

// webpack.config.js（Vue CLI项目无需手动配置）
module.exports = {resolve: {alias: {'@': path.resolve(__dirname, 'src') // @指向src目录}}
}

4.3 路由守卫基础（权限控制）

路由守卫用于“路由跳转前/后拦截”，常实现登录验证、权限判断等功能，核心介绍全局前置守卫beforeEach。

登录验证示例
// src/router/index.js
router.beforeEach((to, from, next) => {// 1. 不需要登录的页面（如首页、登录页）直接放行const whiteList = ['/home', '/login']if (whiteList.includes(to.path)) {return next()}// 2. 需要登录：判断是否有tokenconst token = localStorage.getItem('token')if (token) {next() // 有token，放行} else {next('/login') // 无token，跳转到登录页}
})
  • to：即将进入的目标路由对象；
  • from：当前离开的路由对象；
  • next：必须调用的函数，控制是否放行（next()放行，next('/login')跳转到指定路径）。

五、知识小结

知识点核心内容考试重点/易混淆点难度系数
路由模式hash（带#，纯前端）、history（无#，需后端配置）history模式404问题与Nginx配置⭐⭐⭐
嵌套路由children配置子路由，多级router-view对应层级子路由路径加不加/的区别；router-view数量与路由层级匹配⭐⭐⭐
动态路由:param声明参数，$route.params获取，组件复用需监听$route动态路由跳转的三种方式；props: true注入参数的用法⭐⭐⭐⭐
查询参数URL?key=value，$route.query获取，无需预配置路由与动态路由的区别（必选vs可选、路径部分vs附加部分）⭐⭐⭐
通配符与404*匹配所有路径，必须放路由最后，pathMatch获取无效路径通配符位置的影响；404页面的用户体验设计⭐⭐
重定向与别名重定向（URL变化）、别名（URL不变）两者的本质区别；别名的实际应用场景⭐⭐
路由懒加载component: () => import()按需加载，优化首屏性能与普通导入的区别；懒加载对打包体积的影响⭐⭐⭐
路由守卫beforeEach全局拦截，实现登录验证、权限控制next()函数的必选性；白名单的设计思路⭐⭐⭐⭐

六、实战小练习

6.1 题目

  1. 动态路由实战：实现“商品详情页”，要求：
    • 配置动态路由/product/:productId，对应ProductDetail组件；
    • 在Home组件中通过router-link和编程式导航两种方式跳转到详情页（传递productId=1001）；
    • 在ProductDetail组件中显示商品ID，并监听ID变化（从1001跳转到1002时打印新ID）。
  2. 查询参数实战：实现“商品列表筛选”，要求：
    • 配置路由/product-list，对应ProductList组件；
    • 在Home组件中跳转时传递查询参数category=phone&sort=price；
    • 在ProductList组件中显示筛选分类和排序方式，并支持通过按钮切换排序（sort=price→sort=sales）。
  3. 404与重定向实战：
    • 创建NotFound组件，配置通配符路由实现404页面；
    • 配置重定向：访问/时跳转到/home，访问/old-home时跳转到/home（通过name对象）。
  4. 嵌套路由实战：实现“个人中心”嵌套结构，要求：
    • 父路由/profile对应ProfileLayout组件（包含“基本信息”“我的订单”导航）；
    • 子路由/profile/basic对应ProfileBasic组件，/profile/orders对应ProfileOrders组件；
    • 访问/profile时默认显示ProfileBasic组件。

6.2 参考答案

1. 动态路由实战
（1）路由配置（src/router/index.js）
const Home = () => import('@/views/Home.vue')
const ProductDetail = () => import('@/views/ProductDetail.vue')const routes = [{ path: '/home', name: 'Home', component: Home },{ path: '/product/:productId', name: 'ProductDetail', component: ProductDetail,props: true // 注入productId到props}
]
（2）跳转组件（Home.vue）
<template><div><h1>首页</h1><!-- 方式1：router-link跳转 --><router-link :to="{ name: 'ProductDetail', params: { productId: 1001 } }">查看商品1001（router-link）</router-link><!-- 方式2：编程式导航 --><button @click="goToProduct(1001)">查看商品1001（编程式）</button></div>
</template>
<script>
export default {methods: {goToProduct(id) {this.$router.push({ name: 'ProductDetail', params: { productId: id } })}}
}
</script>
（3）详情组件（ProductDetail.vue）
<template><div><h1>商品详情页</h1><p>商品ID：{{ productId }}</p><button @click="goToNextProduct">切换到商品1002</button></div>
</template>
<script>
export default {name: 'ProductDetail',props: ['productId'], // 接收路由注入的参数methods: {goToNextProduct() {this.$router.push({ name: 'ProductDetail', params: { productId: 1002 } })}},// 监听参数变化watch: {productId(newId, oldId) {console.log(`商品ID从${oldId}变为${newId}`)}}
}
</script>
2. 查询参数实战
（1）路由配置（src/router/index.js）
const ProductList = () => import('@/views/ProductList.vue')const routes = [{ path: '/product-list', name: 'ProductList', component: ProductList }
]
（2）跳转组件（Home.vue）
<template><button @click="goToProductList">查看手机商品列表</button>
</template>
<script>
export default {methods: {goToProductList() {this.$router.push({name: 'ProductList',query: { category: 'phone', sort: 'price' }})}}
}
</script>
（3）列表组件（ProductList.vue）
<template><div><h1>商品列表</h1><p>筛选分类：{{ $route.query.category }}</p><p>排序方式：{{ $route.query.sort }}</p><button @click="changeSort">切换排序为“销量”</button></div>
</template>
<script>
export default {methods: {changeSort() {// 保留当前category参数，仅修改sortthis.$router.push({name: 'ProductList',query: { ...this.$route.query, sort: 'sales' }})}}
}
</script>
3. 404与重定向实战
（1）404组件（NotFound.vue）
<template><div style="text-align: center; margin-top: 50px;"><h1 style="color: #f44336;">404 - 页面不存在</h1><p>您访问的路径：{{ $route.params.pathMatch }}</p><router-link to="/home" style="color: #2196f3;">返回首页</router-link></div>
</template>
（2）路由配置（src/router/index.js）
const NotFound = () => import('@/views/NotFound.vue')const routes = [// 重定向：/ → /home，/old-home → /home{ path: '/', redirect: '/home' },{ path: '/old-home', redirect: { name: 'Home' } },{ path: '/home', name: 'Home', component: Home },// 通配符路由放最后{ path: '*', component: NotFound }
]
4. 嵌套路由实战
（1）路由配置（src/router/index.js）
const ProfileLayout = () => import('@/views/ProfileLayout.vue')
const ProfileBasic = () => import('@/views/ProfileBasic.vue')
const ProfileOrders = () => import('@/views/ProfileOrders.vue')const routes = [{path: '/profile',name: 'ProfileLayout',component: ProfileLayout,children: [{ path: '', component: ProfileBasic }, // 默认显示基本信息{ path: 'basic', name: 'ProfileBasic', component: ProfileBasic },{ path: 'orders', name: 'ProfileOrders', component: ProfileOrders }]}
]
（2）父布局组件（ProfileLayout.vue）
<template><div class="profile-layout"><!-- 侧边导航 --><aside><router-link :to="{ name: 'ProfileBasic' }">基本信息</router-link><router-link :to="{ name: 'ProfileOrders' }">我的订单</router-link></aside><!-- 子路由视图出口 --><main><router-view></router-view></main></div>
</template>
<style scoped>
.profile-layout {display: flex;
}
aside {width: 200px;border-right: 1px solid #eee;padding: 20px;
}
aside router-link {display: block;margin: 10px 0;text-decoration: none;
}
main {flex: 1;padding: 20px;
}
</style>
（3）子组件（ProfileBasic.vue示例）
<template><div><h2>基本信息</h2><p>用户名：张三</p><p>手机号：138****1234</p></div>
</template>

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

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

相关文章

【Git】零基础入门：配置与初始操作实战指南

【Git】零基础入门：配置与初始操作实战指南

目录 1.前言 插播一条消息~ 2.正文 2.1概念 2.2安装与配置 2.3基础操作 2.3.1创建本地仓库 2.3.2配置Git 2.3.3认识工作区&#xff0c;暂存区&#xff0c;版本库 2.3.4版本回退 2.3.5撤销修改 2.3.6删除文件 3.小结 1.前言 在 Java 开发场景中&#xff0c;团队协…
阅读更多...
CAD多面体密堆积_圆柱体试件3D插件

CAD多面体密堆积_圆柱体试件3D插件

插件介绍 CAD多面体密堆积_圆柱体试件3D插件可在AutoCAD内基于重力堆积算法在圆柱体容器内进行多面体的密堆积三维建模。插件采取堆积可视化交互界面&#xff0c;可观察多面体颗粒的堆积动态&#xff0c;并可采用鼠标进行多面体位置的局部微调。插件可设置重力堆积模拟时长参数…
阅读更多...
机器学习-模型调参、超参数优化

机器学习-模型调参、超参数优化

模型调参 手工超参数微调 以一个好的baseline开始&#xff0c;即&#xff1a;在一些高质量的工具包中的默认设置&#xff0c;论文中的值调一个值&#xff0c;重新训练这个模型来观察变化重复很多次获得对以下的insight&#xff1a; 1、哪个超参数重要 2、模型对超参数的敏感度是…
阅读更多...
STM32 单片机开发 - I2C 总线

STM32 单片机开发 - I2C 总线

一、IIC(I2C) 线的作用UART总线 PC端(CPU) <----------> 开发板(STM32U575RIT6)IIC总线 主控芯片(STM32U575RIT6) <---------> 传感器驱动芯片(SHT20/SI7006空气温湿度传感器)二、I2C 总线的概念图 1 I2C 总线示意图图 2 多主机多从机模式示意图I2C 总…
阅读更多...
Redis 数据结构源码剖析（SDS、Dict、Skiplist、Quicklist、Ziplist）

Redis 数据结构源码剖析（SDS、Dict、Skiplist、Quicklist、Ziplist）

Redis 数据结构源码剖析&#xff08;SDS、Dict、Skiplist、Quicklist、Ziplist&#xff09;1. 前言 Redis 的高性能与丰富数据结构密切相关。 核心数据结构包括&#xff1a; SDS&#xff08;Simple Dynamic String&#xff09;&#xff1a;字符串底层实现。Dict&#xff08;哈希…
阅读更多...
无人机图传系统的功能解析和技术实现原理

无人机图传系统的功能解析和技术实现原理

无人机图传系统要将机载摄像头捕捉到的画面以尽可能低的时延、尽可能高的清晰度、稳定可靠地送达地面操作员或指挥中心&#xff0c;进而驱动现场行动。为此&#xff0c;核心功能可以从四个维度来解构&#xff1a;实时性、画质与稳定性、覆盖与冗余、以及安全协同。实时性要求在…
阅读更多...
微服务网关的bug

微服务网关的bug

从你提供的Eureka控制台信息来看&#xff0c;SPRINGCLOUD-PRODUCT已成功注册到Eureka&#xff0c;且状态为UP&#xff08;实例地址localhost:springcloud-product:8082&#xff09;&#xff0c;排除了“服务未注册”“实例离线”的基础问题。但仍报“负载均衡无可用服务”&…
阅读更多...
LeetCode:2.字母异位词分组

LeetCode:2.字母异位词分组

目录 1.字母异位词分组 1.字母异位词分组 对于这道题来说&#xff0c;关键的地方在于字母异位词他们排序后的字符串完全相等&#xff0c;所以我们可以通过哈希表来建设一个字符串和其排序相同的字符串数组的映射关系 class Solution { public:vector<vector<string>…
阅读更多...
SwiftData3 一剑封喉：WWDC25 的“数据剑谱”精讲，让 Core Data 老侠原地退休

SwiftData3 一剑封喉：WWDC25 的“数据剑谱”精讲，让 Core Data 老侠原地退休

文章目录每日一句正能量一、开场白&#xff1a;老兵的隐痛二、SwiftData3 新剑谱总览三、亮剑&#xff1a;30 行代码搭一个「跨端秒级同步」的收藏夹1. 铸剑&#xff1a;声明模型2. 开锋&#xff1a;初始化容器3. 出招&#xff1a;SwiftUI7 直接绑四、进阶剑气&#xff1a;Char…
阅读更多...
微服务-nacos服务中心

微服务-nacos服务中心

单体与微服务 单体架构&#xff1a;项目所有功能都在一个 war 包 /jar 包里&#xff0c;像商城的订单、库存、会员、支付等服务&#xff0c;都打包在一起&#xff0c;部署在 Tomcat 服务器&#xff0c;数据存在 MySQL。 优点&#xff1a;开发简单&#xff0c;易于理解和维护&am…
阅读更多...
嵌入式硬件——IMX6ULL 裸机LED点亮实验

嵌入式硬件——IMX6ULL 裸机LED点亮实验

一. 实验准备 基于正点原子 IMX6ULL-Mini 开发板&#xff0c;实现 LED 周期性闪烁功能&#xff0c;需完成环境搭建与硬件原理确认两大核心准备工作。 1.1 开发环境搭建 需在Windows和Ubuntu中安装工具&#xff0c;确保文件传输、交叉编译、代码编辑功能正常。1.1.1 跨系统文件传…
阅读更多...
深度学习之PyTorch基本使用（一）

深度学习之PyTorch基本使用（一）

一、PyTorch简介与安装1.核心概念PyTorch 是一款 Python 深度学习框架&#xff0c;其核心是张量&#xff08;Tensor&#xff09; —— 元素为同一种数据类型的多维矩阵&#xff0c;以 “类” 的形式封装&#xff0c;内置了张量运算、处理等方法&#xff0c;是深度学习中数据存储…
阅读更多...
SQLAlchemy -＞ Base.metadata.create_all(engine ）详解

SQLAlchemy -＞ Base.metadata.create_all(engine ）详解

目录 一、核心作用 二、是否每次运行项目都会执行&#xff1f; 1. ​​典型场景​​&#xff08;推荐&#xff09; 2. ​​需要避免的情况​​ 三、最佳实践建议 1. ​​生产环境​​ 2. ​​开发/测试环境​​ 四、常见问题解答 Q1: 如果表结构改了&#xff0c;creat…
阅读更多...
C++异步任务处理与消息可靠性保障指南：从基础到实战

C++异步任务处理与消息可靠性保障指南：从基础到实战

在当今多核处理器普及的时代&#xff0c;程序性能和响应能力的提升成为开发者面临的核心课题。无论是高频交易系统的毫秒级响应需求、实时游戏引擎的流畅交互体验&#xff0c;还是网络服务器的高并发处理能力&#xff0c;异步编程都已成为突破性能瓶颈的关键技术[1]。作为高性能…
阅读更多...
LazyForEach性能优化：解决长列表卡顿问题

LazyForEach性能优化：解决长列表卡顿问题

本文将深入解析HarmonyOS中LazyForEach的工作原理、性能优势、实战优化技巧及常见问题解决方案&#xff0c;帮助你构建流畅的长列表体验。 1. LazyForEach 核心优势与原理 LazyForEach 是鸿蒙ArkUI框架中为高性能列表渲染设计的核心组件&#xff0c;其核心设计思想基于动态加载…
阅读更多...
Spring Boot 全栈优化：服务器、数据、缓存、日志的场景应用！

Spring Boot 全栈优化：服务器、数据、缓存、日志的场景应用！

Spring Boot以其“开箱即用”闻名&#xff0c;但默认配置往往在高并发场景下成为瓶颈&#xff1a;Tomcat线程堵塞、数据库连接耗尽、缓存命中率低下、日志洪水般淹没磁盘。想象一个电商微服务&#xff0c;峰值流量下响应迟钝&#xff0c;用户流失——这不是宿命&#xff0c;而是…
阅读更多...
Leetcode sql 50 ~5

Leetcode sql 50 ~5

select product_idfrom Productswhere low_fats Y and recyclable Y;SQL 规定&#xff1a;null 的比较必须用 is null 或 is not null&#xff0c;不能用普通的等号&#xff08;&#xff09;。# Write your MySQL query statement below select name from Customer where ref…
阅读更多...
C#高并发与并行理解处理

C#高并发与并行理解处理

目录 1.什么是IO密集型任务/CPU密集型任务 2.高并发概念和技术实现 2.并行&#xff08;Parallelist&#xff09;概念和技术实现 4.核心区别对比 1.什么是IO密集型任务/CPU密集型任务 1.IO密集型任务&#xff1a; 定义&#xff1a;任务核心逻辑不依赖CPU计算&#xff0c;而是…
阅读更多...
正点原子STM32F407 U盘升级程序（IAP）OTA Bootloader APP USB升级+FATFS+USB Host

正点原子STM32F407 U盘升级程序（IAP）OTA Bootloader APP USB升级+FATFS+USB Host

正点原子STM32F407 U盘升级程序&#xff08;IAP&#xff09;OTA Bootloader APP USB升级FATFSUSB HostChapter0 解决STM32 Bootloader跳转APP失败问题问题背景问题描述问题解决原APP跳转的函数为&#xff1a;修改APP程序main入口处Chapter1 MDK如何生成*.bin格式的文件Chapter2…
阅读更多...
MySQL 8.0 在 Ubuntu 22.04 中如何将启用方式改为mysql_native_password（密码认证）

MySQL 8.0 在 Ubuntu 22.04 中如何将启用方式改为mysql_native_password（密码认证）

MySQL 8.0 在 Ubuntu 22.04 中默认启用了 auth_socket 认证方式（而非密码认证），导致 mysql_secure_installation 跳过了 root 密码设置。这会直接影响后续用 Navicat 连接 MySQL（因为 Navicat 需要密码登录），必须手动调整 root 用户的认证方式并设置密码。 核心问题：au…
阅读更多...
最新文章

Copyright @ 2022~2023