结对第二次作业——编程实现

222200306叶弘毅 2024-09-30 23:28:06
这个作业属于哪个课程软件工程实践
这个作业要求在哪里结对第二次作业——编程实现
结对学号222200235,222200306
这个作业的目标使用web技术实现原型的功能
其他参考文献JavaScript与vue的学习使用以及html与css教学

目录

  • 1.git仓库链接，代码规范链接
  • 1.1 git仓库链接
  • 1.2 代码规范链接
  • 1.3 华为云部署链接
  • 2.PSP表格
  • 3.项目展示
  • 3.1 页面跳转
  • 3.2 首页展示
  • 3.3 奖牌排名
  • 3.4 每日赛程
  • 3.5 比赛详情
  • 3.6 对阵图
  • 3.7 了解更多
  • 3.8 奥运动态
  • 4.结对讨论过程描述
  • 5.代码展示
  • 5.1 技术栈
  • 5.2 遇到的困难
  • 5.2.1 爬取数据
  • 5.2.2 API交互
  • 5.2 关键代码展示
  • 6.心得
  • 7.队友评价

1.git仓库链接，代码规范链接

1.1 git仓库链接

仓库首页

1.2 代码规范链接

代码规范

1.3 华为云部署链接

2.PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划1020
• Estimate• 估计这个任务需要多少时间1020
Development开发8901190
• Analysis• 需求分析 (包括学习新技术)200300
• Design Spec• 生成设计文档2040
• Design Review• 设计复审1010
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)3030
• Design• 具体设计60120
• Coding• 具体编码500600
• Code Review• 代码复审3030
• Test• 测试（自我测试，修改代码，提交修改）4060
Reporting报告100145
• Test Report• 测试报告7090
• Size Measurement• 计算工作量1015
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划2040
合计10001355

3.项目展示

3.1 页面跳转

首页，奖牌榜，每日赛程，了解更多，奥运动态五个页面之间跳转

img

3.2 首页展示

首页通过转播图和吉祥物图片使页面生动有趣

img

3.3 奖牌排名

奖牌榜插入真实奖牌作为图章，用多组q版吉祥物做页面，使页面生动有趣

img

3.4 每日赛程

每日赛程页面浏览

img


每日赛程可通过时间表切换，时间表可自选也允许相邻天数跳转

img

3.5 比赛详情

详细赛程页面浏览

img


详细赛程功能展示，出赛名单等多组件跳转

img

3.6 对阵图

有显示高亮，有淘汰赛完整赛程展示

img

3.7 了解更多

了解更多页面浏览，丰富巴黎奥运会
结合历史，展现奥运会与巴黎这座城市的魅力

3.8 奥运动态

特别设置了奥运动态展现中国奥运健儿的赛场风采

img

4.结对讨论过程描述

由于线下见面频率较少，因此多为线上讨论，如下图：

img

img

5.代码展示

5.1 技术栈

使用Vue框架开发整个项目，组件库使用ElementUI-plus进行组件的设计。

5.2 遇到的困难

5.2.1 爬取数据

不同网页的数据杂乱不一，因此整理数据给我们带来了一定的困难，由于之前开发对于.json数据的了解，因此此次使用框架vue的构建中我们将数据都转化为.json数据，这样不仅统一了数据类型，也能够是数据界面不再杂乱，使得编程工作更好地进行下去。
下图是读取数据时发现数据类型不统一所遇到的问题：

img

5.2.2 API交互

在vue框架构建中，API交互是最容易造成困扰的部分，异步请求通常使用axios或fetch来解决，因此在学习axios前我们对此一无所知。复杂的数据结构和不同的管理请求状态大大增加了这份工作的复杂性。

5.2 关键代码展示

将国家奖牌榜分为三个部分处理：
1）模板部分template：使用div容器包含全部内容，使用v-for指令动态渲染数据。
2）脚本部分script：导入奖牌榜的.json数据以及数据的forEach遍历。
3）样式部分style scoped：使用CSS进行样式布局和设计。

<template>
  <div class="container">
    <div class="header">
      <img src="/src/assets/medal/header.png" alt="header" />
    </div>

    <div class="medal-table">
      <table>
        <thead>
          <tr>
            <th>排名</th>
            <th>国家</th>
            <th>国旗</th>
            <th>金牌</th>
            <th>银牌</th>
            <th>铜牌</th>
            <th>总数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(country, index) in countriesMedals" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ country.name }}</td>
            <td>
              <img :src="country.flag" alt="国旗" class="flag" />
            </td>
            <td>{{ country.gold }}</td>
            <td>{{ country.silver }}</td>
            <td>{{ country.bronze }}</td>
            <td>{{ country.total }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import '@/assets/base.css'
import medalData from '@/assets/medal.json'

export default {
  data() {
    return {
      countriesMedals: []
    }
  },
  created() {
    this.calculateMedals()
  },
  methods: {
    calculateMedals() {
      const medalsTable = medalData.medalsTable
      const countries = {}

      // 遍历每个项目的获奖数据
      medalsTable.forEach((item) => {
        const countryName = item.description
        const flag = item.flag // 从 item 中获取国旗 URL

        item.disciplines.forEach((discipline) => {
          discipline.medalWinners.forEach((winner) => {
            // 如果国家不在对象中，则初始化国家数据
            if (!countries[countryName]) {
              countries[countryName] = { gold: 0, silver: 0, bronze: 0, flag: flag }
            }

            // 根据奖牌类型累加
            if (winner.medalType === 'ME_GOLD') {
              countries[countryName].gold += 1
            } else if (winner.medalType === 'ME_SILVER') {
              countries[countryName].silver += 1
            } else if (winner.medalType === 'ME_BRONZE') {
              countries[countryName].bronze += 1
            }
          })
        })
      })

      // 将对象转换为数组并计算总奖牌数
      this.countriesMedals = Object.keys(countries).map((name) => {
        const { gold, silver, bronze, flag } = countries[name]
        return {
          name,
          gold,
          silver,
          bronze,
          total: gold + silver + bronze,
          flag // 包含国旗 URL
        }
      })

      // 根据金牌数进行排序
      this.countriesMedals.sort((a, b) => b.gold - a.gold || b.total - a.total)
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.header {
  display: flex;
  img {
    width: 100%;
    height: 100%;
    margin-left: 10px;
  }
}

.medal-table {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

thead {
  background-color: #007bff;
  color: white;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

.flag {
  width: 30px;
  height: 20px;
  margin-right: 10px;
}

@media (max-width: 768px) {
  th,
  td {
    font-size: 14px;
  }

  .flag {
    width: 25px;
    height: 15px;
  }
}
</style>

详细赛程说明：
1）样式部分采用按钮组并对其使用Flexbox进行布局，添加间距、边框和悬停效果，增强用户体验。
2）比赛筛选以时间表为筛子，使用computed根据当前组和当前页筛选比赛，确保分页显示。

<template>
    <div class="container">
        <div class="match-page">
      <!-- 按钮组 -->
      <div class="button-group">
        <button
          v-for="(group, index) in groups"
          :key="index"
          :class="{'active': currentGroup === group.name}"
          @click="switchGroup(group.name)"
        >
          {{ group.name }}
        </button>

        <button class="mat-btn" style="background-color: pink;"><router-link to="/match/table" style="text-decoration: none;color:inherit ; ">对阵表</router-link></button>

      </div>
  
      <!-- 比赛框 -->
      <div class="match-list">
        <div
          v-for="(match, index) in filteredMatches"
          :key="index"
          class="match-card"
          :class="{ 'highlight': index === 0 }"
        >
          <div class="match-title">{{ match.group }}，比赛 {{ match.matchNumber }}</div>
          <div class="teams">
            <div class="team">
              <span>{{ match.team1 }}</span>
              <span>{{ match.score1 }}</span>
            </div>
            <div class="team">
              <span>{{ match.team2 }}</span>
              <span>{{ match.score2 }}</span>
            </div>
          </div>
          <div class="match-time">{{ match.time }}</div>
          <div class="match-status">{{ match.status }}</div>
        </div>
      </div>
  
      <!-- 分页按钮 -->
      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">←</button>
        <button @click="nextPage" :disabled="currentPage === totalPages">→</button>
      </div>
    </div>

    <img src="/src/assets/match/img1.png" alt="" style="height: 100%;width: 100%;">

    <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="出赛名单" name="first" >
        <div class="list">
            <img src="/src/assets/match/出赛名单.png" alt="" style="width: 100%; height: 665px;">
        <img src="/src/assets/match/出赛名单2.png" alt="" style="width: 583px;height: 423px;">
        <img src="/src/assets/match/出赛名单3.png" alt="" style="width: 100%; height: 665px;">
        <img src="/src/assets/match/出赛名单4.png" alt="" style="width: 583px;height: 423px;">
        <img src="/src/assets/match/出赛名单5.png" alt="" style="width: 100%; height: 522px;">
        </div>
        
    </el-tab-pane>
    <el-tab-pane label="比赛详细" name="second"><img src="/src/assets/match/比赛详细.png" alt="" style="width: 100%;"></el-tab-pane>
    <el-tab-pane label="团队数据" name="third"><img src="/src/assets/match/111.png" alt="" style="width: 100%;"></el-tab-pane>
    <el-tab-pane label="运动员数据" name="fourth"><img src="/src/assets/match/222.png" alt="" style="width: 100%;"></el-tab-pane>
  </el-tabs>


    </div>
  
  </template>

<script setup>
import { ref, computed } from 'vue'


// 设置默认选中的 Tab
const activeName = ref('first')

const handleClick = (tab) => {
  console.log('当前Tab:', tab)
}

// 比赛组数据
const groups = [
  { name: 'A组' },
  { name: 'B组' },
  { name: 'C组' },
  { name: 'D组' },
  { name: '1/4决赛' },
  { name: '半决赛' },
  { name: '决赛' }
]

// 比赛数据
const matches = ref([
  // A组比赛
  { group: 'A组', matchNumber: 1, team1: '法国', score1: 2, team2: '巴西', score2: 1, time: '7月22日 18:00', status: '已结束' },
  { group: 'A组', matchNumber: 2, team1: '德国', score1: 3, team2: '意大利', score2: 1, time: '7月23日 20:00', status: '已结束' },
  
  // B组比赛
  { group: 'B组', matchNumber: 3, team1: '阿根廷', score1: 1, team2: '摩洛哥', score2: 2, time: '7月24日 21:00', status: '已结束' },
  { group: 'B组', matchNumber: 4, team1: '伊拉克', score1: 2, team2: '乌克兰', score2: 1, time: '7月25日 1:00', status: '已结束' },
  { group: 'B组', matchNumber: 11, team1: '阿根廷', score1: 3, team2: '伊拉克', score2: 1, time: '7月27日 21:00', status: '已结束' },
  
  // C组比赛
  { group: 'C组', matchNumber: 5, team1: '英格兰', score1: 1, team2: '西班牙', score2: 2, time: '7月26日 19:00', status: '已结束' },
  { group: 'C组', matchNumber: 6, team1: '葡萄牙', score1: 0, team2: '荷兰', score2: 1, time: '7月27日 22:00', status: '已结束' },
  
  // D组比赛
  { group: 'D组', matchNumber: 7, team1: '墨西哥', score1: 2, team2: '韩国', score2: 2, time: '7月28日 20:00', status: '已结束' },
  { group: 'D组', matchNumber: 8, team1: '日本', score1: 3, team2: '沙特阿拉伯', score2: 1, time: '7月29日 18:00', status: '已结束' },
  
  // 1/4决赛
  { group: '1/4决赛', matchNumber: 9, team1: '法国', score1: 2, team2: '阿根廷', score2: 1, time: '7月30日 21:00', status: '已结束' },
  { group: '1/4决赛', matchNumber: 10, team1: '英格兰', score1: 1, team2: '日本', score2: 3, time: '7月31日 19:00', status: '已结束' },
  
  // 半决赛
  { group: '半决赛', matchNumber: 12, team1: '法国', score1: 3, team2: '日本', score2: 1, time: '8月1日 21:00', status: '已结束' },
  
  // 决赛
  { group: '决赛', matchNumber: 13, team1: '法国', score1: 2, team2: '德国', score2: 2, time: '8月3日 21:00', status: '点球大战 法国胜出' }
])

// 当前组和分页
const currentGroup = ref('B组')
const currentPage = ref(1)
const matchesPerPage = 2

// 计算当前组的比赛
const filteredMatches = computed(() => {
  const groupMatches = matches.value.filter(match => match.group === currentGroup.value)
  const startIndex = (currentPage.value - 1) * matchesPerPage
  return groupMatches.slice(startIndex, startIndex + matchesPerPage)
})

// 计算总页数
const totalPages = computed(() => {
  const groupMatches = matches.value.filter(match => match.group === currentGroup.value)
  return Math.ceil(groupMatches.length / matchesPerPage)
})

// 切换比赛组
const switchGroup = (group) => {
  currentGroup.value = group
  currentPage.value = 1
}

// 分页功能
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}
</script>

<style scoped>

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px;
            background-color: rgb(255, 255, 255);
            margin-top: 10px;
        }

    

.match-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}



.button-group {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.button-group button {
  margin: 0 10px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.button-group button.active {
  background-color: #333;
  color: white;
}

.match-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.match-card {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  width: 32%;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.match-card.highlight {
  background-color: black;
  color: white;
}

.match-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.teams {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.team {
  display: flex;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 10px;
  margin: 0 5px;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
</style>

展示比赛日程并允许用户选择日期：
1）布局上使用一个背景图div class="bg-img"，内部嵌套一个容器div class="container"。
2）使用日期选择器，包括前后按钮和日期输入框，用户可以通过点击按钮调整日期或直接选择日期。

<template>
    <div class="bg-img" >
        <div class="container">


       
<div class="schedule-container">
  <div class="date-picker">
    <button @click="changeDate(-1)">&lt;</button>
    <input type="date" v-model="selectedDate" @change="filterMatches" />
    <button @click="changeDate(1)">&gt;</button>
  </div>

  <div class="matches" v-if="filteredMatches.length">
    <div class="match-card" v-for="match in filteredMatches" :key="match.id">
      <div class="match-header">
        <span class="match-time">{{ match.time }}</span>
        <span class="match-type">{{ match.sport }} - {{ match.name }}</span>
      </div>
      <div class="match-teams">
        <div class="team">
          <span :class="{ bold: match.winner === match.team1 }">{{ match.team1 }}</span>
          <span>vs</span>
          <span :class="{ bold: match.winner === match.team2 }">{{ match.team2 }}</span>
        </div>
      </div>
      <div class="score">
        {{ match.score1 }} - {{ match.score2 }}
      </div>
      <button class="details-button" ><router-link to="/match/detail">赛事详细</router-link></button>
    </div>
  </div>
  <p v-else>没有找到比赛数据。</p>
</div>
</div>
    </div>
  
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        selectedDate: '2024-07-24',
        matches: []
      };
    },
    computed: {
      filteredMatches() {
        return this.matches.filter(match => match.date === this.selectedDate);
      }
    },
    methods: {
      fetchMatches() {
        axios.get('/src/assets/match_schedule.json')
          .then(response => {
            this.matches = response.data;
            console.log('Matches loaded:', this.matches);
          })
          .catch(error => console.error('Error loading matches:', error));
      },
      changeDate(days) {
        const date = new Date(this.selectedDate);
        date.setDate(date.getDate() + days);
        this.selectedDate = date.toISOString().split('T')[0];
      },
      filterMatches() {
        // 手动触发计算属性的更新
        this.$forceUpdate();
      }
    },
    mounted() {
      this.fetchMatches();
    }
  };
  

  </script>
  
  <style scoped>
.bg-img{
    width: 100vw;
    height: 100%;
    background-image: url('/src/assets/match/吉祥物2.jpg');
    background-size: cover;
    background-attachment: fixed;

}

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;

  }

  .my-img {
    display: flex;
    justify-content: center;
  }
  

  .details-button {
    background-color: #f88785;
    color: white;
    border: none;
    padding: 6px 6px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    float: right;

  }

  .schedule-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .date-picker {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .date-picker button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .date-picker button:hover {
    background-color: #0056b3;
  }
  
  .date-picker input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 150px;
  }
  
  .matches {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .match-card {
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #9f9f9f;
    height: 40px;
  }
  
  .match-teams {
    display: flex;
    justify-content: space-between;
  }
  
  .bold {
    font-weight: bold;
    color: #007bff;
  }
  
  .score {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
  }
  </style>

6.心得

在这次作业的过程中我认真学了了HTML、CSS和JavaScript的一些基础语句，并且成功搭建了一个巴黎奥运会的网页，成功实现数据输出和网页跳转等各种功能。
基础知识：首先要掌握HTML、CSS和JavaScript的基础知识。HTML用于构建网页的结构，CSS用于美化网页的样式，JavaScript用于实现网页的交互功能。
下面是我在学习过程中的心得
首先要掌握HTML、CSS和JavaScript的基础知识。HTML用于构建网页的结构，CSS用于美化网页的样式，JavaScript用于实现网页的交互功能。
选择一个适合自己的代码编辑器，比如Visual Studio Code、Sublime Text、Atom等，这些编辑器都有丰富的插件和功能，可以提高你的开发效率。
学习如何使用浏览器的开发者工具进行调试，这对于解决问题和优化代码非常有帮助。
学习Web前端可能会遇到一些困难和挫折，但只要保持耐心和坚持，不断学习和实践，就一定能够掌握这门技能。

7.队友评价

夏合扎提：这次小组结对作业中，我的队友展现了出色的团队合作能力和技术素养。积极参与讨论，总是能提供有建设性的意见，并乐于接受他人的建议。对于 HTML 和 CSS 的积极学习令人印象深刻，能够迅速将设计思想转化为实际页面,带来了有效的解决方案。
叶弘毅：在此次合作中，我的队友表现得非常积极主动。他在页面交互和动态效果的实现上展现出了强大的能力，许多创新的想法都为我们的网页增色不少。他善于沟通，每次遇到问题都会与我及时讨论，确保我们在同一节奏上推进项目。我非常欣赏他的专业精神和合作态度。

...全文
26 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
AJAX——新手快车道
AJAX——新手快车道 前言 AJAX是什么？ 首先、AJAX是一种很酷的技术，一旦采用了AJAX，就能让你的Web页面， 你的网站，甚至连同你们公司，都变得很酷。在Web2.0的时代里，不使用一点 AJAX技术的网站，就会显得很老土，很落伍。 但是，这样的理解，其实是很肤浅的。仅仅是从一个外行，从一个使用者的 角度出发，来理解AJAX，就像我在本书的第一章AJAX我也行中那样，开发 出很愚蠢，甚至都没有资格被称之为AJAX应用的纯IE、XMLHTTP应用。 AJAX更酷的一点在于，对于传统的Web开发人员来说，AJAX所运用的， 是更加先进的，更加标准化的，更加和谐高效的，完整的Web开发技术体系。 遵循这样的体系开发Web应用，能让你的开发过程变得更加轻松，也能使你们 的开发团队，显得很酷。在Web2.0 的时代里，还在采用过时的技术来开发 Web，会显得很老土，很落伍。 AJAX的相关组成技术，每一个都已经出现了N年以上了，对这些技术的 组合运用，也远远早于AJAX这个名词出现之前。所以，我真正敬佩的，并非提 出 AJAX这个缩写的Jesse James Garrett。而是那些早在N年以前，就已经在探索、 实践的先行者，他们始终在追求的：是更好的用户体验，以及更好的开发体验。 这样的精神，才是最可宝贵的，也是最值得我们学习的。许多年过去以后，当我 们再回头来看当年的这些热门技术，也许早已经变得老土，变得落伍了。在这样 的历程中，哪些人会成长为高手？会成长为大师呢？就是那些永不满足，永远 在追求更好的用户体验，永远在追求更好的开发体验的人！ 新手如何上路 软件开发这个领域，永远都在飞速发展，大家都必须不断的学习新的知识、 技能、框架、IDE、甚至新的语言。传说中的骨灰级高手们，就像传说中的大侠， 任何武器、哪怕是一块木头到了他们手里，也能发挥惊人的威力，人家练了几十 年的看家本领，他们随手使来，也竟然像是打娘胎里就开始练了一样。为什么？ 就算不吹那么玄的，平常我们能够碰到的那些老手，在学新东西的时候， 也比那些新手学得更快，理解得更深，运用得更熟练。而新手们呢？往往就会漫 无头绪，焦头烂额，以一副张着茫然的大眼睛的经典表情，出现在各大论坛的 新手求助区里。他们欠缺的，究竟是什么呢？为什么老手学新东西，就没遇到那 么多困难呢？ 泛泛地说，自然是经验上的欠缺。仔细地说来，又可以分为三个方面： 一、本质，一种技术与另一种技术之间，往往会有本质上的相通之处，当你 对一种技术的理解与思考越来越深入时，学习一种新技术也会更加容易。触类旁 通，举一反三的能力，就是来自于对于技术本质的追寻。 二、地图，本质上或多或少的相通，也提示着我们技术之间的相互关联，当 你了解的技术越多，了解得越是深入，在你的内心，就能建立起越发清晰的技 术地图。各种知识都有一个自然、合理的位置。那么当一个老手要学习一门新技术 的时候，他其实并非在探索一个全新的、未知的领域，而是有很多脉络可寻，也 很多已知可以帮助他们快速了解未知。 三、技巧，面对同样的未知，面对同样的难题，新手们一筹莫展，而老手们 却掌握着更多的技巧和手段，帮助他们试探可能性、缩小问题的范围、迅速定位 问题、不犯明显愚蠢的错误、甚至能够列举出更具命中力的搜索关键词，而这些 技巧，都帮助老手在前进的道路上，更少跌倒，即使跌倒，也能更快的爬起来。 作为一本写给新手的入门书籍，我们希望展现给读者的，是一个老手如何 学习新技术的过程。我们相信，这样的一个学习过程，对于新手来说，是更具有 价值的。 何谓快车道 必须老老实实的承认，我吹牛了！老手虽然会比新手学习得更快一些，但 是也同样会碰到麻烦，遇到障碍，感觉头痛。如果没有真正的专家的指导，我不 可能如此迅速地将AJAX掌握到目前这样的程度，要真是让我自学三个月，然 后就写出书来的话，那真是在骗钱了。 老手能够快速学习的另一个重要的诀窍是：认识很多牛人朋友 如果没有李锟与赵泽欣的专家级指导与帮助，如果没有与李锟AJAX结对 编程的体验，如果没有三个人在MSN上无数次的长聊，我想要在短期内建立起： 对于AJAX本质的理解； 对于整个AJAX以及相关技术地图的理解； 对于AJAX编程开发所需要的很多技巧、手段的掌握； 几乎是不可能的。 如果没有（N多需要感谢的人）的（N多方面的帮助），我们这本书，也 不可能以现在这样的深度，以（N个月）内完成的速度，送到读者的面前。 希望这本书，能够对大家快速学习AJAX，有所帮助。
软件工程综合实践专题第二次作业———结对编程心得体会
软件工程综合实践专题第二次作业———结对编程 学习了软件工程综合实践专题这门课程，懂得了结对编程是指两个人一起，用一台电脑，鼠标，键盘的一种编程方式。 王文娟老师在课后留下了一道随机出三百道四则运算的题目并要求采用结对编程的方式和搭档共同完成 在这次的编程过程中，我和我的搭档第一次接触并采用结对编程的这种编程模式，也就是两个人同时在一台电脑上进行编程，下面是我们写出的代码以及一些在这个过程中...
结对作业第二次——原型实现
然后一次设计选手信息，每日赛况、详细赛况、奖牌榜和了解更多的部分，同样是按照之前设计的模板来进行排版设计和功能设计，其中所需要的数据都是从助教给的网站上的数据手打下来的。首先进入网站的首页，页首是导航栏，可以点击跳转到对应的部分，一共有五个部分，分别是首页，选手信息，每日赛况、详细赛况、奖牌榜和了解更多。这部分主要就是赛事信息的下展菜单的实现重要，在js中用表格的方式展开信息，并把它们封装到一个函数（toggleDropdown）里，触发点击事件的时候调用这个函数实现下展的功能。选手的详细信息如上图所示。
jdk-1.8(8u211-windows-x64)
jdk-8u211-windows-x64
FZU_SE_teacherW_4

110

社区成员

346

社区内容

发帖
与我相关
我的任务
社区管理员
  • FZU_SE_teacherW
  • 助教赖晋松
  • D's Honey
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章