项目总结

2019独角兽企业重金招聘Python工程师标准>>>

用两个星期的时间完成了这个项目的前后台，现在想要总结一下经验。

• 需求

刚开始自己什么都不会，只是会一点点前端知识，拿到项目就直接开始开发，边开发边学习，前端用到的框架是大师封装的Zonda，后端用自己从来没用过的ThinkPHP

• 设计

设计几乎都是参考了很多漂亮的网站，然后融合了一下，对于了解的人，很容易就觉得有很大的山寨味道

• 研发

研发中各种各样的修改需求，其中想要说说自己遇到的问题吧

• 团队合作

     本来是两个人合作完成这个项目的，但是很多地方都很难合作，都要写前台后台，用git也不会，然后都是自己学习，分享一下自己对于git的心得，在这里有很详细的介绍 http://www.xhomestudio.org/wiki/index.php/Git 所有遇到的问题都在这里可以得到解决，感谢张大神的总结

• 知识总结

1. 登录后台的经验:
   起初我是用cookie记住了帐号密码，把登录写在一个function里，为了实现记住密码自动登录，我把密码用户名存放在了cookie里，只有用户点击退出登录，才清除cookie，但是这样是非常严重的错误，cookie存放密码是很不安全的，很容易被窃取，所以我又查了相关文档，思路大概是这样的，首先是用户每次登录，要在后台php中创建一个session，然后再创建一个新的sessionid，再把这个sessionid通过ajax传到前台，前台拿到这个sessionid后把这个id存放在cookie里，为了实习自动登录，每次登录都会验证这个sessionid，如果后台返回的sessionid与cookie里存放的sessionid一样，就直接登录，如果不一样就返回登录页面。
2. 在thinkPHP里和Zonda实首页页面和后台管理页面分开开发:
   我用自己的思路，在后台分了两个文件出来，模版TPL文件里一个是Index存放首页模版，一个存放后台模版，Action里也是只写了两个Action，分别可以进行前后台开发，前端页面也是用到了两个Zonda，由于不会用backbone的路由，我就按照自己的思路去做，很高兴的是，我实现了这个，我修改了Zonda里的引用部分，很多，最后还是成功了。
3. 基于bootstrap的表单验证:
   这是大师封装的模块，我是直接拿来用的，很好用，而且由于是基于bootstrap的，所以很漂亮，https://github.com/smallsmallwolf/Zonda/tree/master/util/backup/verify，验证插件，功能是当用户输入错误的时候，焦点会自动聚焦到第一个错误的区域，让用户修改，用户体验非常好。
4. cookie的总结:
   由于以前都没用过cookie，导致我几乎对cookie一无所知，但是这次我，尝试把cookie常用的操作封装成了jquery的插件，包括cookie的set，get方法，删除一个cookie，删除所有的cookie，由于js没有删除所有的cookie方法，我在网上找了好久都没有，所以又参考了大师封装的删除所有cookie的方法，但是我发现完全不能用，原来有bug，而且不能删除子cookie的情况，所以我把大师的代码再次封装了，现在可以删除所有cookie的功能，分享一下https://github.com/419003251/Noin/blob/master/assets/util/jquery-plugin/jquery.cookie.coffee
5. 关于弹框:
   原生的弹框真的很丑，bootstrap的弹框很漂亮，但是大师封装的弹框不怎么好用，尤其是在手机端的时候，位置不对，我用了，但是网页上还是不错的，可是官方的弹框在手机端是没有问题的，应该是大师没测试手机端吧，所以我想要下一步总结就是封装bootstrap的弹出，继续参考大师的代码~！~
6. 关于头像上传:
   自己写真的很麻烦，于是我在网上查找了方法，用jquery.form.js的jquery插件很不错，http://www.helloweba.com/view-blog-189.html参考这个案例，确实很不错。然后谈一下上传过程吧，这点算是一个知识点吧，首先是当用户点击file的change事件后用ajax传送图片到后台，后台返回该图片存放的位置，前端对把这个链接放到img的src里，最后点击修改用户信息时把这个url传到后台就可以实现用户信息的修改，很遗憾的一点是我没有做到图片剪切，应该是在用户提交图片之前把头像剪切为适合的格式大小，再上传，这样才比较好。
7. 关于ie下传数据的一些问题的总结:
   本来是通过jquery的ajax传的数据，但是url是用的?a=changUser&name=name&headerUrl=/a/d/ds，后台是在function里直接从参数获得，这样传数据在ie下不知道为什么不行，我也不知道，马小跳说这种方式是get传数据，不好，于是我就改用了post，通过json，把数据传到后台，后台用post方法获得数据，这样就可以在ie下兼容了，马小跳传的数据都是json，但是我自己传的时候都是传对象，所以又会涉及到一个数据转换的问题，我是用JSON.parse()方法把json转为对象来操作的。这个方法在ie7里是有问题的，所以我又加入了json2.js这个插件进去..然后就兼容了...
8. 关于表单传json:
   我们发现，用jquery的serialize()方法能把表单数据转换为name=a&sex=1&age=13这样的格式，但是我希望直接把表单的数据转换为json，网上说没有直接转换为json的方法，jquery只有转换为对象的方法serializeArray()，于是我找了个方法封装了jquery的插件，实现直接调用这个方法就转换为json，https://github.com/419003251/Noin/blob/master/assets/util/jquery-plugin/jquery.serializeJson.coffee

记得的就这么多了，以后要把自己的知识封装在自己的一个目录里，这就是我的经验，以后做的多了，它也可以成为一个框架的。~！~

转载于:https://my.oschina.net/u/205358/blog/134675