aphasic / mywebsite1 Goto Github PK

##MyWebsite1 之前多次尝试做个人网站，想要把自己的小作品和小项目整理发布，同时能发布规整学习笔记，和大家分享。但一直都对界面和效果不够满意，因此一直更改，直到现在，和一个做后台的小哥哥合作，经团队（虽然只是个二人团~）合作，受到鞭策，终于算是得到初步成型的平台了，当然还是不够满意，后面也会继续改进~ ##演示地址：http://xh.e-j.me:89 ,  http://xh.e-j.me:89/admin ###系统功能大概如下（由于时间关系，部分功能暂时未完成） ####基本已完成：

• 文章日志
  • 无限分类、标签
  • 增、删、改、查
  • 权限管理(公开、私密、密码访问）
  • 分页查看
• 相册管理
• 批量上传
• 生成缩略图
• 添加水印
• 权限管理(公开、私密、密码访问)
• 批量管理(删除、移动)
• 相册封面设置
• 相册、照片信息修改
• 前台瀑布流布局
• 作品管理
• 作品压缩包上传
• 解压、访问(静态网页)
• 无限分类、作品标签
• 前台瀑布流展示
• 统计管理
• 文章、作品等访问统计

####待完成：

• 用户管理
  • 用户组
  • 注册、登录、权限控制
  • 管理、编辑
• 评论管理
• 文章、相册、作品等评论、回复、点赞、转发、分享
• 系统管理
  • 系统备份、邮件发送等

###系统实现方式（主要介绍前端部分，挑喜欢的几个点介绍） ####前台部分：

• 主页
• 内容分为七大部分：整站展示、近期作品展示、About me、留言吧动态、学习笔记摘要、技术标签选择、联系我
• 响应式布局，在三类不同设备上展现三种样式，都能顺利过渡，着重体现在“留言吧动态”区
• 其中包括全屏轮播、滚动背景和一些特效，并用js控制了导航区的高亮显示，即在每一个页面下根据URL来高亮显示对应菜单
• 作品展
• 通过绝对定位实现瀑布流异步加载
• 学习笔记
• 文章列表中多行文本自动截取和超出部分省略号显示
• 相册分享
• 主要在于缩略图的处理，此处设计规定了图片容器大小，在加载时通过数学计算将图片等比缩小，超出容器部分设置margin而使其显示正居中的部分

###此次学习感悟

• 图片处理
  • 在做瀑布流部分的时候发现一个以前没有注意的现象，就是页面刷新时图片加载过程中偶尔会错位，但大多数时候又能正常显示，检查了好几次代码，确定代码中对定位的取值等都没有错误，不明白问题出在哪里。上网搜了一下才知道是图片加载的问题，图片在请求过来的过程中，尚未完全加载完成，此时计算的width和height都不准确，也就会影响下面的定位的计算。之后我将瀑布流中涉及计算的核心函数放在图片加载完成之后执行，成功解决。感觉学到了许多。
• 响应式布局
  • 之前虽然学习了响应式布局，也做过一些小项目和小测试，但没有做过整站的响应，这次过程中，从字体到布局，到每一种设备之下的平缓过渡，我都做得比较细，考虑比较周全，这才感觉是真正走进了响应式的设计。

###部分截图