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

Vue 2.0 详解全教程(含 Axios 封装 + 路由守卫 + 实战进阶)

目录

  • 一、Vue 2.0 简介
    • 1.1 什么是 Vue?
    • 1.2 Vue 2.x 的主要特性
  • 二、快速上手
    • 2.1 引入 Vue
    • 2.2 创建第一个 Vue 实例
  • 三、核心概念详解
    • 3.1 模板语法
    • 3.2 数据绑定
    • 3.3 事件绑定
    • 3.4 计算属性 & 侦听器
  • 四、组件系统
    • 4.1 定义全局组件
    • 4.2 单文件组件(*.vue 文件)
    • 4.3 父子组件通信
  • 五、指令系统
  • 六、生命周期钩子
  • 七、过渡 & 动画
  • 八、Vue Router 路由系统
    • 8.1 安装
    • 8.2 配置路由
  • 九、Vuex 状态管理
    • 9.1 安装
    • 9.2 基本使用
  • 十、Axios 网络请求
    • 10.1 安装
    • 10.2 基础使用
  • 十一、进阶实战:Axios 封装
    • 11.1 封装 http.js
    • 11.2 使用封装
  • 十二、进阶实战:路由守卫
    • 12.1 添加守卫
    • 12.2 路由配置示例
  • 十三、进阶实战:统一 API 管理
    • 13.1 封装 api.js
    • 13.2 使用
  • 十四、实战示例:TodoList
    • 14.1 基本结构
    • 14.2 Vue 逻辑
  • 十五、功能拓展(含代码实现)
    • 15.1 自定义指令
    • 15.2 自定义过滤器
    • 15.3 使用 Vue.extend 动态组件
  • 十六、优化与最佳实践
  • 十七、总结


一、Vue 2.0 简介

1.1 什么是 Vue?

Vue 是一款轻量、渐进式的 JavaScript 框架,用于构建用户界面。它专注于视图层,易于上手,也支持复杂的单页应用开发。

1.2 Vue 2.x 的主要特性

  • 响应式数据绑定
  • 组件化开发
  • 指令系统
  • 生命周期钩子
  • 计算属性 & 侦听器
  • 内置过渡 & 动画支持
  • 强大的插件生态

二、快速上手

2.1 引入 Vue

<!-- CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2.2 创建第一个 Vue 实例

<div id="app"><h1>{{ message }}</h1>
</div><script>new Vue({el: '#app',data: {message: 'Hello Vue 2!'}});
</script>

三、核心概念详解

3.1 模板语法

  • 插值:{{ message }}
  • 属性绑定::href=“url”
  • 条件渲染:v-if / v-else / v-show
  • 列表渲染:v-for

3.2 数据绑定

<div>{{ message }}</div>
<input v-model="message">

3.3 事件绑定

<button v-on:click="greet">点击</button><script>
methods: {greet() {alert('Hello Vue!');}
}
</script>

3.4 计算属性 & 侦听器

<p>反转消息: {{ reversedMessage }}</p><script>
computed: {reversedMessage() {return this.message.split('').reverse().join('');}
}
</script>

四、组件系统

4.1 定义全局组件

Vue.component('my-component', {template: '<div>这是一个组件</div>'
});

4.2 单文件组件(*.vue 文件)

结构:

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: '单文件组件'};}
}
</script><style scoped>
div { color: blue; }
</style>

4.3 父子组件通信

  • props 传值
<child :message="parentMsg"></child><script>
props: ['message']
</script>
  • $emit 事件派发
<child @custom-event="parentMethod"></child><script>
// 子组件
this.$emit('custom-event', data);
</script>

五、指令系统

指令作用
v-bind动态绑定属性
v-model双向数据绑定
v-if条件渲染
v-show条件显示(不销毁 DOM)
v-for列表循环
v-on绑定事件监听器
v-html输出 HTML 内容
v-cloak防止闪烁

六、生命周期钩子

钩子名触发时机
beforeCreate实例初始化后,数据观测和事件配置之前
created实例创建完成,数据观测和事件配置之后
beforeMount挂载开始之前
mounted挂载完成之后
beforeUpdate数据更新前
updated数据更新后
beforeDestroy实例销毁前
destroyed实例销毁后

七、过渡 & 动画

<transition name="fade"><p v-if="show">淡入淡出效果</p>
</transition><style>
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

八、Vue Router 路由系统

8.1 安装

npm install vue-router

8.2 配置路由

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './Home.vue';
import About from './About.vue';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes
});new Vue({router
}).$mount('#app');

九、Vuex 状态管理

9.1 安装

npm install vuex

9.2 基本使用

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});new Vue({store
});

十、Axios 网络请求

10.1 安装

npm install axios

10.2 基础使用

import axios from 'axios';axios.get('https://api.example.com/data').then(response => {console.log(response.data);});

十一、进阶实战:Axios 封装

在项目中,推荐将 Axios 封装为独立模块,方便管理接口、处理全局错误等。

11.1 封装 http.js

// src/utils/http.js
import axios from 'axios';const service = axios.create({baseURL: 'https://api.example.com',timeout: 5000
});// 请求拦截器
service.interceptors.request.use(config => {// 可在这里统一携带 token// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, error => {return Promise.reject(error);
});// 响应拦截器
service.interceptors.response.use(response => {return response.data;
}, error => {console.error('请求出错:', error);alert(error.response?.data?.message || '请求失败');return Promise.reject(error);
});export default service;

11.2 使用封装

import http from '@/utils/http';http.get('/users').then(data => {console.log('用户数据:', data);});

十二、进阶实战:路由守卫

Vue Router 支持全局、单个路由、组件内守卫,可用于权限控制。

12.1 添加守卫

// router/index.js
router.beforeEach((to, from, next) => {const isLoggedIn = !!localStorage.getItem('token');if (to.meta.requiresAuth && !isLoggedIn) {next('/login');} else {next();}
});

12.2 路由配置示例

{path: '/dashboard',component: Dashboard,meta: { requiresAuth: true }
}

十三、进阶实战:统一 API 管理

推荐将接口集中管理,避免硬编码。

13.1 封装 api.js

// src/api/user.js
import http from '@/utils/http';export function getUserList() {return http.get('/users');
}export function login(data) {return http.post('/login', data);
}

13.2 使用

import { getUserList } from '@/api/user';getUserList().then(list => {console.log('用户列表:', list);
});

十四、实战示例:TodoList

14.1 基本结构

<div id="app"><input v-model="newTodo" @keyup.enter="addTodo"><ul><li v-for="todo in todos">{{ todo.text }}<button @click="removeTodo(todo)">删除</button></li></ul>
</div>

14.2 Vue 逻辑

new Vue({el: '#app',data: {newTodo: '',todos: []},methods: {addTodo() {if (this.newTodo.trim()) {this.todos.push({ text: this.newTodo });this.newTodo = '';}},removeTodo(todo) {this.todos = this.todos.filter(t => t !== todo);}}
});

十五、功能拓展(含代码实现)

15.1 自定义指令

Vue.directive('focus', {inserted(el) {el.focus();}
});

15.2 自定义过滤器

Vue.filter('capitalize', function (value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);
});

15.3 使用 Vue.extend 动态组件

const Profile = Vue.extend({template: '<p>这是动态创建的组件</p>'
});new Profile().$mount('#profile');

十六、优化与最佳实践

  • 组件划分要清晰,职责单一
  • 使用 v-show 替代 v-if,减少频繁销毁创建
  • 慎用 v-html 防止 XSS
  • 利用 keep-alive 缓存组件
  • 结合 Vue Devtools 调试

十七、总结

Vue 2.0 是构建现代 Web 应用的强大工具。通过本篇文章,你掌握了从基础到进阶的 Vue 2 知识体系,并通过实际案例加深了理解。继续深入组件化开发、状态管理、性能优化,你就能在实际项目中游刃有余地使用 Vue 2!🚀


到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~
创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒:
转载请注明原文链接,商业合作请私信联系
感谢你的阅读!我们下篇文章再见~ 💕

在这里插入图片描述

相关文章:

Vue 2.0 详解全教程(含 Axios 封装 + 路由守卫 + 实战进阶)

目录 一、Vue 2.0 简介1.1 什么是 Vue&#xff1f;1.2 Vue 2.x 的主要特性 二、快速上手2.1 引入 Vue2.2 创建第一个 Vue 实例 三、核心概念详解3.1 模板语法3.2 数据绑定3.3 事件绑定3.4 计算属性 & 侦听器 四、组件系统4.1 定义全局组件4.2 单文件组件&#xff08;*.vue …...

《Python星球日记》 第36天:线性代数基础

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏&#xff1a;《Python星球日记》&#xff0c;限时特价订阅中ing 目录 一、标量、…...

使用 Spring Boot 构建 REST API

使用 Spring Boot 构建 REST API 使用 Spring Boot 构建 REST API1. Spring Initializr构建springboot2. API 合同 & JSONAPI 协定什么是 JSON&#xff1f; 3.先测试什么是测试驱动开发&#xff1f;测试金字塔Red&#xff0c; Green&#xff0c; Refactor 循环 4. 实施 GET…...

PHP分页显示数据,在phpMyadmin中添加数据

<?php $conmysqli_connect(localhost,root,,stu); mysqli_query($con,"set names utf8"); //设置字符集为utf8 $sql"select * from teacher"; $resultmysqli_query($con,$sql); $countmysqli_num_rows($result); //记录总条数$count。 $pagesize10;//每…...

Spring Boot操作MongoDB的完整示例大全

以下是基于Spring Boot操作MongoDB的完整示例大全&#xff0c;涵盖增删改查、聚合查询、索引、事务等核心功能&#xff1a; 一、基础CRUD操作 1. 环境配置 依赖配置&#xff08;pom.xml&#xff09; <dependency><groupId>org.springframework.boot</groupId…...

SpringCloud入门教程合集(1)-SpringCloud简介与Eureka+Feign实现服务注册中心、服务提供与服务消费

场景 SpringCloud 总体架构与核心子项目 SpringCloud 总体架构 1. 基础设施层 服务注册与发现&#xff1a;Eureka/Nacos 配置中心&#xff1a;Spring Cloud Config/Nacos 消息总线&#xff1a;Spring Cloud Bus 2. 服务通信层 负载均衡&#xff1a;Ribbon/LoadBalancer…...

【Linuc】深入理解 Linux 文件权限

文章目录 一、权限基础解析1. 权限三元组2. 权限类型与数字映射二、查看文件权限三、修改权限实战1. chmod 命令符号模式数字模式(推荐)2. chown 修改归属四、特殊权限机制1. SetUID (Set User ID)2. SetGID (Set Group ID)3. Sticky Bit五、高级权限管理1. 默认权限控制2. A…...

ExtraMAME:复古游戏的快乐“时光机”

嘿&#xff0c;小伙伴们&#xff01;今天电脑天空要给大家安利一款超有趣的软件——ExtraMAME&#xff01;如果你对复古街机游戏念念不忘&#xff0c;那它绝对能成为你的快乐源泉&#xff0c;带你瞬间穿越回那个充满游戏机的黄金时代。 ExtraMAME是一款基于MAME&#xff08;Mu…...

没有 Mac,如何把 iOS App 成功上架?

开发者的 iOS 上架折腾记&#xff1a;没有 Mac&#xff0c;也能搞定&#xff1f; 最近在帮朋友把一个跨平台 Flutter 项目上架到 App Store&#xff0c;结果被 iOS 上架的那套流程卡得头都大了。其实这也不是第一次碰壁了——每次到“申请证书 打包 上传”的时候&#xff0c…...

使用VMware Workstation pro 17.5.1在Windows上安装Ubuntu 24.04.2的 详细步骤

一、准备工作 1. 下载Ubuntu 24.04.2 ISO镜像 官方下载地址&#xff1a;Ubuntu 24.04.2 (Noble Numbat) 选择 ubuntu-24.04.2-desktop-amd64.iso&#xff08;桌面版&#xff09;或 ubuntu-24.04.2-live-server-amd64.iso&#xff08;服务器版&#xff09;。 2. 确认系统要求…...

栈与队列详解及模拟实现

目录 ​​一、栈&#xff08;Stack&#xff09;&#xff1a;后进先出​ ​​1.1 什么是栈​ ​​1.2 栈的使用​​ ​​1.3 栈的模拟实现​ ​​1.4 栈的经典应用​​ ​​二、队列&#xff08;Queue&#xff09;&#xff1a;先进先出​ ​​2.1 什么是队列 2.2 队列的使…...

Cursor无法SSH远程连接服务器免密登录问题

在本地机器和Ubuntu服务器之间实现SSH远程免密连接&#xff0c;可按如下步骤操作&#xff1a; 1. 生成SSH密钥对 在本地机器上开启终端&#xff0c;使用以下命令生成SSH密钥对&#xff1a; ssh-keygen -t rsa按提示操作&#xff0c;一般直接回车&#xff0c;这样密钥会生成在…...

【Vue】全局事件总线 TodoList 事件总线

目录 一、 实现所有组件看到x事件 二、 实现$on $off 以及 $emit 总结不易~ 本章节对我有很大的收获&#xff0c; 希望对你也是&#xff01;&#xff01;&#xff01; 本节素材已上传至Gitee&#xff1a;yihaohhh/我爱Vue - Gitee.com 全局事件总线图&#xff1a; 本节素材…...

动态规划背包问题

一、0-1背包问题 0-1背包问题就是给定n个物品和一个容量为C的背包&#xff0c;物品i的重量是Wi,其价值是Vi。问&#xff1a;应该如何选择装入背包的物品&#xff0c;使总价值最大且总重量不超过C&#xff1f; 1.确定状态表示 dp[i][j] 表示在背包容量为j时&#xff0c;从下标…...

ctfshow web入门 web49

信息收集 此%非彼%&#xff0c;%0a中的%不会被识别&#xff0c;因为识别之前就已经自动转化为了换行符 所以和之前一样的解法&#xff0c;没什么好说的 if(isset($_GET[c])){$c$_GET[c];if(!preg_match("/\;|cat|flag| |[0-9]|\\$|\*|more|less|head|sort|tail|sed|cut|…...

AI+浏览器自动化:Nanobrowser Chrome 扩展的使用「详细教程」

AI+浏览器自动化:Nanobrowser Chrome 扩展的使用「详细教程」 一、前言二、Nanobrowser简介2.1 项目背景2.2 核心特性三、安装与配置3.1 安装方式3.1.1 Chrome Web Store安装3.1.2 手动安装最新版3.2 基本配置3.2.1 添加API Key3.2.2 选择模型3.2.3 其他设置四、核心功能详解4…...

【表设计】外键的取舍-分布式中逐渐消失的外键

在分布式大行其道的今天&#xff0c;为什么外键约束越来越少&#xff1f; 外键-数据链接带来强制完整性 在关系型数据库中&#xff0c;外键&#xff08;Foreign Key&#xff09;可以用于建立和强制两个表之间的数据链接。 在层次数据结构一篇的闭包表简单设计中&#xff0c;…...

HarmonyOS 5.0 分布式数据协同与跨设备同步​​

大家好&#xff0c;我是 V 哥。 使用 Mate 70有一段时间了&#xff0c;系统的丝滑使用起来那是爽得不要不要的&#xff0c;随着越来越多的应用适配&#xff0c;目前使用起来已经和4.3的兼容版本功能差异无碍了&#xff0c;还有些纯血鸿蒙独特的能力很是好用&#xff0c;比如&am…...

多行文本省略

方式1 兼容性不好 height: 100px; line-height: 25px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;方式2 利用浮动环绕、空白元素站位margin-top调整位置 <div class"wrap"><div class"more"…...

Adobe卸载清理工具Creative Cloud Cleaner Tool下载

Adobe Creative Cloud Cleaner Tool 是 Adobe 公司官方推出的一款卸载清理工具&#xff0c;主要用于清理 Creative Cloud 应用程序在安装、更新或卸载过程中可能遗留下来的错误配置文件、缓存、注册表项或其他系统级残留内容。相比一般的卸载程序&#xff0c;它更深入地处理系统…...

分布式、高并发-Day03

以下是 Day 3 详细学习内容&#xff08;线程池拒绝策略实战&#xff1a;DiscardOldestPolicy与CallerRunsPolicy&#xff0c;30 分钟完整计划&#xff09;&#xff0c;包含策略原理、分步代码实战和场景解析&#xff1a; &#x1f4d6; 今日学习目标 掌握DiscardOldestPolicy…...

高等数学第四章---不定积分(4.4有理函数的不定积分2)

&4.4有理函数的不定积分2 篇幅有限制&#xff0c;例题的解答会占大量字符&#xff0c;html限制字符为22000个左右。这里继续探讨上文的有理函数的不定积分。 一、三角函数有理式的不定积分 由 sin ⁡ x \sin x sinx, cos ⁡ x \cos x cosx 以及常数经过有限次加、减、…...

C++中指针使用详解(4)指针的高级应用汇总

C 中指针的高级应用非常丰富&#xff0c;掌握这些内容能让你写出更高性能、更底层控制力强的代码。下面是应用模块梳理和例子讲解。 目录预览 函数指针与回调机制指针数组 vs 数组指针指针与类成员函数&#xff08;成员函数指针&#xff09;智能指针&#xff08;unique_ptr, s…...

Java 8 非对称加密代码示例

以下是使用Java 8实现RSA非对称加密的完整代码示例&#xff0c;包括密钥生成、加密和解密过程。 1. 生成RSA密钥对 import java.security.*; import java.security.spec.PKCS8EncodedKeySpec; import java.security.spec.X509EncodedKeySpec; import java.util.Base64; impor…...

Linux环境基础与开发工具使用

1. Linux编译器vim 1.1 vim的基本概念讲解 vim有很多种模式&#xff0c;我们初学者常用的就是命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09;。 命令/正常模式(Normal mode) …...

【BUG】‘DetDataSample‘ object has no attribute ‘_gt_sem_seg‘

问题&#xff1a; 使用mmdetection框架使用COCO格式训练自定义数据集时&#xff0c;其中模型使用HTC模型时出现如下问题&#xff1a; AttributeError: ‘DetDataSample’ object has no attribute ‘_gt_sem_seg’. Did you mean: ‘gt_sem_seg’? results self(**data, mode…...

C# Winforms 本地化 多语言支持 字符串资源

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…...

ts bug 找不到模块或相应类型的声明,@符有红色波浪线

解决方法&#xff1a;在env.d.ts文件中添加以下代码&#xff0c;这段代码是一个 TypeScript 的声明文件&#xff0c;用于让 TypeScript 知道如何处理 Vue 单文件组件&#xff08;.vue 文件&#xff09;的导入。 /// <reference types"vite/client" /> // 声明…...

赛灵思 XCZU11EG-2FFVC1760I XilinxFPGAZynq UltraScale+ MPSoC EG

XCZU11EG-2FFVC1760I 是 Zynq UltraScale MPSoC EG 系列中性能最强的器件之一&#xff0c;集成了四核 ARM Cortex-A53 应用处理器、双核 Cortex-R5 实时处理器与 Mali-400 MP2 GPU&#xff0c;并结合了 653,100 个逻辑单元与丰富的片上存储资源&#xff0c;可满足高性能计算、A…...

VSCode|IDEA|PyCharm无缝接入DeepSeek R1实现AI编程

文章目录 前言一、流程简介1. 获取DeepSeek R1的API密钥2. 在编程软件中下载安装 Continue 插件**IDEA**PyCharm 3. 配置Continue文件 二、使用体验利用 DeepSeek R1进行 AI 编程 前言 本文将介绍如何在 VSCode|IDEA|PyCharm 软件中接入 DeepSeek R1 实现 AI 编程&#xff0c;…...

深入浅出 PostgreSQL:从历史演进到高阶优化技术

引言 PostgreSQL 是一个免费开源的对象关系型数据库&#xff0c;既支持传统的 SQL 查询&#xff0c;也支持 JSON 等非关系数据类型&#xff0c;因其高度可扩展性和社区活跃度&#xff0c;已成为众多互联网、金融和企业级应用的首选数据库 (Introduction to PostgreSQL - W3Sch…...

塔能水泵节能方案:精准驱动工厂能耗优化

在工厂的能源消耗体系中&#xff0c;水泵作为关键的动力设备&#xff0c;其运行效率直接关系到整体能耗水平。传统水泵在长期运行中&#xff0c;受设计局限、工艺成本约束等因素影响&#xff0c;普遍存在效率低下、能源浪费严重的问题。塔能科技针对这一痛点&#xff0c;推出了…...

SSCLMD模型代码实现详解

SSCLMD模型代码实现详解 1. 项目源码结构 SSCLMD项目的源码结构如下&#xff1a; SSCLMD-main/ ├── README.md ├── ST4.xlsx ├── Supplementary File.docx ├── code/ │ ├── calculating_similarity.py │ ├── data_preparation.py │ ├── data_…...

【coze】故事卡片(图片、音频、文字)

【coze】故事卡片&#xff08;图片、音频、文字&#xff09; 1、创建智能体2、添加人设与回复逻辑3、添加工作流&#xff08;1&#xff09;创建工作流&#xff08;2&#xff09;添加大模型节点&#xff08;3&#xff09;添加提示词优化节点&#xff08;4&#xff09;添加豆包图…...

限免开关实施版本保护措施,保证项目灰度发布安全

迭代用户限免权限校验业务 新增限免开关实现普通用户权益更新&#xff0c;实施版本保护措施&#xff0c;保证项目灰度发布安全&#xff1b; // 是否展示限免标识 func (t *BasePrivilegeService) IsPromotionFree(p consumParams) bool {// 限免开关isFreeUseOpen : p.cfg.Vip…...

C#中从本地(两个路径文件夹)中实时拿图显示到窗口中并接收(两个tcp发送的信号)转为字符串显示在窗体中实现检测可视化

多窗口源码 C#中从本地&#xff08;两个路径文件夹&#xff09;中实时拿图显示到窗口中并接收&#xff08;两个tcp发送的信号&#xff09;转为字符串显示在窗体中实现检测可视化资源-CSDN文库 读图结果展示 字符串结果展示 利用TCP调试工具创建两个tcp 再次启动程序 就链接…...

了解一下OceanBase中的表分区

OceanBase 是一个高性能的分布式关系型数据库&#xff0c;它支持 SQL 标准的大部分功能&#xff0c;包括分区表。分区表可以帮助管理大量数据&#xff0c;提高查询效率&#xff0c;通过将数据分散到不同的物理段中&#xff0c;可以减少查询时的数据扫描量。 在 OceanBase 中操…...

生成了一个AI算法

import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms # 1. 数据预处理 transform transforms.Compose([ transforms.ToTensor(), transforms.Normalize((0.5,), (0.5,)) # MNIST单通道归一化 ]) train_da…...

C# 使用SunnyUI控件 (VS 2019)

前言&#xff1a;建议下载源码&#xff0c;源码中包含了各种控件的用法案例。 下载 帮助文档: 文档预览 - Gitee.comGitee: SunnyUI: SunnyUI.NET 是基于.NET Framework 4.0、.NET8、.NET9 框架的 C# WinForm UI、开源控件库、工具类库、扩展类库、多页面开发框架。GitHub: h…...

在 Win11 下安装 Wireshark 的详细步骤

目录 一、了解 Wireshark1. 作用和功能2. 使用步骤 二、下载安装包三、运行安装包四、使用 Wireshark1. 抓包2. 窗口介绍3. 过滤器&#xff08;显示 / 捕获过滤器&#xff09;4. 保存过滤后的报文1&#xff09;显示过滤器表达式2&#xff09;过滤表达式的规则 5. 封包列表6. 封…...

【AI提示词】六顶思考帽工具专家

提示说明 提供专业的六顶思考帽工具应用服务&#xff0c;帮助用户从多角度进行创新性问题解决。 提示词 # Role: 六顶思考帽工具专家## Profile - language: 中文 - description: 提供专业的六顶思考帽工具应用服务&#xff0c;帮助用户从多角度进行创新性问题解决 - backgr…...

解锁RAG:AI 2.0时代的“知识外挂”是如何炼成的?

——从原理到实战&#xff0c;揭秘检索增强生成如何颠覆传统AI 引言&#xff1a;当AI学会“开卷考试” 如果传统大模型是“闭卷学霸”&#xff0c;那RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09;就是那个考试时带着“百科全书”的超级…...

使用 ANSYS SIwave 求解器在 ANSYS AEDT 中预测串行通道性能并生成眼图

PCB 仿真 如今&#xff0c;无线射频设备日益复杂&#xff0c;对大型复杂 PCB 设计进行准确、高效仿真的需求也随之增加。在设计流程的早期识别和预测潜在问题可以节省资源、时间和金钱。SIwave 可帮助您对现代高性能电子产品中典型的高速通道和完整的输电系统进行建模、仿真和…...

启发式算法-模拟退火算法

模拟退火算法是一种基于概率的启发式优化算法&#xff0c;用于解决大规模组合优化问题&#xff0c;其灵感来源于金属退火过程中的物理现象。其基本原理是从一个初始解开始&#xff0c;然后在当前解的邻域内随机生成一个新解&#xff0c;如果新解的目标函数值优于当前解&#xf…...

机器视觉框架源码——解读3(常用的资源和样式)

这是关于框架解读的第三篇文章,将结合理论和框架代码进行讲解。 WPF中的各类工件元素,都可以设置其样式,如: 字体(FontFamily) 字体大小(FontSize) 背景颜色(Backgroud) 字体颜色(Foreground) 边距(Margin) 水平位置(HorizontalAlignment) 垂直位置(VerticalAlignment) 而样…...

勒索病毒肆虐时代:数据库加密存储的实践指南

在2025年第一季度&#xff0c;全球勒索攻击损失突破150亿美元&#xff0c;某跨国制造企业因数据库未加密被勒索3000枚比特币&#xff0c;某省级医保系统遭攻击导致参保人信息泄露……当医疗数据、金融资产、知识产权成为黑客的提款机&#xff0c;数据库加密已从技术选项升级为生…...

next中的server comonent中如何共享session

在 Next.js 的服务器组件&#xff08;Server Components&#xff09;里共享会话&#xff08;session&#xff09;&#xff0c;可以借助第三方库&#xff08;如 next-auth 或 express-session 结合自定义 API 路由&#xff09;来实现&#xff0c;下面为你详细介绍这两种常见的实…...

Desfire Ev1\Ev2\Ev3卡DES\3K3DES\AES加解密读写VB.Net示例源码

本示例使用发卡器&#xff1a;https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.1d292c1bSxJTb6&ftt&id917152255720 Public Class Form1Public Declare Function pcdbeep Lib "OUR_MIFARE.dll" (ByVal xms As Integer) As BytePublic Declare Fu…...

商业实战将归巢网内容构建为本地RAG模型的完整指南01-优雅草卓伊凡

商业实战将归巢网内容构建为本地RAG模型的完整指南01-优雅草卓伊凡 今天卓伊凡收到了老客户归巢网关于对本地RAG模型建立的咨询&#xff0c;这点也让卓伊凡得深入研究下&#xff0c;毕竟老客户肯定不是说着玩的&#xff0c;主要最终实现目的是建立模型开始使用AI智能问答。 一…...

langchain4j整合springboot

环境介绍 JDK17Spring Boot: 3.0.2 创建springboot工程 IDEA新建一个springboot项目&#xff0c;使用Spring lnitializr快速构建。 选择Spring Boot: 3.0.2以及Spring Web依赖 添加maven依赖 创建完springboot项目之后&#xff0c;在pom中添加关键依赖 <properties&g…...