ldxcsdn的博客

这学期的项目实训中我们组选择的课题是分布式异步联邦学习平台。联邦学习主要体现在不同用户之前的数据集不共享，通过共享模型参数参与聚合间接达到同数据集共享达到的相近效果；分布式是将训练和聚合分别放在不同机器上运行，充分利用硬件资源加速整个训练过程；同时这里的异步训练是完全的，不同用户的运算速度和参与时间是不同的，为了去解决这个问题，我们采取的方式是设置权重，根据参与用户进行的聚合轮次，为其分配不同的权重，以平衡用户上传的模型参数对全局模型参数的影响。我们平台的主要功能是给予用户发布和参与联邦学习任务的平台以及

这是对开发过程中一些比较有意义、难缠的bug的记录和总结。修改bug查阅的文档、博客至少上百篇，也算是血泪教训了。记录在此，一是证明自己的开发过程，二是总结汇总，避免重复的错误再犯。注意规则名字不要包含诸如“name”这种关键字，否则会报错2、input输入框图标不显示的问题参考下面这个，用插槽的方式解决 elementPlus使用icon图标不显示解决方法_小黑ya_的博客-优快云博客_element icon无法显示Icon 图标 | Element Plus (gitee.io)或者直

前端的界面基本完成之后，我们需要继续开始界面的高级美化工作。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这里我在纠结是采用VUEX还是传统的session，查阅了一下资料：详见：https://www.jianshu.com/p/bc2d2429a693首先，理解vuex的作用每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下

本文主要介绍与任务相关的界面的编写，具体而言，分为展示任务列表、新建任务、个人任务等。此外，引入了echarts，以进行训练过程的可视化展示，也会在本文介绍其使用。这一部分可以认为是该系统最重要的一部分。从后端获取到数据之后，跳转到所有任务展示界面，这里其实比较常规，就是一个表格的实现和美化：创建任务用一个卡片包裹的表单form。表单当中包括了常见的数据选择形式：单选框，计数器，输入框，文件上传，按钮等等…echarts的使用折线图主要用来展示数据项随着时间推移的趋势或变化。ECharts

本周的前端工作主要是侧边栏的实现以及前端路由的编写。主要使用了elementplus自带的el-menu.官方文档：https://element-plus.gitee.io/zh-CN/component/menu.html#left-and-right垂直菜单，可内嵌子菜单。通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。编写起来还是比较容易的，注意子菜单如何编写。代码如下：至于如何加图标，这里也是用

登录注册界面是我认为最难写的界面之一。原因在于：1、它不是很规律，自由发挥的空间很大，同时想绘制出比较雅观的界面是比较困难的。需要用到大量的CSS。2、登录注册不止有界面，还有输入框规则的制定3、获取到数据，发送给后端的编写。首先展示一下最后的成果：我觉得还是比较美观的。可以看到就是左边插图右半边输入框的结构，比例协调。这个还是比较容易的，其实是两幅图，一副左下角的蓝色纯色图，另一幅是从插画网站找到的主题色接近的图。拼接好位置。这里要用到CSS。右侧输入框这个用了elementplus的输入框

接下来进入了本周的前端开发工作，本周主要完成主页面的编写。主页面的预期效果是美观、简介，内容主要是以下几个：顶栏有问候语，根据时间自动变化；然后是基本信息，介绍了我们的项目信息；然后是一副满足美化效果的插画；然后是训练记录界面；最后是一个美观的走马灯，可以向客户展示图片信息等等。问候语根据计算得到的日期生成，然后是头像；这里用到了计算属性，用来计算日期：基本信息这里主要就是一个card卡片包裹着一个el-description界面，里面进行内容填充。描述页我抽成了一个组件，如下：插画

中期的界面总体来说还是比较简陋的，因此有必要下定决心大刀阔斧的改造一番，达到理想的前端展示效果，这样才能吸引用户。总体架构如图：src文件夹下，assets存放静态资源，components是组件，router是路由，styles是静态CSS资源，view是展示的组件，剩下的略。这里可以选用element plus自带的布局组件，但是我用了一下感觉还是不太灵活，决定还是自己写，然后结合CSS控制相对布局。总体就是分成顶端，侧边栏，主体区域这三部分。体现在layout.vue当中比较明显：头部的绘制

基本上是采用了顶栏、侧边栏、内容区三个部分的经典设计。背景加了图片。可以看到主要分成以下几个部分：顶端是一个状态栏，分成初始化、训练模型、训练完成三个状态，再往下是三个按钮，单选框。然后就是一个表格，用来表示训练的轮次，以及相应的精确度展示，再往下是一个折线图。折线图使用的是第三方库echarts。官网的介绍：一个基于 JavaScript 的开源可视化图表库。官网：https://echarts.apache.org/handbook/zh/get-started/折线图样式的修改折线图中折线的

由于基本是从零开始，我花了三周左右的时间自学和基本掌握了前端的技巧，这里简要介绍一下我的前端学习历程：首先是HTML+CSS+JavaScript的前端基础三件套的学习，这里我推荐B站狂神说JAVA这个老师的系列课程。狂神说HTML+CSS学习笔记【狂神说Java】JavaScript学习笔记这两个笔记总结的比较全面。然后是VUE的学习。Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库

联邦机器学习(Federated machine learning/Federated Learning)，又名联邦学习，联合学习，联盟学习。联邦机器学习是一个机器学习框架，能有效帮助多个机构在满足用户隐私保护、数据安全和政府法规的要求下，进行数据使用和机器学习建模。联邦学习作为分布式的机器学习范式,可以有效解决数据孤岛问题,让参与方在不共享数据的基础上联合建模,能从技术上打破数据孤岛,实现AI协作。谷歌在2016年提出了针对手机终端的联邦学习,微众银行AI团队则从金融行业实践出发,关注跨机构跨组织的大数据