二丫讲梵 二丫讲梵
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)

二丫讲梵

行者常至,为者常成
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)
  • Shell编程

  • Go编程笔记

    • 开发技巧

    • 库包研究

    • 个人项目

      • 给我一个URL,我能将你关心的页面元素截图发给机器人
      • 有人在go-ldap库issue中寻求文档,我为此写了一个ldapctl工具
      • 拯救openLDAP的上古管理界面,我写了一个现代化的ldap管理后台go-ldap-admin
      • chatGPT钉钉群聊交互版-chatgpt-dingtalk
      • 最近开源的两个项目-获取腾讯云CLS日志费用预估
      • 基于GO语言实现的体验最好的企微应用集成ChatGPT项目chatgpt-wecom
      • 开源一个工具-使用关键字搜索所有gitlab项目
      • 过年时鼓捣xirang框架遇到的前后端问题两则
        • 后端-go-playground/validator 校验的零值问题
        • 前端-多层路由面包屑重复渲染的问题
  • 前端编程笔记

  • Go学习笔记

  • Vue-21年学习笔记

  • Vue-22年重学笔记

  • 编程世界
  • Go编程笔记
  • 个人项目
二丫讲梵
2024-02-19
目录

过年时鼓捣xirang框架遇到的前后端问题两则

文章发布较早,内容可能过时,阅读注意甄别。

过年在家时,借鉴 gin-vue-admin 项目的多模块儿思路,抽空把 xirang (opens new window) 项目做了一波大改造,使之更加底层,也更易于扩展。在这个折腾的过程中,前后端都遇到了一个问题,在此记录。

# 后端-go-playground/validator 校验的零值问题

与其他 go-web 项目类似,我的这个框架中前端的菜单也是由后端管理的动态路由,这个路由是一个树的概念,每个层级通过 ParentId 字段串联,在请求参数中,这个字段的配置如下:

	ParentId uint `json:"parentId" validate:"required"`
1

之前针对菜单的增删改查一直没遇到什么问题,这次因为模块儿调整,涉及到一级目录的调整,发现更新一级目录的时候,总是会报一个错误:ParentId为必填字段,然而打开请求参数,却又发现,这个字段明明已经正常传递了值的:

经过网上一番检索,发现问题出在了 validate:"required",当你这么配置的时候,意味着该字段为必填,且不能为零值,而针对 uint 类型而言,0 则是不符合条件的,因此会出现这个错误。

这里可以调整为如下配置:

	ParentId uint `json:"parentId" validate:"gte=0"`
1

表示校验对应值大于等于 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:   "系统",
}
1
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:   "系统",
}
1
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>
1
2
3
4

此时再次点击操作日志的页面,就不会再出现顶部重复渲染的问题了。

微信 支付宝
上次更新: 2024/09/26, 21:41:44
开源一个工具-使用关键字搜索所有gitlab项目
基于codemirror在页面中嵌入代码编辑器

← 开源一个工具-使用关键字搜索所有gitlab项目 基于codemirror在页面中嵌入代码编辑器→

最近更新
01
学习周刊-总第212期-2025年第21周
05-22
02
从赵心童世锦赛夺冠聊聊我的斯诺克情缘
05-16
03
学习周刊-总第211期-2025年第20周
05-15
更多文章>
Theme by Vdoing | Copyright © 2017-2025 | 点击查看十年之约 | 浙ICP备18057030号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式