参与社区的问题回答

目录💡

Gitcode仓库地址

仓库地址

云服务器的访问链接

访问链接

• 阿里云ECS云服务器（下载apache服务，控制台是宝塔）
  

  

PSP表格

成品展示

结对讨论过程

一开始项目，我们讨论分工，就分离页面设计，一人设计两个页面。因为页面分离，我们也就一人用vue，一人用bootstrap。但是最后到实现页面跳转的时候我们却遇到了困难，因此也浪费了很多时间。

设计实现

代码说明

每日赛况的json输出，切换日期，有前五天的数据，第五天之后的数据与第五天相同。

 <template>
  <div class=" cardss">
    <h1>{{ msg }}</h1>
    <div class="changeDay">
      <button v-for="day in 14" :key="day" @click="selectDay(day)" class="daychange">
        Day {{ day }}
      </button>

    </div>
    <div class="changeDay" v-if="day == '1'">
      <div class="list daliy">
        <div v-for="list,index in json0116" :key="index" class="item">
          <div class="cardbox  card">
            <div class="timeset h3">{{ list.time }}</div>
            <div class="winnerset h2">{{ list.winner }}</div>
            <div class="scoreset h3">{{ list.score }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="changeDay" v-if="day == '2'">
      <div class="list daliy">
        <div v-for="list,index in json0117" :key="index" class="item">
          <div class="cardbox card">
            <div class="timeset h3">{{ list.time }}</div>
            <div class="winnerset h2">{{ list.winner }}</div>
            <div class="scoreset h3">{{ list.score }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="changeDay" v-if="day == '3'">
      <div class="list daliy">
        <div v-for="list,index in json0118" :key="index" class="item">
          <div class="cardbox card">
            <div class="timeset h3">{{ list.time }}</div>
            <div class="winnerset h2">{{ list.winner }}</div>
            <div class="scoreset h3">{{ list.score }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="changeDay" v-if="day == '4'">
      <div class="list daliy">
        <div v-for="list,index in json0119" :key="index" class="item">
          <div class="cardbox card">
            <div class="timeset h3">{{ list.time }}</div>
            <div class="winnerset h2">{{ list.winner }}</div>
            <div class="scoreset h3">{{ list.score }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="changeDay" v-if="day != '1' && '2' && '3' && '4' ">
      <div class="list daliy">
        <div v-for="list,index in json0120" :key="index" class="item">
          <div class="cardbox card">
            <div class="timeset h3">{{ list.time }}</div>
            <div class="winnerset h2">{{ list.winner }}</div>
            <div class="scoreset h3">{{ list.score }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import json0116 from "@/json/0116.json"
import json0117 from "@/json/0117.json"
import json0118 from "@/json/0118.json"
import json0119 from "@/json/0119.json"
import json0120 from "@/json/0120.json"
export default {
  data() {
    return {
      msg: "每日赛程",
      json0116: json0116,
      json0117: json0117,
      json0118: json0118,
      json0119: json0119,
      json0120: json0120,
      jsonData: null,
      day: null
    }
  },
  methods: {
  selectDay(day) {
    // 在这里实现选择某一天后的逻辑
    console.log(`你选择了第 ${day} 天`);
    this.day = day
  },
  loadJsonData(file) {
    console.log(file)
    fetch(file)
      .then(response => response.json())
      .then(data => {
        this.jsonData = data;
        console.log(data)
      })
      .catch(error => console.error(error));
}
},
}
console.log(json0116)
</script>

晋级图例的样式实现

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background: url(./img/u370.jfif);
  }
  .bg-primary {
    color: #fff;
    background-color: #337ab7;
  }
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
  .text-center {
    text-align: center;
  }
  .col-md-3,
  .col-md-6,
  .col-md-12{
    position: relative;
    min-height: 1px;

    float: left;
  }
  .panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }
  .panel-body {
    padding: 15px;
  }
  .panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .panel-primary {
    border-color: #337ab7;
  }
  .panel-primary > .panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
  }
  .panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #337ab7;
  }
  .panel-primary > .panel-heading .badge {
    color: #337ab7;
    background-color: #fff;
  }
  .panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #337ab7;
  }
  .center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
  }
  .row:before,
  .row:after {
    display: table;
    content: " ";
  }
  .row:after {
    clear: both;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-12 {
    width: 100%;
  }

选手排名的翻页实现

<div class="player-list__pagination">
    <span>共 {{ pageCount }} 页</span>
    <span>第 {{ currentPage }} 页</span>
    <div @click="prevPage" :disabled="currentPage === 1" class="selected">上一页</div>
    <div @click="nextPage" :disabled="currentPage === pageCount" class="selected">下一页</div>
</div>




<script>
import headerView from '@/components/header/headerView'
import playersData from '../json/players.json'
export default {
  components: {
      headerView
  },
  name: 'PlayerList',
  data() {
    return {
      players: playersData,
      options: [5, 10, 20, 50],
      itemsPerPage: 10,
      currentPage: 1
    }
  },
  computed: {
    paginatedPlayers() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage
      const endIndex = startIndex + this.itemsPerPage
      return this.players.slice(startIndex, endIndex)
    },
    pageCount() {
      return Math.ceil(this.players.length / this.itemsPerPage)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage -= 1
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage += 1
      }
    }
  }
}
</script>

心路历程和收获

22200126:

一开始拿到这个项目的时候，我兴致勃勃的想使用vue这门新技术来实现，和队友商讨并且询问大佬过后，决定我使用vue框架，队友使用bootstrap框架分别进行页面设计，队友很快就写好了自己的部分，我经过学习也磕磕绊绊完成了任务，但未曾想，这却是我们噩梦的开始。当我们打算进行项目合并时，却发现网上教的跳转与导入不适用我们，导致我们俩的页面始终无法跳转。经过不断尝试，我们失败了无数次，最终决定暴力插入，即在我的代码中插入bootstrap中用到的方法，以及队友的成果，完成了最后的项目。这件事让我深感折磨，在开始工作前，一定要与队友约定好使用相同的方法，避免出现不必要的麻烦。

222000127：

222000127周洪宇昂的感受：这次项目使用的技术对我来说都是之前没学习过的，但有html，css和js技术就能很快上手，我一开始选择了简单便捷的bootstrap框架，但在做完之后遇到了和同学的vue框架的合并问题，搞了半天才勉强搞好，最后还是顺带学习了一部分vue框架的知识，这次教训让我学会应该提前测试好框架合并问题，不然后期改都没法改。

评价结对队友

222000126：

队友完成分工很快，在最后我们遇到无法跳转的问题的时候，他也非常有耐心的与我一同不断地试错，尽管最终还是没有解决在vue中导入bootstrap框架和vue跳转html页面的问题，他的陪伴依旧让我暖心。

222000127:

他对任务工作很上心，而且懂得很多，能力也很强，对工作的推进起到了巨大的作用。