k8sailor - 08 使用 vue 获取后台 API 数据并展示
k8sailor - 08 使用 vue 获取后台 API 数据并展示
tag: https://github.com/tangx/k8sailor/tree/feat/08-fetch-and-display-deployments
使用 Axios 请求 Deployments 数据
安装 axios 客户端
# 安装 axios
yarn add axios
创建 /webapp/src/apis 目录， 用于存放所有针对 k8sailor 后端的数据请求
使用 axios config 模式初始化一个客户端
/webapp/src/apis/httpc.ts
axios config 模式可以创建一个 http 客户端，其中包含了各种各样的初始化参数， 使用这个模式就不用在每个请求中都写重复的内容了。
import axios from 'axios'
// 使用 config 模式
// https://github.com/axios/axios#config-defaults
let httpc = axios.create({
baseURL:"http://127.0.0.1:8088/k8sailor/v0"
})
export default httpc
创建 deployments 的请求参数
/webapp/src/apis/deployment.ts
有了公共的 httpc 之后， 在不同的 组建 中就可以直接 import 使用了。
注意: 在
httpc.get()的时候， 只写了deployments的接口相对地址。在发送请求是， axsio 会自动进行补全。
import httpc from './httpc'
// 获取所有 deployment 信息
// namespace 默认值为 defualt
// 使用 async await 解析内容
async function getAllDeployments(namespace = "default"): Promise<Deployment>{
const resp = await httpc.get(`/deployments?namespace=${namespace}`)
// console.log(resp.data)
return resp.data
}
server 端允许 cors 跨域
到这里会遇到 跨域 问题。由于目前 前后端 是分离的，并且之前我们在 server 并没有相关代码允许跨域请求。所有通过页面的请求 暂时 是无法拿到数据的。
跨域在 gin 中的实现其实就是 gin.HandlerFunc， 可以理解成一种中间件。
以下是跨域规则， 规则比较暴力， 极狐允许了全部请求， 在实际使用中， 可以进行按需调整。
func cors() gin.HandlerFunc {
return func(c *gin.Context) {
method := c.Request.Method
if method != "" {
c.Header("Access-Control-Allow-Origin", "*") // 可将将 * 替换为指定的域名
c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
c.Header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization,X-Token")
c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")
c.Header("Access-Control-Allow-Credentials", "true")
}
if method == "OPTIONS" {
c.AbortWithStatus(http.StatusNoContent)
}
}
}
接下来在 server 端应用规则， 允许跨域。
// RegisterRoute 注册
func (s *Server) RegisterRoute(registerFunc func(rg *gin.RouterGroup)) {
// 注册以服务名为根的路由信息，方便在 k8s ingress 中做转发
base := s.engine.Group(s.Appname)
// 针对 appname 下的路由，允许跨域
base.Use(cors())
// 注册业务子路由
registerFunc(base)
}
这里并没有在 根路由 下允许， 而是在 /:appname 下允许。
也就是说如下
# 允许跨域
/appname/deployments
/appname/pods/:podname
# 不允许跨域
/ping
vue3 展示数据
使用 reactive 定义一个 响应式 数据
<script setup lang='ts'>
import {reactive } from '@vue/reactivity'
import client,{ DeploymentItem } from '../apis/deployment'
let data = reactive({
namespace:"default",
error: "",
items: [] as DeploymentItem[]
})
</script>
使用 onMounted 加载数据
onMounted 是 vue3 的生命周期钩子的其中一个, 在页面加载时执行。
https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html
<script setup lang='ts'>
import {reactive } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
// ...
onMounted(()=>{
getAllByNamespace()
})
</script>
使用 v-for 显示数据
<tr v-for="(item,id) in data.items" key=:id>
<th scope="row"></th>
<td></td>
<!-- 省略 -->
</tr>
使用 v-if 进行条件渲染
在返回的数据中， 有两种状况:
- 有错误， 没数据
- 没错误， 有数据
因此设置了两个容器（错误与表格）， 使用 v-if 根据是否有错误消息决定是否展示这两部分容器
<!-- 当数据异常的时候显示 -->
<div class="error-container" v-if="data.error">
<!-- 省略 -->
</div>
<!-- 当数据正常的时候显示 -->
<table class="table" v-if="!data.error">
<!-- 省略 -->
</table>
使用 v-model 绑定数据
v-model 数据的双向绑定。 v-model="data.source" 是将 data.source 的值绑定到 控件 的 value 属性上。
<input type="text" placeholder="default" v-model="data.namespace">
使用 v-on 绑定事件
@ 是 v-on 的语法糖， 因此@click 完全写法就是 v-on=click。意思就是 点击按钮 触发 getAllByNamespace 方法。
<button @click="getAllByNamespace(data.namespace)">更新数据</button>
问题遗留
301 重定向遇到跨域问题。
gin 内部实现了一个 301，但会引起 gin middleware 不可用的问题。
https://tangx.in/2021/09/27/gin-301-redirect-slash-cause-cors-error/