1.    ** 如果您遵循开发规范，即基于Kubernetes的CRD开发，意味着你不需要自行处理与后端的交互，与【非规范】不同，在routes配置过程中需要显示指定kind。**

一、环境准备

1.1 下载源代码

git clone https://github.com/kubesys/kube-frontend

1.2 安装后端服务（可选）

   如果没有Kubernetes环境，参照[脚本安装](https://github.com/kubesys/installer)，

kubeinst init-env
kubeinst init-kube
kubeinst init-backend
kubeinst init-frontend

1.3 修改baseURL

  修改public/config.js的baseURL，<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/99567/1631067542859-9ab399b3-5c64-46aa-beb3-9281537028de.png#clientId=ue2faf505-2d43-4&from=paste&height=232&id=u3f98e0e9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=463&originWidth=1287&originalType=binary&ratio=1&size=46082&status=done&style=none&taskId=udda24bf1-1737-42c5-88c9-97f94f6399b&width=643.5)

1.4 运行程序

    请确认已安装nodejs

npm install
npm run dev

二、CRD开发

2.1 定义CRD

   详细可参见[Kubernetes CRD教程](https://kubernetes.io/docs/tasks/extend-kubernetes/custom-resources/custom-resource-definitions/)。

---
apiVersion: apiextensions.k8s.io/v1beta1
kind: CustomResourceDefinition
metadata:
  name: frontends.doslab.io
spec:
  additionalPrinterColumns:
  - JSONPath: .spec.type
    name: TYPE
    type: string
  - JSONPath: .metadata.creationTimestamp
    name: AGE
    type: date
  group: doslab.io
  names:
    kind: Frontend
    plural: frontends
    shortNames:
    - frontend
    singular: frontend
  scope: Namespaced
  version: v1

2.2 基于CRD开发

      参见我们自研软件[Kubernetes-client](https://github.com/kubesys/kubernetes-client-java)，以及[教程](https://www.yuque.com/kubesys/kubernetes-client/overview)，提供了以下语义的接口。

2.2.1 创建资源
public JsonNode createResource(JsonNode json) throws Exception {
2.2.2 删除资源
public JsonNode deleteResource(String kind, String namespace, String name) throws Exception {
2.2.3 更新资源
public JsonNode updateResource(JsonNode json) throws Exception {
2.2.4 获取资源
public JsonNode getResource(String kind, String namespace, String name) throws Exception {
2.2.5 查询资源
public JsonNode listResources(String kind, String namespace) throws Exception {
2.2.6 监听单一资源
public JsonNode watchResource(String kind, String namespace, String name, KubernetesWatcher watcher) throws Exception {
2.2.7 监听多个资源
public JsonNode watchResources(String kind, String namespace, KubernetesWatcher watcher) throws Exception {

三、在src/views下面开发自己的页面

3.1 开发页面

    假设新开发一个页面apps/index.vue

image.png

3.2 集成界面

      如果需要添加到主体框架，则执行以下命令

kubectl edit frontend routes-1001-admin

      然后修改

- component: /app/index (即src/views/app/index.vue中/app/index)
  kind: 与【非规范不同】，需要增加kind，即第二章定义的
  name: 界面侧栏看到的名字
  path: 查看语法 https://www.yuque.com/kubesys/kube-frontend/qz0cuq

image.png
同时配置以下文件（如果基于JSON操作，自动生成向导参照Template规范），参照https://gitee.com/syswu/yamls/tree/master/frontend/frontends，用于显示页面以下内容，如何配置参见项目语法。

  • desc-[apiVersion].[kind]
  • action-[apiVersion].[kind]
  • formsearch-[apiVersion].[kind]

  • table-[apiVersion].[kind]


    image.png

    3.3 查看效果

image.png