【实践足球】大三下项目学习笔记

目录

简介


大三下软件连串结构课程项目-前端部分

主页效果查看

签到页效果查看

(只怕加载相比较缓慢)

  1. 行业的发展阶段

框架


基于Bootstrap,ECharts,JQuery开发

2. 从系统运行主旨看产品设计和营业

作者


Nirvana-zsy

github地址

3. O2O 阳台对商店营销的增量

时间


 早先时间:20170308

首先次提交时间:20170310

第二回创新时间:20170321

4. 用户量的提高中的”自传入”机制

前后台接口表明


5. 题外话: 运动社交是伪需要

 

见上述github地址

 

一. 行业的前行阶段

自中华夏族民共和国互连网发展一来,中华夏族民共和国网上朋友第四次全国代表大会类的须要得到了庞大的知足,并且形成了 BAT
三大巨头,那第四次全国代表大会类的急需分别是:对信息新闻的必要,对社交通信的供给,对购买销售产品的须求,对娱乐玩耍的供给.而民众点评认为,用户对线下公司服务的急需,将会达成下一个巨头.然而在运动这几个领域里,却鲜有人提到,我们都在关切生活是还是不是收获满意之余,大家对于移动那几个大商场却缺少足够的关怀.

中华的互连网,也欠国人2个关心”运动健康”的阳台 —–
在这一个平台,除了更好的满足人们的移位之余,更进一步更好的去改革人们对于运动的”观念和体验”,辅导大家怎么样越发健康生活.就如今而言,网络在”运动”那一个圈子,仍处于起步的阶段.由此机会窗口还有很多.

品类中遇见的难点


二. 从系统运行中央看产品设计和营业

从人们的位移场景出发,能够分为以下体系:

  1. 单人运动,如跑步,健身房类型的活动;

  2. 群众体育活动,如羽毛球,兵乓球,网球,篮球,足球等公众普遍的移动;

  3. 个体找教练和达人约陪练的.

铃木运动里边,论基数大,须求频发度高的,当属群众体育活动,因而市镇也是最大的.找教练的必要也相比常见,但频发度相对较低,生命周期也正如短.

从场合预约服务入手,整个产品和营业,必须围绕着以升级各方利益为落脚点来规划,在那一个系统里,各方角色之间的涉嫌如下图所示:

场地预定类系统

总体系统中:

1). 场馆:是一切系统的宗旨能源,假如没有地方能源,那么此类平台是不容许提高兴起的,这也还假设个竞争壁垒.所以产品和平运动营的关键点之一,是围绕怎么进步地方的低收入举办开始展览.而由上海体育场面大家得以观望:

场地主营业收入 = 预定场合量(协会者+教/陪练) +
器材消费(包涵饮料等大规模服务消费)

而里边多数来自于场所的预约量,场面的预约量又多方源于组织者的预定.

2)组织者:是延续场所和平凡运动者的主题,场合的预约量的重点力量,由此平台能聚拢越来越多的管理人,那么对于地方财富的引发就越大.而大班的须求,有预约地方和招募运动者到场两大学一年级部分,由此想要聚集协会者在这一个平台上,满意以下两点:

a.
提供高性价比的场地预约,就现阶段而言,便是可以用相比低的价格预约场面(除了价位外,是不是预定地方还跟大班与场地地方距离有比较强的涉嫌,而那平日是无能为力更改的成分).

b.
提供便宜/高效的招收活动者的服务,满意组织者随时随处都足以组织活动的需求,那意味着平台需求保障场所周边覆盖到足量的运动者(参预活动,地理地方是非常的大的一个勘察因素).

3). 运动者:运动员的须要有三部分:
加入活动,找教/陪练,消费器材和饮品周边服务,由此平台对运动员的诱惑,满意以下两点:

a. 加入活动: 高品质,低开销.之所以有高品质,是因为在群众体育活动中,竞争双方或多方青睐实力旗鼓非凡.若是实力悬殊,那么一切运动的质量就不高,那对选手而言,是一种十三分差的体验.

b.教/陪练:
寻找到很是的教练,可相信的陪练.教练首假如对技术进步有明显要求的赏心悦目有含义,而陪练不小程度上,恐怕只是满足”孤独”的交际需要.相对来说,必要的基数和频发度都不会很高.

4). 教练/陪练:磨练的能源在全体类其余运维里,是最不主要的一环,然而却足以作为一种毛利的不二法门补给到平台里边.

1.jq中数组的遍历

标题讲述:

由于表单中复选框在传值方式是这么的:

<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="电影">电影
<input type="checkbox" name="hobby" value="音乐">音乐

 

当自身入选足球和音乐四个挑选,向后台传递的键值对串是这么的:hobby=足球&hobby=音乐

可是大家组的后台gg说,能否把持有的值放在一个字符串里传开后台呢?便是那般的成效:hobby=足球+音乐

于是自个儿就要求在付给表单前,获取具有的入选的checkbox的value值,再整到2个字符串里边,然后再赋值给3个用来传值的隐身的输入框传给后台。

一发轫自小编的代码是那样敲的

var checkbox_arr=$(".checkbox:checked");
var longstr='';
for(var i=0;i<checkbox_arr.length;i++){
    longstr=longstr+'+'+checkbox_arr[i].val();  
}

 

万般。。。不荒谬的思绪,而且test了一晃,数组的length是对的,但是,报错了:checkbox_arr[i].val
is not a function…

在网上查了很久,也看了重重技术博客和文书档案,依然没找出原因,但找到了另一种思路:

var val_realstr = "";
$('.showcheckbox:checked').each(function(i){
f(0==i){
    val_realstr = $(this).val();
}else{
    val_realstr += ("."+$(this).val());
}
});

 

那般做是从来通过jq的each()方法,直接对checkboxDOM对象进行操作,each()方法本人正是jq用来操作DOM对象的,那样做就制止了中间出错。

关于上面的格局为啥错,小编在segmentfault上发问了,等搞定了再来填坑(天呐。。。我怎么留下了如此多坑)

 

三. O2O 平台对商行营销的增量

上文从系统运作中随处剧中人物必要的角度进行了分析,但在O2O平台,对于线下的店铺来说,能够获得怎么样额外的增量?

追忆一下店铺收入的重组:

场所主营业收入 = 预定地方量(协会者+教/陪练) +
器材消费(包括饮料等科学普及服务消费)

那么我们能够怎么从提高预定场所量和广大服务的消费上,进步场面的主营收呢?

1).小巧运维的恐怕,下跌场合空置率,升高场面预定量.

场管的某时段的预定量 = 固定订场量(如商行等的永恒订场) + 非固定订场量

相似的话,场所对空置率那些标题都以可怜消沉的.基本都属于靠天吃饭,地方的人口每一日都是坐等消费者本人打电话来订场.而除去固定的小卖部单位或领队协会订的场外,别的的场馆是还是不是有人订,都以地处不可控的状态.那么那里就存在着迷你运维的或然性.
O2O
的平台最大的个性,正是能够辨别出场所周边的开支群众体育.假设场所的指挥者,在接近有些时刻段里,依旧发现还有一对场没人定,就能够在凉罗利,以一定的经营销售手法,比如优惠也许附赠消费等方法,把该时间段的场次推送到消费者前边,以升级订场率.

2).经营销售手法的各类化,同时升高预定量及常见服务的消费.

如上一段提到的,普通市集的经营销售,大多都是毫无作为的,而且经营销售的点子也相比较单一.在
O2O 阳台上,为合营社提供了积极性营销的还要,是不是还足以在经营销售手段上,进一步进步.

a. 捆绑周边产品减价的开支格局:
提供订场的还要,以优化的方法同时捆绑饮料如故器材等一同销售,进步周边产品的销量.

b. 降价/附赠券/积分等形式:
针对平台上的老会员,可以得到一定的优遇,以升级用户的忠贞度.

c. 阶梯减价/众筹的法子:
对订场的价位依照人口的略微,给予肯定的阶梯优惠.那样的办法,能够鼓励组织者拉来越多的运动者.那种艺术同时能够与捆绑周边产品消费的主意结合起来,以高达更加多的健儿,消费越来越多的周边产品消费的目标.

2.jq中attr(),prop()的区别

难点讲述:

一致产生在checkbox身上。。。由于笔者把各种checkbox都放进了bootstrap的下拉列表组件里,它爸是li标签,由于a标签不像label标签一样有2个能跟input关联的for属性,所以本人必须在li上其余添加点击事件,当点击li时,改变子成分(也便是所点击的li标签下的checkbox)的checked的值,要转移首先就要获取那多少个值,于是难题就应运而生在此处,笔者用了attr()方法获得不对,可是当笔者测试输出获取的要素的id值时,正确输出了,表达便是attr()方法有错,在自笔者查了文书档案和技能博客之后才了然,attr(),prop(),分别要在怎么着时候用:

四. 用户量的提拔中的”自传入”机制

足球,成都百货上千的出品运行思路把用户量的升迁,单纯地用沟渠展开的措施来进展,但是对于一些成品,拥有自传播的天性,会使用户量的取得,有贰个更大的升高.最棒的运行,其实是产品作者,而不是任何.
恰好”群众体育”运动类的制品,本人就具备自传播的基因.那么,怎么样筹划出好的效益,最大限度的抒发出”自传入”的特征,就成了笔者们要思考的难点.

如上面系统剧中人物图中所见,那几个天性,来自于组织者与运动员之间的招生和参与的必要.运动员需求找组织,而集体也必要招募运动员.由此,设计1个”发起活动”的效应,是任天由命的选项,关键点在于,发起活动后,完结最大限度地找来运动员参预,正是使”自传入”最大限度发挥拉新作用的.要找来运动员出席,意味着要把协会者发起的移动最大限度地往外推.那么难点的最首要,就成了”哪个人”来传播活动.活动的关联方便是流传活动的老将,一是管理员,二是运动员.所以在活动发起之后,能够考虑设计四个机制,来最大限度的无事生非移动关联方进行传播:

a.领队传播机制:能够行使阶梯减价/众筹的点子来进行.对领队而言,越两野山出席,订场的资费就越低,甚至组织者本身能够取得回扣恐怕免费的法门参预活动.当然,对于活动的参预人口,是要跟订的场次挂钩的,不可能凌驾场次可容纳的人数.

b.选手传播机制:应用约请返利的点子,运动员特邀新的密友进来报名,那么这次的申请花费,能够回到一部分给该运动员,诚邀到一定数量的知音,能够减少和免除甚至给予记功的措施,给到运动员.

貌似而言,运动员诚邀的人,也是同去报名参加运动的选手,因而那样的约请机制,逻辑上是卓有成效的.

attr():

对于HTML成分我们友好自定义的DOM属性,在处理时,使用attr方法。

五. 题外话: 运动社交是伪需要

谈到运动
O2O,不得不说的三个是运动社交,集镇上有非凡多的制品,不管是地方预定那种服务类的,依然提供里程展现这种工具类的出品,都盼望或多或少地往社交的矛头上去靠,而往往效果并不理想.

从社交的”关系链,内容,和彼此”三要从来看,做活动社交存在多少个难题:

1). 关系链不够紧凑,一旦变成强关系 ,容易迁移到微信中去.

2). 内容过于欠缺,缺乏丰盛度.

3). 互动方式单调,内容缺少丰裕度,也表示互动会趋于单调.

华夏的社交圈子,基本已经被微信和陌陌瓜分完了,剩下的依据三菱垂直领域的张罗(如旅游社交,运动社交等等所谓的弹性社交),大三只是为赋新词强说愁而已,而且最后用户的关系链和剧情都会回流到微信/Qzone,新浪或然沉淀在陌陌中.从诸多选用咕咚的人,不在咕咚,而是在微信分享他们的跑步里程,就可知端倪.

唯一大概有空子的交际形态,或者在于万分小众垂直的领域,在那么些圈子里,内容的丰富度以及存在于小众领域内独有的,异于普通社交的相互方式,会生出出独有,稳固的涉嫌链,才有与微信等应酬共存的只怕性.

PS:
此外有个别产品以为把有个别私家移动的动态,分享出去,就对小名称所谓的移动社交,那类的成品也是兼具鲜明瑕疵的.

调换请加小浩 loft 微信:438427112

prop():

对于HTML元素本人就带有的本来属性,在处理时,使用prop方法。

那也正是本人能用attr获取到checkbox成分id值,却获得不到checked值的因由

 ————————–20170321更新———————————

这一次本着事先的第二个难题再创新一下,也是关于checkbox。

 

第②讲要高达的机能:

1表单中国科学院室暗许是全方位当选的;

2当用户撤废有些复选框时,“不限”的按钮也要自行裁撤;

3当用户选中“不限”复选框,全体科室都要被自动选中。

如图:

 足球 1

 

js代码的笔触:

 js代码思路很简短,

1页面加载后取得具有复选框dom节点然后把checked属性值设为true;

2添加“不限”复选框的点击事件,然后拿走其checked值是true依旧false,是true(此处注意若点击后是选中复选框,那么获取到的值正是true,获取到的不是点击前的值,是点击后的值,自信试验须臾间就知晓了);

3.给持有科室复选框添加点击事件,那里跟上边不一样等,为了完功用果最优方案应该是,获取被入选的复选框,判断个数,小于13(一共有1二个科室)则将“不限”复选框值设为false。

 

遇到的难点:

1.如上述,点击事件函数中取得checked属性,获取到的值是点击后的;

2.照旧有关复选框的checked属性。

上次翻新的prop和attr的分别没什么毛病,可是作者又发现了胸中无数的新题材:

在html中的复选框标签里面安装checked属性值,

无论那样

<input type="checkbox" checked>

 

抑或如此

<input type="checkbox" checked="true">

 

要么这么

<input type="checkbox" checked="false">

 

结果,那么些复选框,都 会 被 选 中!(经测试,在chrome,ff,safari,ie,edge中都是均等的结果)

笔者在mdn查了瞬间checked这些天性,是如此讲述的

When
the value of the type attribute is checkbox, the presence of this
attribute indicates that the control is selected by default. You can
specify this as checked="checked", or simply just checked.

 表明那一个本性是尚未false那几个值的,在后头编码的时候要幸免这么些坑。

 

上边附上源码:

 1 $(document).ready(function(){
 2 
 3     //默认选中所有复选框
 4     var showcheckbox=document.getElementsByClassName("showcheckbox");
 5     for(var i=0;i<showcheckbox.length;i++){
 6         showcheckbox[i].checked=true;
 7     }
 8     //默认选中"不限"复选框
 9     document.getElementById("allcheckbox").checked=true;
10 
11     //如果选中“不限”复选框,那么所有的都要选中
12     $("#allcheckbox").click(function(event) {
13         if($(this).prop('checked')==true){
14              var showcheckbox=document.getElementsByClassName("showcheckbox");
15             for(var i=0;i<showcheckbox.length;i++){
16                 showcheckbox[i].checked=true
17             }
18         }else{
19             
20         }
21     });
22 
23     //如果某个复选框没被选中,那么“不限”复选框就要取消
24     $(".showcheckbox").click(function(event) {
25         if($(".showcheckbox:checked").length<13){
26             document.getElementById("allcheckbox").checked=false;
27         }
28     });
29 }