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

目录

简介


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

主页效果查看

签到页效果查看

(只怕加载相比缓慢)

  1. 行业的发展阶段

框架


基于Bootstrap,ECharts,JQuery开发

2. 从系统运转中央看产品设计和营业

作者


Nirvana-zsy

github地址

3. O2O 阳台对集团经营销售的增量

时间


 开首时间:20170308

首先次提交时间:20170310

第三回立异时间:20170321

4. 用户量的晋升中的”自传入”机制

前后台接口表达


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

 

见上述github地址

 

一. 行当的上扬阶段

自中中原人民共和国互连网发展一来,中中原人民共和国网络朋友四大类的须要获得了大幅的满足,并且做到了 BAT
三大巨头,那四大类的要求分别是:对消息信息的供给,对社交通信的供给,对购买销售产品的须要,对娱乐玩耍的需要.而群众点评认为,用户对线下公司服务的须要,将会完毕下二个巨头.不过在活动这些圈子里,却鲜有人提到,我们都在关心生活是还是不是收获满意之余,我们对此运动那几个大商场却缺少丰裕的关心.

足球,中华的互连网,也欠国人三个爱抚”运动健康”的阳台 —–
在这几个平台,除了更好的满足人们的移动之余,更进一步更好的去改革人们对此运动的”观念和体验”,指点我们怎么样尤其健康生活.就最近而言,互连网在”运动”那一个圈子,仍居于起步的阶段.由此机会窗口还有很多.

品类中境遇的难题


二. 从系统运营主题看产品设计和营业

从人们的位移场景出发,可以分为以下项目:

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

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

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

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

从场地预约服务出手,整个产品和营业,必须围绕着以进步各方利益为落脚点来规划,在这么些种类里,各方剧中人物之间的关系如下图所示:

场地预定类系统

全套系统中:

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说,能还是无法把具有的值放在3个字符串里不胫而走后台呢?正是那样的职能: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(),分别要在怎么时候用:

四. 用户量的升官中的”自传入”机制

洋洋的出品运转思路把用户量的升官,单纯地用沟渠拓展的艺术来拓展,可是对于部分产品,拥有自传播的特征,会使用户量的收获,有2个更大的升高.最佳的运行,其实是成品小编,而不是其余.
恰好”群众体育”运动类的成品,本身就颇具自传播的基因.那么,怎么着设计出好的机能,最大限度的表达出”自传入”的表征,就成了大家要探讨的难点.

如上边系统脚色图中所见,那特本性,来自于协会者与运动员之间的招兵买马三保出席的需要.运动员供给找组织,而集体也须求招募运动员.因而,设计三个”发起活动”的法力,是自然则然的选料,关键点在于,发起活动后,达成最大限度地找来运动员参加,就是使”自传入”最大限度发挥拉新成效的.要找来运动员加入,意味着要把协会者发起的位移最大限度地往外推.那么难题的首要性,就成了”哪个人”来传播活动.活动的关联方正是流传活动的老将,一是管理员,二是运动员.所以在移动发起之后,能够设想设计八个机制,来最大限度的推进移动关联方举行传播:

a.组织者传播机制:能够利用阶梯减价/众筹的主意来实行.对领队而言,越几人涉足,订场的资费就越低,甚至协会者本身可以赢得回扣或然免费的措施参加活动.当然,对于运动的插手人数,是要跟订的场次挂钩的,不能够凌驾场次可容纳的人数.

b.运动员传播机制:动用约请返利的法门,运动员诚邀新的莫逆之交进来报名,那么本次的提请费用,可以再次来到一部分给该运动员,诚邀到自然数额的挚友,能够减少和免除甚至给予嘉奖的不二法门,给到运动员.

一般而言,运动员诚邀的人,也是同去报名参与活动的运动员,由此这样的特约机制,逻辑上是实用的.

attr():

对此HTML元素大家友好自定义的DOM属性,在拍卖时,使用attr方法。

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

谈到移动
O2O,不得不说的3个是运动社交,市集上有非凡多的出品,不管是场合预约那种服务类的,还是提供里程呈现那种工具类的成品,都希望或多或少地往社交的趋向上去靠,而往往效果并不理想.

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

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

2). 内容过于欠缺,缺乏年足球够度.

3). 互动格局单调,内容缺少充分度,也象征互动会趋于单调.

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