过年时鼓捣xirang框架遇到的前后端问题两则
过年在家时,借鉴 gin-vue-admin 项目的多模块儿思路,抽空把 xirang (opens new window) 项目做了一波大改造,使之更加底层,也更易于扩展。在这个折腾的过程中,前后端都遇到了一个问题,在此记录。
# 后端-go-playground/validator 校验的零值问题
与其他 go-web 项目类似,我的这个框架中前端的菜单也是由后端管理的动态路由,这个路由是一个树的概念,每个层级通过 ParentId
字段串联,在请求参数中,这个字段的配置如下:
ParentId uint `json:"parentId" validate:"required"`
之前针对菜单的增删改查一直没遇到什么问题,这次因为模块儿调整,涉及到一级目录的调整,发现更新一级目录的时候,总是会报一个错误:ParentId为必填字段
,然而打开请求参数,却又发现,这个字段明明已经正常传递了值的:
经过网上一番检索,发现问题出在了 validate:"required"
,当你这么配置的时候,意味着该字段为必填,且不能为零值,而针对 uint 类型而言,0 则是不符合条件的,因此会出现这个错误。
这里可以调整为如下配置:
ParentId uint `json:"parentId" validate:"gte=0"`
表示校验对应值大于等于 0 即可。
# 前端-多层路由面包屑重复渲染的问题
当我把项目重新设计为多模块儿之后,原本只有两级的菜单,会变成三级,因为自己对前端的一知半解,出现字段配置错误,从而搞出了一个卡了我半个月的问题来。
原本菜单中的日志管理是二级目录,现在统一划归到系统管理下,就自动变为三级目录,而在创建二级目录日志管理时,我想当然的以为目录的 component
应该跟一级目录一样,配置为 Layout
,于是我就这么配了,配置之后发现,点击页面之后,出现的效果如下:
跳入这个坑之后,我就进入到了一个貌似没人踩过的坑里,检索了大量的网页,也没有寻到与我相同的问题。真正前端行内的人,也许不会犯我这种门外汉想当然而造成的错误。
不过出现问题也不见得是坏事,问题没有解决的这些日子里,我无法安稳入睡,无法将其他项目往前推进,始终念念不完,反而催促自己,阅读了解项目的源码架构,以及在 vue-element-admin 项目的 issue 区、官方文档中反复浏览。
但是最终仍旧没能将原因找到,更莫提问题的解决,我甚至已经开始了解新的框架 pure-admin 了。
后来还是在专业前端人士的指导下,发现了问题的根源,我的 日志管理
的配置的问题,我的配置信息如下:
{
Model: gorm.Model{ID: 7},
Name: "Log",
Title: "日志管理",
Icon: "log",
Path: "log",
Component: "Layout",
Redirect: "/system/log/operationLog",
Sort: 7,
ParentId: uint1,
Roles: roles[:2],
Creator: "系统",
}
2
3
4
5
6
7
8
9
10
11
12
13
问题原因:日志管理是二级菜单,而我配置的 component 为 Layout,目前还不是很了解这个 Layout 的意义代表什么,只不过将其改为如下信息:
{
Model: gorm.Model{ID: 7},
Name: "Log",
Title: "日志管理",
Icon: "log",
Path: "log",
Component: "/system/log/index",
Redirect: "/system/log/operationLog",
Sort: 7,
ParentId: uint1,
Roles: roles[:2],
Creator: "系统",
}
2
3
4
5
6
7
8
9
10
11
12
13
然后在 src/system/log
下创建 index.vue 文件,写入如下内容:
<!-- 如果路由有多个层级,那么此处需要如下代码,详见:https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#%E5%A4%9A%E7%BA%A7%E7%9B%AE%E5%BD%95-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1 -->
<template>
<router-view />
</template>
2
3
4
此时再次点击操作日志的页面,就不会再出现顶部重复渲染的问题了。