VUE3快速入门(7)——监视

bnbplayer1个月前 (05-16)201
VUE3快速入门(7)——监视
本文讲述了监视基础数据类、对象数据类的方法。 1. 什么是监视监视是指,当被监视的对象发生变化时,执行某个逻辑,类似于控件的消息事件。从被监视的数据类型分类,可分为监视ref创建的普通类型、ref创建的对象类型、reactive创建的对象类型三类;从被监视数据的完整与否又可分为监视整个对象和监视部分属性。 2. ref类型的监视2.1 基础类型import { ref, watch } from 'vue'//引入watch let input_content = ref(0);//创建一个基础数据类型 //使用watch方法实现监视 watch(input_content, (newVal, oldVal)=>{ console.log("值:", newVal, oldVal) }); 关于watch方法的参数: 参数1: 需要时监视的变量;参数2: 回调函数,其中有两个传入参数,分别为新值和的值;也可以只有一个参数,即为新值;参数3: 配置对象,用于指定一些其他功能,如立即监视、深度监视等。 2.2 监视整个对象监视由ref定义的对象类型,其实是在监控对象类型的地址,因此部分字段的更新不会触发监视,需要手动开启深度监视。在这种情况下,任何一个字段的变化都会触发监视。 例子:监控员工年龄变化,当到达35岁时让其卷铺盖走人。HTML部分: <button @click="add()">+1</button> JS部分: import { ref, watch } from 'vue'//引入watch let worker = ref({ name: "张三", age: 32 }); function add(): any { worker.value.age += 1; } const stop = watch(worker, (newVal, oldVal)=>{ console.log("值:", newVal, oldVal) if(newVal.age > 35) { alert("卷铺盖走人"); stop();//停止监视 } }, {deep: true});//第三个参数开启深度监视 提示: 上述代码中,watch返回了一个函数,调用该函数时会停止当前的监视;watch的第三个参数开启了深度监视选项,这样仅变化对象成员时,也会触发监视调用;控制台打印的newVal, oldVal值均相同,因为对象的地址没有发生变化。 2.3 监视对象的属性(部分监视)很多时候,我们仅需要关注对象的某几个字段是否发生了变化,即部分监视。对象的部分属性又可能是基础类型,也可能是一个嵌套的对象。因此部分监视又分为基础数据类型和对象数据类型两种。 2.3.1 属性为基础数据类型需要将被监视的数据包装为getter函数 import { ref, watch } from 'vue'//引入watch let worker = ref({ name: "张三", age: 32 }); function add(): any { worker.value.age += 1; } const stop = watch(()=>{ return worker.value.age }, (newVal, oldVal)=>{ console.log("值:", newVal, oldVal) if(newVal > 35) { alert("卷铺盖走人"); stop();//停止监视 } }); 注意箭头函数也可以简写成: ()=> worker.value.age 2.3.2 属性为对象类型即嵌套对象,修改worker代码,增加银行存款账户的嵌套对象类属性: let worker = ref({ name: "张三", age: 32, accounts: { icbc: 2000, bc: 1200 } }); 增加存款和清零的功能: <button @click="icbc()">存入工行</button> <button @click="bc()">存入中行</button> <button @click="clear()">清零存款</button> function icbc() { //改变accounts的一个属性 worker.value.accounts.icbc += 1000; } function bc() { //改变accounts的一个属性 worker.value.accounts.bc += 1000; } function clear() { //改变整个accounts worker.value.accounts = {bc: 0, icbc: 0}; } 仅监视存款清零: watch(() => worker.value.accounts, (newVal, oldVal)=>{ console.log("账户变动:", newVal, oldVal) }); 监视存款清零和增加存款: watch(() => worker.value.accounts, (newVal, oldVal)=>{ console.log("存款清零:", newVal, oldVal) },{deep: true});//开启了深度监视 提示: 与整个对象的监视不同,部分监视即使该部分是对象,也必须写成getter函数形式,在这种情况下监视的是部分对象的地址;监视嵌套对象的内部属性,开启深度监视即可;最佳编码方式是,由ref创建的对象,只要是部分监视,则一律写成getter函数。 3. reactive类型的监视将worker修改为由reactive定义的响应式对象,特别注意整体修改accounts属性的写法: function clear() { Object.assign(worker.accounts, {bc: 0, icbc: 0}); } 监视accounts属性: watch(worker.accounts, (newVal, oldVal)=>{ console.log("账户变动:", newVal, oldVal) }); 当accou...

VUE3快速入门(6)——计算属性

bnbplayer2个月前 (04-23)563
VUE3快速入门(6)——计算属性
本节讲述了Vue3的计算属性的用法。 1. 什么是计算属性计算属性用于对一些需要展示到模板上的数据进行处理,虽然用函数也能实现,但计算属性会自动缓存,只有值发生变化时才重新计算,加快运行效率。 2. 基本使用方法本节实现一个功能,将输入的电话号码隐去中间四位。 2.1 引用computedimport { computed } from 'vue'; 2.2 使用computed方法定义一个计算属性let encoded_tel = computed(() => { let part_1 = worker.value.tel.substring(0, 3); let part_2 = worker.value.tel.slice(-4); return part_1 + "****" + part_2; }); 其中worker是由ref定义的响应式数据,通过输入框修改电话号码并实时显示的方法参考上一节:VUE3快速入门(5)——响应式数据。 2.3 在模板中使用将上一节的模板变量改为: <h2>电话号码: {{ encoded_tel }}</h2> 这样,当输入电话号码并点击“修改”后,号码将隐去中间四位。 3. 计算属性的读写性如果要通过代码修改计算属性的值,则: function changeComputed() { encoded_tel.value = "..."; } 3.1 只读第二节定义计算属性的方式属于只读属性,采用上述方法修改计算属性的值会报错。 3.2 可读可写要修改计算属性的值,必须定义getter和setter: let encoded_tel = computed(() => { get(){ let part_1 = worker.value.tel.substring(0, 3); let part_2 = worker.value.tel.slice(-4); return part_1 + "****" + part_2; }, set(val){ //针对val的逻辑处理代码 } }); 4. 总结 计算属性与函数类似,但计算属性有缓存,如多次调用其值不变,则仅计算一次;计算属性如果要通过代码修改值,则必须定义getter和setter;对计算属性的value字段赋值,仅仅触发setter的调用,实际上并没有修改任何值,还需要在setter里面编写逻辑处理代码!...

VUE3快速入门(5)——响应式数据

bnbplayer2个月前 (04-15)1004
VUE3快速入门(5)——响应式数据
本节讲述了如何用ref和reactive实现基本数据类型和对象数据类型的响应式更新,同时讲述了在何种情况下会失去响应式功能以及对应的解决办法。 1. 什么是响应式响应式是指当变量的值变化后,<template>的内容同步自动更新。Vue2的选项式API中的data默认为响应式,但Vue3的组合式API为非响应式,即无法自动更新。因此需要用ref和reactive进行处理。 2.基本数据类型的响应式处理基本数据类型是指字符串和数字,这种类型只能用ref处理。 2.1 表单输入的响应式更新本节实现HTML标签实时显示表单内容的功能。 在上一节的基础上增加一个HTML元素,用来实时显示表单的输入值: <h2>input框的内容: {{ input_content }}</h2> <input v-model="input_content"/> 修改<script>代码: import { ref } from 'vue' let input_content = ref(''); 对比上一节代码(2.2小节),input_content此时通过ref进行了定义。执行代码,当在input框内输入数据时,<h2>标签的内容将同步更新,此时的input_content为响应式数据。 2.2 代码操作的响应式更新本节实现按钮单击实时更改HTML标签内容的功能。 新增按钮并绑定事件: <button @click="add()">+1</button> 事件处理方法: function add() { input_content.value += 1;//注意:必须通过“ref的实例名.value.字段”的形式更新 } 单击按钮,页面上的数字加1,即通过代码实现了页面的更新。 3. 对象数据类型的响应式处理对象数据类的响应式处理既可以用ref又可以用reactive。 本节将实现通过输入框更改对象的一个字段,并实时显示的功能。<template>部分代码如下: <h2>电话号码: {{ worker.tel }}</h2><!--注意此处对象实例.字段的写法,不受ref或reactive的影响--> <input v-model="tel"/> <button @click="changeTel(tel)">修改电话</button> 3.1 通过ref处理定义表单绑定的变量、事件方法,并通过ref定义一个对象: import { ref } from 'vue' let worker = ref({ name: "Jesse", age: 12, mail: "3898*******@qq.com", tel: "136****615" }); let tel = ""; function changeTel(content: any): any { worker.value.tel = content;//同样通过“ref的实例名.value.字段”的形式更新 } 输入新的号码并点击按钮,将更新worker对象的tel字段,且在页面同步更新。 3.2 通过reactive处理修改代码如下: import { reactive } from 'vue' let worker = reactive({ name: "Jesse", age: 12, mail: "3898*******@qq.com", tel: "136****615" }); let tel = ""; function changeTel(content: any): any { worker.tel = content;//注意此处与ref的区别,不再需要.value } 4. 丢失响应功能的情况当整体替换对象或解构对象时,可能会丢失响应式功能。 4.1 对象类型的字段批量更新很多时候希望将服务器返回的数据直接赋值给对象,从而更新多个的字段。在JS/TS里,服务器返回的数据被视为一个新的对象,如果采用直接赋值的方式会失去响应式功能。 //之前定义的对象 let worker = reactive({ name: "Jesse", age: 12, mail: "3898*******@qq.com", tel: "136****615" }); function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON,转换成对象 /* 假设ajax_obj对象如下: { name: "Alice", age: 14, mail: "1234*******@qq.com", tel: "132****777" } */ worker = reactive(ajax_obj)//尝试通过这样的方式更新多个字段的内容将会失去响应式功能。 } 4.1.1 逐字段赋值function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON,转换成对象 worker.name = ajax_obj.name; wroker.age = ajax_obj.age; //... } 这种方法适合字段较少的情况。 4.1.2 使用Object.assginObject.assgin的主要功能是对象合并,第一个参数是原始对象,后面的参数是要合并的多个对象。但使用Object.assgin在某些情况可能不适用。 function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON,转换成对象 worker = Object.assgin(worker, ajax_obj); } 4.1.3 使用ref将原始对象的定义改为ref即可。 //之前定义的对象 let worker = ref({ name: "Jesse", //... }); function getPost(content: any): any { let ajax_obj = JSON.parse(content);//解码JSON,转换...

VUE3快速入门(4)——Setup语法糖与数据绑定

bnbplayer2个月前 (04-13)1034
VUE3快速入门(4)——Setup语法糖与数据绑定
本文讲述了如何使用Setup语法糖简化代码,以及如何获取表单数据。在本系列后续的文章中,均使用setup语法糖写法。 1. Setup语法糖使用Setup导出数据或者方法必须使用return,当代码过多时就变得复杂。使用Setup语法糖无需显式声明要导出的内容,也不必再写setup方法名。 1.1 声明组件导出首先将<script>代码中的setup方法部分全部移除,仅留下组件导出声明: <script lang="ts"> export default { name: "MyComp", } 1.2 创建setup语法糖其次,新增一个<script>片段,如下: <script lang="ts" setup> </script> 注意: lang属性对应的语言必须与上一个<script>的代码语言一致,不得JS、TS混用;setup语法糖所在的<script>必须增加一个setup属性 1.3 在setup语法糖标签内写代码最后将原本setup方法里面的内容除了return外全部放入后一个<script>标签内,完整代码如下: <script lang="ts" setup> let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; function add(a: number, b: number): number{ return a + b; } function show(content: any): any { alert(content); } //无需return {author, mail, ...} </script> 这样,凡是在setup语法糖内定义的数据和方法全部自动导出,不用再return。 2. 数据绑定数据绑定是指获取表单中填写的值。 2.1 创建一个表单在合适位置增加一个表单标签: <input name=””/> 2.2 创建变量并绑定表单的值创建一个变量,用于接收表单的值: let input_content = "" 在表单标签内使用v-model指令将表单值与该变量绑定: <input name="" v-model="input_content"/> 2.3 测试修改button的click事件,单击时弹出表单的值: <button @click="show(input_content)">单击</button> 其中show方法代码: function show(content: any): any { alert(content); } 3. 总结 使用setup语法糖就无需再显式声明导出的内容,但要求两个<script>片段语言类型一致;v-model指令用于将表单值与变量绑定;v-model指令仅能用于表单相关的标签。...

VUE3快速入门(3)——方法与事件

bnbplayer4个月前 (02-08)744
VUE3快速入门(3)——方法与事件
本文讲述了如何在自定义组件中定义并调用方法,以及绑定DOM事件响应的方法。 1. 自定义方法1.1 定义一个方法在<script>标签内的setup方法内增加一个add方法,该方法传入两个参数,用于求和: function add(a: number, b: number): number{ return a + b; } 同时,将add方法暴露(返回): return {author, mail, tel, add};//author, mail, tel是上一节定义的变量 1.2 调用方法在<template>标签内,适当位置增加一个标签,用于调用方法: <h2>调用add方法: {{add(1,1)}}</h2> 1.3 查看结果编译、构建成功后,浏览器新出现“调用add方法: 2”的字样,说明求和方法被成功调用。 2. 绑定事件前端开发少不了处理DOM事件,如单击、获得焦点等。本节将讲述如何绑定常见的web标签事件。 2.1 绑定一个事件在<template>标签内,适当位置增加一个按钮,绑定click方法: <button @click="show(tel)">点我</button> 单击会调用test函数,并传入tel的值,该值在上一节已经定义: let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; 2.2 完善事件处理方法在<script>标签内setup方法内,再增加show方法,该方法具有一个传输参数: function show(content: any): any { alert(content); } 同时记得暴露该方法: return {author, mail, tel, add, show};//author, mail, tel是上一节定义的变量 2.3 执行编译、构建成功后,浏览器会出现一个按钮,点击按钮,将弹出对话框,其内容是tel变量的内容。 3. 总结 方法与变量一样需要写在methods属性内。@click=”<方法名>”其实是v-on:click=”<方法名>”的简写。除了click外,还有submit、scroll的其他的DOM事件均可采用此方法进行事件处理。 4. 拓展学习与思考 除了v-on指令外,学习v-if、v-show、v-for的用法。尝试处理submit、onfocus等其他常见DOM事件。...

VUE3快速入门(2)——自定义组件

bnbplayer4个月前 (02-08)814
VUE3快速入门(2)——自定义组件
本文介绍了VUE组件的基本使用,包括定义组件、导出组件、引入组件、使用组件的基本过程,尤其是特别提示了组合式API与选项式API交互的问题。 1. 准备工作 用VSCode打开上节课“VUE3快速入门(1)——搭建开发环境”的文件夹。在VSCode选择“终端”、“新建终端”,准备用命令行执行npm相关指令。打开/src/app.vue文件,删除掉顶部代码 import TheWelcome from ‘./components/TheWelcome.vue’ 同时删除约17行的<TheWelcome />的标签,该步骤是为了删除对TheWelcome组件的引用,稍后将替换成自己编写的组件。 2. 新建一个组件2.1 新建文件在/src/components目录下新建一个文件:MyComp.vue 2.2 添加组件模板代码模板代码用于描述模板架构,由H5标签组成。模板代码写在<template>标签内,Vue2版本要求必须被<div>标签包裹,Vue3则无此要求。 <template> <h1>门禁管理系统</h1> <h2>作者:{{ author }},联系邮箱:{{ mail }},电话:{{ tel }}</h2> </template> 2.2 添加组件控制代码控制代码用于描述控制逻辑,实现相关功能。整体结构是一个被导出的类。在Vue3中,内部数据、方法、计算属性、传入属性等均写在setup方法内,目前先使用内部数据。 <script lang="ts"> export default { //组件名称 name: "MyComp", //组合式API setup() { let author = "Jesse"; let mail = "3898xxxx@qq.com"; let tel = "136****615"; //返回外部需要的数据 return {author, mail, tel}; //上述代码返回的是一个键值对,当key=value时,可省略其中一个。否则需要写成key: value的形式,则外部需要通过key获取值:{{key}} } } </script> 2.3 添加组件样式代码控制代码用于描述组件外观,如字号、字体等,由css代码组成。样式代码写在<style>标签内。 <style scoped> font-size: 16px; </style> style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,通过该属性,可以使得组件之间的样式不互相污染。 3. 调用该组件3.1 引入组件在App.vue中的<script>标签内,增加语句: import MyComp from './components/MyComp.vue'; 3.2 使用组件在App.vue的<template>标签内,像使用H5标签那样,直接在期望展示的位置或者直接在刚才删掉<TheWelcome>处写上 <MyComp></MyComp> 即可。或简写为 <MyComp/> 4. 执行npm能热更新。当编译、构建完成无误后,页面将出现“作者:Jesse,联系邮箱:3898xxxx@qq.com,电话:136****615”的字样 5. 总结 组件分为<template>、<script>、<style>三个部分。<template>定义组件的骨架,<script>定义组件的业务逻辑,<style>定义样式。Vue2下<template>内的所有标签必须被<div>标签包裹,Vue3无此要求。export default用于导出该组件以便复用,其本质上是导出了一个类。如果做过C#、MFC的传统桌面端的开发,可以将组件理解为控件。Vue3下,外部需要的数据(包括内部数据、计算属性、方法等)均写在setup内,且通过return返回。使用组件需要先import引入,最后像使用H5标签一样调用该组件。建议所有组件样式都加上scoped属性,避免污染其他组件样式。 6. 特别提示 setup方法内不允许用this关键字。Vue2的data、methods等可以用this,且可以通过该关键字获取setup里的内容,但setup不能反过来获取data、methods等里面的内容。不要Vue2/3混用,即Vue3不要再用选项式API。 7. 拓展学习与思考 使用组件有什么好处?从创建组件到使用组件的步骤是什么样的?选项式API与组合式API有什么区别?...

VUE3快速入门(1)——搭建开发环境

bnbplayer4个月前 (02-08)848
VUE3快速入门(1)——搭建开发环境
教程其实是由站长自己的学习笔记整理而来。本系列教程用于VUE3的快速入门,仅讲解最基础的知识,旨在帮助大家搭建VUE技术的大致框架,从而在做实际项目的过程中快速定位问题,找到解决方向。教程直接从vite等工具的使用开始,以VUE最强大的组件为切入点,逐渐添加数据绑定、DOM事件处理、路由等内容,不断完善功能,让读者尽快上手小项目,缩短学习周期。 每篇教程后面留有拓展学习与思考小节,读者可通过该小节提出的问题或要求进行拓展学习,由点及面,丰富学习内容,并培养技术迁移和举一反三的能力。 特别地,本系列教程适合做过前端开发但技术较陈旧(jQuery、HTML4、前后端无分离)的读者学习,不会讲解HTML标签、CSS、JS/ES6语法等内容,因此不适合对前端开发一无所知的小白。学习本系列教程需要具备如下知识或能力: JavaScriptHTML及CSSES6语法(TypeScript)cmd命令系统环境变量配置面向对象的概念(方法、属性、字段等)具有控件的概念以及封装、复用的思想 如读者的上述知识有所欠缺,建议先完善web开发的基本知识体系。参考学习网站:菜鸟教程或百度、ChatGPT等。 站长自己学习的资料来源于《尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程》,因此建议读者配合该视频学习更多技术细节。 1. 安装Node.js下载Node.js: NodeJS下载 到官网下载自己系统对应的版本,下载完成后解压,可以看到里面有一个node.exe的可执行文件。把Node添加到系统环境变量里面,打开cmd命令行,输入npm -v,如果出现版本号,说明已经安装正确。 设置国内镜像: npm config set registry http://registry.npmmirror.com 2. 创建工程安装好 npm 之后,直接可以创建vue3工程。执行命令: npm create vue@latest 其中第一次运行要求安装create-vue@latest,输入“y”回车即可。 3. 设置工程选项根据实际情况填写选项,其中建议使用TypeScript和Vue Router,工程名字不要出现中文和空格。参考配置如下: √ 请输入项目名称: ... vue3-test √ 是否使用 TypeScript 语法? ... 否 / 是 √ 是否启用 JSX 支持? ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是 √ 是否引入 Pinia 用于状态管理? ... 否 / 是 √ 是否引入 Vitest 用于单元测试? ... 否 / 是 √ 是否要引入一款端到端(End to End)测试工具? » 不需要 √ 是否引入 ESLint 用于代码质量检测? ... 否 / 是 4. 执行在cmd中用cd命令打开刚才的工程目录,再分别执行命令: npm install npm run dev 会看到npm将下载一些列的依赖包。执行第二条指令后,会出现如下类似的提示: VITE v5.1.4 ready in 708 ms [ Local: http://127.0.0.1:5173/ [ Network: use --host to expose [ press h + enter to show help 将地址复制到浏览器,会看到“You did it!”的页面。 5. 在VSCODE中开发下载并安装VSCode后,依次选择“文件”、“打开文件夹”,选择VUE工程目录即可。可根据IDE右下角的提示安装相关的拓展。 6. 拓展学习与思考6.1 npm常见命令速查6.1.1. npm本地安装与全局安装npm install <模块名> # 本地安装,则是将模块下载到当前命令行所在目录% npm install -g <模块名> # 全局安装,模块将被下载安装到【全局目录】中 6.1.2. 配置全局目录及缓存目录分别使用以下命令设置全局的安装包目录及缓存目录: npm config set prefix <目录> npm config set cache <目录> 6.1.3. 其他常见命令npm init # npm 初始化当前目录 npm i # 安装所有依赖 npm i <模块名> # 安装模块到默认dependencies npm i <模块名> -g # 会安装到配置的全局目录下 npm i <模块名> -S # 安装包信息将加入到dependencies生产依赖 npm i <模块名> -D # 安装包信息将加入到devDependencies开发依赖 npm i <模块名>\@1.8.3 # 安装指定的1.8.3版本 注意,i是install的简写。 npm uninstall <模块名> # 卸载模块,但不卸载模块留在package.json中的对应信息 npm uninstall <模块名> -g # 卸载全局模块 npm uninstall <模块名> --save # 卸载模块,同时卸载留在package.json中dependencies下的信息 npm uninstall <模块名> --save-dev # 卸载模块,同时卸载留在package.json中devDependencies下的信息 npm update <模块名> # 更新最新版本的模块 npm update <模块名>@2.1.0 # 更新到指定版本号的模块 npm install <模块名>@latest # 可以直接更新到最后一个新版本 npm root # 查看项目中模块所在的目录 npm root -g # 查看全局安装的模块所在目录 npm list 或者 npm ls # 查看本地已安装模块的清单列表 npm view <模块名> dependencies # 查看某个模块对于各种模块的依赖关系 npm view <模块名> version # 查看模块最新的版本号 npm view <模块名> versions # 查看模块所有历史版本号 npm view <模块名> # 查看最新的模块版本的信息 npm info <模块名> # 查看模块的详细信息,等同于上面的npm view npm list <模块名> 或 npm ls <模块名> # 查看本地已安装的模块的详细信息 npm view <模块名> repository.url # 查看模块的来源地址 6.2 思考 VUE技术栈...

你好,2024

bnbplayer6个月前 (01-03)1017
你好,2024
2024年先说说最近生病这事儿吧。上个月22日冬至,本来满怀欣喜的包饺子过个冬至节,哪知道当天晚上发烧38度,本以为抗一晚就好了,结果持续到26号都一直低烧。第二天去医院检查,病毒合并细菌感染,结合各个朋友圈的内容和单位多个同事的状态是如此一致,差不多确信自己是阳了。服用抗生素和坚持早睡后,基本上恢复得不错,除了咳嗽。所以我想说的是,目前放开了大家拼的是自己的身体,这次生病正好养成早睡的习惯,得坚持下去,只有身体是自己的,其他啥都不是,包括钱。钱是个好东西,但需要身体来享受。名利皆以身体为根基。2024年一定要健康作息,永远把身体放在第一位,其他都是浮云,都不重要。工作永远干不完,我们这一代差不多是65岁退休,路还长着呢! 2023年算是完成了一件大事,把自己的新房装修得差不多了。目前自己跟父母住在一起,离上班的地点较远;同时跟父母的观念冲突也越来越多,因此2024年打算搬出去独自一人过。当然,搬出去住后,第一件事就是买一台PS5。 目前最困扰自己的,还是工作上的事。担任的内设职务不过是处理杂事而已,忙起来的时候会不分白天黑夜、不分工作休息日被召唤,自己早已厌倦这样的状态。21年就不想担任但没辞得掉,所以自己下决心要把工作与生活分开,而工作是为了更好的生活,节假日能不做事就不做事,周末同事打电话预感不是好事儿就不接,QQ不看,问就是没注意。不该自己做的事不做,非让做就拖。应酬去可以,但酒不喝,理由是身体不好,一直没恢复。这样一来,好受多了,所以把自己打造成一个不好惹的混蛋职场人设还是有必要的(当然核心工作还是要做好,不能是个真的混蛋)。 要说2024年的打算,初步想法是发挥自己的专长,在技能竞赛方面出点成绩;核心工作要干好。2024年自己也34岁了,家人催婚听得耳朵起了茧子,但个人自由惯了,还真说不准这辈子是不是就不打算结婚。当然假如能找到一个自己满意的,也不是不能结婚,但这个不强求,一切随缘。 所以,2024年对自己的要求就是:健康、开心,还有就是多读书,多走走。...

关于这个博客的定位

bnbplayer7个月前 (11-20)18863
2009年起,断断续续搭建过好几个博客,但都经历了搭建到摆烂,又搭建又摆烂的循环。目前本人在学习Java Web开发,遇到的问题都用markdown记录在本地。既然有一台服务器,不如将这些笔记发布在博客程序上,这样记笔记和写博客一举两得,这样本人目前的博客定位就非常清晰了。自从自媒体平台崛起后,原来的草根站长纷纷转战到自媒体平台发表作品,现在还运营个人博客的博主,大都是为了情怀吧。 1、个人建站经历自高中毕业(2009年)闲来无事,在某个游戏论坛当版主后便一发不可收拾,想体验自己当站长的感觉。偏偏那时又是学生党,只能选购最便宜的虚拟主机,VPS、服务器合租更是不敢想的东西。经过一段时间的对比,终于在经济承受范围之内买下了第一款虚拟主机,随后注册了一个域名,现在还记得是90club.org (含义是90后俱乐部,有点中二)。安装的第一款博客程序是bo-blog,当然也尝试过其他的博客程序,以及各种插件和主题。至于到底写了什么文章却是一点也记不得了,那时更多的精力不是写博客而是折腾博客程序。 2010年左右,国内封神的个人博客之一是月光博客,站长是龙威廉。受龙老师的影响,下决心也把自己的博客做好,争取能每天更新一篇文章(好高骛远),当时还购买了龙老师编写的《名博是怎样炼成的》一书。结局当然是烂尾了,2013年后连主机和域名都没有续费,算是彻底退出了个人博客行列。 2018年,随着虚拟化技术的成熟,各IDC厂家纷纷推出了自己的云服务器。所谓云服务器就是运用虚拟化技术,在一台真实的服务器上虚拟出多个配置可弹性更改的服务器。虚拟服务器的使用者就好像自己独占整个真实的服务器,有点类似以前的VPS主机。那时的自己已参加工作,经济也不再捉襟见肘,遂产生了再次建站的想法。于是购买了一台阿里云的入门型服务器,重新注册了一个.me后缀的域名。然而随着备案监管的加强,.me域名无法获得备案,因此不得不再次更换域名,就是现在的xinz.run。关于它的含义,后文再提。 从那以后,这台阿里云的服务器倒是一直在续费直到现在,不过内容上的更新却是一直在摆烂。目前本人在学习Java Web开发,遇到的问题都用markdown记录在本地。既然有一台服务器,不如将这些笔记发布在博客程序上,这样记笔记和写博客一举两得,这就是目前运营博客的初衷。 2、个人博客已死要谈论这个话题就不得不提到一个词:草根站长。草根站长是指由个人网站站长、网店店长、个人独立博客等生活在互联网底层奋斗的创业群体。当年Google Adsense单价还很高,靠搜索引擎流量带来的收益让月入万元不再是梦。随后做网站的越来越多,但坚持内容为王的却少之少,更多的则是由机器人采集他人网站内容形成的垃圾站。那段时间有一个被人津津乐道的词:SEO,即搜索引擎优化。然而很多站长采取了黑帽SEO手段,如关键词与内容不符、不可见文本等,这些站长的网站自然是难逃被搜索引擎封杀的命运。 一个主机,一个域名,一个建站程序,你就可以成为站长,可想而知这个行业的入行门槛有多低,这也是当年草根站长如此泛滥的原因。然而一切似乎在2017年悄然改变,这里本人引用知乎上的一段话: 国内网站数量在经过2017年达到顶峰后,已经连续2年都在下降。无论是政府网站还是企业及个人网站这两年都在不断减少数量。截止至2021年6月,我国有422万个网站,较2020年12月减少了21万个,我们粗略的估计一下,今年(2021年)网站的减少数量也差不多也会有四五十万个,几乎是每年都在大量的减少。(来源:个人网站消失54万个的原因分析及个人站长未来的出路) 那么2017年究竟发生了什么,干掉如此多的网站? 有观点认为,移动端的诞生导致博客作为电脑端浏览不太友好,个人博客自然不受欢迎。事实上,响应式前端能很好的支持多端浏览,而几乎所有的博客程序又都有响应式主题,移动端只是改变了人们的访问渠道,因此它不是干掉个人博客的罪魁祸首。 所以,赖谁? 我们只需要回顾一个词:SEO,搜索引擎优化。个人博客要做大做强,不得不进行SEO。为谁优化?搜索引擎。原来在个人博客上写文章获取流量仅仅靠百度等搜索引擎,因此当年的搜索引擎才是个人博客或草根站长们的金主和爸爸。而现在,看视频有优酷、抖音、快手,看文章有知乎、小红书、头条,学技术有博客园、CSDN,就算分享鸡毛蒜皮的小事也有朋友圈和QQ空间,这些自媒体平台分走了传统搜索引擎的流量。现在在这些平台写文章,依靠它们的推荐算法,再加上分享到诸如QQ、微信等社交APP极其方便,流量会比个人博客大得多,这导致博主直接在平台上发挥,有时候一篇文章的流量可以抵得上个人网站一年都难以获得的流量。 因此,自媒体平台的崛起才是导致个人博客衰亡的根本原因,搜索引擎的流量被它们肢解得分崩离析。试问当你拿出手机时,使用频率最多的是百度还是其他的自媒体平台?百度搜索后的网页链接,以这些平台为主还是以个人博客为主?个人博客极度依赖搜索引擎带来的流量,现在怎么玩?所以还在坚持做个人博客的,大都靠的是情怀,赚钱与否不重要;要不就是转为公司化运营,比如卢松松的博客,严格来讲它已不再是个人博客。 3、这个博客的定位上文提到个人博客已死,因此本人现在重开博客也就仅仅为了情怀。这个博客的内容以记录个人在开发过程中遇到的问题为主,偶尔再写写生活感悟、读书笔记、旅游见闻之类的文字。不求有人看,但求作为一种公开的笔记本。 关于这个域名的解释,xinz是行者(xing zhe)的简称,run取奔跑之意,意思就是要做一名行者、奔跑者,就好比首页上的那句话:灵魂与肉身有一样要常在路上,所以旅游和读书这两件事本人从来都是奉为圭臬。 从自己建站经历来看,经历了建站到摆烂,摆烂又建站的循环。其实,真正运营好一个博客是需要投入大量的时间和精力的,博主必须拥有高度的自律性。自媒体不是本人的本质工作,如果为了写而写那么这个博客将继续烂尾,而将开发笔记与博客两者结合,这样才有坚持下去的可能。...