「已注销」
「已注销」

Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署

文章目录

  • 一、参考资料
  • 二、运行环境
  • 三、页面跳转问题
    • 3.1 MPA多页面
    • 3.2 SPA单页面
    • 3.3 MPA比较SPA
    • 3.4 SPA总结
  • 四、vue-router 路由插件
    • 4.1 路由的理解
    • 4.2 路由分类
      • 4.2.1 后端路由
      • 4.2.2 前端路由
    • 4.3 Vue2路由的使用
    • 4.4 Vue2路由使用的注意点
    • 4.5 多级嵌套路由
    • 4.6 vue-router路由传参
      • 4.6.1 query传参
      • 4.6.2 params传参
      • 4.6.3 props配置传参
    • 4.7 命名路由
    • 4.8 replace属性
    • 4.9 编程式路由导航
    • 4.10 缓存路由组件
    • 4.11 激活与失活钩子函数
    • 4.12 路由元信息
    • 4.13 路由导航守卫
    • 4.14 路由器的工作模式
  • 五、Vue2项目打包与部署
    • 5.1 Node.js库解决history模式路由的问题

一、参考资料

视频资料

二、运行环境

  • Windows11
  • Visual Studio Code v2022
  • Node.js v16.5.01
  • Vue/cli v5.0.6
  • Bootstrap 5.1.3

三、页面跳转问题

参考文章：点击查看

3.1 MPA多页面

MPA，即 MultiPage Application，指由多个独立html页面的应用，每个页面需要重复加载js、css等资源，页面切换由HTML文档进行控制，返回结果是HTML文档。

案例：index.html 和 about.html 两个静态页面之间的跳转，效果图如下：

Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署_第1张图片
index.html

DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <title><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-offset-2 col-sm-8">
          <div class="page-header"><h2>Vue2路由案例h2>div>
        div>
      div>
      <div class="row">
        <div class="col-sm-2 col-sm-offset-2">
          <div class="list-group">
            <a class="list-group-item active" href="./index.html">主页a>
            <a class="list-group-item" href="./about.html">关于我们a>
          div>
        div>
        <div class="col-sm-6">
          <div class="panel">
            <div id="panel" class="panel-body">
                  <h1>主页h1>
            div>
          div>
        div>
      div>
    div>
  body>
html>

about.html

DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %>title>
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
  head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div class="container">
      <div class="row">
        <div class="col-sm-offset-2 col-sm-8">
          <div class="page-header"><h2>Vue2路由案例h2>div>
        div>
      div>
      <div class="row">
        <div class="col-sm-2 col-sm-offset-2">
          <div class="list-group">
            <a class="list-group-item" href="./index.html">主页a>
            <a class="list-group-item active" href="./about.html">关于我们a>
          div>
        div>
        <div class="col-sm-6">
          <div class="panel">
            <div id="panel" class="panel-body">
                  <h1>关于我们h1>
            div>
          div>
        div>
      div>
    div>
  body>
html>

特点： URL发生变化、全局页面重新加载。

优点：

  • 首次加载速度快，访问页面时，服务器返回HTML，页面就会显示出来，整个过程只经历一次HTTP请求。
  • SEO效果好，搜索引擎在做网页排名时，会根据网页的内容来评判与排名。搜索引擎可是被HTML内容，多页面的应用则有更高的排名。

缺点：

  • 页面切换速度慢，每次跳转都要发送一个HTTP请求，如果网络卡，那么页面跳转的时候就会发送卡顿，影响用户体验。
  • 容易影响用户体验，如果网络慢，页面加载半天都加载不完，用户体验会很差。

3.2 SPA单页面

SPA，即 Single Page Web Application，是指单页面的Web应用，别名 CSR（Client Side Render），即客户端渲染。它所需的资源，如HTML、CSS和JS等，在一次请求中就加载完成。
浏览器渲染是指所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。

对于SPA来说，页面的切换就是组件或视图之间的切换。
简单地说，SPA应用程序只有单个HTML页面文件，在Vue中可通过vue-router插件来局部切换组件，而不用刷新整个页面，从而实现无刷新切换页面。

SPA原理

参考资料：点击查看

SPA的重要实现之一就是改变路由时，页面不刷新。实现这个功能通常有两种方式，分别是适用 window.history对象 或 location.hash。

window.history 包含了浏览器的历史信息，常用的方法有：

history.back() // 相当于在浏览器点击后退按钮
history.forward() // 相当于在浏览器点击前进按钮
history.go(n) 		// 接收一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forawrd()，go(-1)则相当于back()，go(0)相当于刷新当前页面。

HTML5 对 history对象新增了 pushState() 和 replaceState() 方法，这两个方法可以往历史栈中添加数据，给用户的感觉就是浏览器的URL改变了，但是页面并没有重新刷新，pushState() 是在浏览器记录中添加一个新的记录，replaceState() 则是修改当前的浏览器记录，这是二者的差别，除此之外。使用时参数的字段和含义都一样。

window.history.pushState(state, title, url)

hash 是 location对象的属性，它是指URL的锚，即从#号开始的部分，修改location.hash并监听 window。hashchange事件也能达到同样的效果。

注：vue-router插件中Vue不支持 onHashChange事件，需要vue-router插件里的钩子函数解决。

特点： URL发生变化、整体页面不用重新加载，局部页面发生变化。

优点：

  • 页面切换速度快，由于页面每次切换时，不需要HTML文件的请求，这样节省了很多http发送时延。
  • 用户体验极佳，页面局部切换快，尤其是移动设备，尽管在网络环境查，由于组件是预先加载好的，所以不用发网络请求，使得用户有更好的视觉体验。
  • 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各尽其职，不会混乱。
  • 减轻服务器的压力，服务器只需要出数据，不用管展示的逻辑和页面合成，提高了吞吐量。
  • API共享，同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
  • 完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。

缺点：

  • 首次加载速度慢，首次加载需请求一次HTML，同时还要发送若干次JS请求，相当于MPA会慢一点。
  • SEO效果差，因为搜索引擎只识别HTML的内容，不识别JS，而单页面应用内容都是靠JS代码渲染出来的，搜索引擎不识别这部分内容，固然不会给好的排名，这就导致SPA应用做出来的网页在各大搜索引擎，比如谷歌、百度等上面的排名较低。
  • 较高的前端开发门槛，对技术能力要求较高，需对设计模式有一定的理解，因为面对的不只是简单的页面，而是一个运行在浏览器里面的应用。

3.3 MPA比较SPA

参考：点击查看

单页面应用 SPA 多页面应用 MPA
组成 一个外壳页面和多个页面片段组成 多个完整页面构成
跳转方式 单个页面片段删除或隐藏，加载另一个页面片段并显示。片段之间模拟跳转，不离开外壳页面。 页面之间的跳转是从一个页面到另一个页面
资源公用性（CSS和JS） 公用，只需在外壳页面加载 不共用，每个页面要单独加载
刷新方式 页面局部刷新或更改 整个页面进行刷新
URL模式 xxx.com/#/page1，xxx.com/#/page2 xxx.com/page1.html ，xxx.com/page2.html
用户体验感 页面切换快，用户体验好（包括移动设备） 页面切换加载慢，用户体验差，尤其是在移动设备
转场动画 易实现 无法实现
页面之间的数据传递 容易（Vuex或Vue中的父子组件通信 困难，依赖URL传参，或Cookie、localStorage和IndexDB等
搜索引擎优化（SEO） 困难，可采取服务器端渲染（SSR）优化 容易实现
适用范围 高体验需求、追求界面流畅度的应用 适用于追求高度支持搜索引擎的应用
开发成本 较高，需借助专业的框架，如React、Vue等来降低开发难度 较低，但页面重复的代码多。
维护成本 相对较低 相对较高

3.4 SPA总结

在Vue开发中，使用的就是SPA单页面开发的设计模式。

SPA的特点再次总结如下：

  • SPA，Single Page Web Application，指单页Web应用。
  • 整个应用只有一个完整的页面。
  • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
  • 部分数据需要通过 ajax请求获取。

四、vue-router 路由插件

4.1 路由的理解

路由的特点：

  1. 一个路由就是一组映射关系（key - value）
  2. key 为路径，value 可能是 function 或者 component 组件

4.2 路由分类

4.2.1 后端路由

value是 function 函数，用于处理客户端提交的请求

工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

4.2.2 前端路由

value是component，用于展示页面内容

工作过程：当浏览器的路径改变时，对应的组件就会显示。

4.3 Vue2路由的使用

vue-router

包含功能：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式
  • 自定义的滚动条行为

Vue2版本目前可以使用的最新路由插件是 vue-router@3，而Vue3则可以使用最新的vue-route@4

第一步，在Vue脚手架项目中安装vue-router@3插件

npm i vue-router@3

第二步，将路由组件放到单独的文件夹，比如pages文件夹

在这里插入图片描述
About.vue

<template>
  <div>
    <h1

你可能感兴趣的:(学习笔记,vue.js,学习,bootstrap)

  • 鸿蒙应用开发（HarmonyOS）自定义装饰器场景 你我皆是牛马星人 鸿蒙开发OpenHarmonyHarmonyOSharmonyos华为鸿蒙androidui前端鸿蒙系统
    鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）HarmonyOSNEXT应用开发案例实践总结合（持续更新......）HarmonyOSNEXT应用开发性能优化实践总结（持续更新......）介绍本示例介绍通过自定义装饰器在自定义组件中自动添加inspector(布局
  • IDEA中的部分快捷键(后续会学习补充) 铅钇大王 intellij-idea学习java
    Alt+Ctrl+L:格式化代码,将代码变成良好格式;Alt+Enter:快速修复;代码出错时可以生成一些正确答案参考psvm:快速生成主方法;publicstaticvoidmain(String[]args){}sout:生成输出语句;System.out.println("");数组名.+for+i:快速生成数组的遍历for语句;例如:for(inti=0;i<数组.length;i++){
  • 从0到1掌握Flutter（三）Dart语法 微声G 从0到1掌握Flutterflutter
    引言本文接上篇：从0到1掌握Flutter（二）环境搭建与认识工程Dart语言基础是Flutter开发必须掌握的核心知识。本文将讲解变量与常量的声明、Dart内置类型体系及其用法、运算符的应用场景三大模块。对于具备Java/Kotlin背景的学习者，可以通过对比学习法快速定位知识缺口，理解语法的共性。一、变量与常量1.1变量万物皆对象在Dart的类型系统中，变量本质上是指对象的引用，这一设计符合面
  • 新手村：线性回归-实战-波士顿房价预测 嘉羽很烦 机器学习线性回归算法回归
    新手村：线性回归-实战-波士顿房价预测前置条件阅读：新手村：线性回归了解相关概念实验目的1.熟悉机器学习的一般流程2.掌握基础的数据处理方法3.理解常用的回归算法教学例子：预测房价（以波士顿房价数据集为例）本次实验，你将使用真实的波士顿房价数据集建立起一个房价预测模型，并且了解到机器学习中的若干重要概念和评价方法，请通过机器学习建立回归模型，即:Y=θ0+θ1×X1+θ2×X2+θ3×X3+⋯+θ
  • 新手村：混淆矩阵 嘉羽很烦 机器学习机器学习
    新手村：混淆矩阵一、前置条件知识点要求学习资源分类模型基础理解分类任务（如二分类、多分类）和常见分类算法（如逻辑回归、决策树）。《Hands-OnMachineLearningwithScikit-Learn》Python基础熟悉变量、循环、函数、列表、字典等基本语法。《PythonCrashCourse》或在线教程（如Codecademy）scikit-learn基础掌握模型训练、预测、评估的基
  • UE4-UE5虚幻引擎，前置学习一--Console日志输出经常崩溃，有什么好的解决办法 avi9111 每天一点u3due4ue5虚幻日志
    有些差异这么牛逼的引擎，居然有这种入门级别的问题，一触发清理，大概率(80%)会崩溃无论虚幻5还是UE4都有这个问题，挺烦人的实在忍不了了，这次，今天就想问问有什么好的处理方法么？？另外下载第三方日志插件？？？\=================================这不是一个简单的文档分析这需要你知道Engine.dll和Project.dll的区别这需要你知道一点点游戏开发的框架好像
  • 计算机视觉入门 109702008 人工智能#深度学习计算机视觉人工智能
    计算机视觉（ComputerVision）是一门涉及使机器能够从图像或者多维数据中提取信息，解释、理解并对物体或场景进行处理的学科。以下是一个基本的计算机视觉入门学习路线，旨在为刚刚接触这一领域的学习者提供指导。1.基础知识储备数学基础：线性代数、概率论和数理统计、微积分、优化理论。编程语言：掌握至少一门编程语言，Python是目前在计算机视觉领域最流行的语言，其次是C++。2.计算机视觉基础数字
  • Android手机中各类安全相关知识总结 数据知道 2025年爬虫和逆向教程android智能手机安全
    更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录1.Android安全威胁2.Android安全防护措施3.Android安全建议和最佳实践4.Android安全工具推荐5.Android安全常见问题5.1如何检测设备是否感染恶意软件？5.2如何防止应用滥用权限？5.3如何保护设备免受网络攻击？5.4设备丢失后如何保护数据？6.学习资源7.总结Android手机作为全球使用最广泛的移动操作系统
  • 计算机视觉（Computer Vision, CV）的入门到实践的详细学习路线 云梦优选 计算机数据库大数据计算机视觉学习人工智能
    一、基础准备1.数学基础线性代数深入矩阵运算，理解矩阵乘法、转置、逆等基本概念。掌握特征值与特征向量的几何意义，理解其在图像压缩、特征提取中的应用。学习奇异值分解（SVD）及其在降维和数据压缩中的具体应用。概率与统计熟悉贝叶斯定理及其在分类任务中的应用，如朴素贝叶斯分类器。理解常见概率分布（如正态分布、二项分布）及其性质。学习统计推断方法，如假设检验、置信区间估计，以评估模型性能。微积分掌握梯度、
  • 嵌入式学习——3——域套接字UNIX koka_jerry 学习unix服务器
    1、域套接字UNIX1、域套接字是最原始的套接字通信方式，是完成同一主机之间多个进程间通信2、由于不需要跨主机进行通信了，那么就无需使用ip地址和端口号了3、通信本质：依然使用的是内核空间4、域套接字的通信介质为套接字文件bcd-lsp5、域套接字也分为流式域套接字和报式域套接字6、跟网络通信中相关函数的区别#include#includeintsocket(intdomain,inttype,i
  • 【解锁机器学习：探寻数学基石】 游戏乐趣 机器学习人工智能
    机器学习中的数学基础探秘在当今数字化时代，机器学习无疑是最具影响力和发展潜力的技术领域之一。从图像识别到自然语言处理，从智能推荐系统到自动驾驶，机器学习的应用无处不在，深刻地改变着我们的生活和工作方式。然而，在这看似神奇的机器学习背后，数学作为其坚实的理论基础，起着不可或缺的关键作用。毫不夸张地说，数学是打开机器学习大门的钥匙，是理解和掌握机器学习算法与模型的核心所在。想象一下，机器学习就像是一座
  • 机器学习——正则化、欠拟合、过拟合、学习曲线 代码的建筑师 学习记录机器学习机器学习学习曲线过拟合欠拟合正则化
    过拟合（overfitting）:模型只能拟合训练数据的状态。即过度训练。避免过拟合的几种方法：①增加全部训练数据的数量（最为有效的方式）②使用简单的模型（简单的模型学不够，复杂的模型学的太多），这里的简单指的是不要过于复杂③正则化（对目标函数后加上正则化项）：使得这个“目标函数+正则化项”的值最小，即为正则化，用防止参数变得过大（参数值变小，意味着对目标函数的影响变小），λ是正则化参数，代表正则
  • 《Operating System Concepts》阅读笔记：p286-p308 操作系统
    《OperatingSystemConcepts》学习第28天，p286-p308总结，总计23页。一、技术总结1.reentrantlock(可重入锁)(1)为什么称为reentrantlock？AthreadacquiresaReentrantLocklockbyinvokingitslock()method.Ifthelockisavailable—orifthethreadinvoking
  • UDS学习计划 正当少年 UDS学习
    以下是一份详细的UDS（UnifiedDiagnosticServices，统一诊断服务）学习计划，涵盖从基础到实战的系统化学习路径，适合初学者和有一定基础的开发者。计划周期为6-8周，每周投入10-15小时。第一阶段：基础认知（1周）学习目标理解UDS的基本概念和应用场景掌握UDS协议的核心组成部分熟悉相关工具的使用学习内容UDS概述UDS的定义与作用（ISO14229标准）应用场景：ECU诊断
  • Java开发第一坑：记一次MySQL ON DUPLICATE KEY UPDATE影响行数异常排查：从现象到解决的全过程 猿享天开 javamysql开发语言
    记一次MySQLONDUPLICATEKEYUPDATE影响行数异常排查：从现象到解决的全过程一、问题现象：神秘的计数器异常由于学习JAVA开发时间不长，也没有进行系统性学习，由于项目需要就草草的开始了程序开发，在开发医疗影像归档系统时，归档患者影像时需要自动根据数据库操作后的返回值判断是新增插入数据，还是更新数据，但由于返回的影响行数不准确，比如插入1条新数据、更新一条数据或未变化，返回的影响行
  • 知识图谱与知识表示：人工智能的基石 醉心编码 c/c++人工智能知识图谱
    知识图谱与知识表示：人工智能的基石一、知识图谱：连接数据的桥梁1.1知识图谱的构成1.2知识图谱的应用二、知识表示：AI的推理基础2.1知识表示的定义2.2知识表示的形式三、从符号表示到向量表示3.1符号表示与向量表示3.2向量表示的优势四、智能的精华：推理与学习4.1推理的重要性4.2学习的局限性五、结论在人工智能领域，知识图谱和知识表示是两个核心概念，它们构成了AI理解、推理和学习的基础。本文
  • 从过拟合到强化学习：机器学习核心知识全解析 吴师兄大模型 0基础实现机器学习入门到精通机器学习人工智能过拟合强化学习pythonLLMscikit-learn
    Langchain系列文章目录01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南02-玩转LangChainMemory模块：四种记忆类型详解及应用场景全覆盖03-全面掌握LangChain：从核心链条构建到动态任务分配的实战指南04-玩转LangChain：从文档加载到高效问答系统构建的全程实战05-玩转LangChain：深度评估问答系统的三种高效方法（示例生成、手
  • 计算机网络：（一）详细讲解互联网概述与组成 （附带图谱更好对比理解） 珹洺 计算机网络计算机网络php开发语言服务器后端数据库网络
    计算机网络（一）详细讲解互联网概述与组成前言一、计算机网络在信息时代中的作用二、互联网概述1.网络中的网络2.互联网基础的三个阶段3.什么是标准化工作三、互联网的组成1.边缘部分2.核心部分总结（核心概念速记）：**知识图谱****重点提炼**前言在当今数字化时代，互联网已经成为人们生活、工作和学习中不可或缺的一部分。计算机网络作为互联网的基础支撑，其重要性不言而喻。这篇博客将开启我们探索计算机网
  • Python基础学习（四）：字典 代码死 python学习windows
    1.字典简介字典是一种可变的容器，用于存储键值对。字典中的数据是无序的，键必须是唯一的且不可变。特点：使用大括号{}定义，键值对用冒号:分隔。数据是无序的。键必须是不可变类型（如字符串、数字、元组），值可以是任意类型。2.字典创建2.1使用字面值创建#创建空字典d1={}#创建包含键值对的字典d2={"name":"Alice","age":25,"city":"NewYork"}#键可以是数字d
  • Python基础学习（七）：运算符 代码死 python学习开发语言
    Python提供了丰富的运算符，用于执行各种操作，包括算术运算、比较运算、逻辑运算、位运算等。本文将详细介绍Python中的各类运算符及其用法，并通过示例帮助你更好地理解和掌握。1.算术运算符算术运算符用于执行基本的数学运算。1.1常见运算符运算符描述示例+加法3+2→5-减法5-3→2*乘法2*3→6/除法10/2→5%取模（取余数）10%3→1**幂运算2**3→8//整除（取整数部分）10/
  • Webpack vs Rollup vs Parcel：构建工具深度对比 北辰alk 前端webpackdevops前端
    文章目录1.核心特性对比1.1功能定位1.2技术架构对比2.配置与使用2.1Webpack配置示例2.2Rollup配置示例2.3Parcel使用示例3.性能对比3.1构建速度3.2输出质量4.生态系统4.1插件生态4.2学习曲线5.适用场景分析5.1Webpack适用场景5.2Rollup适用场景5.3Parcel适用场景6.优缺点总结6.1Webpack6.2Rollup6.3Parcel7.
  • Python--读取mat文件 一头大学牲 程序--编程记录python开发语言深度学习机器学习
    最近在进行学习深度学习过程中，遇到了以MATLAB的.mat格式存储的数据，需要用python读取出来处理，于是就找到了以下比较方便的三种python读取mat文件的方法：使用hdf5库来读取mat文件1.使用scipy.io来读取1.5知识小插曲2.使用hdf5来读取3.使用mat73来读取1.使用scipy.io来读取-如果你的matlab的版本比较旧，保存的.mat格式为‘-v7.3’以前的
  • MATAB学习笔记2 好大一口果汁 MATLAB学习笔记算法
    1.多项式拟合>>p=polyfit(DateNum,Pclose,1);%多项式拟合>>value=p(1)%将斜率赋值给value，作为股票的价值value=0.1212代码分析：%后面的内容是注释，ployfit（）有三个参数，第三个参数表示多项式的阶数，也就是最高次数。比如：第三个参数为1，说明为1次项，即一次函数，第三个参数为你要拟合的阶数，一阶直线拟合，二阶抛物线拟合，并非阶次越高越好
  • 利用matlab实现贝叶斯优化算法（BO）优化支持向量机回归(SVR)的超参数 是内啡肽耶 算法matlab支持向量机机器学习回归
    【导读】在机器学习建模中，支持向量机（SVM）回归模型的效果高度依赖超参数选择。但手动调参就像"大海捞针"，而网格搜索又面临"计算爆炸"的难题。今天给大家介绍一个智能调参黑科技——贝叶斯优化算法。通过Matlab实现，只需几分钟就能让模型性能自动升级！一、为什么要用贝叶斯优化调参？传统调参三大痛点：C参数（正则化强度）：过小导致过拟合，过大削弱模型能力ε参数（不敏感区域）：决定对预测误差的容忍度核
  • 3月份学习任务、工作计划 Kamui_0us 学习
    3月18日报名六级3月22日之前收集团日材料3月22日收集五四述职材料3月29日计算解二级学英语：为了六级为了绩点为了大英赛为了雅思接续规划留学计划恶补数学，拉下的慢慢补回来今日学习任务：学习本周的解析几何课程，背六级单词，还有时间可以看看github有关知识
  • 基于DeepSeek R1构建下一代Manus通用型AI智能体的技术实践 zhangjiaofa DeepSeekR1&AI人工智能大模型DeepSeekManus智能体AI
    目录一、技术背景与目标定位1.1大模型推理能力演进趋势1.2DeepSeekR1核心特性解析-混合专家架构(MoE)优化-组相对策略优化(GRPO)原理-多阶段强化学习训练范式1.3Manus智能体框架设计理念-多智能体协作机制-安全执行沙箱设计二、系统架构设计2.1整体架构拓扑图-分层模块交互机制-数据流与控制流设计2.2核心组件实现-规划模块(GRPO算法集成)-记忆系统分级存储架构-工具调用
  • AI笔记——语音识别 Yuki-^_^ 人工智能AI人工智能笔记语音识别
    摘要：语音识别（AutomaticSpeechRecognition,ASR）是人工智能领域的一项重要技术，它将人类的语音信号转换成文字。随着科技的发展，语音识别已经成为现代生活和工作中不可或缺的一部分。本文旨在介绍语音识别的基本原理、关键技术、应用场景以及未来发展趋势。一、历史与发展语音识别技术的历史可以追溯到20世纪50年代，那时的技术基于规则和模板。随着计算能力的提升和深度学习方法的出现，语
  • 让你秒懂 Vue .env 文件 _虾仁不眨眼_ Vue2vue.js前端javascript
    在Vue.js项目中，.env文件用于配置环境变量，这些变量可以在开发、测试和生产环境中使用。VueCLI提供了一种机制，允许你为不同的环境定义不同的环境变量。以下是.env、.env.development和.env.production文件的用途和区别，以及如何使用它们。1..env文件.env文件是项目的默认环境变量文件，适用于所有环境。它包含通用的环境变量，这些变量在开发、测试和生产环境中
  • php中文乱码无法解决_PHP基础|如何解决中文乱码问题？ 梦里一只喵 php中文乱码无法解决
    为什么会出现中文乱码?很多新手朋友学习PHP的时候，发现程序中的中文在输出的时候会出现乱码的问题，那么为什么会出现这种乱码的情况呢?一般来说，乱码的出现有2种原因，一种是由于编码(charset)设置错误，导致浏览器以错误的编码来解析，从而出现了满屏乱七八糟的“天书”，第二种就是文件被以错误的编码打开，然后保存，比如一个文本文件原先是GB2312编码的，却以UTF-8编码打开再保存，就会出现乱码的
  • 网络运维学习笔记（DeepSeek优化版） 018 HCIA-Datacom综合实验03 技术小齐 网络运维学习
    文章目录综合实验3实验需求一：A公司网络规划二：B公司网络规划配置一、ip、vlan、vlanif，stp、eth-trunkSW1SW2R1二、ospfSW1R1三、NATR1ISP四、拒绝ping允许httpSW1五、右半部分vlan、dhcp、ospf、NATSW4R2综合实验3实验需求一：A公司网络规划SW1/2/3组成了A公司的交换网络，其中SW1是核心层，SW2/3是接入层。三台交换机
  • Enum 枚举 120153216 enum枚举
    原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
  • Java8简明教程 bijian1013 javajdk1.8
            Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
  • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
    我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
  • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
          “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
  • Xshell实现Windows上传文件到Linux主机 被触发 windows
    经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
  • 类的加载ClassLoader 肆无忌惮_ ClassLoader
    类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
  • html5写的玫瑰花 知了ing html5
    <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
  • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
    原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
  • webservice获取访问服务的ip地址 alleni123 webservice
    1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
  • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
    1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
  • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
    Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
  • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
    Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
  • [Velocity二]自定义Velocity指令 bit1129 velocity
    什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
  • 【Hive十】Programming Hive学习笔记 bit1129 programming
    第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
  • nginx有选择性进行限制 ronin47 nginx 动静　限制
    http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
  • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
    /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
  • Netty学习笔记 bylijinnan javanetty
    本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
  • js获取项目路径 cngolon js
    //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
  • oracle 的性能优化 cuishikuan oracleSQL Server
       在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
  • Shell变量和数组使用详解 daizj linuxshell变量数组
    Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
  • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
    KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
  • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
    1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
  • solrcloud 部署方式比较 eksliang solrCloud
    solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
  • Java synchronized关键字详解 gqdy365 synchronized
    转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
  • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
    在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
  • 开发者必备的 Chrome 扩展 justjavac chrome
    Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
  • 算法机试题 李亚飞 java算法机试题
           在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
  • 正确配置Linux系统ulimit值 字符串 ulimit
    在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
  • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
    注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
  • Spring 4.2新特性-更简单的Application Event wiselyman application
    1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他