。。

src/components/Home.vue

@@ -2,7 +2,7 @@
   <div class="home-container">
     <div class="home-banner-wrap">
       <el-carousel height="400px" :interval="10000" arrow="always">
-        <el-carousel-item  v-for="(img,index) in imgList" :key="index">
+        <el-carousel-item v-for="(img,index) in imgList" :key="index">
           <img class="banner_back banner_back_1" v-bind:src="img">
           <router-link :to="{ name: 'ProjectCreate'}">
             <div class="btn btn-medium btn-home-apply">申请项目</div>
@@ -54,94 +54,10 @@ export default {
   components: {TaskCard, InstitutionRank, PersonRank},
   data () {
     return {
-      hotTaskList: [
-        {
-          id: 0,
-          title: '发送群文件测试',
-          description: '任务描述文字xxxx',
-          price: '30',
-          serviceType: 1,
-          status: 0,
-          projectId: 123
-        },
-        {
-          id: 1,
-          title: '多人聊天发送文件测试',
-          description: '任务描述文字xxxx',
-          price: '10',
-          serviceType: 0,
-          status: 1,
-          projectId: 234
-        },
-        {
-          id: 2,
-          title: '浏览器波洞星球',
-          description: '任务描述文字xxxx',
-          price: '10',
-          serviceType: 2,
-          status: 0,
-          projectId: 345
-        },
-        {
-          id: 3,
-          title: '举报支持选择聊天记录（安全）',
-          description: '任务描述文字xxxx',
-          price: '0',
-          serviceType: 1,
-          status: 1,
-          projectId: 456
-        }
-      ],
-      institutionRank: [
-        {
-          logo: 'http://www.mooctest.net/assets/img/mooctest.png',
-          name: '慕测科技'
-        },
-        {
-          logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
-          name: '上海软件'
-        },
-        {
-          logo: 'http://www.mooctest.net/assets/img/mooctest.png',
-          name: 'QQ众测'
-        },
-        {
-          logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
-          name: '阿里巴巴'
-        },
-        {
-          logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
-          name: '阿里巴巴'
-        }
-      ],
-      personRank: [
-        {
-          logo: 'http://www.mooctest.net/assets/img/mooctest.png',
-          name: '小王',
-          number: '200',
-        },
-        {
-          logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
-          name: '小黄',
-          number: '190',
-        },
-        {
-          logo: 'http://www.mooctest.net/assets/img/mooctest.png',
-          name: '小莉',
-          number: '120',
-        },
-        {
-          logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
-          name: '小张',
-          number: '80',
-        },
-        {
-          logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
-          name: '小张',
-          number: '70',
-        }
-      ],
-      imgList:['../assets/img/home_ban1.jpg','../assets/img/home_ban2.jpg'],
+      hotTaskList: [],
+      institutionRank: [],
+      personRank: [],
+      imgList: [],
 
     }
   },
@@ -149,14 +65,12 @@ export default {
     //加载数据
     loadData: function () {
       console.log('loadData')
-      Http.get('/api/get/').then((res) => {
+      Http.get(Apis.PAGE.HOME_PAGE,{}).then((res) => {
         console.log(res)
-        // if (0 === res.code){
-        //   this.hotTaskList = res.hotTaskList
-        //   this.institutionRank = res.institutionRank
-        //   this.personRank = res.personRank
-        //   this.imgList = res.imgList
-        // }
+        this.hotTaskList = res.hotTaskList
+        this.institutionRank = res.institutionRank
+        this.personRank = res.personRank
+        this.imgList = res.imgList
       })
     },
   },

src/components/InstitutionRank.vue

@@ -22,6 +22,11 @@ export default {
     return {
       tableData: this.item
     }
+  },
+  watch:{
+    item(){
+      this.tableData = this.item
+    }
   }
 }
 </script>

src/components/PersonRank.vue

@@ -21,6 +21,11 @@ export default {
     return {
       tableData: this.item
     }
+  },
+  watch:{
+    item(){
+      this.tableData = this.item
+    }
   }
 };
 </script>

src/components/commons/ProvinceCity.vue

@@ -27,7 +27,7 @@
     </el-form-item>
   </div>
 </template>
- 
+
 <script type="text/javascript">
 import provinceCity from "@/constants/provinceCity.json";
 export default {
@@ -96,9 +96,9 @@ export default {
   }
 };
 </script>
- 
+
 <style lang="less" scoped>
 .page-form-item {
   display: inline-block;
 }
-</style>
+</style>

src/components/commons/TaskCard.vue

@@ -35,6 +35,11 @@ export default {
     //   this.platformType.push(PlatformType[item])
     // })
   },
+  watch:{
+    item() {
+
+    }
+  },
   methods:{
     goToTaskDetail(projectId,id){
       this.$router.push({name: "Task", params: {projectId:projectId,taskId: id}})

src/js/api.js

@@ -3,7 +3,7 @@ export default {
   PROJECT: {
     CREATE_PROJECT_SUBMIT: this.API + 'project/',
     UPDATE_PROJECT_SUBMIT: this.API + 'project/',
-    CREATE_ANALYSE_DEMAND_SUBMIT: this.API + 'project/analyseDemand',
+    CREATE_ANALYSE_DEMAND_SUBMIT: this.API + 'project/analyseDemand/',
   },
   TASK: {
     CREATE_TASK_SUBMIT: this.API + 'task/',
@@ -15,7 +15,7 @@ export default {
   },
   USER: {},
   PAGE: {
-    HOME_PAGE: this.API + 'page/home/',
+    HOME_PAGE: '/api/page/home/',
     SQUARE_PAGE: this.API + 'page/square/',
     MY_CROWD_TEST_PAGE: this.API + 'page/myCrowdTest/',
     TASK_DETAIL_PAGE: this.API + 'page/taskDetail/{taskId}/',

src/mock.js

@@ -14,18 +14,17 @@ const getSquarePageMock = require('./mock/getSquarePageMock')
 const updateProjectMock = require('./mock/updateProjectMock')
 const updateTaskMock = require('./mock/updateTaskMock')
 const updateReportMock = require('./mock/updateReportMock')
-
 // Mock.mock( url, post/get , 返回的数据)；
-Mock.mock(Apis.PROJECT.CREATE_ANALYSE_DEMAND_SUBMIT, 'post', createAnalyseDemandMock.data)
-Mock.mock(Apis.PROJECT.CREATE_PROJECT_SUBMIT, 'post', createProjectMock.data)
-Mock.mock(Apis.REPORT.CREATE_REPORT_SUBMIT, 'post', createReportMock.data)
-Mock.mock(Apis.TASK.CREATE_TASK_SUBMIT, 'post', createTaskMock.data)
-Mock.mock(Apis.PAGE.HOME_PAGE, 'get', getHomePageMock.data)
-Mock.mock(Apis.PAGE.SQUARE_PAGE, 'get', getSquarePageMock.data)
-Mock.mock(Apis.PAGE.PROJECT_DETAIL_PAGE, 'get', getProjectDetailMock.data)
-Mock.mock(Apis.PAGE.REPORT_DETAIL_PAGE, 'get', getReportDetailMock.data)
-Mock.mock(Apis.PAGE.TASK_DETAIL_PAGE, 'get', getTaskDetailMock.data)
-Mock.mock(Apis.PAGE.MY_CROWD_TEST_PAGE, 'get', getMyCrowdTestMock.data)
-Mock.mock(Apis.PROJECT.UPDATE_PROJECT_SUBMIT, 'put', updateProjectMock.data)
-Mock.mock(Apis.REPORT.UPDATE_REPORT_SUBMIT, 'put', updateReportMock.data)
-Mock.mock(Apis.TASK.UPDATE_TASK_SUBMIT, 'put', updateTaskMock.data)
+// Mock.mock(Apis.PROJECT.CREATE_ANALYSE_DEMAND_SUBMIT, 'post', createAnalyseDemandMock.data)
+// Mock.mock(Apis.PROJECT.CREATE_PROJECT_SUBMIT, 'post', createProjectMock.data)
+// Mock.mock(Apis.REPORT.CREATE_REPORT_SUBMIT, 'post', createReportMock.data)
+// Mock.mock(Apis.TASK.CREATE_TASK_SUBMIT, 'post', createTaskMock.data)
+Mock.mock('/api/page/home/', 'get', getHomePageMock.data)
+// Mock.mock(Apis.PAGE.SQUARE_PAGE, 'get', getSquarePageMock.data)
+// Mock.mock(Apis.PAGE.PROJECT_DETAIL_PAGE, 'get', getProjectDetailMock.data)
+// Mock.mock(Apis.PAGE.REPORT_DETAIL_PAGE, 'get', getReportDetailMock.data)
+// Mock.mock(Apis.PAGE.TASK_DETAIL_PAGE, 'get', getTaskDetailMock.data)
+// Mock.mock(Apis.PAGE.MY_CROWD_TEST_PAGE, 'get', getMyCrowdTestMock.data)
+// Mock.mock(Apis.PROJECT.UPDATE_PROJECT_SUBMIT, 'put', updateProjectMock.data)
+// Mock.mock(Apis.REPORT.UPDATE_REPORT_SUBMIT, 'put', updateReportMock.data)
+// Mock.mock(Apis.TASK.UPDATE_TASK_SUBMIT, 'put', updateTaskMock.data)

src/mock/getHomePageMock.js

@@ -1,75 +1,94 @@
 var Mock = require('mockjs')
 var data = Mock.mock({
-  // 首页轮播显示的图片url
-  "imgList": ["../assets/img/home_ban1.jpg", "../assets/img/home_ban1.jpg"],
-  //热门任务列表
-  "hotTaskList": [
+  hotTaskList: [
     {
-      //任务id
-      "id": 0,
-      //任务标题
-      "title": "发送群文件测试",
-      //任务描述
-      "description": "任务描述文字xxxx",
-      //任务标价
-      "price": 30,
-      /*任务的服务类型
-              0: "接口测试",
-              1: "安全漏洞扫描",
-              2: "风险评估服务",
-              3: "源代码安全审计服务",
-              4: "功能测试服务",
-              5: "性能测试",
-              6: "功能和易用性测试",
-              */
-      "serviceType": 1,
-      /*任务状态
-              0: "已结束",
-              1: "进行中"
-              */
-      "status": 0,
-      // 任务所属项目id
-      "projectId": 123
+      id: 0,
+      title: '发送群文件测试',
+      description: '任务描述文字xxxx',
+      price: '30',
+      serviceType: 1,
+      status: 0,
+      projectId: 123
     },
     {
-      "id": 1,
-      "title": "多人聊天发送文件测试",
-      "description": "任务描述文字xxxx",
-      "price": 10,
-      "serviceType": 0,
-      "status": 1,
-      "projectId": 234
+      id: 1,
+      title: '多人聊天发送文件测试',
+      description: '任务描述文字xxxx',
+      price: '10',
+      serviceType: 0,
+      status: 1,
+      projectId: 234
+    },
+    {
+      id: 2,
+      title: '浏览器波洞星球',
+      description: '任务描述文字xxxx',
+      price: '10',
+      serviceType: 2,
+      status: 0,
+      projectId: 345
+    },
+    {
+      id: 3,
+      title: '举报支持选择聊天记录（安全）',
+      description: '任务描述文字xxxx',
+      price: '0',
+      serviceType: 1,
+      status: 1,
+      projectId: 456
     }
   ],
-  //测评机构排名
-  "institutionRank": [
+  institutionRank: [
+    {
+      logo: 'http://www.mooctest.net/assets/img/mooctest.png',
+      name: '慕测科技'
+    },
+    {
+      logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
+      name: '上海软件'
+    },
+    {
+      logo: 'http://www.mooctest.net/assets/img/mooctest.png',
+      name: 'QQ众测'
+    },
     {
-      //机构logo url
-      "logo": "http://www.mooctest.net/assets/img/mooctest.png",
-      //机构名称
-      "name": "慕测科技"
+      logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
+      name: '阿里巴巴'
     },
     {
-      "logo": "https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png",
-      "name": "上海软件"
+      logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
+      name: '阿里巴巴'
     }
   ],
-  //测评个人排名
-  "personRank": [
+  personRank: [
+    {
+      logo: 'http://www.mooctest.net/assets/img/mooctest.png',
+      name: '小王',
+      number: '200',
+    },
+    {
+      logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
+      name: '小黄',
+      number: '190',
+    },
     {
-      //头像logo url
-      "logo": "http://www.mooctest.net/assets/img/mooctest.png",
-      //用户名
-      "name": "小王",
-      //测评指数，我也不知道怎么算的
-      "number": 200
+      logo: 'http://www.mooctest.net/assets/img/mooctest.png',
+      name: '小莉',
+      number: '120',
     },
     {
-      "logo": "https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png",
-      "name": "小黄",
-      "number": 190
+      logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
+      name: '小张',
+      number: '80',
+    },
+    {
+      logo: 'https://docs.alibabagroup.com/assets2/images/cn/global/logo_header.png',
+      name: '小张',
+      number: '70',
     }
-  ]
+  ],
+  imgList: ['../assets/img/home_ban1.jpg', '../assets/img/home_ban2.jpg'],
+
 })
 
 export {