/2018-World-Cup-Drawing

This is an app about 2018 Russian World Cup and Drawing game 队员数据管理与模拟抽签

Primary LanguageVue

2018俄罗斯世界杯球队球员数据和模拟抽签应用APP

项目在线浏览
克隆至本地浏览：

  1. $ git clone git@github.com:Alcantara6/2018-World-Cup-Drawing.git
  2. npm install安装依赖包
  3. npm start启动项目

简介

本项目基于Vue 2.0、vue-router、原生JavaScript、CSS2.1、CSS3的单页面应用，使用Vue-cli脚手架搭建，采用组件化和模块化的开发。

  • 球队球员一览
    • 球队名展示
    • 关键球员数据和搜索
      • 添加球员
      • 查看球员信息
        • 编辑球员
        • 删除球员
  • 模拟抽签
    • 展示区：实时展示球队抽中状态
    • 操作区
      • 球队抽签
      • 小组位次抽签
    • 结果区：展示抽中球队落位情况和最终结果
    • 状态区：操作流程和抽签实时状态提示

球队球员一览页面
模拟抽签

程序架构

程序架构

技术应用

总体

  1. vue-route搭建单页应用，导航<nav>跳转分页面；球队、球员配置专属路径(动态路由)，增、删、改、查互相关联。
  2. Vue.js组件化开发，通过父、子组件传参实现数据共享、事件监听和状态管理。
  3. ES6的let/const、箭头函数、扩展运算符等的运用。
  4. 以flex为主，position为辅的CSS布局；Vue过渡、动画结合CSS3实现页面交互效果；
  5. JSON Server模拟REST风格的API，操作数据。

球队球员一览

父组件teamsPage（球队页面）

  1. 数据关联。球队、球员数据列表、添加球员、查看球员信息、编辑球员信息、删除球员信息各组件通过自身id和路由路径参数互相耦合来获取、传递数据，同时也使用了函数模式的props路由组件传参，以及router-link的to、append、tag等属性运用。
  2. 球队展示获取JSON数据后，利用Vue计算属性和JSfilter方法得到按大洲分组的球队。
  3. 球队展示和球员数据的布局。结合float和margin的两栏布局，球队展示inline-block。

子组件teamTable（球员数据表格）

  1. 球员搜索。多维属性匹配搜索，Vuev-model表单输入绑定，计算属性中用原生JS操作符运算返回搜索结果。
  2. 添加球员、编辑球员、删除球员操作跳转回本页面的数据更新和状态文本提示。通过get和put数据、组件生命周期钩子函数、路由导航守卫、路由参数更新数据。
  3. 球员数据表格。CSS表格样式、伪元素设置各行交错的背景颜色。

子组件addPlayer（添加球员）、子组件editPlayer（编辑球员）

  1. 添加球员信息。Vuev-model表单输入绑定，v-on事件、手动添加id，put数据至后台，$router.push或$router.go跳转、传递params.query参数。
  2. 输入验证。flag数据和blur事件绑定错误提示的显示与否，v-if渲染错误信息，Vue计算属性中正则表达式验证输入，HTML5的required属性。

子组件playerData（球员详细信息）

  1. 球员信息卡片。v-for和v-if的结合使用。
  2. 删除球员。splice删除、引入删除确认对话框组件的父子组件数据传递。

模拟抽签

抽签流程：

  1. 东道主俄罗斯自动落位A1，随后抽出第一档(种子档)的其他球队，分别落入B1-H1的其中一个签位。
  2. 依次抽出第二档、第三档和第四档球队，但抽出的球队落入的签位是随机的。
  3. 每个小组至少要有1支欧足联所属球队(但最多不超过2支)，而其他足联所属球队在每个小组里最多只能有1支。

模拟抽签页面应用的构建主要在于：

  • 抽签规则的算法
  • 各种操作场景的判断
  • 程序执行+友好的页面样式交互效果。

父组件drawPage

  1. 状态管理。
  • 父组件drawPage集中管理主要状态参数: 如抽签轮次、允许操作项、抽中球队、抽中小组位次、分组结果、流程提示等，并通过props向子组件传递状态数据，从而决定子组件的显示和操作；
  • 子组件通过自定义事件向父组件传递抽签结果，从而更新状态。通过父、子组件传递状态参数，控制业务逻辑和页面交互效果。
  1. 开始抽签。$refs执行子组件的球队、小组位次打乱函数，并更新初始状态参数。
  2. 回避原则。依据抽签回避原则：
  • computed计算正常顺序下的应落位小组；
  • methdos中封装函数：正常情况下、同小组不能有两支相同大洲球队（欧洲除外）、同小组不能有超过两支欧洲球队三种情况下设置抽中球队和实际落位小组。
  • methods中封装函数`显示球队分组落位结果和是否存在回避
  1. 抽中球队的落位。组件drawDialog对话框用slot具名插槽复用,$set加入groupContainer数组，并递增抽签轮次。
  2. 布局。flex为主，position为辅助。
  • 展示区：实时展示球队抽中状态
  • 操作区
    • 球队抽签
    • 小组位次抽签
  • 结果区：展示抽中球队落位情况和最终结果
  • 状态区：操作流程和抽签实时状态提示

子组件teamArea(球队抽签区)、groupArea(小组位次抽签)

  1. "打乱签"。Math()封装打乱数组的函数、CSS3的transform: rotate改变位置、Vue的v-bind:style。
  2. "过渡和动画"。CSS3的transition，Vue的transiton-group和v-move
  3. "抽中的数据更新和样式显示"。设置对象属性、v-if遮罩显示隐藏。

子组件drawShow(球队抽签区)、groupResult(小组位次抽签)

主要用CSS3和Vue过渡提供当前高亮效果。

难题和BUG解决

  • props异步传参、对象属性缺失、计算属性等导致的页面渲染出错和解决措施
  • 模拟抽签中揭签z-index层叠上下文的影响

性能优化

  • 尽量不从后台获取数据，子组件使用父组件的数据。
  • 回避原则的函数尽量少进行遍历操作。
  • 尽量封装函数，例如抽签回避原则。