Giter Site home page Giter Site logo

try_mywebsite_pages's Introduction

个人博客所用前端页面

这是前一段时间写的前端页面,用于个人博客系统。

2016.07.21

概述:

  • 之前完成了个人博客后端的基础功能,使用简单的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等前端框架

附首页图: home

try_mywebsite_pages's People

Stargazers

KevinPaul avatar

Watchers

ybz0333 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.