开发日志

[xpgeng]

开发日志

• 这里记录每日开发进度.

• 记录格式参考

  时间: 7wd5

  开发内容

  -姓名 ......-开发具体内容 ......-版本链接 ......-计划 ......-其他

• 不需要每天都记录. 记录下点滴进步即可.

[xpgeng]

7wd5

• 确定了输入
  • 图片
  • 物种
  • 联系方式
  • 地点
  • 备注
• 明确了分工
  • @huijuannan 前端
  • 先给出简单模板
  • @tiezipy 微信端
  • 学习微信端开发
  • @xpgeng 后端
  • 学习flask框架

唯独还没有代码...;-)

[xpgeng]

7wd6@huijuannan

修改内容概述

• 初步搭建了用户输入小动物信息的template
• 输入信息后，点击提交，进入信息确认页面
• 照片的传输有待进一步讨论

详细描述

bottle.py & bottle.pyc

bottle框架文件，不解释

pet_reg.py

用来测试template的最简单代码，包括显示信息输入界面(pet_register.tpl)和提交以后的确认页面(pet_info_check.tpl)

pet_register.tpl

用户输入小动物信息的界面，使用bootstrap修饰

pet_info_check.tpl

用户输入完成信息之后点击提交后显示的确认页面

下一步需要完成：

1. 位置栏改成下拉选项式，如省-下拉选择具体的省份，再到城市，这样可以避免typo，利于搜索
2. 照片的传输

---

其他信息

• 选用框架：bottle
• 用户输入信息：
  • 标题
  • 照片
  • 物种
  • 位置
  • 联系方式
  • 备注

7wd6@沈浪

目前

• 将测试用的Bottle框架修改为Flask框架
• 测试是需要安装Flask框架
  • pip install flask

Next

• 添加数据库
  • 实现图片能够提交并保存.
  • 能够返回给网页需要调用的数据, 如图片或图片链接, 相关文字信息等.

Ps: 输出这块还需要跟前端讨论, 看前端需要什么具体输出数据.

[xpgeng]

8wd0@沈浪

• 使用SAE中的storage储存图片
• 运行方法
  • 配置好SAE的本地调试环境
  • 使用命令dev_server.py --storage-path=path/to/src/uploads 路径为项目中src所在的路径
  • 上传图片后, 会在uploads里生成images文件夹, 并存放所传图片

---

8wd0 @huijuannan 上传照片

• 上传照片和输入文字信息一样，都是通过HTML的
  实现
• 区别在于：
  • request.form['name']获得文字信息，request.files['name']获得文档
  • 的enctype属性改为multipart/form-data，即：``。
  • enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，其中默认的选项为application/x-www-form-urlencoded，意思是在发送前编码所有字符。修改为multipart/form-data，意思是不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

实现过程

加enctype标签

• 首先，如前所述，在template里标签加上enctype="multipart/form-data"属性
  • 刚开始试的时候以为文字和照片需要用不同的enctype属性，折腾了半天，后来发现原来直接都用enctype="multipart/form-data"就可以

限制上传文件类型

• 参考flask官方文档，增加函数allowed_file，从文件名判断上传的文件是否为限定的文件类型
• 这里将文件类型限定为['png', 'jpg', 'jpeg', 'gif']

获取照片，存到本地

• 获取照片用request.files['name']，其中name是template里面标签里面name属性对应的值
• 判断是否为正确的图片格式（'png', 'jpg', 'jpeg', 'gif'）
• 用secure_filename来防止filename里面存在相对路径，如filename = "../../../../home/username/.bashrc"，这样的文件就可能可以改变服务器的某些文档。用secure_filename('../../../../home/username/.bashrc')，返回的文件名为'home_username_.bashrc'
• UPLOAD_FOLDER设定图片在本地存储的位置，下一步修改为存到七牛的云存储上面。

下一步……

• 照片大小是否要限定？
  • 限定为多少？
  • 还是不限定，上传后服务器后台处理为较小的大小？
• 图片格式错误时的提示怎么设定
• 存储到七牛
  • 实名认证才可以用开发者模式……

Reference

• http://flask.pocoo.org/docs/0.10/patterns/fileuploads/
• http://www.w3school.com.cn/tags/att_form_enctype.asp

[xpgeng]

8wd2 @shenlang

• 添加了 signup.html and login.html
  • 直接在@huijuannan的模板上修改的.
• 顶部添加了header.
• 下一步
  • 完善登录, 注册数据库相关的编写.

[xpgeng]

8wd3 @shenlang

• 能够注册, 将数据写入到数据库
• 登录也能通过KVDB判断.
• 但功能仍然十分简单, 一些跳转等功能还未实现. 只是在当前页面验证是否注册成功, 是否登录成功.

• 下一步

  - 完善注册功能  
            + 验证码  
            + 检验用户名重复  
            + 设定密码最少位数(目前只是提示最少6位)   
  - 完善登录功能.  
         + 登录后跳转到首页(显示照片你的地方)   

8wd3 @huijuannan

• 小动物信息发布页面上，在选择了要上传的照片以后，会显示选择的照片的缩略图
• 在导航栏里加入了猫猫和狗狗两个标签，点击以后就可以看到猫猫/狗狗的照片展示页面，里面会有全部猫猫/狗狗的照片，点击照片会进到每个小动物的主页里
• 增加了每个小动物的主页

下一步……

• 增加搜索栏
• 小动物主页添加评论区
• 页面美化一下，都还十分简陋

[xpgeng]

8wd4 @shenlang

• 已经能够连接数据库
  • 从数据库读取所有宠物信息, 显示在网页上
  • 单击照片进入 图片所对应的详细信息页面

[huijuannan]

8wd5 @huijuannan

• 调整导航栏
• 添加了了“关于我们”
• 修正了密码输入会显示字符的问题
• 优化了流浪动物展示页面，增加了坐标、时间等内容
• 增加了搜索栏，但没有功能
• 提交发布的小动物信息后，直接转到小动物主页

[xpgeng]

8wd6 @shenlang

• 添加了Flask-login
  • 解决了登录锁定某些网页的功能
• 修改了数据库储存user的方式
  • 取消key里面多一个'u'的办法
  • 每次注册用户, 将用户的username append到key为'userset'的value里.
  • 检索用户时, 只需要搜索'userset'这个key即可.

8wd6 @huijuannan

• 解决了手机上打开网页没有导航栏的问题

[huijuannan]

9wd1 @huijuannan

• 添加了一键分享到微博
• 提交信息的表单内容设置为required，搞定了不填加内容会404的问题，感谢竹子 #22

[xpgeng]

9wd2 @shenlang

• 完成搜索功能
• 修正宠物主页显示的顺序
• 重构了主页显示pet message的部分代码
• fix some bugs
  • 用户登录为空时出现bug
  • 手机端上传图片若名字相同, 则输出会混乱

9wd2 @huijuannan

• 可以登陆登出了
• 改善了一下页面
• 但还是显示有问题, 不稳定

[huijuannan]

9wd3 @huijuannan

• 用masonry优化了照片的显示，加入了imageloaded的plugin
• 登录后点击右上角的用户名，就可以进入用户中心，显示该用户发布过的小动物
• 把原来testpet.sinaapp.com的页面redirect到了taketahome.sinaapp.com

Next...

• 页面做成infinite load
• 用户可以修改已经发布的宠物信息、只有用户可以删除自己发布过的动物

@shenlang

• 将用户名显示, 修改为邮箱显示.

[xpgeng]

9wd4 @shenlang

• 添加多说评论

[huijuannan]

11wd0 @huijuannan

好多天没有更新日志了。检讨一下。补一下这几天完成的内容

页面显示

• 使用isotope显示主页的动物照片
• 全部动物/猫猫/狗狗的切换用isotope的filter功能，而不对应单独的页面，并且从navbar中移除
• navbar增加了发现和发布前面的小图标，增加了颜色，整体页面以蓝色点缀
• 添加了footer

功能

• 在沈浪同学的client版本的基础上进行了一些修订，增加了删除注册账户的接口
• 增加了密码找回功能，并且创建了密码找回html邮件模版
• 注册成功后发送欢迎邮件

其他

• 图片存储放到七牛上，用七牛自带的imageView2改变图片的大小
• 限制了用户输入（e.g. 注册用户名、密码、发布的标题）的长度及类型（用户名只能是数字和字母）