基于D2Admin 简化模板自己做的前端系统（四）

2024-05-23 06:43:37

实现各队人员的增删查改

一.功能简介

点击这个进行选择选择不同展示不同

展示的样子实现增删查改

二代码分析

2.1学院选择

通过element的el-select
实现选择下拉框操作设置value对应学院

watch
通过vue的watch实现动态检测vaule的值来展示数据 value==1 调用函数

axios的get 查找数据

这里需要注意一下因为我数据展示需要排序 队长副队其他队员
所以使用数组的sort进行排序
这里需要注意一下排序是通过json中设置的key值操作的

2.2增加队员

点击新增队员出现页面

实现代码

1根据填写的职位赋予key值用来排序
2axios get获取数据

2.3删除队员

点击实现删除

根据name获取id 根据id 获取地址进行删除

2.4查询队员

根据name进行查询

2.5修改队员

选择姓名后出现数据进行修改

也要根据输入的职位赋予key值进行排序
根据name 获取 id进行修改

这里需要注意一个地方
当我select选择改变展示的数据也要改变
当时想了2个方法一个是this.sendTimer = setInterval(()=>{},100)
这个不行还没改就一直在变
所以就用了第二个 vue的watch

监测name值 name值为空数据为空

2.6提2个问题

第一个D2Admin 的表单带一个筛选功能

第二个
使用axios 遇到了post 的500报错 delete patch的404报错问题
我的解决方法写在我另一篇文章中了
https://blog.csdn.net/weixin_43055079/article/details/100578096
前端系统的代码还没完成完成后将放置到github中

基于D2Admin 简化模板自己做的前端系统（四）相关推荐

基于D2Admin 简化模板自己做的前端系统（一）
一.起因学习了一段时间vue 想自己做个项目来检测自己学习的程度下面就开始介绍了二.首页 2.1系统介绍这个是基于D2Admin来做的这个系统感觉很不错建议去看看 D2Admin 封装了各种 ...
基于D2Admin 简化模板自己做的前端系统（三）
简介点击各院简介跳转到各院详情页页面详情表单轮播图 echarts图表翻转动画一.功能介绍 1.1表单展示通过el-table展示数据 1.2轮播图轮播图是我自己写的一个组件组件布 ...
基于D2Admin 简化模板自己做的前端系统（二）
各院简介部分功能实现布局选择这个布局可以进行拖拽大小控制我通过参数控制使大小位置固定了各卡片展示的内容功能实现 **一.**通过循环展示出8张卡片 **二.**通过下标展示不同信息 ...
qiankun 微前端_看滴普大前端是如何玩转基于“qiankun”（乾坤）的微前端架构的...
前言「微前端」可以算是 2019年前端技术领域中最热门的话题.各个大厂也纷纷贡献出了自己的解决方案和实践分享.滴普科技作为一家致力于为企业提供数字化转型服务的技术公司,前端也需要灵活聚合,快速复用, ...
【一】C# 基于WPF 使用CefSharp来做万能爬虫
目录 [一]C# 基于WPF 使用CefSharp来做万能爬虫 [二]C# 基于WPF 使用CefSharp来做万能爬虫 [三]C# 基于WPF 使用CefSharp来做万能爬虫 [四]C# 基于WP ...
用企业微信机器人做交互式前端-输出
用企业微信机器人做交互式前端-输出本系列所有文章请访问:概述概述 web界面的ui和微信机器人的ui的区别在于: web界面组合多种控件完成所有信息的整体呈现与输入,信息丰富.操作高效,用户获取的 ...
基于HALCON的模板匹配方法总结
很早就想总结一下前段时间学习HALCON的心得,但由于其他的事情总是抽不出时间.去年有过一段时间的集中学习,做了许多的练习和实验,并对基于HDevelop的形状匹配算法的参数优化进行了研究,写了一篇& ...
thinkPHP的模板是做什么用的
thinkPHP的模板是做什么用的问题为什么PHP中ThinkPHP有做类似模板引擎的东西?smarty也是?这些到底有何用? 我是真没发现它们的用处在哪里?分离了前端和PHP的依赖?HTML文件 ...
用企业微信机器人做交互式前端-权限
用企业微信机器人做交互式前端-权限本系列所有文章请访问:概述权限微信机器人只是一个前端的ui,所以其权限管控还是依赖于jxTMS既有的权限管控体系:角色. 在jxTMS中,用户点击后打开一个操作 ...

最新文章

热门文章