[新增] codehw mock&&serializer

mock/modules/codehw/index.js

@@ -0,0 +1,83 @@
+const express = require("express");
+const router = express.Router();
+const projectSerializer = require("../../serializers/codehw/ProjectSerializer");
+const buildSerializer = require("../../serializers/codehw/BuildSerializer");
+const deploySerializer = require("../../serializers/codehw/DeploySerializer");
+const unitTestSerializer = require("../../serializers/codehw/UnitTestSerializer");
+const functionalTestSerializer = require("../../serializers/codehw/FunctionalTestSerializer");
+const mirrorSerializer = require("../../serializers/codehw/MirrorSerializer");
+
+// 获得某个 Homework 的 Project 列表（应该只有一个）
+router.route("/projects").post((req, res) =>
+  res.send({
+    data: [{ projectId: "12313421", name: "据说只有一个对列表" }]
+  })
+);
+
+// 获得 Project 的详细信息
+router.route("/project/:id").get((req, res) =>
+  res.send({
+    id: req.params.id,
+    data: projectSerializer({ id: req.params.id })
+  })
+);
+
+// 获得一次构建的详细信息
+router.route("/build/:id").get((req, res) =>
+  res.send({
+    id: req.params.id,
+    data: buildSerializer({ id: req.params.id })
+  })
+);
+
+// 获得一次部署的详细信息
+router.route("/deploy/:id").get((req, res) =>
+  res.send({
+    id: req.params.id,
+    data: deploySerializer({ id: req.params.id })
+  })
+);
+
+// 获得一次单元测试的详细信息
+router.route("/unit/:id").get((req, res) =>
+  res.send({
+    id: req.params.id,
+    data: unitTestSerializer({ id: req.params.id })
+  })
+);
+
+// 获得一次页面功能测试的详细信息
+router.route("/functional/:id").get((req, res) =>
+  res.send({
+    id: req.params.id,
+    data: functionalTestSerializer({ id: req.params.id })
+  })
+);
+
+// 获得可用镜像的 ID
+router.route("/mirrors/:homeworkId/:projectId").get((req, res) =>
+  res.send({
+    data: [
+      mirrorSerializer({ id: req.params.id }),
+      mirrorSerializer({ id: req.params.id }),
+      mirrorSerializer({ id: req.params.id }),
+      mirrorSerializer({ id: req.params.id })
+    ]
+  })
+);
+
+// 触发一次部署
+router.route("/deploy").post((req, res) =>
+  res.send({
+    data: { success: true }
+  })
+);
+
+// 触发一次页面功能测试
+router.route("/functional").post((req, res) =>
+  res.send({
+    data: { success: true }
+  })
+);
+
+module.exports = router;

mock/routes.js

@@ -8,5 +8,6 @@ router.use("/group", require("./modules/group"));
 router.use("/question", require("./modules/question"));
 router.use("/assignment", require("./modules/assignment"));
 router.use("/review", require("./modules/review"));
+router.use("/codehw", require("./modules/codehw"));
 
 module.exports = router;

mock/serializers/codehw/BuildSerializer.js

@@ -0,0 +1,32 @@
+const makeId = require("../../util/makeId");
+
+/**
+ * @description 代码作业一次构建的基本信息
+ * @typedef {Object} BuildSerializerType
+ * @property {number|string} id 代码作业一次构建的 id
+ * @property {number|string} branchId 分支 id
+ * @property {number} buildState 构建状态[0:"构建中",1:"构建成功",-1:"构建失败"]
+ * @property {string} buildMessage 构建输出的信息
+ * @property {number|string} mirrorId 镜像 id （构建成功之后产生）
+ * @property {string} commitMessage commit 信息
+ */
+
+/**
+ * @description 生成BuildSerializer
+ * @returns {BuildSerializerType}
+ */
+module.exports = ({
+  id = makeId(),
+  branchId = makeId(),
+  mirrorId = makeId(),
+  buildState = 0
+}) => {
+  return {
+    id,
+    branchId,
+    buildState,
+    buildMessage: "我是构建输出的信息信息信息",
+    mirrorId,
+    commitMessage: "我是 commit 信息信息信息"
+  };
+};

mock/serializers/codehw/DeploySerializer.js

@@ -0,0 +1,25 @@
+const makeId = require("../../util/makeId");
+
+/**
+ * @description 代码作业一次部署的基本信息
+ * @typedef {Object} DeploySerializerType
+ * @property {number} id 代码作业一次构建的 id
+ * @property {number} deployState 部署状态[0:"部署中",1:"部署成功",-1:"部署失败"]
+ * @property {string} deployMessage 部署输出的信息
+ * @property {Object} config 配置信息{TBD}
+ * @property {string} pageUrl 项目部署的 url
+ */
+
+/**
+ * @description 生成DeploySerializerType
+ * @returns {DeploySerializerType}
+ */
+module.exports = ({ id = makeId(), deployState = 0 }) => {
+  return {
+    id,
+    deployState,
+    deployMessage: "我是部署输出的信息信息信息",
+    config: {},
+    pageUrl: "www.pageUrl.com/xiaobai/handsome/smart"
+  };
+};

mock/serializers/codehw/FunctionalTestSerializer.js

@@ -0,0 +1,51 @@
+const makeId = require("../../util/makeId");
+const dayjs = require("dayjs");
+
+/**
+ * @description 代码作业一次功能测试的基本信息
+ * @typedef {Object} FunctionalTestSerializerType
+ * @property {number} id 代码作业一次功能测试的 id
+ * @property {number} time 测试时间
+ * @property {string|number} deployId 对应的部署 id
+ * @property {OneFunctionalTestSerializerType[]} detail 所有测试用例列表
+ */
+
+/**
+ * @description 代码作业一次页面功能测试一个测试用例的基本信息
+ * @typedef {Object} OneFunctionalTestSerializerType
+ * @property {number} id 一个测试用例的 id
+ * @property {boolean} isPass 是否通过
+ * @property {string} message 输出
+ */
+
+/**
+ * @description 生成FunctionalTestSerializer
+ * @returns {FunctionalTestSerializerType}
+ */
+module.exports = ({ id = makeId(), deployId = makeId() }) => {
+  /**
+   * @return {OneFunctionalTestSerializerType}
+   */
+  const getOneFunctionalTestSerializer = () => ({
+    id: makeId(),
+    isPass: id % 2 === 1,
+    message:
+      "One Function alTes tSerializerOne FunctionalTestSerializer OneFunc tionalT estSerializer"
+  });
+
+  return {
+    id,
+    time: dayjs("2018-9-21").unix(),
+    deployId,
+    detail: [
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer(),
+      getOneFunctionalTestSerializer()
+    ]
+  };
+};

mock/serializers/codehw/MirrorSerializer.js

@@ -0,0 +1,21 @@
+const makeId = require("../../util/makeId");
+
+/**
+ * @description 代码作业镜像的基本信息
+ * @typedef {Object} MirrorSerializerType
+ * @property {number} id 镜像的 id
+ * @property {string} gitUrl git 仓库地址
+ * @property {string} downloadUrl 镜像下载地址
+ */
+
+/**
+ * @description 生成MirrorSerializer
+ * @returns {MirrorSerializerType}
+ */
+module.exports = ({ id = makeId() }) => {
+  return {
+    id,
+    gitUrl: "www.gitUrl.com/xiaobai/handsome/smart",
+    downloadUrl: "www.downloadUrl.com/xiaobai/handsome/smart"
+  };
+};

mock/serializers/codehw/ProjectSerializer.js

@@ -0,0 +1,55 @@
+const makeId = require("../../util/makeId");
+const buildSerializer = require("./BuildSerializer");
+const deploySerializer = require("./DeploySerializer");
+const unitTestSerializer = require("./UnitTestSerializer");
+const functionalTestSerializer = require("./FunctionalTestSerializer");
+
+/**
+ * @description 代码作业项目的基本信息
+ * @typedef {Object} ProjectSerializerType
+ * @property {number} id 代码作业项目 id
+ * @property {number} codeId 代码作业 id
+ * @property {string} url 项目 git 地址
+ * @property {string} name 项目名称
+ * @property {BuildSerializerType[]} buildList 构建 list
+ * @property {DeploySerializerType[]} deployList 部署 list
+ * @property {UnitTestSerializerType[]} unitTestList 单元测试 list
+ * @property {FunctionalTestSerializerType[]} functionTestList 页面功能测试 list
+ */
+
+/**
+ * @description 生成ProjectSerializerType
+ * @returns {ProjectSerializerType}
+ */
+module.exports = ({ id = makeId(), codeId = makeId() }) => {
+  return {
+    id,
+    codeId,
+    url: "www.url.com/xiaobai/handsome/smart",
+    name: "project-name",
+    buildList: [
+      buildSerializer({ buildState: 0 }),
+      buildSerializer({ buildState: 1 }),
+      buildSerializer({ buildState: -1 })
+    ],
+    deployList: [
+      deploySerializer({ deployState: 0 }),
+      deploySerializer({ deployState: 1 }),
+      deploySerializer({ deployState: -1 })
+    ],
+    unitTestList: [
+      unitTestSerializer({}),
+      unitTestSerializer({}),
+      unitTestSerializer({}),
+      unitTestSerializer({})
+    ],
+    functionTestList: [
+      functionalTestSerializer({}),
+      functionalTestSerializer({}),
+      functionalTestSerializer({}),
+      functionalTestSerializer({})
+    ],
+    config: {},
+    pageUrl: "www.pageUrl.com/xiaobai/handsome/smart"
+  };
+};

mock/serializers/codehw/UnitTestSerializer.js

@@ -0,0 +1,50 @@
+const makeId = require("../../util/makeId");
+const dayjs = require("dayjs");
+
+/**
+ * @description 代码作业一次部署的基本信息
+ * @typedef {Object} UnitTestSerializerType
+ * @property {number} id 代码作业一次单元测试的 id
+ * @property {number} time 测试时间
+ * @property {string|number} buildId 对应的构建 id
+ * @property {OneUnitTestSerializerType[]} detail 所有测试用例列表
+ */
+
+/**
+ * @description 代码作业一次部署的基本信息
+ * @typedef {Object} OneUnitTestSerializerType
+ * @property {number} id 一个测试用例的 id
+ * @property {boolean} isPass 是否通过
+ * @property {string} message 输出
+ */
+
+/**
+ * @description 生成UnitTestSerializer
+ * @returns {UnitTestSerializerType}
+ */
+module.exports = ({ id = makeId(), buildId = makeId() }) => {
+  /**
+   * @return {OneUnitTestSerializerType}
+   */
+  const getOneUnitTestSerializer = () => ({
+    id: makeId(),
+    isPass: id % 2 === 1,
+    message:
+      "One Function alTes tSerializerOne FunctionalTestSerializer OneFunc tionalT estSerializer"
+  });
+
+  return {
+    id,
+    buildId,
+    time: dayjs("2018-9-21").unix(),
+    detail: [
+      getOneUnitTestSerializer(),
+      getOneUnitTestSerializer(),
+      getOneUnitTestSerializer(),
+      getOneUnitTestSerializer(),
+      getOneUnitTestSerializer(),
+      getOneUnitTestSerializer(),
+      getOneUnitTestSerializer()
+    ]
+  };
+};

src/components/ProjectBuildCard/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="custom-card">
-    <div class="state" :class="stateClass">{{stateMessage}}</div>
+    <div class="state" :class="stateClass">{{ stateMessage }}</div>
     <div class="branch">
       <p>所属分支</p>
-      <p>{{branchId}}</p>
+      <p>{{ branchId }}</p>
     </div>
     <div v-if="buildState" class="mirror">
       <p>所属镜像</p>
-      <p>{{mirrorId}}</p>
+      <p>{{ mirrorId }}</p>
     </div>
     <div class="message">
       <p>commit message</p>
-      <div>{{commitMessage}}</div>
+      <div>{{ commitMessage }}</div>
     </div>
   </div>
 </template>

src/views/student/Code/ProjectDetail/BuildDetail.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <project-build-card v-bind:buildState="1"></project-build-card>
-  </div>
+  <div><project-build-card v-bind:buildState="1"></project-build-card></div>
 </template>
 
 <script>

src/views/student/Code/ProjectDetail/index.vue

@@ -3,23 +3,37 @@
     <page-header
       :routes="[{ name: '项目详情', path: 'code' }]"
       :tab-list="[
-        { name: '构建', path: `code/${$route.params.homeworkId}/${$route.params.projectId}/build` },
-        { name: '部署', path: `code/${$route.params.homeworkId}/${$route.params.projectId}/deploy` },
-        { name: '测试', path:  `code/${$route.params.homeworkId}/${$route.params.projectId}/test` }
+        {
+          name: '构建',
+          path: `code/${$route.params.homeworkId}/${
+            $route.params.projectId
+          }/build`
+        },
+        {
+          name: '部署',
+          path: `code/${$route.params.homeworkId}/${
+            $route.params.projectId
+          }/deploy`
+        },
+        {
+          name: '测试',
+          path: `code/${$route.params.homeworkId}/${
+            $route.params.projectId
+          }/test`
+        }
       ]"
     >
-      <template slot="title">项目名称</template>
+      <template slot="title"
+        >项目名称</template
+      >
       <template slot="content">
         <div>项目详情</div>
       </template>
     </page-header>
-    <page-body>
-      <router-view :projectDetail="projectDetail"/>
-    </page-body>
+    <page-body> <router-view :projectDetail="projectDetail" /> </page-body>
   </div>
 </template>
 
-
 <script>
 import { mapState } from "vuex";
 import { getProjectDetail } from "@/api/codehw";

src/views/student/Code/ProjectList/index.vue

@@ -1,12 +1,20 @@
 <template>
   <div>
     <page-header :routes="[{ name: '项目列表', path: 'codehw' }]">
-      <template slot="title">项目列表</template>
-      <template slot="content">共有 {{ projectList.length }} 个项目</template>
+      <template slot="title"
+        >项目列表</template
+      >
+      <template slot="content"
+        >共有 {{ projectList.length }} 个项目</template
+      >
     </page-header>
     <page-body>
       <div class="columns is-multiline is-desktop">
-        <div :key="item.projectId" v-for="item in projectList" class="column is-4">
+        <div
+          :key="item.projectId"
+          v-for="item in projectList"
+          class="column is-4"
+        >
           <router-link :to="`${$route.path}/${item.projectId}`">
             <card hoverable>{{ item.projectName }}</card>
           </router-link>

src/views/student/Code/index.vue

@@ -1,12 +1,20 @@
 <template>
   <div>
     <page-header :routes="[{ name: '代码作业', path: 'code' }]">
-      <template slot="title">代码作业</template>
-      <template slot="content">您仍剩余 {{ codeHomeworkList.length }} 份代码作业待完成</template>
+      <template slot="title"
+        >代码作业</template
+      >
+      <template slot="content"
+        >您仍剩余 {{ codeHomeworkList.length }} 份代码作业待完成</template
+      >
     </page-header>
     <page-body>
       <div class="columns is-multiline is-desktop">
-        <div :key="item.homeworkId" v-for="item in codeHomeworkList" class="column is-4">
+        <div
+          :key="item.homeworkId"
+          v-for="item in codeHomeworkList"
+          class="column is-4"
+        >
           <router-link :to="`${$route.path}/${item.homeworkId}`">
             <card hoverable>{{ item.description }}</card>
           </router-link>