这是前一段时间写的前端页面,用于个人博客系统。
- 之前完成了个人博客后端的基础功能,使用简单的jsp+jstl写了测试页面。继续开发时考虑单独写一个体面一点的前端页面,再和原来的后端做对接。由于前期前端水平有限,考虑使用bootstrap框架,使用jquery来做javascript和ajax方面的功能,难度不大,又能了解前端开发。
- 在写的过程中发现,感觉前端开发比想象中的复杂,自己缺乏很多知识和经验。开始写的时候,很多css、js代码都直接和html页面耦合在一起。有时不满意bootstrap的样式,就直接就地覆盖了。
- 在写的过程中还遇到一些问题。比如现在框架页逐渐用的少了,就想用一下div+css的方法去拆分页面,每一块div用ajax异步加载,通用性强,用户体验好,页面代码方便复用,还能在调试时脱离后端服务器的依赖。后来发现本地调试时ajax在有的浏览器上出问题,需要部署到服务器上。又发现使用这种模式,页面分成几块,原先后端向页面的数据传递变得不方便了(在数据传递的便利性上不如@include去组织页面)。因为时间原因,就把两种方式混用了。不知道前端程序员在开发时怎么解决这方面的问题。
- 拼拼凑凑写出来一个能用的前端,就拿去对接了。还是有必要总结一下其中的细节的。
- html页面都放在pages目录下,其中home.html是入口,可以跳转到其它模块;admin、blog、laboratory分别对应管理后台、博客、实验室三个模块。support中是错误页,user中是登录、注册页
- css、font-awesome、fonts、img、js存储了页面中用到的前端资源
- css中的word-display-custom.css文件是首页的闪光字体所用样式
- jqcloud是一个标签云库
- menu是一个找来的手风琴菜单
- 从start bootstrap网站上下载了bootstrap模板,经过改造成为目前的首页
- 从慕课网上找了三栏式布局的例子,经过改造成为当前三栏式的基础
- 和后端对接后,还做了许多修改
- 使用boostrap是尝试实现响应式布局的,许多地方做得还不够好。
- 请尝试使用谷歌和火狐浏览器,IE浏览器在兼容性上处理得不够好,主要是首页背景图片在IE中的样式有问题。这种问题还没有找到好的解决方法。
- 后期还需要补充前端的知识,还需要看看AngularJs、ReactJs等前端框架