modaoshi51991-CSDN博客

原创华为云L实例云服务器部署前后端分离项目全过程记录

2024-06-25 19:26:24 501

原创 centos8安装mysql报错

请注意，我们将只启用一个 powertools 配置块，其余的配置块均被禁用。今天想下个mysql，配置下数据库，结果给我来这一出，太搞了。然后发现果然powertools 仓库被多次配置了。

2024-06-16 20:06:21 225

原创 WINDOWS系统jdk和maven明明安装了cmd里却无法使用相关命令

今天当了回s b新电脑jdk和maven装是装了，系统变量也配置了，但没配置完，javahome和mavenhome没配置，结果cmdjdk和maven版本都查不到，我真s b啊。

2024-06-15 10:45:45 315

原创小心人工智障

基本上centos命令都懒得自己动脑，直接把需求给gpt然后cv命令就用了事实证明还是需要自己盯一盯的，今天我想给新服务器配置一下环境，下个maven，给了他现在官网最新的版本号，他给我修正好的下载命令，用完我绷不住了。总结：多思考多动脑，不要偷懒什么都交给ai，不小心就被阴了。给我下载了个maven官网下载的html页面。最近gpt用的有点多。

2024-06-11 19:48:16 215

原创华为云服务器CentOS 8解决yum不能更新源问题

起因：作者想在自己的服务器上部署一个前后端分离项目，因此配置环境准备通过yum命令下载maven结果就报了从仓库 ‘appstream’ 下载元数据失败：由于镜像列表中没有 URL，不能准备内部镜像列表。原因是CentOS 已经停止维护的问题。

2024-06-11 19:35:29 778

原创 linux常用命令（未完待续）

ls -l 命令是 Unix 和 Unix-like 操作系统（如 Linux 和 macOS）中的一个命令，用于列出目录中的文件和子目录，并显示详细信息。

2024-06-09 10:29:13 94

原创个人开发网站云服务器选择

个人开发网站，比如说建个博客，我建议是2核2G的ECS或者Flexus L，ECS通用性好一点，Flexus部署起来简单一点。根据你的具体需求，可以选择合适的云服务器类型以获得最佳的性能和成本效益。评估需求：根据应用的计算、内存、存储和带宽需求选择合适的实例类型。性能要求：选择适合性能要求的实例类型，如计算优化型、内存优化型等。提供与物理服务器相同的性能和控制，具有云服务器的弹性和灵活性。扩展性和灵活性：考虑未来扩展需求，选择易于扩展的实例类型。高灵活性，可选择不同的 CPU、内存、存储和带宽配置。

2024-06-09 10:27:40 339

原创阿里云ECS服务器部署javaweb项目实操

在阿里云ECS实例上部署Java Web项目涉及几个主要步骤：创建和配置ECS实例、安装必要的软件（JDK、Web服务器、数据库等）、部署Java Web应用程序以及配置防火墙和安全组。通过以上步骤，你应该能够在阿里云ECS实例上成功部署并运行你的Java Web项目。访问Tomcat默认页面：在浏览器中访问http://your-ecs-ip:8080，你应该能看到Tomcat的默认页面。你的Java Web应用程序现在应该在http://your-ecs-ip:8080/your-app可访问。

2024-06-08 16:28:52 504 2

原创华为云耀云服务器L实例规则配置教程（亲自实操经验）

我刚买了这个最基础的36￥的L实例的云服务器，这个实例是自带公网ip的，不需要额外购买。我准备先配置好，能够通过公网ip访问，以便之后上传javaweb项目可以直接访问，不过中途遇到了点问题，但是已解决，记录一下方便以后操作，如果能帮到和我一样的纯小白就更好了。我选的系统是CentOS7/8，之后的命令也是centos的弹性公网ip购买后会自动绑定，不用瞎操作接下来是购买后配置的步骤。

2024-06-08 16:28:12 1165

原创【前端每日基础】day37——为什么 Vue 中定义变量的地方需要使用 data 函数并 return 出去？

在 Vue 中，data 需要是一个函数而不是一个对象，这是为了确保每个组件实例有一个独立的数据对象。这样每个组件实例都有自己的独立的数据副本，避免不同实例之间的数据共享和相互影响。如果 data 是一个对象，那么所有的组件实例将共享这个对象，这会导致数据状态混乱。

2024-06-07 20:36:34 112

原创【前端每日基础】day40——计算属性和侦听器

用于监听一个或多个数据属性的变化，并执行副作用操作。适合处理异步操作或监控数据变化执行特定逻辑的场景。结果会被缓存，只有依赖发生变化时才会重新计算。适合处理复杂逻辑并且依赖多种数据源的场景。不会缓存结果，每次数据变化都会执行。用于基于依赖数据计算新的属性值。

2024-06-07 20:36:23 114

原创【前端每日基础】day38——v-for 的 diff 算法的原理

键值（key）优化：通过为每个节点设置唯一的 key，Vue 可以更高效地跟踪每个节点的变化，直接复用、移动、删除或添加节点，而不是逐个节点比较。比较旧的开始节点和新的结束节点：如果相同，说明新节点移动到了列表的末尾，需要进行 DOM 操作将旧节点移动到末尾，并移动指针。比较旧的结束节点和新的开始节点：如果相同，说明新节点移动到了列表的开头，需要进行 DOM 操作将旧节点移动到开头，并移动指针。比较新旧节点列表的开始节点：如果相同，则更新节点并移动 oldStartIdx 和 newStartIdx。

2024-06-06 19:37:36 432

原创【前端每日基础】day39——v-if 和 v-for优先级

在这个例子中，v-for 指令会首先执行，将 items 数组中的每个项目都迭代一次，然后对每个项目进行 v-if 判断。为了优化性能，可以在 computed 属性中预先过滤数据，而不是在模板中使用 v-for 和 v-if 同时存在的组合。通过理解 v-if 和 v-for 的优先级，以及使用优化的方法，可以写出更高效的 Vue.js 代码。v-for 的优先级高于 v-if，即 Vue 会先处理 v-for，然后在每个迭代中应用 v-if。v-if 和 v-for 的优先级。

2024-06-05 20:40:26 256

原创【前端每日基础】day44——vue2和vue3的区别

在 Vue 3 中，可以使用 Composition API，将相关的逻辑组合在一起，使代码更易于复用和维护。Vue 3 引入了 Teleport 组件，允许开发者将某个组件的 DOM 树渲染到当前组件树之外的任意位置。在 Vue 2 中，组件的逻辑通常是通过 data、methods、computed 等选项来定义的。通过这些代码实例，您可以更清晰地看到 Vue 2 和 Vue 3 之间的一些主要区别和改进。Vue 3 使用 Proxy 实现响应性系统，能够检测到对象属性的添加和删除。

2024-06-05 20:37:58 476

原创【前端每日基础】day43——同步异步

在上述例子中，taskA 和 taskB 都是异步操作，它们不会阻塞 taskC。因此，taskC 会立即执行并输出结果，而 taskA 和 taskB 会在各自的定时器完成后输出结果。同步指的是程序中的操作按顺序执行，每个操作必须等待前一个操作完成后才能开始。在上述例子中，taskB 只有在 taskA 完成后才会执行，taskC 只有在 taskB 完成后才会执行。假设有三个任务 A、B 和 C，它们是异步执行的，任务 B 和任务 C 可以在任务 A 完成之前启动并执行。同步和异步在实际编程中的应用。

2024-06-04 22:16:48 258

原创【前端每日基础】day36——vue组件的通信方式

在Vue.js中，组件通信是一个重要的概念，它允许组件之间进行数据传递和事件处理。Vue.js提供了多种方式来实现组件之间的通信，适用于不同的场景和需求。Vue.js提供了多种组件通信的方式，从简单的父子组件通信到复杂的跨级组件通信，每种方式都有其适用的场景。它集中式存储和管理应用的所有组件的状态，并以一种规则化的方式保证状态以一种可预测的方式发生变化。子组件可以通过$emit方法向父组件发送事件，父组件通过监听这些事件来接收数据。事件总线是一个中央事件处理器，可以用来在任意组件之间传递事件。

2024-06-04 22:16:12 2019

原创【前端每日基础】day42——关于 Vuex 共有几个属性，哪里可以书写同步任务，哪里可以书写异步任务？如果在 Vuex 中调用请求，在 Vuex 中会经历的流程大致描述一下

通过这种流程，Vuex 实现了从组件触发异步操作，到状态更新，再到组件视图更新的完整数据流动过程。异步任务：在 actions 中书写，因为 actions 可以包含异步操作，并且可以在异步操作完成后再提交 mutations 以改变状态。action 接受 context 作为参数（可以解构出 commit 和 state），在 action 中执行异步操作，如 API 请求。组件通过计算属性（或直接访问 state）监听 state 的变化，当 state 更新时，Vue 的响应式系统会自动更新视图。

2024-06-03 21:26:17 540

原创【前端每日基础】day41——Vue 的生命周期

beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。destroyed：实例销毁后调用，所有的事件监听器被移除，所有的子实例被销毁。created：实例创建完成，数据观测和事件配置已经完成，但未挂载 DOM。beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。beforeCreate：实例初始化之后，数据观测和事件配置之前。beforeUpdate：响应式数据更新之前被调用。mounted：实例挂载完成，DOM 渲染完成。

2024-06-03 20:59:54 103

原创【前端每日基础】day35——HTML5离线存储

LocalStorage和SessionStorage适用于简单的键值对存储，IndexedDB适用于复杂的数据存储和查询，Service Workers则提供了强大的缓存和后台处理能力。HTML5引入了一些新的特性和API来增强Web应用的功能，其中之一就是离线存储。Web SQL是一种基于SQL的数据库API，最初由WebKit项目提出，但目前已被废弃，不推荐在新项目中使用。概述：SessionStorage用于临时存储数据，数据仅在当前会话存在，关闭页面或浏览器后数据消失。在HTML中引用缓存清单。

2024-06-02 21:38:16 518

原创【前端每日基础】day34——HTTP和HTTPS

HTTPS是HTTP的安全版本，通过SSL/TLS协议对数据进行加密。HTTP是无状态的，这意味着每个请求都是独立的，与之前的请求没有关系。性能：HTTPS的握手和加密过程会增加一些开销，通常比HTTP稍慢，但现代技术优化使得差异较小。加密：通过SSL/TLS协议对传输的数据进行加密，防止数据在传输过程中被窃听。无状态：每个请求与前一个请求是独立的，服务器不会记住之前的请求状态。GET：请求指定资源的信息，只获取数据，不会修改服务器上的资源。HEAD：与GET类似，但只请求资源的头部信息，不返回实际数据。

2024-06-02 20:40:48 586

原创运维开发详解

运维开发（DevOps）是开发（Development）和运维（Operations）的结合，旨在通过自动化和协作提高软件开发和交付的效率、速度和可靠性。DevOps强调文化、实践和工具的融合，以实现持续集成（CI）、持续交付（CD）和持续监控。Stack Overflow、Reddit的r/devops、DevOps相关的Slack和Discord社区。通过系统学习和实践，逐步掌握DevOps的核心概念、工具和实践，可以显著提高软件开发和运维的效率和质量。

2024-06-01 22:28:50 752

原创网络运维的重要性

通过有效的网络运维，企业可以提高网络性能和可靠性，增强安全性，支持业务连续性和发展，降低运营成本，提高用户满意度。它涉及网络的规划、部署、监控、维护和优化。随着业务的发展，网络运维需要规划和实施网络扩展，确保网络能够支持不断增长的用户和流量需求。网络运维通过监控网络流量和性能指标，识别和消除瓶颈，优化网络性能，确保数据传输的高效性。网络运维确保网络的可靠性和稳定性，为业务连续性提供坚实保障，支持企业的正常运营和发展。通过优化网络性能和稳定性，网络运维确保用户能够获得良好的网络体验，提高用户满意度。

2024-06-01 22:25:31 415

原创什么是容器

容器镜像是一个静态的文件，包含了容器的文件系统和运行时环境。Kubernetes是一个用于容器编排的开源平台，能够自动化容器的部署、管理、扩展和网络配置。Docker是目前最流行的容器化平台，提供了构建、运行和管理容器的工具。容器技术在CI/CD流程中被广泛使用，通过容器化的构建、测试和部署流程，提高了交付速度和质量。容器镜像可以在任何支持容器运行时（如Docker）的系统上运行，实现跨平台的应用迁移和部署。通过学习和实践，可以深入理解容器技术的原理和应用，提升在运维和开发中的效率和灵活性。

2024-06-01 22:23:22 562

原创【前端每日基础】day33——响应式布局

响应式布局是一种网页设计的方法，它可以使网站在不同的设备上（如桌面电脑、平板电脑、手机等）以及不同的屏幕尺寸上呈现出最佳的显示效果。响应式布局是一种重要的网页设计方法，它使得网站能够适应不同的设备和屏幕尺寸，并提供一致的用户体验。通过设定不同的断点（breakpoint），可以在不同的屏幕尺寸上应用不同的样式，从而实现布局的变化。使用 CSS3 中的媒体查询，根据不同的媒体特性（如屏幕宽度、高度、方向等）来应用不同的样式。这可以使得网页在不同屏幕尺寸上展示不同的内容或功能，以提供更好的用户体验。

2024-06-01 15:17:42 376

原创【前端每日基础】day32——节流和防抖

节流（Throttle）和防抖（Debounce）是两个在前端开发中常用的技术，它们用于控制某些函数的执行频率，以提升性能和用户体验。也就是说，如果在这段时间内再次调用该函数，则重新计时，只有在这段时间结束后，函数才会被执行。通过合理使用节流和防抖技术，可以有效提升前端应用的性能和用户体验，避免不必要的资源浪费和重复执行。防抖适用于那些在一段时间内会频繁触发的事件，但又希望最终只执行一次的场景。防抖：在一定时间内不再触发，若在这段时间内再次触发，则重新计时。防抖适用于频繁触发但只需执行一次的场景。

2024-06-01 09:43:19 488

原创【前端每日基础】day31——uni-app

掌握其基本概念、项目结构、常用组件和 API、生命周期以及常见问题和解决方案，可以帮助你快速上手并开发出高质量的应用。在实际开发中，熟练使用 HBuilderX 和 Vue.js，将大大提高你的开发效率。使用表单组件（如、等），并通过 @submit 事件监听表单提交，使用 uni.request 发送数据到后台。在 components 目录下创建自定义组件文件，并在页面中引入和注册组件。onLaunch：应用初始化时触发，全局只触发一次。onShow：页面显示时触发。onHide：页面隐藏时触发。

2024-05-30 09:42:45 1403

原创【前端每日基础】day27——小程序开发

设备API：wx.getSystemInfo、wx.getNetworkType、wx.scanCode。数据缓存API：wx.setStorage、wx.getStorage、wx.clearStorage。界面API：wx.showToast、wx.showLoading、wx.navigateTo。网络API：wx.request、wx.uploadFile、wx.downloadFile。使用 wx.setStorage 和 wx.getStorage 对数据进行本地存储和读取。

2024-05-29 21:42:28 1182 1

原创【前端每日基础】day28——async/await

await 关键字只能在 async 函数中使用。它会暂停 async 函数的执行，等待一个 Promise 对象的解决（或拒绝），然后继续执行函数，并返回 Promise 解决的值。async/await 是ES2017（ES8）引入的用于处理异步操作的语法糖，基于Promise实现。await 只能在 async 函数中使用：在 async 函数之外使用 await 会导致语法错误。避免阻塞：虽然 async/await 使得代码看起来像同步代码，但它仍然是异步的，不会阻塞事件循环。

2024-05-29 21:39:48 501

原创【前端每日基础】day26——Promise

Promise.all 方法接收一个Promise数组，当所有Promise都解决时，返回一个已解决的Promise；如果有一个Promise被拒绝，则返回一个已拒绝的Promise。可以使用 then 方法来处理已解决状态的Promise结果，使用 catch 方法来处理已拒绝状态的Promise结果。Promise.reject 方法返回一个已拒绝的Promise对象。Promise.race 方法接收一个Promise数组，当第一个Promise解决或拒绝时，返回一个新的Promise。

2024-05-28 19:44:57 622

原创【前端每日基础】day25——事件处理

这个示例展示了如何使用DOM操作和事件处理来创建一个简单的交互式网页，用户可以点击按钮来改变标题的颜色或添加新段落，并且点击列表项时会弹出一个提示框。鼠标事件：click、dblclick、mouseover、mouseout、mousemove、mousedown、mouseup。事件委托是一种将事件监听器添加到父元素上，通过检查事件目标来处理子元素事件的方法。表单事件：submit、change、input、focus、blur。窗口事件：load、resize、scroll、unload。

2024-05-28 19:23:51 426

原创【前端每日基础】day24——DOM操作

document.getElementsByClassName(className): 获取具有指定类名的所有元素，返回HTMLCollection。document.getElementsByTagName(tagName): 获取具有指定标签名的所有元素，返回HTMLCollection。document.querySelectorAll(selector): 获取匹配CSS选择器的所有元素，返回NodeList。要对网页中的元素进行操作，首先需要获取这些元素。

2024-05-27 21:18:18 468

原创【前端每日基础】day23——箭头函数

箭头函数是ES6（ECMAScript 2015）引入的一种新的函数表达式语法。相比传统函数，箭头函数有简洁的语法，并且不绑定自己的this、arguments、super或new.target。箭头函数最显著的特点之一是它不会创建自己的this上下文，而是从其外层上下文中继承this。简洁的函数表达式：当需要简洁的函数表达式时，箭头函数提供了更为简便的语法。保持this的上下文：在需要访问外层this的情况下，箭头函数非常适合。简化回调函数：箭头函数在编写简短的回调函数时特别有用。

2024-05-27 21:09:18 345

原创【前端每日基础】day22——js控制结构

in 循环中，你可以使用任何有效的变量名称来代替 key，循环的行为和效果不会改变。这个变量每次迭代时都会被赋值为对象的一个属性名，你可以通过 obj[变量名] 访问对应的属性值。至少执行一次代码块，然后在条件为真时继续执行。适用于至少需要执行一次的情况。当条件为真时重复执行代码块，适用于循环次数不确定但条件明确的情况。下面是一个示例，结合使用 if 语句和循环语句。跳过当前循环的剩余部分，继续下一次循环。跳出循环或 switch 语句。跳转语句用于控制代码的跳转。用于遍历对象的属性。

2024-05-26 16:01:37 276

原创【前端每日基础】day21——js基础运算符

JavaScript 提供了丰富的运算符，用于执行各种操作，如算术运算、比较、逻辑运算等。以下是 JavaScript 中的主要运算符及其用法。其实运算符大体上各语言都大差不差，顶多是部分小细节会有不同，简单看看就好了。

2024-05-26 16:01:25 766

原创【前端每日基础】day30

嵌入其他网站内容： < iframe> 允许开发者将其他网站的内容嵌入到自己的页面中，这在一些应用场景中非常有用，比如集成第三方服务或显示外部内容。影响浏览器历史和书签：如果用户在 < iframe> 中浏览其他页面，并且在其中进行了导航或标记了书签，这可能会导致用户的浏览器历史和书签混乱。跨域通信： < iframe> 可以用于实现不同域之间的通信。可访问性问题： < iframe> 中的内容对于一些屏幕阅读器和搜索引擎可能不可见，这可能会影响网站的可访问性和 SEO。iframe的优点和缺点？

2024-05-25 09:54:42 233

原创【前端每日基础】day19——回调函数

虽然回调函数在处理异步操作时非常方便，但当多个异步操作依赖于上一个操作的结果时，会产生回调地狱（Callback Hell）的问题，导致代码难以维护和理解。在这个示例中，asyncFunction1 的结果作为参数传递给 asyncFunction2，asyncFunction2 的结果又作为参数传递给 asyncFunction3，依此类推，形成了多层嵌套的回调函数。回调函数是一种常见的编程概念，它是指在函数执行完毕后，将另一个函数作为参数传递给它，以便在特定条件满足时调用这个函数。

2024-05-25 09:53:11 550

原创【前端每日基础】day18——css清除浮动

在CSS中，浮动（float）是一种常见的布局技术，但它常常导致父容器的高度无法自动扩展以包含浮动的子元素。通过给父容器设置 overflow: hidden 或 overflow: auto，可以强制其包含浮动的子元素。在使用CSS Flexbox布局时，父容器会自动包含浮动子元素，因此不需要额外清除浮动。这是更现代的clearfix实现，通过添加伪元素来清除浮动。然后在需要清除浮动的父容器上应用 clearfix 类。Flexbox可以简化布局，减少对清除浮动的需求。同样地，在父容器上应用该样式。

2024-05-24 18:01:44 495

空空如也

空空如也