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

目录

简介


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

主页效果查看

签到页效果查看

(可能加载比较缓慢)

  1. 行业的迈入阶段

框架


基于Bootstrap,ECharts,JQuery开发

2. 从系统运作中央看产品设计和平运动营

作者


Nirvana-zsy

github地址

3. O2O 平台对合营社经营销售的增量

时间


 开首时间:20170308

首先次提交时间:20170310

第3回革新时间:20170321

4. 用户量的升级换代中的”自传入”机制

前后台接口表明


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

 

见上述github地址

 

一. 行当的前进阶段

自中夏族民共和国互连网发展一来,中中原人民共和国网上朋友四大类的供给获得了偌大的满足,并且做到了 BAT
三大巨头,那四大类的须要分别是:对情报新闻的必要,对社交通讯的需要,对购进产品的急需,对游戏游艺的要求.而公众点评认为,用户对线下企业服务的须要,将会成功下二个巨头.但是在移动那几个世界里,却鲜有人提到,大家都在关切生活是还是不是取得满足之余,大家对此移动那些大市集却缺少丰盛的关心.

华夏的互连网,也欠国人三个关切”运动健康”的阳台 —–
在那些平台,除了更好的满意人们的移位之余,更进一步更好的去改进人们对此活动的”观念和经验”,带领大家怎么着尤其正规生活.就当前而言,网络在”运动”那么些世界,仍处在运维的阶段.由此机会窗口还有很多.

品类中遇见的标题


二. 从系统运营大旨看产品设计和营业

从人们的活动场景出发,能够分为以下项目:

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

  2. 部落活动,如羽毛球,兵乓球,网球,篮球,足球等公众大规模的移动;

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

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

从场合预约服务入手,整个产品和营业,必须围绕着以升级各方利益为着眼点来统一筹划,在那一个系统里,各方剧中人物里面包车型地铁涉嫌如下图所示:

场合预约类系统

一切体系中:

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值,再整到二个字符串里边,然后再赋值给三个用来传值的隐身的输入框传给后台。

一伊始自我的代码是那样敲的

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标签一样有二个能跟input关联的for属性,所以我不能够不在li上此外添加点击事件,当点击li时,改变子成分(也正是所点击的li标签下的checkbox)的checked的值,要改变首先就要获取那些值,于是难题就应运而生在此间,笔者用了attr()方法获得不对,但是当本身测试输出获取的要素的id值时,正确输出了,表明便是attr()方法有错,在本人查了文书档案和技能博客之后才精晓,attr(),prop(),分别要在怎么时候用:

四. 用户量的升级换代中的”自传入”机制

重重的成品运营思路把用户量的升级换代,单纯地用沟渠拓展的格局来开始展览,可是对于部分产品,拥有自传播的个性,会使用户量的获得,有贰个更大的进步.最好的营业,其实是成品自个儿,而不是别的.
恰好”群众体育”运动类的产品,自己就持有自传播的基因.那么,如何规划出好的作用,最大限度的发挥出”自传入”的特征,就成了我们要思想的难题.

如上面系统剧中人物图中所见,那个本性,来自于组织者与选手之间的招用和涉企的供给.运动员需求找组织,而公司也急需招募运动员.由此,设计一个”发起活动”的成效,是顺其自然的选拔,关键点在于,发起活动后,完结最大限度地找来运动员参与,正是使”自传入”最大限度发挥拉新职能的.要找来运动员参预,意味着要把组织者发起的位移最大限度地往外推.那么难点的要害,就成了”何人”来传播活动.活动的关联方就是传播活动的老将,一是管理员,二是运动员.所以在移动发起之后,可以设想设计四个机制,来最大限度的推进移动关联方举行传播:

a.协会者传播机制:能够应用阶梯打折/众筹的不二法门来举办.对领队而言,越多少人涉足,订场的支出就越低,甚至协会者本身能够赢得回扣大概免费的法子加入活动.当然,对于移动的插手人数,是要跟订的场次挂钩的,不能够凌驾场次可容纳的人数.

b.运动员传播机制:动用约请返利的方法,运动员诚邀新的君子之交进来报名,那么本次的提请费用,能够回来一部分给该运动员,诚邀到自然数额的密友,能够减少和免除甚至给予嘉奖的主意,给到运动员.

一般而言,运动员特邀的人,也是同去报名参加运动的选手,因而那样的特邀机制,逻辑上是有效的.

attr():

对此HTML成分大家和好自定义的DOM属性,在处理时,使用attr方法。

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

谈到活动
O2O,不得不说的叁个是移动社交,商场上有相当多的成品,不管是地方预约那种服务类的,依旧提供里程显示那种工具类的产品,都希望或多或少地往社交的趋向上去靠,而往往效果并不理想.

从社交的”关系链,内容,和互相”三要向来看,做运动社交存在多少个难点:

1). 关系链不够紧密,一旦变成强关系 ,简单迁移到微信中去.

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

3). 互动情势单调,内容缺乏丰硕度,也表示互动会趋于单调.

神州的社交圈子,基本已经被微信和陌陌瓜分完了,剩下的基于Ford垂直领域的交际(如旅游社交,运动社交等等所谓的弹性社交),大四只是为赋新词强说愁而已,而且最后用户的关系链和内容都会回流到微信/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(一共有12个科室)则将“不限”复选框值设为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 }