qor5 研读 的一些疑问

[sunfmin]

qor5 研读

docs

git clone [email protected]:qor5/docs.git
cd ./docs/docsrc
docker-compose up -d
brew install entr
./dev.sh
open http://localhost:8800/

dev.sh

• 依赖 snippetgo 抽取项目代码供 doc markdown 使用

• 依赖 entr 做重编译运行，HMR

docsrc/server.go

• 午夜重置数据库，供 doc examples

• mux_admin.Mux Handle docgo 生成文件 和 example_admin

• 依靠 mux_web_vuetify.demoLayout 中间件方法来处理页面主布局(PageFunc)，其中注入了项目所需的基础 css 和 js 资源文件。

• bug: 各种 SamplesHandler 里的 mux.Handle 貌似没有额外给到 / 后缀，导致 vue.js 等资源文件无法加载，IndexMux 的 Handle 方法里有体现。
  fix: mux_admin.SamplesHandlers 头部修改为 mux := &mux_web_vuetify.IndexMux{Mux: http.NewServeMux()} ，下面的 mux.Handle 移除 / 后缀，最终返回 mux.Mux , server 即可正常启动并且 demo 跳转可用。

• bug: Listing Customers - Admin 如果通过 Drawer 点进 Customer，筛选标签修改后是可以响应的，但是如果直接访问此链接，修改筛选标签的话，列表目前不会响应，从 url query 的变动即可看出。
  fix: 我对 vue 底层还是不太熟悉，一时没能解决掉，下面只是确认经过

  • 检查了 vuetifyx 里的 Filter 组件，emit('update:modelValue', event) 确实执行了。
  • vuetifyx 里的 filter.go 里 b = b.InternalValue(visibleFilterData).Attr("@update:modelValue", "console.log('hello');"+b.updateModelValue.(string)) 添加了打印命令，发现并未执行。

web

• PageBuilder 组织页面大框架。

  • Builder.PacksHandler 静态资源文件的 http.Handler

  • PageFunc 作为中间件，可用于 更改布局、注入资源文件、设置 SEO 等等。

  • PageInjector 用于注入资源定义，meta 信息等，可通过 head tail extra 决定注入位置。

  • EventsHub 管理 EventFuncs

  • render 渲染页面 body

  • ServeHTTP 根据是否有 __execute_event__ 关键词来决定执行 index 还是 executeEvent

  • index 渲染页面框架，可通过 Builder.LayoutFunc 来自定义，这个感觉会和 body 里的 layout 有一丝语义混淆

  • executeEvent 响应对应的 EventFunc ，会与 VueEventTagBuilder 相配合，根据 EventResponse 做相应处理，Reload 是重渲染整个页面 body，UpdatePortals 是重渲染页面局部，与 web.Portal 相配合。最终渲染结果反馈给前端。
    疑惑:

    • 如果 Reload 和 UpdatePortals 同时给到，前端是会先响应 Reload 然后响应 UpdatePortals ? 所以服务端是不会对这种情况预先对 Reload 的渲染结果做 UpdatePortals 的更改？

    • Re-render because event funcs gone, might server restarted 疑惑：这块没看懂

• VueEventTagBuilder 组织 Event，即为最终 vue 的事件响应语句，corejs 里以作配合，最终传递给 PageBuilder 里的 executeEvent 来实现整个事件响应链路。

• corejs 用于配合 web 框架执行响应

  • main.ts: 初始化 app , window.__goplaidVueComponentRegisters 是供 ui 库中使用，例如 vuetifyx 里的 main.ts 里，以额外向 vue 注册一些自定义组件或插件。

  • app.ts

    • plaidPlugin 用于注册基本组件和指令

    • Root 根组件

      • initialTemplate 用于渲染原 #app 初始内容，实际初始内容不会是 index.html 里的内容，而是后端返回的 PageBuilder 的结果，其中会带着各种 head 信息，资源定义、meta 信息 等等。

      • 有 form/vars/isFetching/plaid(eventBuilderFactory)/updateRootTemplate 这些状态或方法，并通过依赖注入 provide 向下层提供。

      • componentByTemplate 方法构建一个动态组件，template 即为 web 框架里的渲染 html 了，通过 inject 来获取 Root 根组件依赖注入的部分以供使用，form 和 locals 因为后续也有 Portal 局部作用域的需求，所以需通过参数传递。

  • go-plaid-portal.vue 对应 PortalBuilder

    • PortalBuilder 即为构造 go-plaid-portal vue 控件

    • onMounted 里记录 window.__goplaid.portals 以供后续 EventResponse 能找到对应的 portal 来进行 updatePortalTemplate 或 reload

    • updatePortalTemplate 将服务端返回的局部渲染结果通过 componentByTemplate 方法构建一个组件渲染到 component 组件上，GoPlaidPortal 的 form/locals props 来作为局部状态给到

    • reload 异步去从服务端获取渲染结果。portal 可以给到 loader prop ，例如 web.Portal().Loader(web.POST().EventFunc("portal1")).Name("portalB") 这个 loader 最终在前端体现会是一个 plaid(Builder) ，然后 reload 里会异步执行它，通过 loadPortalBody 控制自主渲染此组件内容。
      疑惑：current.value = componentByTemplate('<slot :form="form" :locals="locals"></slot>', props.locals) 这句没有理解，因为 componentByTemplate 的第一个参数不是 form 吗？ 这个是如果 slot 里已有定义就重置的意思？那原 web.Portal 里的子组件这里会丢失吗？

    • autoReloadIntervalID 可依 ticker 执行 reload 方法

  • go-plaid-scope.vue 对应 ScopeBuilder

    • ScopeBuilder 即为构造 go-plaid-scope vue 控件

    • 无渲染组件，为了记录局部状态

    • init 和 formInit 分别对应两种状态：locals 和 form

    • 可通过 useDebounce 来启用这两个状态的 watch ，其数值控制了回调频率

  • builder.ts

    • 对应 Root 根组件里注册的 plaid 工厂方法，其工厂方法产出的 Builder(plaid) 会预设 updateRootTemplate 和 根组件的 vars 。

    • 这个东西其实对应的就是 VueEventTagBuilder 组织的事件调用语句。

    • go 方法，构造 ajax 请求，根据 EventResponse 来决定如何响应：window.history.pushState / redirect / runScript / document.location.replace / updatePortals / 直接反馈 EventResponse 等等

      疑惑：

              if (r.pushState) {
        // 没咋看懂
        // 最终会先执行 window.history.pushState 
        // 然后 ajax 请求服务端响应 Reload 
        // 然后服务端告知前端执行 reload 响应 (this._updateRootTemplate(r.body))?
        // 如果是这样的话，如果 ajax 请求失败了呢？ history 会回退吗？
      
                  return plaid()
                    .updateRootTemplate(this._updateRootTemplate)
                    .reload()
                    .pushState(true)
                    .location(r.pushState)
                    .go()
                }

ui

• 疑惑: vuetifyx 和 vuetify 的区别，只是指 vuetifyx 额外提供了一些基于 vuetify 自定义的组件？

• GitHub - sunfmin/vuetifyapi2go

[sunfmin]

如果 Reload 和 UpdatePortals 同时给到，前端是会先响应 Reload 然后响应 UpdatePortals ? 所以服务端是不会对这种情况预先对 Reload 的渲染结果做 UpdatePortals 的更改？

看这里实现是先 update portal，然后再 reload，可能要具体试过才知道。

Re-render because event funcs gone, might server restarted 疑惑：这块没看懂

这个是有在 render 的时候注册 Event Func的可能发生，而不是在启动的时候注册，那种在重启服务器的话，在这个页面渲染之前就没有这个 EventFunc 存在。只推荐在启动的时候注册 Event Func

current.value = componentByTemplate('<slot :form="form" :locals="locals"></slot>', props.locals) 这句没有理解，因为 componentByTemplate 的第一个参数不是 form 吗？ 这个是如果 slot 里已有定义就重置的意思？那原 web.Portal 里的子组件这里会丢失吗？

这个我也是晕的，slot 的参数 是给 里的模板用的，有可能不需要传这么多，有点混乱。

// 没咋看懂
// 最终会先执行 window.history.pushState
// 然后 ajax 请求服务端响应 Reload
// 然后服务端告知前端执行 reload 响应 (this._updateRootTemplate(r.body))?
// 如果是这样的话，如果 ajax 请求失败了呢？ history 会回退吗？

没考虑失败情况

• 疑惑: vuetifyx 和 vuetify 的区别，只是指 vuetifyx 额外提供了一些基于 vuetify 自定义的组件？

对，没错，vuetify 是没动过的组件的 go 的 wrapper

[molon]

如果 Reload 和 UpdatePortals 同时给到，前端是会先响应 Reload 然后响应 UpdatePortals ? 所以服务端是不会对这种情况预先对 Reload 的渲染结果做 UpdatePortals 的更改？

看这里实现是先 update portal，然后再 reload，可能要具体试过才知道。

测试了下，如果 Reload 和 UpdatePortals 同时给到，因为前端是 UpdatePortals 先被响应，所以其信息在 Reload 时会丢失掉。
不过确实一般也不会这么用，可能需要在合适的地方加个验证。因为担心有向前兼容问题，不敢动这块逻辑。

[molon]

• bug: 各种 SamplesHandler 里的 mux.Handle 貌似没有额外给到 / 后缀，导致 vue.js 等资源文件无法加载，IndexMux 的 Handle 方法里有体现。
  fix: mux_admin.SamplesHandlers 头部修改为 mux := &mux_web_vuetify.IndexMux{Mux: http.NewServeMux()} ，下面的 mux.Handle 移除 / 后缀，最终返回 mux.Mux , server 即可正常启动并且 demo 跳转可用。

qor5/docs#86

bug: Listing Customers - Admin 如果通过 Drawer 点进 Customer，筛选标签修改后是可以响应的，但是如果直接访问此链接，修改筛选标签的话，列表目前不会响应，从 url query 的变动即可看出。
fix: 我对 vue 底层还是不太熟悉，一时没能解决掉，下面只是确认经过

• 检查了 vuetifyx 里的 Filter 组件，emit('update:modelValue', event) 确实执行了。
• vuetifyx 里的 filter.go 里 b = b.InternalValue(visibleFilterData).Attr("@update:modelValue", "console.log('hello');"+b.updateModelValue.(string)) 添加了打印命令，发现并未执行。

qor5/ui#63: 尝试使用了 vue.js 的 development 版本，chrome console 就会对此问题有一些信息漏出来，vue devtool 也可用。