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

《从零到全栈:Vue2入门宝典》

1. Vue 简介

1.1 什么是 Vue?

        Vue 是一套用于构建用户界面的渐进式框架。Vue 的核心库专注于视图层,易于与其他库或现有项目集成。Vue 的目标是通过尽可能简单的 API 实现数据双向绑定组件化开发

1.2 什么是“渐进式”?

        “渐进式”意味着 Vue 可以逐步应用到项目中。你可以从简单的页面交互开始,逐步引入 Vue 的更多功能,如组件化、路由、状态管理等,而不需要一开始就全面重构项目。

1.3 Vue 的核心特性

  • 数据双向绑定:Vue 通过 MVVM 模式实现数据与视图的双向绑定,数据的变化会自动反映在视图上,视图的变化也会同步到数据。

  • 组件化开发:Vue 允许将页面拆分为多个可复用的组件,每个组件都有自己的逻辑和样式,便于维护和复用。

  • 响应式系统:Vue 的响应式系统能够自动追踪数据的变化,并更新视图。

2. Vue 的响应式原理

2.1 Vue2 的响应式实现

        Vue2 使用 Object.defineProperty 来实现数据的响应式。通过为对象的每个属性设置 gettersetter,Vue 能够监听数据的变化并触发视图更新。

Object.defineProperty(obj, key, {get() {// 读取属性时的回调},set(newValue) {// 设置属性时的回调}
});

2.2 Vue3 的响应式实现

        Vue3 使用 Proxy 替代了 Object.definePropertyProxy 可以监听整个对象的变化,而不需要为每个属性单独设置 gettersetter,性能更好且支持更多的操作。

3. 为什么要使用 Vue?

  1. 减少繁琐的 DOM 操作:Vue 通过数据驱动视图,开发者无需手动操作 DOM。

  2. 数据响应式:Vue 自动追踪数据变化并更新视图,开发者可以更专注于业务逻辑。

  3. 提高开发效率:Vue 提供了丰富的工具和生态,如 Vue CLI、Vue Router、Vuex 等,能够快速构建复杂的单页应用。

  4. 完整的生态圈:Vue 拥有完善的生态系统,支持声明式编程、组件化开发、路由管理、状态管理等。

4. Vue 的基本使用

4.1 引入 Vue

可以通过以下两种方式引入 Vue:

        1. 原生引入:通过 <script> 标签直接引入 Vue 文件。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

        2. 工程化引入:使用构建工具如 Webpack、Vue CLI 或 Vite 来构建 Vue 项目。

4.2 初始化 Vue 程序

new Vue({el: '#app', // 挂载点data() {return {msg: 'Hello Vue!'};}
});

5. Vue 的基础语法

5.1 模板语法

        Vue 使用双大括号 {{ }} 进行插值,支持 JS 表达式。

<div id="app">{{ msg }}
</div>

5.2 指令

Vue 提供了多种指令来操作 DOM:

  • v-model:实现表单元素与数据的双向绑定。

  • v-html:渲染 HTML 内容。

  • v-text:渲染纯文本。

  • v-bind:动态绑定属性,简写为 :

  • v-on:绑定事件,简写为 @

  • v-if / v-show:条件渲染。

  • v-for:列表渲染。

5.3 计算属性与侦听器

  • 计算属性computed 用于定义依赖其他属性的计算属性。

    computed: {fullName() {return this.firstName + ' ' + this.lastName;}
    }
  • 侦听器watch 用于监听数据的变化并执行相应的操作。

    watch: {msg(newVal, oldVal) {console.log('msg changed:', newVal);}
    }

5.4 过滤器

        过滤器用于对数据进行格式化处理。

<p>{{ msg | capitalize }}</p>filters: {capitalize(value) {return value.toUpperCase();}
}

6. Vue 组件

6.1 组件的定义与使用

        组件是 Vue 的核心概念之一,允许将页面拆分为多个可复用的模块。

const MyComponent = {template: '<div>{{ msg }}</div>',data() {return {msg: 'Hello Component!'};}
};new Vue({el: '#app',components: {'my-component': MyComponent}
});

6.2 组件通信

  • 父传子:通过 props 传递数据。

    // 父组件
    <child :msg="parentMsg"></child>// 子组件
    props: ['msg']
  • 子传父:通过 $emit 触发事件并传递数据。

    // 子组件
    this.$emit('update', newValue);// 父组件
    <child @update="handleUpdate"></child>
  • 兄弟组件通信:通过事件总线或 Vuex 进行通信。

7. Vue 的生命周期

Vue 组件的生命周期分为 4 个阶段,每个阶段都有对应的钩子函数:

  1. 创建阶段beforeCreatecreated

  2. 挂载阶段beforeMountmounted

  3. 更新阶段beforeUpdateupdated

  4. 销毁阶段beforeDestroydestroyed

    new Vue({el: '#app',data() {return {msg: 'Hello Vue!'};},created() {console.log('组件创建完成');},mounted() {console.log('组件挂载完成');}
    });

8. Vue 路由 (Vue Router)

8.1 路由的基本使用

        Vue Router 是 Vue 的官方路由管理器,用于实现单页应用中的页面导航。

const router = new VueRouter({routes: [{ path: '/', component: Home },{ path: '/about', component: About }]
});new Vue({router,el: '#app'
});

8.2 路由传参

  • 查询参数:通过 query 传递参数。

    this.$router.push({ path: '/detail', query: { id: 1 } });
  • 动态路由:通过 params 传递参数。

    this.$router.push({ name: 'detail', params: { id: 1 } });

8.3 路由守卫

        路由守卫用于在导航过程中进行拦截或权限控制。

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !isAuthenticated) {next('/login');} else {next();}
});

9. Vue 过渡与动画

        Vue 提供了 <transition> 组件来实现元素的过渡和动画效果。

<transition name="fade"><div v-if="show">Hello Vue!</div>
</transition><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

10. Vue 混入 (Mixin)

        混入是一种代码复用的方式,允许将组件的选项(如 datamethods 等)提取到一个单独的对象中,并在多个组件中复用。

const myMixin = {data() {return {msg: 'Hello Mixin!'};}
};new Vue({mixins: [myMixin],el: '#app'
});

11. 自定义指令

        Vue 允许开发者自定义指令来扩展 DOM 操作。

<input v-focus>Vue.directive('focus', {inserted(el) {el.focus();}
});

12. Vue 项目构建

12.1 Vue CLI 脚手架

1. 脚手架简介

        Vue CLI 是 Vue 官方提供的工程化项目构建工具,能够快速生成标准化的 Vue 项目结构,集成 Webpack、Babel、ESLint 等工具链。

2. 安装与使用
# 全局安装
npm install -g @vue/cli# 验证安装
vue --version# 创建项目 (命令行)
vue create project-name# 可视化创建 (浏览器打开)
vue ui
3. 项目结构

生成的项目包含以下核心文件:

  • src/main.js: 入口文件

  • src/App.vue: 根组件

  • src/router/: 路由配置目录

  • src/views/: 页面级组件目录


13. Vue Router 路由系统

13.1 路由核心概念
  • SPA (单页应用):通过 URL 映射不同组件,实现无刷新页面切换

  • 动态路由:通过参数匹配不同内容(如 /user/:id

  • 嵌套路由:父子层级的页面结构

  • 编程式导航:通过 JS 控制页面跳转

13.2 路由配置流程
        (1) 安装路由
npm install vue-router@3.0.0  # Vue2 使用 3.x 版本
        (2) 路由配置文件

      src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',redirect: '/list'  // 重定向},{path: '/list',name: 'list',component: () => import('@/views/ListView.vue')  // 懒加载},{path: '/detail/:id',  // 动态路由name: 'detail',component: () => import('@/views/DetailView.vue')}
]const router = new VueRouter({routes
})export default router
        (3) 挂载路由

     src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'new Vue({router,  // 注入路由实例render: h => h(App)
}).$mount('#app')

14. 路由传参方式对比

方式语法示例获取方法特点
Query 参数/detail?id=1this.$route.query.id参数明文显示在 URL
Params 参数/detail/1 + path: '/detail/:id'this.$route.params.id需定义动态路由,刷新后参数保留
命名路由传参{ name: 'detail', params: { id:1 } }this.$route.params.id需配置路由 name,参数不在 URL 显示
示例代码

        List.vue 传递参数:

<router-link :to="{ path: '/detail', query: { id: 1, type: '旅游' }}">链接1</router-link>
<router-link :to="{ name: 'detail', params: { id: 2 }}">链接2</router-link>

        Detail.vue 接收参数:

export default {created() {console.log('Query参数:', this.$route.query.id)console.log('Params参数:', this.$route.params.id)}
}

15. 路由守卫

15.1 全局守卫

   router/index.js

router.beforeEach((to, from, next) => {// 1. 权限验证示例if (to.meta.requiresAuth && !isLogin) {next('/login')} // 2. 放行路由else {next()}
})

15.2 路由独享守卫

{path: '/admin',component: AdminPage,beforeEnter: (to, from, next) => {if (!isAdmin) next('/403')else next()}
}

15.3 组件内守卫

   DetailView.vue

export default {beforeRouteEnter(to, from, next) {// 组件渲染前调用next(vm => {// 通过 vm 访问组件实例})},beforeRouteLeave(to, from, next) {// 离开组件时调用const answer = confirm('确定离开?')answer ? next() : next(false)}
}

16. 嵌套路由

16.1 配置嵌套路由

   router/index.js

{path: '/user',component: UserLayout,children: [{ path: 'profile',  // 匹配 /user/profilecomponent: UserProfile },{ path: 'settings', // 匹配 /user/settingscomponent: UserSettings }]
}

16.2 父组件模板

   UserLayout.vue

<template><div><h2>用户中心</h2><router-view></router-view> <!-- 子路由出口 --></div>
</template>

17. 路由模式

模式特点配置方法
Hash 模式URL 带 #,兼容性好默认模式,无需配置
History 模式#,需要服务器支持mode: 'history'
const router = new VueRouter({mode: 'history',routes
})

18. 常见问题解决

18.1 页面刷新后 Params 参数丢失

  • 使用 Query 参数替代

  • 将参数存储在 Vuex 或 localStorage 中

18.2 路由重复跳转报错

// 捕获重复导航错误
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}

总结

        Vue 是一个功能强大且易于上手的渐进式框架,适合从简单的页面交互到复杂的单页应用开发。通过 Vue 的响应式系统、组件化开发、路由管理、状态管理等特性,开发者可以高效地构建现代化的 Web 应用。


 希望这份整理对你有帮助!如果需要进一步细化某部分内容,可以告诉我! 😊 

相关文章:

《从零到全栈:Vue2入门宝典》

1. Vue 简介 1.1 什么是 Vue&#xff1f; Vue 是一套用于构建用户界面的渐进式框架。Vue 的核心库专注于视图层&#xff0c;易于与其他库或现有项目集成。Vue 的目标是通过尽可能简单的 API 实现数据双向绑定和组件化开发。 1.2 什么是“渐进式”&#xff1f; “渐进式”意味…...

next.js-学习3

next.js-学习3 6. 设置数据库1. 传代码到github https://github.com/2. github和Vercel链接&#xff0c;用Vercel预览和部署3. 创建数据库4. 初始化数据库 7.读取数据1. 在/app/lib/data.ts中这两行是连接postgres的2. 在/app/dashboard/page.tsx中使用3.在/app/dashboard/page…...

Hadoop第2课(伪分布式集群的搭建)

jdk和hadoop安装包&#xff1a; hadoop-2.9.2.t......等2个文件官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘 1、用XFTP发送hadoop安装包和jdk到/home/hadoop/目录下&#xff08;hadoop用户的主目录&#xff09; 2、解压jdk安装包到~目录 卸载jdk的命令&#xff1a;r…...

Linux——进程池

前言&#xff1a;大佬写博客给别人看&#xff0c;菜鸟写博客给自己看&#xff0c;我是菜鸟。 1.实现思路 思路&#xff1a;通过创建匿名管道&#xff0c;来实现父子进程之间的通信 注1&#xff1a;父写&#xff0c;子读 注2&#xff1a;匿名管道只能用来进行具有血管关系的进程…...

JavaScript 简单类型与复杂类型-简单类型的内存分配

深入理解JavaScript中的简单类型&#xff08;基本数据类型&#xff09;和复杂类型&#xff08;引用数据类型&#xff09;如何在内存中存储对于编写高效、无误的代码至关重要。本文将专注于探讨简单类型的内存分配机制&#xff0c;即栈&#xff08;Stack&#xff09;内存&#x…...

深度生成模型(一)——具身智能综述与算法分类简介

具身智能对于机器人的控制可以分为端到端模型和非端到端模型&#xff1a; 端到端模型&#xff1a;具身模型&#xff08;如 ACT 和 DP&#xff09;将视觉感知&#xff08;Vision&#xff09;与动作生成&#xff08;Action&#xff09;整合为单一神经网络&#xff0c;直接实现从…...

Vue 中,使用模板(Template) 和 Render 函数编写组件的区别

在 Vue 2 中&#xff0c;模板&#xff08;Template&#xff09; 和 Render 函数 是两种不同的组件编写方式&#xff0c;它们各有特点和适用场景。以下是它们的核心区别和实际应用场景分析&#xff1a; 1. 基本区别 特性模板&#xff08;Template&#xff09;Render 函数语法形…...

【笔记】论文阅读方法(AI大模型)

1 为什么读论文 构建知识体系&#xff1a;通过Related Works快速了解该方向研究现状&#xff0c;追踪经典论文 紧跟前沿技术&#xff1a;了解领域内新技术及效果&#xff0c;快速借鉴到自身项目 培养科研逻辑&#xff1a;熟悉论文体系&#xff0c;了解如何创造新事物&#x…...

JWT+redis实现令牌刷新优化方案

令牌刷新优化方案的详细实现步骤&#xff1a; 1. 令牌服务层改造 1.1 JWT工具类增强 // JwtUtils.java 新增方法 public class JwtUtils {// 生成带动态过期时间的令牌public static String createToken(String subject, String userId, String username, long expirationMi…...

安全面试5

文章目录 sql的二次注入在linux下&#xff0c;现在有一个拥有大量ip地址的txt文本文档&#xff0c;但是里面有很多重复的&#xff0c;如何快速去重&#xff1f;在内网渗透中&#xff0c;通过钓鱼邮件获取到主机权限&#xff0c;但是发现内网拦截了tcp的出网流量&#xff0c;聊一…...

vim临时文件泄露

##解题思路 感觉ctfshow的题目都挺有意思的&#xff0c;大家可以去做做 首先题目提示vim临时文件泄露&#xff0c;一般在vim编辑的时候&#xff0c;会有个swp的中间文件生成&#xff0c;根据这个特性&#xff0c;从而可以猜测&#xff0c;我们可以通过访问一个swp文件路径&am…...

使用Docker将ros1自定义消息通过rosjava_bootstrap生成jar包

文章目录 预准备环境rosjava_bootstrap坏消息好消息 环境安装docker安装rosjava_bootstrap仓库rosjava_center仓库修改rosjava_bootstrap代码拉取docker镜像放置自己的自定义消息 启动docker编译 预准备环境 rosjava_bootstrap rosjava_bootstrap是将自定义的ROS消息生成java…...

本地快速搭建一套AI人脸识别技术研究学习的实验环境

如果你想在本地搭建一套学习和研究AI人脸识别技术的框架&#xff0c;建议使用开源工具和框架进行实验&#xff0c;因为它们通常提供了较为丰富的文档和社区支持&#xff0c;能够帮助你深入理解人脸识别的核心原理。以下是一套可行性强且综合性的方案&#xff0c;涵盖了人脸检测…...

SpringBoot项目连接Oracle视图报错整理

在若依框架中增加连接Oracle视图报错 工具测试连接 通过使用plsql连接数据库测试&#xff0c;连接成功 1. 相关配置内容 连接配置 url: jdbc:oracle:thin:192.168.0.210:1521:HIS username: portal_his password: XXXXXX driver-class-name: oracle.jdbc.driver.OracleDr…...

【我的 PWN 学习手札】House of Husk

House of Husk House of Husk是利用格式化输出函数如printf、vprintf在打印输出时&#xff0c;会解析格式化字符如%x、%lld从而调用不同的格式化打印方法&#xff08;函数&#xff09;。同时C语言还提供了注册自定义格式化字符的方法。注册自定义格式化字符串输出方法&#xf…...

面试-JVM:JVM的组成及作用

JVM包含两个子系统和两个组件&#xff1a; 两个子系统&#xff1a; 类加载子系统&#xff08;ClassLoader Subsystem&#xff09; 作用&#xff1a;根据给定的全限定类名&#xff08;如&#xff1a;java.long.Object&#xff09;来装载class文件至运行时数据区的方法区。 核心…...

Node.js项目启动流程以及各个模块执行顺序详解

Node.js项目启动流程以及各个模块执行顺序的问题。首先&#xff0c;我需要仔细阅读并理解我搜索到的资料&#xff0c;从中提取关键信息&#xff0c;然后综合这些信息组织成一个结构化的回答。 首先&#xff0c;根据我搜索到的资料都详细描述了Node.js的启动流程&#xff0c;涉及…...

obj离线加载(vue+threejs)+apk方式浏览

demo需求&#xff1a;移动端&#xff0c;实现obj本地离线浏览 结合需求&#xff0c;利用&#xff08;vue2threejs173&#xff09;进行obj的加载&#xff0c;然后采用apk方式&#xff08;hbuilderX打包发布&#xff09;移动端浏览&#xff1b; https://github.com/bianbian886/…...

【Python 语法】Python 数据结构

线性结构&#xff08;Linear Structures&#xff09;1. 顺序存储列表&#xff08;List&#xff09;元组&#xff08;Tuple&#xff09;字符串&#xff08;String&#xff09; 2. 线性存储栈&#xff08;Stack&#xff09;队列&#xff08;Queue&#xff09;双端队列&#xff08…...

Flutter - 布局Widget

Flutter的布局主要分为 单子组件 和 多子组件 两大类&#xff1a; Container、Padding、Align这些属于单子组件&#xff0c;而Row、Column、ListView这些则是多子组件。 单子组件 Align组件 Align 是一个用于控制子组件位置的单子布局组件。它通过指定对齐方式&#xff08…...

AD从原理图到PCB超详细教程

AD超详细教程 前言一、建立一个工程模板二、原理图1.设计原理图。2.使用AD自带库和网上开源原理图库3.画原理图库4.编译原理图三、PCB1.确定元器件尺寸大小2.绘制PCB Library①使用元器件向导绘制元件库②原理图与PCB的映射3.绘制PCB①更新PCB②调整元件位置③布线④漏线检查⑤…...

视频级虚拟试衣技术在淘宝的产品化实践

作为一种新的商品表现形态&#xff0c;内容几乎存在于手淘用户动线全流程&#xff0c;例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力&#xff0c;能够从供给端缓解内容生产成本高的问题&#xff0c;通过源源不断的低成本供给…...

Redis安装及其AnotherRedisDesktopManagera安装使用

一、Redis安装 1. 下载Redis安装包 通过网盘分享的文件&#xff1a;Redis 链接: https://pan.baidu.com/s/1elAT8mk3EIoYQQ3WoVVoNg?pwd7yrz 提取码: 7yrz 2. 解压Redis安装包 下载完成后&#xff0c;将Redis安装包解压到一个指定的目录&#xff0c;例如&#xff1a;C:\Re…...

2025系统架构师(一考就过):案例之四:架构复用、架构评估、特定架构(DSSA)、架构开发方法(ABSD)

二、软件架构复用 ◆软件产品线是指一组软件密集型系统&#xff0c;它们共享一个公共的、可管理的特性集&#xff0c;满足某个特定市场或任务的具体需要&#xff0c;是以规定的方式用公共的核心资产集成开发出来的。即围绕核心资产库进行管理复用、集成新的系统。 ◆软件架构…...

软件工程应试复习(考试折磨版)

针对学校软件工程考试&#xff0c;参考教材《软件工程导论&#xff08;第6版&#xff09;》1-8章 学习的艺术&#xff1a;不断地尝试&#xff0c;我一定会找到高效用的方法&#xff0c;让学习变成一门艺术&#xff0c;从应试备考中解救出我的时间同胞们。 好嘞&#xff01;既然…...

Kafka可视化工具EFAK(Kafka-eagle)安装部署

Kafka Eagle是什么&#xff1f; Kafka Eagle是一款用于监控和管理Apache Kafka的开源系统&#xff0c;它提供了完善的管理页面&#xff0c;例如Broker详情、性能指标趋势、Topic集合、消费者信息等。 源代码地址&#xff1a;https://github.com/smartloli/kafka-eagle 前置条件…...

本地部署SenseVoice(包括离线设备操作)

Anaconda3 Anaconda Installers and Packages SenseVoice 魔搭社区 FFmpeg FFmpeg 安装Anaconda3&#xff08;Windows&#xff09; 下载完成后&#xff0c;自定义路径后安装。在开始菜单中出现Anaconda Prompt说明安装成功。 安装Anaconda3&#xff08;Linux&#xff…...

sql server 复制从备份初始化数据

参考 &#xff1a; 从备份初始化订阅&#xff08;事务&#xff09; - SQL Server | Microsoft Learn sql server 复制默认是用快照初始化数据的&#xff0c;也支持从备份初始化数据&#xff0c;参考如上...

MySQL 复合索引

MySQL 复合索引详解 引言 在实际业务场景中&#xff0c;多条件组合查询是最常见的操作之一。例如&#xff0c;根据“用户ID 时间范围”查询订单&#xff0c;或根据“商品分类 价格区间”筛选商品。此时&#xff0c;单列索引可能无法满足性能需求&#xff0c;而**复合索引&am…...

蓝桥杯备赛(C/C++组)

README&#xff1a; 本笔记是自己的备考笔记&#xff0c;按照官网提纲进行复习&#xff01;适合有基础&#xff0c;复习用。 一、总考点 试题考查选手解决实际问题的能力&#xff0c;对于结果填空题&#xff0c;选手可以使用手算、软件、编程等方法解决&#xff0c;对于编程大…...

人类驾驶的人脑两种判断模式(反射和预判)-->自动驾驶两种AI模式

一种模式是直觉模式&#xff0c;判断是基于条件反射&#xff0c;视觉感知 触发到 直接条件反射&#xff08;从经历中沉淀形成的神经信息闭环&#xff09;&#xff0c;类似现在自动驾驶技术的传统AI模式。 另一种模式是物理时空图式推理模式&#xff0c;判断是基于预判预测&…...

C语言机试编程题

编写版本&#xff1a;vc2022 1.求最大/小值 #include<stdio.h> int main(){int a[50],n;int max, min;printf("请输入您要输入几个数");scanf_s("%d", &n);printf("请输入您要比较的%d个数\n",n);for (int i 0; i<n; i) {scanf_…...

SmartMediakit之音视频直播技术的极致体验与广泛应用

引言 在数字化时代&#xff0c;音视频直播技术已经深入到各个行业和领域&#xff0c;成为信息传递和交流的重要手段。视沃科技自2015年成立以来&#xff0c;一直致力于为传统行业提供极致体验的音视频直播技术解决方案&#xff0c;其旗下的大牛直播SDK凭借强大的功能和卓越的性…...

NVIDIA GEFORCE GTX1050显卡如何搭建AI人脸识别技术环境

NVIDIA GEFORCE GTX1050显卡如何搭建AI人脸识别技术环境!实际上,这个显卡虽然是入门级的,但是依然可以满足你的入门学习要求。 你的显卡是 NVIDIA GTX 1050,显存为 2GB,虽然它的性能不如高端显卡(如RTX 3060、3090等),但对于学习和研究 人脸识别技术,尤其是进行基础的…...

华为数通Datacom认证体系详解:从HCIA到HCIE的进阶路径

华为数通Datacom&#xff08;Data Communication&#xff09;课程是华为认证体系中的核心方向之一&#xff0c;聚焦企业网络通信与数据通信技术&#xff0c;适合从事网络规划、部署和运维的人员。 一、数通Datacom课程体系 华为数通Datacom认证分为 三个级别&#xff0c;逐级递…...

【运维】内网服务器借助通过某台可上外网的服务器实现公网访问

背景&#xff1a; 内网服务器无法连接公网,但是办公电脑可以连接内网服务器又可以连接公网。 安装软件 1、frp 2、ccproxy 配置 1、内网服务器 # 内网服务器启动frp服务配置文件参考vi frps.ini# frps.ini [common] bind_port 7000# 备注: bind_port端口可以随意配置。配置完…...

Spring之Bean的生命周期过程中调用的方法

1。这个部分除了6,9都在这了 package com.example.springbootdemo3.lifebeean;import org.springframework.beans.BeansException; import org.springframework.beans.factory.*; import org.springframework.beans.factory.annotation.Value; import org.springframework.con…...

Vue 中动态实现进度条

在 Vue 中动态实现进度条&#xff0c;基本上有两种常见的方法&#xff1a;直接通过 Vue 数据绑定控制样式&#xff0c;或者利用外部库来实现更复杂的功能。我们会深入探讨这两种方式&#xff0c;并且详细说明每种方法的实现步骤、优缺点以及使用场景。 1. 使用 Vue 数据绑定来…...

Qt互斥锁(QMutex)的使用、QMutexLocker的使用

Qt互斥锁【QMutex】的使用、QMutexLocker的使用 Chapter1 Qt互斥锁(QMutex)的使用、QMutexLocker的使用一、QMutexLocker和QMutex实现示例图二、QMutex和QMutexLocker的关系&#xff08;个人理解&#xff09;三、QMutex使用和QMutexLocker使用1.QMutex的使用2.QMutexLocker的使…...

Python开发 Flask框架面试题及参考答案

目录 Flask 的核心设计理念是什么?与 Django 相比有哪些显著差异? 解释 Flask 框架的核心理念及其作为 “微框架” 的优缺点 Flask 的依赖库有哪些?简述 Werkzeug 和 Jinja2 的作用 什么是 WSGI?Flask 如何基于 WSGI 实现服务端与应用的交互 解释 RESTful API 的设计原…...

DeepSeek模型昇腾部署优秀实践

2024年12月26日&#xff0c;DeepSeek-V3横空出世&#xff0c;以其卓越性能备受瞩目。该模型发布即支持昇腾&#xff0c;用户可在昇腾硬件和MindIE推理引擎上实现高效推理&#xff0c;但在实际操作中&#xff0c;部署流程与常见问题困扰着不少开发者。本文将为你详细阐述昇腾 De…...

【cv】vs2022配置opencv

release下配置包含目录和库目录 E:\sdk\sdk_cuda12.3\opencv490\include E:\sdk\sdk_cuda12.3\opencv490\include\opencv2 E:\sdk\sdk_cuda12.3\opencv490\lib release下配置包含链接器输入的依附依赖项 opencv_world490.lib release编译文件夹下需手动复制opencv_world49…...

RabbitMQ系列(五)基本概念之Queue

在 RabbitMQ 中&#xff0c;Queue&#xff08;队列&#xff09; 是存储消息的容器&#xff0c;也是消息传递的核心载体。以下是其核心特性与作用的全方位解析&#xff1a; 一、Queue 的定义与核心作用 消息存储容器 Queue 是 RabbitMQ 中实际存储消息的实体&#xff0c;生产者…...

从二维随机变量到多维随机变量

二维随机变量 设 X X X和 Y Y Y是定义在同一样本空间 Ω \varOmega Ω上的两个随机变量&#xff0c;称由它们组成的向量 ( X , Y ) (X, Y) (X,Y)为二维随机变量&#xff0c;亦称为二维随机向量&#xff0c;其中称 X X X和 Y Y Y是二维随机变量的分量。 采用多个随机变量去描述…...

IP-----动态路由OSPF

这只是IP的其中一块内容&#xff0c;IP还有更多内容可以查看IP专栏&#xff0c;前一章内容为GRE和MGRE &#xff0c;可通过以下路径查看IP-------GRE和MGRE-CSDN博客,欢迎指正 注意&#xff01;&#xff01;&#xff01;本部分内容较多所以分成了两部分在下一章 5.动态路由OS…...

RabbitMQ操作实战

1.RabbitMQ安装 RabbitMQ Windows 安装、配置、使用 - 小白教程-腾讯云开发者社区-腾讯云下载erlang&#xff1a;http://www.erlang.org/downloads/https://cloud.tencent.com/developer/article/2192340 Windows 10安装RabbitMQ及延时消息插件rabbitmq_delayed_message_exch…...

python-leetcode-不同路径

62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; class Solution:def uniquePaths(self, m: int, n: int) -> int:dp [1] * n # 仅保留一行for i in range(1, m):for j in range(1, n):dp[j] dp[j-1]return dp[-1]...

【react】快速上手基础教程

目录 一、React 简介 1.什么是 React 2.React 核心特性 二、环境搭建 1. 创建 React 项目 2.关键配置 三、核心概念 1. JSX 语法 表达式嵌入 样式处理 2. 组件 (Component) 3. 状态 (State) 与属性 (Props) 4. 事件处理 合成事件&#xff08;SyntheticEvent) 5. …...

【愚公系列】《Python网络爬虫从入门到精通》033-DataFrame的数据排序

标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度…...

一周一个Unity小游戏2D反弹球游戏 - 移动的弹板(触屏版)

前言 上文中实现了用鼠标移动控制弹板的移动&#xff0c;本文将实现手指触屏时弹板跟随手指移动的功能&#xff0c;并通过使用Unity自带的Device Simulator Devices Package来验证和模拟触屏设备的使用场景。 安装Device Simulator Devices Package 打开Unity Package Manager&…...