Pictree


端午前上课时突发奇想要做个图片库的网站,发呆构思了一个简单的程序框架。后来经过一个端午假期加几天没有课,终于完成了第一个能够入眼的第一个版本。当然功能上和最初构想还是有些差距,有的还没有做好,一些核心的东西差不多完成了,尽管代码上还有待优化。因为还要忙学校的一个课程大作业和一个课程论文,所以就先做到这了,以后有时间再继续折腾。

网站取名为Pictree,一方面和Picture读音接近,也满好听的(PS:也算一个理由),另一方面是Pic和Tree两个单词的组合,意思是挂满图片的树,挺符合网站的主题。

概况


网站采用PHP语言写的,直接挂在了现在博客的一个目录下面。网站界面使用了Bootstrap前端框架,毕竟使用简洁灵活,并且响应式也是Web趋势(其实之前只是听说,因为牵涉到网站界面问题,就临时去学了下,这里推荐菜鸟教程哈,内容很详细)。

网站使用了四个JS插件,第一个是瀑布流的Waterfall,第二个是用来一键复制的Clipboard,第三个是图片暗箱的Lightbox,第四个就是上面提到的Bootstrap

网站访问都是通过index.php,通过url传递参数来判断不同页面,不知道这么做规不规范,反正就是实现了url中不出现php后缀(PS:就像这样www.airicy.com/pic/?o=p)。现阶段程序一共有四个界面,分别是Home、Pic、Manage和API。其中Pic是瀑布流展示界面,Manage是图片管理界面,API是接口说明界面。主要我还不会网站Post请求什么的,还没实现关于表单传递值的所有功能,全部通过url传递参数。

界面


Home界面没什么好说的,随便写了点介绍,对了,网站使用了大量英文(PS:233333因为英文版够高大上,百度翻译不够给力)。以及界面优化放到后期吧,管理界面的响应式设置已经挺烦人了,想要的效果实现起来特费时间,毕竟对Bootstrap还不够熟悉。

Pic界面是网站的主题嘛,参照了一些别的网站界面,一开始使用了页码访问加CSS瀑布流显示,挺搓的。后来使用了瀑布流插件,并且通过json获取新数据来显示,一下子变得流畅华丽了。其中创建了一个php文件来动态生成json信息,还是使用了url参数传递。同时提供了打开图片暗箱、复制图片链接、下载图片等功能。话说数据库语言使用起来大同小异,所以使用MySql并没有遇到太大的问题。

Manage界面提供了图片的信息展示、图片删除等系列管理操作。当然下面的页码实现也花了些时间,逻辑上绕了一段时间。界面在大屏幕显示双栏表格,小屏幕是单栏上下两个表格,毕竟屏幕空间不能浪费嘛,暂定一页显示16张图吧,原来是20张的,怕有的人浏览器显示高度不高,出现滚动条挺麻烦的,因为页码在下面。

API界面...内容一点都没有,除了一个言表情。不急不急,话说上面的json应该也算一个吧,以后统计添加好了。

程序结构


程序所有函数方法放在了一个Function文件里面,要使用了就引用文件。现有函数有curl_request():用curl进行与其他网站交互(PS:包括了图片采集、图片上传等),json_to_sql():将获取到的json转换成sql语句方便一次性导入数据库,mysql_insert():用来插入传递过来的sql记录,mysql_select():用来输出图片信息的,后来用json瀑布流代替了,mysql_mana():输出管理界面的表格的,表示里面充满了太多html表格语言,mysql_dele():用来实现管理界面的删除功能,并且返回提示框,page_near():生成底部页码导航的。

图片的保存有两个地方,一个是在新浪微博,另一个是在通天塔(PS:就是那个卖给锤子老罗t.tt域名的那个)。后期图片采集和上传就要依靠他们了,现在收录了已经有15000+图片(PS:已经不少了吧?),不过是从别人那爬来的,就当前期展示使用吧,以后会有更多更多。

本文标签 : #
分享到: