项目冲刺二总结

冲刺二相较于冲刺一，还是有进步的。可能是因为全身心投入项目了，即使一个 bug 不会或者弄了很久，但基本当天的任务也都能完成。在全员的积极配合下，顺利的完成了冲刺二所有的任务。

在冲刺二里，我的任务是实现管理员界面对学科、阶段、项目的增删查改。其实增删查改功能的实现花不了多少时间，就是调个接口就能实现的事，但是我居然整整花了十天时间去完成这个功能！毫不意外，其中将近有一半多的时间在设计页面布局...最终我选择了用现成的 element Ui 组件库(但是页面看起来还是很平淡，噢，那一定不会是最终页面)，真的很方便！来给大家分享几个~

(官网在这里：element) 

一、Table 表格 + 后台数据 ——> 实现学科、阶段、项目的展示功能

1. 首先我们先在官网选择一个自己喜欢的样式，我选择这个👇

(当然样式的选择和你要实现的功能也有一定的关系，如果你只是数据的展示，不需要对数据进行编辑或删除，就可以找一个没有操作这一栏的样式，不然还要手动删哟)

2. 复制官网代码 + 修改 

在代码里我们不难发现，展示的数据就是 tableData 的内容。所以我们把后台获取过来的数据赋值给 tableData 这个数组就可以了。 

axios
   .post(
          `http://124.71.219.15:8083//management_system/subject/selectAllSubject`
        )
        .then((response) => {
            // 如果请求成功就赋值
            if (response.data.flag) {
               this.tableData = response.data.data;
            } else {
              console.log('请求失败！')
            }
         })

这里需要注意两点：

1）搭配  forEach  遍历使用的时候可以通过 .concat 方法，将数组进行连接

2）如果获取过来的是对象，可以用 push 方法，将其添加到数组中，不能直接赋值

二、Cascader 级联选择器 + 后台数据 ——> 实现选择对应阶段或项目

1. 选择一款自己喜欢的样式(比如下面这款就是我想要的)

2. 复制代码 + 修改

其中 :options 后面的就是要展示的内容，是一个数组对象，:props 用于配置属性，比如我从后台获取过来的数据是这样的

很明显这里嵌套了三层，第一层是 subject 相关内容，第二层是 stageList，第三层是 projectList，所以，我们可以通过 props 来配置 children 是哪个数组，这样最终显示出来，第一级就是第一层的数据，第二级第三级等就是 children 指定的那个名字的数组。对应代码如下

<template>
           <form-item label="关卡选择" prop="stageSelect">
              <el-cascader
                ref="myStage"
                :options="stageOptions"
                :props="stageProps"
                :show-all-levels="false"
                v-model="ruleForm.stageSelect"
                name="stageOptions"
           >
              </el-cascader>
           </form-item>
</template>
<script>
   mounted() {
    axios
      .post(
        `http://124.71.219.15:8083//management_system/subject/selectAllSubject`
      )
      .then((response) => {
        if (response.data.flag) {     
          this.stageOptions = response.data.data;
        } else {
          alert("请求失败");
        }
      });
  },
  data(){
    return {
      //阶段选择
      stageOptions: [],
      //下拉列表props指定
      stageProps: {
        value: "stageId",  // 这里指定数组对象中属性为 stageId 的属性值为 value
        label: "name",     // 数组对象中 name 对应的值就是要显示到页面上的内容
        children: "stageList",  // 代表下一级的内容
      },
   }
}
</script>

最终结果就是这样的

 注意点：如果说我们还要显示下一层，且下一层的名字不叫 stageList 了，而是 projectList ，且 props 属性中的 children 只能配置一个，我这里就是用了一个投机取巧的办法，就是把获取过来的数组对象转换成字符串，再把里面 projectList 替换成 stageList ，再赋值给 stageOptions 即可

if (response.data.flag) {     
          var array = response.data.data;
          //把 array 中名为custompassList替换为stageList，为了练级器能显示
          array = JSON.parse(JSON.stringify(array).replace(/customspassList/g, 'stageList'))
          this.stageOptions = array;

以上就是本冲刺我觉得比较有收获的。再接再厉！