红满堂前端开发规范

一.代码结构规范(结构和行为分离):

1.html, css, js代码分别放在各自的文件里.

2.在html文件body之前引入css

3.在html文件body里的最下面引入js

4.html代码里不要出现onclick等html dom事件,统一使用js代码触发html dom事件

5.避免使用document.write方法,以方便结构和行为分离.

6.每一大段html代码加一条html注释解释该段代码的作用,不要过多,也不能没有

7.每一个js函数都要添加注释,如下:

/*

*@function 验证邮箱格式

*@author 你的昵称或者全名

*@params 参数类型列表,如: userid(int),money(float)

*@return 函数返回类型,如: totalMoney(float)

*/

二.命名规范

1.文件命名(html,css,js,图片文件等):不要出现中文!不要出现中文!不要出现中文!

2.html代码少用或者不用id,避免团队开发中id冲突的问题.除非确定此id只在该页面出现一次.

3.css类名统一使用”-“横杠分割单词,单词全都是小写.

4.所有命名都要具有可读性,统一使用英文命名,不能出现中文或者是拼音,不要有错别字,不懂的单词一定要查字典再使用,不能单凭自己揣度.

 

前端开发规范 V 0.10 版,有待完善

我们的聊天工具——堂聊(hchat)使用指南

logo

前言:拖了好久的堂聊使用指南终于出炉了,我在上班的空闲时间写的,如果以后还有哪个小朋友说不会用堂聊的话,就抓出来吊打一顿,哇哈哈哈~。

介绍:业界一直寻求更好的团队沟通工具,我们红满堂工作室也不例外。

  • 一款好的聊天工具可以减小注意力分散的几率,让我们能够更专心的讨论;
  • 聊天记录可以保存,可以在线编辑,撤销;
  • 支持聊天记录搜索;
  • 可以任意增加一个频道,频道可设为公开或者私有;
  • 上传的附件可以在对应的频道找到;
  • 待补充..

我们的聊天工具从简聊,到bearychat ,再到微信,最后在我们红满堂的海外大神iltc 橙子师兄的帮助下,我们用上了堂聊(hchat)

优点:

  1. 支持多平台:在线网页版,windows,mac,linux客户端;android,ios客户端。
    客户端国外下载链接 , 网页版链接
    (如果不会科学上网的刚进来工作室的小朋友先登录网页版链接,然后再获取堂聊里的公共频道里的附件里的堂聊客户端)
  2. 堂聊搭建在我们工作室的服务器里,做好了备份,不怕聊天记录和文件丢失。
  3. 堂聊的代码都是开源的,我们可以优化和完善堂聊

使用指南:

  1. 注册(由于是内部聊天工具,不开放注册,需要询问堂聊管理员或者肥老板)
    1. 向堂聊管理员或者老板提供你想要注册堂聊的邮箱(请务必记住!);
    2.  堂聊管理员或者老板会提供一个私密的注册链接或者在后台帮你直接创建一个帐号并发邮件告诉你激活账号,然后再收到一份邮件上面是你的帐号和密码;
    3. 打开堂聊(网页版和客户端都可以),输入用户名和密码,登录;
    4. 更改初始密码;
    5. 登录到堂聊啦~
  2. 登录
    1. 网页版登录
    2. 电脑客户端(windows,mac,linux)登录;(建议)
    3. 手机客户端(android,ios);
  3. 频道
    channel
      频道定义:可以将话题分开,不至于一个话题穿插在另外一个话题,可以让讨论更加集中。
      频道介绍:
     1.公共频道是大家侃大山或者随意聊技术的地方~,每个人都要加入;
    public
    2.公告频道顾名思义是发公告的地方,每个人都要加入,但不能在里面聊天;
    notice
    3.技术分享频道是分享各种技术的地方;
    tech
    4.招聘与就业频道是讨论就业或者工作的地方;
    job建议:将频道都加一遍,可以查看别的团队是怎么讨论的,开发进度是怎么样的,讨论火热程度如何,如果对其他技术感兴趣,也可以从中受益匪浅。
    频道功能:

    1. 频道支持收藏频道、隐藏频道;
    2. 频道支持公共和私有;
    3. 用户可随意加入公共的频道,查看频道里的聊天记录和附件;
  4. 讨论、交流、聊天
    chatchat1

    1. 支持私聊
      chat2
    2. 支持表情
      chat3
    3. 支持类markdown用法
      chat4code
    4. 支持语音
      chat5
    5. 支持视频
      chat6
    6. 支持在线语音
      chat7
  5. 更多功能等你来挖掘~
  6. 期望
          我们投入、专注、耐心、成长,相信我们工作室未来会更加美好。红满堂工作室是我们另外一个家,无论我们以后远到国外求学,还是努力创业,或者在有名公司工作,又或者默默无闻,都别忘记我们在工作室成长的点点滴滴。

任务管理平台-Teambition使用指南

前言:最近一段时间都没什么空,正好有个美好的周末.然后就泡在工作室了.突然发现工作室的新人都不怎么会用teambition管理任务.于是就写了这一篇文章.

介绍: Teambition 是一个协作化的项目管理平台,帮助企业以实时协作的⽅式实现更高效的项目管理。在 Teambition 上,所有项目成员都可以实时了解到项目的最新进展,一起推动项目。 –摘自Teambition开始使用

使用指南:

  1. 登录和注册账号(务必要记住自己注册的账号和密码,或者最直接用微信登录)
    2016-07-30 09:48:36屏幕截图
  2. 向工作室内负责项目管理的童鞋发出邀请申请.
    管理者会通过下面的方式给你发出邀请:
    (1) 你已经在红满堂工作室企业版了,所以管理者可以直接邀请(或者是跟项目管理人合作过的).
    2016-07-30 10:01:35屏幕截图
    (
    2)或者提供你自己的邮箱(注意!是注册teambition的邮箱)给管理者.
    2016-07-30 10:09:41屏幕截图
    (3)扫二维码或者访问邀请链接.
    1
  3. 使用.
    2016-07-30 10:20:13屏幕截图
    (1)每一个灰色块都是任务的阶段,可以自定义名称.一般有”待处理”,”进行中”,”已完成”三个阶段.
    (2)每个灰色块里有任务列表,你可以通过点击下面”添加任务“来添加自己的任务.
    a.如果这个任务是多人协作,那么就可以在参与者那里添加你的队友.这样你的队友就会收到teambition的任务提示.
    b.可以点击”更多“来设置截止时间,优先级和重复周期.
    2016-07-30 10:26:24屏幕截图  2016-07-30 10:28:04屏幕截图
    (3)如果项目负责人已经分好任务的话,你所需要做的就是领任务,设置截止时间.
    a.看好你能接什么任务,衡量自己的能力.点击执行者,将执行者改成你自己,给自己设定一个完成任务的时间.
    ps:如果是小任务的话,那就将点击下面小任务对应的头像,改成你自己的头像
    b.如果你对任务不太了解,或者说有疑惑,可以在下面评论区@人,留下你的疑问.(评论区的记录可以保留,有备份,这样对项目有很大帮助的)
    2016-07-30 10:34:44屏幕截图
    (4)最好下载一个teambition的手机客户端,以便随时收到任务信息和其他队友的进度反馈(以便项目管理者可以管理)
  4. 进阶~
    teambition官方文档指南
  5. 肥老板的话~
    Teambition用来分配任务,设定开发时间节点,任务我们一般我们不主动安排指定给某个人,我们希望大家能发挥主观能动性,主动领取任务,领取任务后,记得把任务执行者改为自己的头像,这样代表这个任务已经被领取,避免两个人在不知情的情况下同时做同一个任务,设置任务执行者之后,记得把任务拉到“进行中”这个项目阶段,以便项目经理知道你当前的工作状态,任务完成后,不能直接勾选任务完成,而是把任务拖到“待测试”项目阶段,以便项目经理做功能测试,如果测试不通过,项目经理把任务拉回“进行中”,并注明不通过原因,回炉再造,如果测试通过,项目经理把项目拉到“已完成”,代表任务测试通过,当所有的任务都投产到生产环境时候,才勾选任务,代表任务完成。
  6. 下期预告~我们的聊天工具–堂聊
    2016-07-30 11:23:21屏幕截图

合租宝开发总结

合租宝一开始的开发构想源于老佛爷和肥老板,一开始我是抱着做着玩玩的心态搞的,刚好上学期招新有一波新人进来,让他们练练手做了一些重构的页面(虽然最后重构的页面还是我做了),UI设计上我是参考了Airbnb,海琦出图,后端基本上就我自己一个人搞了。

一开始的设想很简单,合租信息发布平台。原以为趁着寒假一两个星期就搞定了,结果遇到不少问题,一直延期到五月份才正式上线,效果不是很理想,产品虽然没有说流产但也称不上成功,我希望后续的开发人员或开其他新项目的人员在看到我的总结时能有所收获。

分为以下几个方面:

  • 做好产品的定位。
  • 确定好开发分工。
  • 如何循序渐进迭代完善一个系统。
  • 代码的安全性与信息加密。
  • 前后端的插件化与模板化。
  • 部署上线注意事项。

一、做好产品的定位

听起来很虚,实际上很重要,在做一个新项目的时候,一定要做好产品的定位。什么是产品的定位?那就是我这个东西开发出来的目标人群是谁?核心功能是什么?如何为用户提供他们想要的服务?

之所以把它列在总结的第一位,因为合租宝1.0开发出来之后我才发现好像不是很符合我们最初的构想,明明是合租信息发布平台,变成了房源信息发布平台,就这样丧失了合租的特色和竞争力,果然推出来效果很不理想。很多时候我们做东西不假思索,没有想清楚就干了,最终结果往往不尽如人意,做出来的东西要是白做了那还有什么意义,所以想清楚,做好定位非常重要!!!

二、如何做好开发分工

我一直说我们项目开发的模式有点土八路,随心所欲地发布任务,随心所欲地写代码,随心所欲地在某个时间点提交任务,又随心所欲地在某个时间点审查任务完成的状况。

如何消灭这种随心所欲?让一切开发的流程变得有条理井然有序是我一直在想的。很多时候我们的随心所欲来源于项目的目标感、流程感不够强烈,由于开发经验不够丰富,很多时候又被开发中遇到的各种问题产生的延迟掩盖了目标感和流程感,这一切都需要项目leader做好一个整体的把控。

一个项目开始做了,嗯,为了避免后期出现更多问题,leader首先应该想清楚设计好了没有?可行性考虑好了没?可扩展性怎么样?

接着,项目一共分为哪些功能模块?实现的难度怎么样?开发成员的开发能力与水平怎么样?功能模块下面又分为哪些子模块?这些也是leader需要考虑的,做好开发难度、开发周期的评估,当然这种非常精确的评估是很难的,但起码做到不能偏差地太远,而且需要leader在开发的过程中不断做调整。特别是开发周期的评估特别重要,做好有弹性而又能给成员带来紧迫感压力的开发周期评估。

OK,下来才是终于到分工了,无非是设计出图、重构、前后端对接、测试、上线。我们希望项目组的每个成员都能在开发中不断调整自己的评估能力,比如说设计,这几天有哪些时间有空,能完成多少出图的任务,leader也要及时跟进,说哪天完成一定要交货。同时做到合理分配,不要让某个成员干等着另一个成员浪费时间,不要让任何一个人闲下来!!!

在出图-重构-前后端对接-测试-上线这个链条上,越后面的环节发现前面的环节出现问题时应及时找前面的人解决,责任到人,精确定位。做好这几个环节的对接把控,出来的货质量会高很多,特别注意在前后端对接上,商量好接口,最好是以文档的形式定下来,这样到后面有利于系统的维护和扩展。举个例子:

比如前端就显示用户个人资料要后台一个接口,OK,那么文档应该是这样子的:

接口功能:返回用户个人资料

接口url: hzb.scau.edu.cn?c=user&a=getUserInfo&jsoncallback=?

需要参数:{ uid:用户id(必须)  user:用户昵称(必须)  para:其他参数(可

选) }

返回数据:{ age:年龄  tel:手机  email:邮箱 …}

这样子,按照这个标准去对接,然后各司其职就OK了,而且以后我们在扩展系统比如说需要修改返回用户信息代码,返回更多其他信息时,一看文档,很明确,到user控制器里修改getUser方法即可,并更新文档。

 

 

三、如何循序渐进迭代完善一个系统

之所以上面说那么多,因为我们有太多项目延期和烂尾。

这是一个我一开始就犯了的毛病,刚开发时就想太多我要实现怎样的功能,开发过程中又想到我要开发那个功能,结果,想太多,尾大不掉真正实现出来寥寥无几,严重的是影响原有的开发周期和规律,希望大家以我为鉴。

比较合理地做法是,在产品什么代码都还没有的时候,想一个最简单的产品原型,先不要想什么其他杂七杂八的功能,先不要考虑UI要多么完美,直指项目的核心功能,把它实现,OK实现了,定为v1.0版本。

接着进入第二轮迭代,小修小补在大版本号后加小版本号,比如在1.0版本上做些小修改,完成变成v1.1版本;如果是大版本的迭代,增添了很多功能,修改很大,完成变成v2.0。

这样版本迭代的好处在于,在不同阶段集中精力做好应该做的事情,有点类似于敏捷开发的原理,我不要求毕其功于一役,做出来的东西完全符合最初系统的设计,我每一轮迭代定好要完成的目标,循序渐进,不断添砖加瓦,每次完成既定的目标,当你迭代到一定轮数的时候会发现,系统这座建筑慢慢变得壮丽起来了ヾ(o◕∀◕)ノヾ,离你的目标越来越近了。

四、代码的安全性和信息加密

这是很多童鞋一开始开发的时候会漏掉但又非常重要的东西。

代码怎么写比较安全?这是个非常高深的问题,可以说,没有代码是绝对安全的,正如白帽子说的,安全的本质是信任,你要划分好哪些东西是在信任域内,哪些东西不在信任域内,以信任域内的东西为基础,才能让安全成为有源的活水。

在web开发中,最重要的安全理念就是不要相信任何客户端浏览器提交的数据,这也就意味着你需要多用户提交的任何数据和文件进行审核过滤。在代码实现中具体表现为:

1、验证用户提交数据的合法性

比如用户提交了一个信息,在我们的预想中它应该是一个整数,但是假如恶意的用户提交的是html代码呢?或者js代码,或者其他字符,这个时候就需要对其进行过滤,在TP中使用I方法加数据类型号,至于其他类型的数据一次类推。其实过滤的效果就是检查用户提交的数据是否符合你的预想,如果不符合,强制转换成符合你预想的数据格式,如果转换失败,抛出异常报警。这是安全中最基本的常识,做好这一步,你已经可以过滤掉相当一部分的SQL注入和XSS攻击。

2、防止SQL注入

这是个老生常谈的问题,也是WEB开发中最受重视的安全问题,因为数据库就是你的web应用的核心,数据挂了,数据没了,你就什么都没了!

防止SQL注入,需要做好字段验证,执行SQL语句时查询尽量使用数组作为查询条件,充分利用各大框架的预处理机制,慎重直接使用SQL语句操作数据库。

3、文件上传安全

其实原理也是一样的,防止恶意用户上传恶意脚本攻击服务器,需要对文件后缀、文件类型、文件大小以及上传图片文件的合法性检查,比如合租里就有上传图片文件的大小、类型等校验

4、信息加密

信息加密最大的作用是防止别人爬你的站点的数据,核心是加密算法,特别是跟账号相关的信息和其他队机密性要求比较高的信息需要在js按照约定好的加密算法加密,再在后端进行解密和验证。

五、前后端的插件化和模板化

在开发的时候,要注意代码的复用,不要重复造轮子。在前端体现为将经常使用的js代码功能块插件化,需要使用相应功能的时候引用即可;在后端的代码逻辑上体现为模板化,可以配置化的东西或数据操作尽量做成可配置化,特别注意不要在控制层操作数据,model可以根据业务逻辑的特点进行一定程度的抽象化和封装。

六、部署上线的注意事项

合租宝上线前两个星期遇到非常多的问题,还受到攻击,期间数据库挂掉一次,让我印象深刻,特别注意几个问题,数据库权限控制、防火墙、目录操作权限控制、数据备份,其他的小问题可以参考:

http://mp.weixin.qq.com/s?__biz=MzA4MDMwOTk0OQ==&mid=510706784&idx=1&sn=346fbb220b7c8fbe5db7436e399e4c40&scene=20#wechat_redirect

PS.建议装个安全狗

红满堂Oauth2.0开放平台接口文档

红满堂开放平台是为增强红满堂社区各应用与外界的交互而建立的。我们将在这里讨论社区登陆使用到的授权机制,以及各应用的 API。
————美利坚·落·甜橙

OAuth2.0 概述

OAuth是一种国际通用的授权方式, OAuth2.0的官方技术说明可参看 http://oauth.net/2/ 。

OAuth2.0 较 1.0 相比,整个授权验证流程更简单更安全,也是未来最主要的用户身份验证和授权方式。

关于 OAuth2.0 协议的授权流程可以参考下面的流程图,其中 Client 指第三方应用, Resource Owner 指用户, Authorization Server 是我们的授权服务器, Resource Server 是 API 服务器。

开发者可以先浏览 OAuth2.0 的接口文档,熟悉 OAuth2.0 的接口及参数的含义,然后我们根据应用场景各自说明如何使用 OAuth2.0 。

验证授权

1. 引导需要授权的用户到如下地址:

http://hometown.scau.edu.cn/open/OAuth/authorize?client_id={CLIENT_ID}
&response_type=code&redirect_uri={REDIRECT_URI}&state={STATE}&scope={SCOPE}


注:
{CLIENT_ID}需要找管理员申请
{REDIRECT_URI}为自己定义的一个url,用于接收code。(即在REDIRECT_URL对应的ACTION中,可以通过$_GET[‘code’]来获取code)
此处的“引导”,可以使用重定向。比如php的header(“Location:$url”);
{STATE}:一个随机字符串
{SCOPE}:为空即可

2. 如果用户同意授权,页面跳转至:

{REDIRECT_URI}/?code={CODE}&state={STATE}


3. 服务器 后台 换取Access Token


请求url:

http://hometown.scau.edu.cn/open/OAuth/access_token

数据:

client_id:{CLIENT_ID},
client_secret:{CLIENT_SECRET},
grant_type:authorization_code,
redirect_uri:{REDIRECT_URI},
code:{CODE}

注:CLIENT_SECRET找管理员申请,code在上一步获取。使用post发送数据。如果验证通过,将以 JSON 的形式返回 Access Token :

{
"access_token":"f0dd645242a4736248ed1b956637f181",
"expires_in":86400,
"scope":null,
"uid":"294940"
}


4. 使用获得的 Access Token 调用 API

移动应用的验证授权

1. 引导需要授权的用户到如下地址:

http://hometown.scau.edu.cn/open/OAuth/authorize?client_id={CLIENT_ID}
&response_type=token&redirect_uri={REDIRECT_URI}&state={STATE}&scope={SCOPE}


2. 如果用户同意授权,页面跳转至:

{REDIRECT_URI}/state={STATE}#access_token={ACCESS_TOKEN}&expires_in={EXPIRE_IN}&scope={SCOPE}&uid={UID}
3. 使用获得的 Access Token 调用 API

新版二手市场开发总结

新版二手市场,前前后后有php的alex、honor、海彪,以及前端的雪欢、曾梅、素婷,还有UI组Cici、Helium参与了开发和设计。
历时1年多。
最开始的目标是,响应式、对接APP以及针对旧版的问题做改进。
后来因为对版面不满意以及工作室新来了UI和前端,又让UI组重新设计了版面,前端开发静态页面。
由于时间过得太久,后台同学都换了几个,各组分工、对接问题严重。眼看着项目要胎死腹中,于是趁着在写毕设的自由时间,我接手了后续的开发。
在接手后发现了一些问题,总结如下:
1、代码不整洁,前端留着好多console.log。后台同学对thinkphp的模板继承不熟悉,代码有重复
2、存在sql注入漏洞。在写登录查询条件时,用where name=’xx’ and pwd = ‘xx’,对参数也没过滤,直接让登录功能形同虚设。
3、后台权限控制不严谨,只有在个别方法中通过检查session去判断是否登录。
4、model没有共用,不同模块直接复制model文件。
5、前端代码对图片长宽没有设置(如首页缩略图)
6、标题或内容过长时,缺少限制
7、后台明文密码
8、前后端对接问题


解决方案

1、略
2、绝对不应该用where name=’xx’ and pwd = ‘xx’,这是小白黑客最喜欢的了,注入十分简单。推荐用参数绑定、数组条件等。具体看tp文档的安全篇
3、在有中间件的框架,采用中间件控制权限。对于tp,应该写一个基类,所有需要判断权限的都继承于基类。
4、model可以共用的,不会共用只因不知道命名空间、自动加载。
5、略
6、略
7、至少加个盐,再md5一下
8、后端同学要学会基本的html、css、js,前端同学也要学会如何搭建php项目(可以用phpstudy等集成环境)。
前端不能把页面做好就丢给后端同学然后撤手不管。

如果项目是从新开发,且有前端和后台、UI合作,建议前端采用angular.js或者jquery及reactjs,在开始编码前,前端及后台研究一下前后端分离开发,设定好json的数据格式。学习前端工程化概念,让前端也可以组件化。

据观察,大部分人未能很好利用chrome的审核元素工具对ajax进行调试。

其它
技术人员在开发阶段应该多思考可能存在的问题:效率、安全、可维护性等,还有一些细节:不同分辨率的屏幕下可能出现的问题、有图片时和没图片时的变化等。
在开发阶段就应该多测试。

优化建议
1、商品列表增加缓存
2、代码封装
目录、导航等共同模块,除了view可以放在父模板,其它对应的controller操作也应该在装高层的父controller。这样不仅省代码,也方便做缓存。

代码规范
数组的key应该有单引号包含
$data['word'] = 'abc';

部署
关掉debug及页面trace

总结
1、项目人员最好这样分工:
1位有开发经验的后台同学(项目负责人)、1位有一定设计基础的UI、1位有定定设计基础的前端、1至2位新人边学习边参与
共3~5人。
项目负责人需要定下数据库结构、代码结构(如各个模块的划分)、界面结构(考虑UI设计好的界面的可行性)

2、代码提交前需要review(请使用git diff),提交时必须写注释。

3、管理员在项目开始前应该和技术人员商讨好开发周期和开发效果,时间可以以学期为单位,保持足够耐心和足够关怀,定时询问进展。

4、考虑到后期维护,项目组成员最好有年级阶梯,避免青黄不接。

参考资料
轮播图:
http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
代码格式:
https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-2-coding-style-guide-cn.md
git协同开发:
https://github.com/livoras/blog/issues/7

作者:红满堂社区佛怒轮回

【红满堂技术组】新人学习任务v1.0

前言:
新人学习任务考察的是快速学习能力,按照先后顺序完成。时间最多为一个学期,适用人群为新加入红满堂的技术组成员。

后台开发

  1. 学习html、css、javascript,了解html5、css3规范。完成一篇以上的学习报告 (1周)
  2. 学习jquery,并运用html、css等知识写一个轮播图界面 (1周)
  3. 学会使用git版本管理工具,将上面的学习报告、轮播图代码都提交到git仓库。(请使用hgit.scau.edu.cn)(1周)
  4. 学习php,阅读一遍php官方文档(php.net)。完成一篇以上的学习报告。利用php及html等知识写一个表单提交页面,提交到git仓库。(2周)
  5. 学习使用mysql数据库,用sql语句对数据库进行简单操作。(2周)
  6. 学习一个php框架,建议用laravel或者thinkphp。结合mysql完成登录、注册功能。代码提交到git仓库。(3周)
  7. 了解web安全知识,完成一篇学习报告。(可以了解sql注入、服务器安装、xss、csrf等知识)(1周)
  8. 安装linux虚拟机,学习linux的基本操作。(3周)

学习资料:
慕课网: http://www.imooc.com/course/list?c=html
w3cschool: http://www.w3school.com.cn/
 

前端开发

  1. 学习html、css、javascript,了解html5、css3规范。完成一篇以上的学习报告(1周)
  2. 学习jquery,并运用html、css等知识写一个轮播图界面 (1周)
  3. 学会使用git版本管理工具,将上面的学习报告、轮播图代码都提交到git仓库。(请使用hgit.scau.edu.cn)(1周)
  4. 根据设计图完成一个页面重构 (3周)
  5. 学习angular,使用它的http请求一段json,将数据绑定到dom显示。(3周)

学习资料:
慕课网: http://www.imooc.com/course/list?c=html
w3cschool: http://www.w3school.com.cn/

app开发

待补充