快速开始

在项目根目录下打开终端（包含package.json的目录）

  1. # 导入项目所需依赖
  2. npm install
  4. # 访问项目
  5. npm run dev
  7. # 打包项目
  8. npm run build

目录结构分析

fateboard基于vue2，使用了vue生态中vuex、vue-router、element-ui等插件

src目录下，核心目录：

  • views：包括了不同的页面组件
  • components：页面组件中用到的重复的组件
  • utils：封装了一些公共的方法，其中request.js导出了一个axios实例，访问服务器的具体路径需要在此处修改
  • api：通过Promise封装了所需要的api请求函数，函数内都用到了utils工具包下的request.js，为保持项目代码风格的一致性，后续开发的所有ajax请求也需要在此处定义
  • store：vuex目录，用于管理不同组件的公共状态，后续开发也需要使用
  • router：定义了路由，需要在开发时根据需要更改
  • style：使用sass定义了一些样式

src目录下，核心文件：

  • main.js：项目的入口文件，导入相关插件
  • App.js：根组件
  • App.css（自己创建的）：全局样式

image.png

开发流程

1. 创建页面组件

在 src/views 下创建目录及页面组件
image.png

2. 更改路由

首先打开 src/router 下的 index.js 文件
根据二次开发的需求，我们把最初默认跳转到 running 目录改成默认跳转到我们之前定义的联邦训练页面，并且暂时注释了默认的路由守卫（用于鉴权，默认返回到登陆页面）

  1. export const constantRouterMap = [
  2.   {
  3.     path: '/',
  4.     component: Layout,
  5.     redirect: '/federalTrain',
  6.     name: 'Dashboard',
  7.     hidden: true,
  8.     children: [
  9.       {
  10.         path: '/federalTrain',
  11.         redirect: '/federalTrain/chosePartner',
  12.         component: () => import('@/views/federal-train'),
  13.         children: [{
  14.           path: '/federalTrain/chosePartner',
  15.           component: () => import('@/views/federal-train/chose-partner')
  16.         }, {
  17.           path: '/federalTrain/choseParams-normal',
  18.           component: () => import('@/views/federal-train/chose-params-normal')
  19.         }, {
  20.           path: '/federalTrain/choseParams-advance',
  21.           component: () => import('@/views/federal-train/chose-params-advance')
  22.         }
  23.         ]
  24.       },
  26.       ........
  27.       ]
  28.   },
  29.   // { path: '/login', component: () => import('@/views/job-login/index'), hidden: true },
  30.   { path: '/404', component: () => import('@/views/404'), hidden: true },
  31.   { path: '*', redirect: '/404', hidden: true }
  32. ]
  34. const router = new Router({
  35.   // mode: 'history',
  36.   scrollBehavior: () => ({ y: 0 }),
  37.   routes: constantRouterMap
  38. })
  39. // let preUrl = null
  40. // router.beforeEach((to, from, next) => {
  41. //   if (getLocal('CurrentUser')) {
  42. //     if (preUrl) {
  43. //       const mid = preUrl
  44. //       preUrl = null
  45. //       next(mid)
  46. //     } else if (to.path === '/history') {
  47. //       if (from.query.page || from.params.page) {
  48. //         to.params.page = from.query.page
  49. //         to.params.search_job_id = from.query.search_job_id
  50. //         to.params.search_party_id = from.query.search_party_id
  51. //         to.params.search_role = from.query.search_role
  52. //         to.params.search_status = from.query.search_status
  53. //       }
  54. //       // console.log(to, from)
  55. //       next()
  56. //     } else if (to.name === 'login') {
  57. //       next({
  58. //         name: 'RUNNINNG'
  59. //       })
  60. //     } else {
  61. //       next()
  62. //     }
  63. //   } else if (to.name !== 'login') {
  64. //     if (!preUrl) {
  65. //       preUrl = Object.assign({}, to)
  66. //     }
  67. //     next({
  68. //       name: 'login'
  69. //     })
  70. //   } else {
  71. //     if (from.name !== 'login') {
  72. //       if (!preUrl) {
  73. //         preUrl = Object.assign({}, from)
  74. //       }
  75. //     }
  76. //     next()
  77. //   }
  78. // })
  79. export default router

3. 相关api开发

打开 src/api 目录，新建一个 federalTrain.js 用于封装我们自定义的ajax请求
image.png
具体代码如下，由于request是axios的一个实例，其中封装了bashurl，我们在指定访问路径时只需要指定path部分

  1. import request from '@/utils/request'
  3. export function submitAssignment(data) {
  4.   return request({
  5.     url: '/v1/client/submit/job/general',
  6.     method: 'post',
  7.     data
  8.   })
  9. }
  11. export function submitAssignmentByFile(data) {
  12.   return request({
  13.     url: '/v1/client/submit/job/high',
  14.     method: 'post',
  15.     data
  16.   })
  17. }

分别封装了通过参数提交训练任务和通过文件提交训练任务

4. 导航栏二次开发

打开 src/views/layout/components 目录下的 Navbar.vue

更改导航
image.png
根据 style 标签下的导入找到样式文件，src/styles/common/layout/navbar.scss
image.png
根据 scss 规则，为刚刚添加的导航定义样式

  1. .middle-router-btns {
  2.   align-self: flex-start;
  3.   justify-self: start;
  4.   margin-left: 28px;
  6.   > span {
  7.     margin: 0 8px;
  8.     padding: 0 15px;
  9.     $h: 28px;
  10.     color: rgba(255, 255, 255, 0.6);
  11.     height: $h;
  12.     line-height: $h;
  13.     border-radius: $h;
  14.     cursor: pointer;
  16.     &:hover {
  17.       color: #fff;
  18.     }
  19.   }
  21.   .active {
  22.     color: #fff;
  23.   }
  24. }

最终效果，可以根据需求添加更过样式
image.png

5. 联邦训练组件开发

根据第一步和第二步，我们已经可以访问到我们自定义的页面组件了，并且根据第4步，我们更是可以通过导航栏访问到我们自定义的页面
接下来我们要具体开发联邦训练组件

  1. 定义框架

首先我们要根据之前定义的二级路由，创建相应的 steps 组件和添加用于显示具体内容的 route -view ，用于配置联邦训练参与者和相关参数的页面组件都会显示在route -view 中

最终效果：
image.png
其中的卡片效果在全局样式 App.css 下

代码实现:
index.vue

  1. <template>
  2.   <div class="site-layout-content">
  3.     <el-steps :active="stepActive" style="height: 10%">
  4.       <el-step icon="el-icon-upload" title="任务方选择"/>
  5.       <el-step icon="el-icon-download" title="参数配置"/>
  6.     </el-steps>
  7.     <div class="content-container" style="height: 90%">
  8.       <router-view @stepActive="changeStep"/>
  9.     </div>
  11.   </div>
  12. </template>
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       stepActive: 1
  19.     }
  20.   },
  21.   methods: {
  22.     changeStep(step) {
  23.       this.stepActive = step
  24.     }
  25.   }
  26. }
  27. </script>
  29. <style scoped>
  30. .content-container {
  31.   width: 100%;
  32.   overflow-y: scroll;
  33. }
  34. </style>

全局样式

  1. /* 全局卡片样式 */
  2. .site-layout-content {
  3.   padding: 24px;
  4.   border-radius: 7px;
  5.   -moz-border-radius: 7px;
  6.   -webkit-box-shadow: 0 20px 15px #9B7468;
  7.   -moz-box-shadow: 0 20px 15px #9B7468;
  8.   box-shadow: 0 8px 8px rgba(96, 185, 234, .24), 0 0 8px rgba(96, 185, 234, .12);
  9.   text-decoration: none;
  10.   background: #fff;
  11.   height: 88vh;
  12.   width: 90vw;
  13.   margin-top: 3vh;
  14. }
  1. 编写参与方组件

我们需要指定联邦训练的参与方，以及用于训练的数据源和命名空间
image.png

代码实现：

  1. <template>
  2.   <div>
  3.     <el-form ref="form" :inline="true" :model="form">
  4.       <!-- 单行数据 -->
  5.       <el-row v-for="(item, index) in form.items" :key="index" type="flex" justify="space-around">
  6.         <el-form-item
  7.           :prop="'items.'+index+'.role'"
  8.           :rules="[{ required: true, message: '请输入角色类型'}]"
  9.           label="角色类型:">
  10.           <el-input v-model="item.role" readonly/>
  11.         </el-form-item>
  12.         <el-form-item
  13.           :prop="'items.'+index+'.id'"
  14.           :rules="[{ required: true, message: '请输入成员ID' }]"
  15.           label="成员ID:">
  16.           <el-input v-model="item.id"/>
  17.         </el-form-item>
  18.         <el-form-item
  19.           :prop="'items.'+index+'.tableName'"
  20.           :rules="[{ required: true, message: '请输入数据表名称' }]"
  21.           label="数据表名称:">
  22.           <el-input v-model="item.tableName"/>
  23.         </el-form-item>
  24.         <el-form-item
  25.           :prop="'items.'+index+'.nameSpace'"
  26.           :rules="[{ required: true, message: '请输入命名空间' }]"
  27.           label="命名空间:">
  28.           <el-input v-model="item.nameSpace"/>
  29.         </el-form-item>
  30.       </el-row>
  31.       <el-row type="flex" justify="center">
  32.         <el-form-item>
  33.           <el-button
  34.             type="primary"
  35.             style="width: 83vw"
  36.             @click="addPartner"
  37.           >新增参与方
  38.           </el-button
  39.           >
  40.         </el-form-item>
  41.       </el-row>
  43.     </el-form>
  44.     <el-row style="margin: 5vh 10vw;" type="flex" justify="space-around">
  45.       <el-button type="info" plain round @click="resetForm">重置</el-button>
  46.       <el-button type="primary" plain round @click="toNext">继续</el-button>
  47.     </el-row>
  48.   </div>
  49. </template>
  51. <script>
  52. import { mapMutations } from '_vuex@3.0.1@vuex'
  54. export default {
  55.   data() {
  56.     return {
  57.       form: {
  58.         items: [
  59.           { role: '主导方', id: '', tableName: '', nameSpace: '' },
  60.           { role: '参与方', id: '', tableName: '', nameSpace: '' }
  61.         ]
  62.       }
  63.     }
  64.   },
  65.   mounted() {
  66.     this.$emit('stepActive', 1)
  67.   },
  68.   methods: {
  69.     addPartner() {
  70.       this.form.items.push({
  71.         role: '参与方',
  72.         id: '',
  73.         tableName: '',
  74.         nameSpace: ''
  75.       })
  76.     },
  77.     resetForm() {
  78.       this.$refs.form.resetFields()
  79.       this.form.items = this.form.items.slice(0, 2)
  80.     },
  81.     toNext() {
  82.       this.$refs.form.validate((valid) => {
  83.         if (valid) {
  84.           const guest = {
  85.             party_id: this.form.items[0].id,
  86.             table_name: this.form.items[0].tableName,
  87.             namespace: this.form.items[0].nameSpace
  88.           }
  89.           const host = this.form.items.slice(1).map(item => ({
  90.             party_id: item.id,
  91.             table_name: item.tableName,
  92.             namespace: item.nameSpace
  93.           }))
  95.           this.UPDATE_PARTNER({ host, guest })
  96.           this.$router.push('/federalTrain/choseParams-normal')
  97.         } else {
  98.           console.log('error submit!!')
  99.           return false
  100.         }
  101.       })
  102.     },
  103.     ...mapMutations('federalTrain', ['UPDATE_PARTNER'])
  104.   }
  105. }
  106. </script>
  1. 编写根据参数训练和根据配置文件训练的组件

3.1 根据参数训练

image.png
代码实现

  1. <template>
  2.   <div>
  3.     <div class="form-container">
  4.       <el-form
  5.         ref="form"
  6.         :rules="rules"
  7.         :model="form"
  8.         label-position="right"
  9.         size="small"
  10.         style="width: 50vw"
  11.         label-width="15vw">
  12.         <el-form-item prop="assignmentName" label="任务名称:">
  13.           <el-input v-model="form.assignmentName" class="form-input"/>
  14.         </el-form-item>
  15.         <el-form-item :rules="[{ required: true, message: '请输入任务类型'}]" prop="assignmentType" label="任务类型:">
  16.           <el-radio-group v-model="form.assignmentType">
  17.             <el-radio :label="0">单机</el-radio>
  18.             <el-radio :label="1">多机</el-radio>
  19.           </el-radio-group>
  20.         </el-form-item>
  21.         <el-form-item prop="algorithmName" label="采用算法:">
  22.           <el-input v-model="form.algorithmName" class="form-input" readonly/>
  23.         </el-form-item>
  24.         <el-form-item prop="algorithmParams" label="算法参数:">
  25.           <el-input v-model="form.algorithmParams" class="form-input" type="textarea"/>
  26.         </el-form-item>
  27.         <el-form-item prop="isScale" label="isScale:">
  28.           <el-radio-group v-model="form.isScale">
  29.             <el-radio :label="true">是</el-radio>
  30.             <el-radio :label="false">否</el-radio>
  31.           </el-radio-group>
  32.         </el-form-item>
  33.         <el-form-item prop="percent" label="测试数据集百分比(%):">
  34.           <el-input v-model.number="form.percent" class="form-input" max="1" min="0" type="number" step="0.1"/>
  35.         </el-form-item>
  36.         <el-form-item prop="postScript" label="备注信息:">
  37.           <el-input v-model="form.postScript" class="form-input" type="textarea"/>
  38.         </el-form-item>
  39.         <el-form-item>
  40.           <el-link style="color:blue" @click="$router.push('/federalTrain/choseParams-advance')">高级</el-link>
  41.         </el-form-item>
  43.       </el-form>
  44.     </div>
  45.     <el-row style="margin: 5vh 10vw;" type="flex" justify="space-around">
  46.       <el-button type="info" plain round @click="toLast">返回</el-button>
  47.       <el-button :loading="submitLoading" type="primary" plain round @click="handleFinish">提交</el-button>
  48.     </el-row>
  49.   </div>
  51. </template>
  53. <script>
  54. import { mapState } from 'vuex'
  55. import { submitAssignment } from '../../../api/federalTrain'
  57. export default {
  58.   data() {
  59.     const algorithmValidator = (rules, value, callback) => {
  60.       if (!value || value === '') {
  61.         callback()
  62.       }
  63.       const jsonVal = '{' + value + '}'
  64.       try {
  65.         if (typeof JSON.parse(jsonVal) === 'object') {
  66.           this.paramType = 0
  67.           callback()
  68.         }
  69.       } catch (e) {
  70.         try {
  71.           if (typeof JSON.parse(value) === 'object') {
  72.             this.paramType = 1
  73.             callback()
  74.           }
  75.         } catch (e2) {
  76.           console.log(2222)
  77.           callback(new Error())
  78.         }
  79.       }
  80.       callback(new Error())
  81.     }
  82.     return {
  83.       form: {
  84.         assignmentName: '',
  85.         assignmentType: 0,
  86.         algorithmName: 'hetero_lr',
  87.         algorithmParams: '',
  88.         isScale: true,
  89.         percent: null,
  90.         postScript: '',
  91.         paramType: 0
  93.       },
  94.       submitLoading: false,
  95.       rules: {
  96.         assignmentName: [{ required: true, message: '请输入任务名称' }],
  97.         assignmentType: [{ required: true, message: '请输入任务类型' }],
  98.         algorithmParams: [{ validator: algorithmValidator, message: '算法参数格式不正确' }],
  99.         percent: [{ required: true, message: '请输入测试数据百分比' }, { type: 'number', max: 1, min: 0, message: '必须在0和1之间' }]
  100.       }
  101.     }
  102.   },
  103.   computed: {
  104.     ...mapState('federalTrain', ['guest', 'host'])
  105.   },
  106.   mounted() {
  107.     this.$emit('stepActive', 2)
  108.     if (this.guest === null || this.host === null) {
  109.       this.$router.push('/federalTrain/chosePartner')
  110.     }
  111.   },
  112.   methods: {
  113.     toLast() {
  114.       this.$router.push('/federalTrain/chosePartner')
  115.     },
  116.     handleFinish() {
  117.       this.$refs.form.validate((valid) => {
  118.         if (valid) {
  119.           this.submitLoading = true
  121.           let algorithmParams
  122.           if (this.paramType === 0) {
  123.             algorithmParams = this.form.algorithmParams
  124.               ? JSON.parse('{' + this.form.algorithmParams + '}')
  125.               : {}
  126.           } else {
  127.             algorithmParams = this.form.algorithmParams
  128.               ? JSON.parse(this.form.algorithmParams)
  129.               : {}
  130.           }
  131.           const { form } = this
  132.           const data = {
  133.             algorithm_parameters: algorithmParams,
  134.             guest: this.guest,
  135.             host: this.host,
  136.             isScale: form.isScale,
  137.             job_description: form.postScript,
  138.             job_name: form.assignmentName,
  139.             test_size: form.percent,
  140.             train_algorithm_name: form.algorithmName,
  141.             work_mode: form.assignmentType,
  142.             config_type: 0
  143.           }
  144.           console.log(data)
  145.           submitAssignment(data).then((res) => {
  146.             console.log(res)
  147.           }, (err) => {
  148.             console.log(err)
  149.           }).finally(() => {
  150.             this.submitLoading = false
  151.           })
  153.           // this.$router.push('/running')
  154.         } else {
  155.           console.log('error submit!!')
  156.           return false
  157.         }
  158.       })
  159.     }
  160.   }
  161. }
  162. </script>
  164. <style scoped>
  165. .form-container {
  166.   width: 100%;
  167.   display: flex;
  168.   flex-direction: column;
  169.   align-items: center;
  170. }
  172. .form-input {
  173.   width: 35vw;
  174. }
  175. </style>

3.2 根据配置文件训练
image.png
代码实现

  1. <template>
  2.   <div>
  3.     <div class="form-container">
  4.       <el-form
  5.         ref="form"
  6.         :rules="rules"
  7.         :model="form"
  8.         label-position="right"
  9.         size="small"
  10.         style="width: 50vw"
  11.         label-width="15vw">
  12.         <el-form-item prop="train_name" label="任务名称:">
  13.           <el-input v-model="form.train_name" class="form-input" readonly/>
  14.         </el-form-item>
  15.         <el-form-item prop="config_file" label="config_file">
  16.           <el-upload
  17.             :limit="1"
  18.             :auto-upload="true"
  19.             :before-upload="resetConfigFile"
  20.             :multiple="false"
  21.             :file-list="form.config_file"
  22.             action="#">
  23.             <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  24.             <el-button size="small" type="primary">下载模版</el-button>
  25.           </el-upload>
  26.         </el-form-item>
  27.         <el-form-item prop="dsl_file" label="dsl_file">
  28.           <el-upload
  29.             :limit="1"
  30.             :auto-upload="true"
  31.             :before-upload="resetDslFile"
  32.             :multiple="false"
  33.             :file-list="form.dsl_file"
  34.             action="#">
  35.             <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  36.             <el-button size="small" type="primary">下载模版</el-button>
  37.           </el-upload>
  38.         </el-form-item>
  39.         <el-form-item>
  40.           <el-link style="color:blue" @click="$router.push('/federalTrain/choseParams-normal')">普通</el-link>
  41.         </el-form-item>
  43.       </el-form>
  44.       <el-row style="position: absolute;bottom: 35vh;width: 50vw" type="flex" justify="space-around">
  45.         <el-button type="info" plain round @click="toLast">返回</el-button>
  46.         <el-button :loading="submitLoading" type="primary" plain round @click="handleFinish">提交</el-button>
  47.       </el-row>
  48.     </div>
  50.   </div>
  51. </template>
  53. <script>
  54. import { mapState } from 'vuex'
  55. import { submitAssignmentByFile } from '../../../api/federalTrain'
  57. export default {
  58.   data() {
  59.     return {
  60.       form: {
  61.         train_name: 'homo_logistic_regression',
  62.         config_file: [],
  63.         dsl_file: []
  64.       },
  65.       submitLoading: false,
  66.       rules: {
  67.         train_name: [{ required: true, message: '请输入任务名称' }]
  68.       }
  69.     }
  70.   },
  71.   computed: {
  72.     ...mapState('federalTrain', ['guest', 'host'])
  73.   },
  74.   mounted() {
  75.     this.$emit('stepActive', 2)
  76.     if (this.guest === null || this.host === null) {
  77.       this.$router.push('/federalTrain/chosePartner')
  78.     }
  79.   },
  80.   methods: {
  81.     toLast() {
  82.       this.$router.push('/federalTrain/chosePartner')
  83.     },
  84.     resetConfigFile(file) {
  85.       this.form.config_file = [file]
  86.       return false
  87.     },
  88.     resetDslFile(file) {
  89.       this.form.dsl_file = [file]
  90.       return false
  91.     },
  92.     handleFinish() {
  93.       console.log(this.form)
  94.       if (this.form.config_file.length === 0 || this.form.dsl_file.length === 0) {
  95.         this.$message({ message: '请选择config文件和dsl文件', type: 'warning' })
  96.         return
  97.       }
  98.       this.$refs.form.validate((valid) => {
  99.         if (valid) {
  100.           this.submitLoading = true
  101.           const { form } = this
  102.           console.log(form)
  103.           const formData = new FormData()
  104.           formData.append('train_algorithm_name', form.train_name)
  105.           formData.append('config_type', 1)
  106.           formData.append('config_file', form.config_file[0])
  107.           formData.append('dsl_file', form.dsl_file[0])
  109.           submitAssignmentByFile(formData).then((res) => {
  110.             console.log(res)
  111.           }, (err) => {
  112.             console.log(err)
  113.           }).finally(() => {
  114.             this.submitLoading = false
  115.           })
  117.           // this.$router.push('/running')
  118.         } else {
  119.           console.log('error submit!!')
  120.           return false
  121.         }
  122.       })
  123.     }
  125.   }
  127. }
  128. </script>
  130. <style scoped>
  131. .form-container {
  132.   width: 100%;
  133.   display: flex;
  134.   flex-direction: column;
  135.   align-items: center;
  136. }
  138. .form-input {
  139.   width: 20vw;
  140. }
  141. </style>