体育系统前端总结"/>
体育系统前端总结
前言
由于各种原因，最后学校的体育系统的前端由我来写。这算是自己第一次做交互性这么强的项目，也是自己第一次使用Vue书写。整个项目过程中学到了很多新东西，也把很多自己从书本上看到的东西使用上了。总体来讲收获满满。下面来总结一下自己的项目经验，以及指出自己通过这个项目发现的不足之处。
业务需求简述
系统使用者为体育负责人和运动员，体育负责人登录成功后，选择需要报名的比赛，报名成功，系统返回一个序列号。运动员通过这个序列号报名并且填写个人信息上传。负责人对于上传的运动员信息确认领队以及运动员具体参加比赛的那个类别(例如单打,双打等)
备注：本系统主要在移动端使用
前端布局
对于前端布局，自己一向是很有信心，毕竟自己还是写过不少的前端界面，想想不就那么回事吗？但是总还是会遇到一些问题。
表格布局
因为自己在布局方面使用了bootstrap框架，对于表格，当然第一时间是想到设定class为table。如果想要更多样式，当然也还可以设置更多的class。但是对于表格中列比较多，并且比较长的时候，就比较尴尬了。对于外部是bootstrap中的container，pc端一般不会出现溢出的情况，但是对于移动端，溢出那是秒秒钟的事情。这个怎么办呢？首先第一个想法就是看看能不能强制横屏查看，最后基本实现了，具体实现过程后面再说。但是即使使用横屏，信息还是显示不完全，不过每个td可以左右滑动查看，觉得也还过得去。本来以为这里就告一段落了，但是有人在用iPhone7测试的时候，发现td中的内容不能够滑动查看。这个就尴尬了，本来想着修改table的样式，但是因为使用了bootstrap框架中的table样式，修改一直没有成功。后来索性想着自己写table样式，但是对于table中的布局其实有很多坑的，不过好在自己之前把这个坑都填好了，并且准备了一个小demo（嘻嘻）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">table,tr,td{margin:0;padding: 0;border-spacing: 0;font-size: 12px;color:orange;}table{border:gray solid;width: 400px;border-width: 1px 0px 0px 1px;}更多推荐
体育系统前端总结
发布评论