Web前端视图层的设计与实现

5月24日

在搭建了项目网站的个人工作环境之后，我开始了前端的编码工作。近期，我通过多次参与网站项目的需求讨论，并确定出项目中的前端需求，初步设计了视图层的展现形式，明确了需要完成的页面，并进行了实际的代码编写，已完成大部分html页面的呈现。

页面公共部分的设计：

运用到了之前选用的前端框架，按照前端样式的设计进行排版、布局，通过代码实现来尝试实际效果并调试。首先我将各个组件进行拼接，完成视图层页面的公共部分。页面的公共部分包含左边的一个左拉框，id为sidebar，可以在主界面中点击收起；左拉框展示个人信息以及菜单列表，可以通过链接到其他页面的形式实现跳转；中间是页面的主体区域，使用div标签包含所有组件，共分为三层div，上层展示了项目图标以及基本信息，中层将会在各个不同的页面中更换具体的内容，下层是一些权限声明以及相关链接。代码的大致结构如下（已将具体组件的编码内容缩起）：

最终呈现出的页面效果如下：

各个具体页面的设计与实现：

根据功能需求进行划分，每个模块使用一到多个页面以展现。项目需要完成的页面有：登录页面、注册页面、系统介绍与首页、帮助页、个人中心页、岗位推