开发 k8s 管理平台 - k8sailor 07. (前端) 使用 vite 初始化 vue 项目 原文地址: https://tangx.in/posts/books/k8sailor/chapter02/07-initial-vue3-vite2/ 安装 1 2 3 4 5 6 7 8 9 10 11 12 13 14 # 初始化项目 yarn create vite webapp --template vue-ts cd webapp ## 安装依赖 yarn ## 启动查看 vue3 是否正常 yarn dev ## 安装 less 支持， 以后写样式用 yarn add less 清理环境 删除 /webapp/src/components 下的 HelloWorld.vue。 并新建一个 Deployment.vue。 这里使……

阅读全文

开发 k8s 管理平台 - k8sailor 10. (前端) 使用 vue-router 进行路由管理 原文地址: https://tangx.in/posts/books/k8sailor/chapter02/10-vue-router-and-less/ tag: https://github.com/tangx/k8sailor/tree/feat/10-vue-router-and-less 使用 vue-router 路由管理 安装 vue-router 支持参考 https://tangx.in/2021/09/28/vue3-vue-router/ 将默认的 /webapp/src/App.vue 作为最基本的入口， 除了引入 Index.vue 文件模块，不进行其他操作， 保持整洁。 其行为类似 golang 中的 main.go。 创建 /webapp/src/components/Index.vue 模块作为 index 入口文件， 也是主要的布局页面。 路由信息(router-link) 将……

阅读全文

开发 k8s 管理平台 - k8sailor 14. 一些前后端代码优化 原文地址: https://tangx.in/posts/books/k8sailor/chapter02/14-some-optimize/ tag: https://github.com/tangx/k8sailor/tree/feat/14-some-optimize 将 LabelSelector 转换为 Selector client-go 提供了一个方法， 可以将 Resource 中的 LabelSelector 转换为 Selector, 并且 Selector 结构提供了一些常用的方法。 如 String 1 2 3 4 5 6 7 8 9 import ( metav1 "k8s.io/apimachinery/pkg/apis/meta/v1" ) func() { selector, _ := metav1.LabelSelectorAsSelector(dep.Spec.Selector) x := selector.String() fmt.Println(x) }() 因此在使用 GetXXXByLabels 时， api 层 可以考虑 接收 map[string]string 类型的参数。 而在 biz 层应该将 不同类型 的参数 统一 转换为格式……

阅读全文

……

阅读全文

在 vue 中渲染变量通常有两种方式 插值语法， 又叫 胡子语法 ， 使用 {{ xxx }} 方式在 标签体 渲染变量 1 <h3>插值语法: {{ name }}</h3> 指令语法 v-bind:attr="xxxx", v-bind 可以缩写为 冒号 :， attr 是 标签属性 名称； xxx 是属性标签值， 且 xxx 是 js 表达式 1 2 3 4 5 6 <h3>指令语法</h3> <a :href="url"> 百度一下 ( : ) </a>……

阅读全文

typescript vue3 项目容器化实战 在前端容器化的时候， 有一个绕不开的问题： 容器返回的后端地址应该怎么设置。 静态编译到所有文件中， 肯定是不可取的， 总不能后端变更一个访问域名，前端都要重新构建一次镜像吧？ 由于 js (typescript 编译后 ) 实际是运行在 用户的浏览器上， 所以也不能像后端一样读取环境变量。 所以， 通过 html <meta> 标签……

阅读全文