周末时光
周末的时间就是过的快，今天搭建了k8s最新版本的集群-1.27.3，整理了下文档。尽管现在都已经由自动化部署的脚本以及应用，但是自己手动搭建一下还是蛮有趣的。
不知所措
今日不知写点什么，有点焦绿！
K8S-1.27.3
在希里安公众号上！
前端表格开发原来如此简单
前端表格开发原来如此简单 前一段时间中，我们开发的表格当时只有展示后端信息的效果，并不能完成增删改查的操作。今天花了一点时间学习了下antd表格的使用，完成了具备增删改查完整通用功能的前后端交互，分享给大家，但界面稍丑，不断会完善。 涉及技术点 前端： vite+ts+antd3+vue3 开发依赖版本： “devDependencies”: { “@vitejs/plugin-vue”: “^4.1.0”, “typescript”: “^5.0.2”, “vite”: “^4.3.9”, “vue-tsc”: “^1.4.2” }
表格全栈开发
前后端表格开发 前端 创建vite https://cn.vitejs.dev/ 使用pnpm创建 pnpm create vite 后端
前端学习笔记
前端学习记录（1） ts和js有什么区别 ts和js的主要区别如下: 类型系统 TypeScript是一个结构化的类型系统,JavaScript是一门无类型语言。这意味着在TypeScript中,变量、函数、对象等都有明确的类型定义,而在JavaScript中,变量可以随意赋值任何类型的值。 TypeScript的类型系统给JavaScript带来的好处是: 优秀的IDE支持(代码补全、接口提示等) 编译时的类型检查 减少不合理的代码 可选类型和严格null检查 TypeScript有可选类型,可以对可能为null的值进行类型定义。并且在严格的null检查模式下, eliminates抛出空指针异常。 接口 TypeScript支持接口,可以用来明确的强制一个合约。接口的好处是: 对对象的形状进行抽象 可以在编译时检查是否符合接口要求 枚举 TypeScript支持枚举,枚举可以使代码更清晰和简洁。 类 TypeScript作为一个面向对象的语言,支持类与继承。在TypeScript中,类有以下特点: 支持public, private和protected修饰符 支持抽象类 支持接口继承 编译器 TypeScript需要通过编译器编译成JavaScript后才可以运行,编译过程中会进行类型检查和语法检查。 总之,TypeScript在JavaScript的基础上,新增了可选的类型系统、接口、枚举、类等面向对象的语言特性,并通过强大的编译器,在静态检查的同时,生成干净的JavaScript代码。 两者的主要区别在于: 类型系统:TypeScript是结构化的类型系统,JavaScript是无类型 可选类型和空指针检查:TypeScript通过可选类型和严格的空指针检查提高代码稳定性 接口:TypeScript通过接口定义对象形状和编译时类型检查 枚举: TypeScript通过枚举使代码更简洁清晰 类:TypeScript支持类,继承等面向对象语言特征 编译器:TypeScript需要编译器编译为JavaScript后运行 在vue3+ts+antd设计一个表格的过程是什么 创建Table.vue组件,引入ant-design-vue的Table和其他组件: <template> <a-table :columns="columns" :dataSource="dataSource" /> </template> <script lang="ts"> import { defineComponent } from 'vue' import { Table, Tag, Space } from 'ant-design-vue' export default defineComponent({ components: { ATable: Table, ATag: Tag, ASpace: Space }, ... }) </script> 定义表格的数据接口和类型: interface TableData { id: number; name: string; age: number; address: string; } type TableRow = { key: number; name: string; age: number; address: string; actions: JSX.Element // 操作列 } 定义表格列columns: columns = [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' }, { title: 'Actions', dataIndex: 'actions', width: 150, fixed: 'right' } ] 获取表格数据并设置给dataSource: import axios from 'axios' axios.get<TableData[]>('/table/list') .then(res => { this.dataSource = res.data.map(row => ({ ...row, actions: ( <Aspace> <ATag> Edit </ATag> <ATag> Delete </ATag> </Aspace> ) })) }) 发送新增/编辑请求并更新表格: axios.post('/table/add', newRow) .then(res => { this.dataSource.push({ ...res.data, actions: (...) }) }) axios.put('/table/update', updatedRow) .then(res => { const rowIndex = this.dataSource.findIndex(row => row.id === res.data.id) this.dataSource[rowIndex] = { ...res.data, actions: (...) } }) 发送删除请求并从表格删除相应行: axios.delete(`/table/delete/${selectedRowKeys[0]}`) .then(res => { this.dataSource = this.dataSource.filter(row => row.id !== res.data.id) }) 一个vue3+ts的页面结构是什么样的 入口文件main.ts: import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app') App.vue根组件: <template> <div id="app"> <router-view /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'App' }) </script> routes/index.ts 路由定义文件: import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router views/Home.vue 视图组件: <template> <div class="home"> <h1>Home</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'Home' }) </script> shims-vue.d.ts 定义vue的类型声明: declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } 其他.vue组件、接口定义、类型定义等。 以上就是vue3+ts项目的基本页面结构,主要包括: 入口文件main.ts App根组件 路由定义文件routes/index.ts 视图组件views/Home.vue shims-vue.d.ts的vue类型声明 其他vue组件、接口定义、类型定义等 ts和vue3有什么关系 ts和vue3有以下关系:
推荐好用的AI工具
推荐好用的AI工具 先聊点别的 周末两天一晃就过去了，周末我一般就不更新文章，主要用来休息。出去转一圈啊补补觉啊啥的，以前都是比较迷信弯道超车，空闲时间加大学习和“卷”的力度。但是后来觉得如果不是自主自愿的去学习的话，完全靠自律去学的效率真的不高。而且最近看到很多年轻人工作劳累导致猝死的。所以咱要有身体健康第一位的觉悟，有良好的作息，保持平日的效率即可。因为咱们打工人工作日本来就很累了，周末还是好好休息吧。今天我就是水一篇文章，推荐一些好用的AI工具。 关于AI工具 最近有看到新闻，有一些所谓的智能AI传媒公司，基本全是AI员工。文案、策划、设计、视频剪辑，美术，全部交给各种AI工具。甚至直播都是AI数字人，可以24小时不间断直播宣传。看到这大家有什么想法呢？ 虽然我也不太喜欢不AI产生的一些批量化的作品，但没有办法。目前AI取代一些基础岗位是发展趋势。这也倒逼着大家要提升自我综合能力，防止被AI替代。所以我们不能成为AI工具的奴隶，而是要认识AI，并学会使用AI工具，相信随着自己专业能力的提升，就不会那么焦虑了。 AI工具推荐 这里就不详细介绍如何使用，感兴趣的直接上官网探索。 易用GPT类： pandora
关于财务自由
幻想 我想应该每个人都想财务自由，做自己想做的事情，哪怕只是此时此刻出去晒晒太阳也很是惬意。 为什么难翻身 没有接受有关财富的教育，没有相关思维。 因为只是一个普通人，试错成本随年龄变高。 不够渴望，只有好点子是不够的。 关于财富的思考 普通人很难财务自由，但并非不可能。 变富有不难，只是没有那个契机。 靠蛮力的勤奋努力并不能致富 实现 找到财富所在地，找到方向。 不断反馈调节靠近财富。 合理利用财富实现人生价值。
一文了解LINT
昨日本该更新文章，是围绕前后端模块的（因为前两天是按计划写linux以及网络模块）。但昨日实在没想出要写什么文章， 心态处在一个尴尬的境地，简单的知识点觉得没必要搬运，但是深入的东西不是花个一天半天就能写的出来，况且现在也有不少朋友关注我，写文章得认真对待，左思右想干脆就没写了。 今天转念一想，还是结合自己的项目，遇到什么写什么，不要觉得简单就不写，能把简单的东西写好也算进步（自我安慰中）。有深度有价值的文章还需要不断地沉淀自己才能达到，还是要沉下心。大家是否有同感呢，欢迎交流。 lint背景 lint 是源代码静态分析工具的统称。它通过分析源代码本身的错误、不规范之处,在不运行代码的情况下检测出潜在问题。 lint 工具主要有以下作用: 检查语法错误、拼写错误、不规范用法等,提高代码质量和健壮性 统一代码风格和规范,提高代码可读性 检测安全漏洞、潜在 bug 等,减少未来问题 提供可靠的自动化代码检查,辅助代码审查 lint 最初是(贝尔实验室1979年发布1 )Unix 的一个实用程序,在C语言环境中开发的，用于分析 C 语言源代码,检查可能导致程序运行错误或不规范的构造。 例如由Gimpel Software公司开发维护的PC-lint：https://pclintplus.com/，用来检查代码是否遵循 MISRA C（一套 C 语言代码规范）。
负载均衡
今天高考，祝愿所有高考学子能够梦想成真！取得佳绩，踏入自己理想中的学府。 再回首，18岁的青春已不复存在，恍然都长大了，不过还是要怀揣梦想一路向前！ 认识负载均衡 初识 先说说自己以往对于负载均衡的认识，刚踏入职场时只停留在一种很简单的想法，就是一种保证服务正常运行的东西，它后面有一堆服务节点，反正不会因为某些节点宕机就导致服务没法用了。然后随着不断学习，对于负载均衡有了更多的认识。 再识 概念： 负载均衡(Load Balancing)就是一种网络技术,是用来将工作负载分布到多个服务器上,提高资源利用率、最大化吞吐量、最小化响应时间、避免单个服务器过载，提高了系统的性能和可靠性。 原理：