1.引入资源包
在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC。这一节,我们先来画页面,前端框架采用EasyUI来实现。
easyui是一种基于jQuery的用户界面插件集合,使用easyui我们就不需要写很多代码,只需要通过编写一些简单HTML标记,就可以定义用户界面。
现在,我们把easyui需要的资源包拷贝进来。
2.绘制主界面
界面的话,我们就用html来实现吧,在WebContent目录下新建一个页面叫index.html。
目录结构如下:
代码:
学生管理主界面现在,我们来画四个按钮:
可以看到每一个按钮都是用a标签来做的,我们给每一个a标签添加一个 easyui-linkbutton 的class,就可以实现这一效果:
同时,每一个按钮还有一个点击事件,对应的函数我们先不写,预留一个接口。
接下来,我们绘制搜索栏,到时候可以根据某些条件来查询学生数据。
代码:
自定义css样式:
#searchBox{
margin-top: 16px;
background: #fff8f8;
padding: 4px;
font-size: 14px;
width: 500px;
}
页面效果:
最后,画数据列表,我们使用easyUI给我们提供的datagrid组件来实现:
data-options="pagination:true,pageSize:10,rownumbers:true,fitColumns:true,
singleSelect:false,collapsible:false,url:''">
用户名密码昵称性别贵族等级性别贵族等级创建时间最后更新时间
最终效果:
本节我们就简单的画一个页面,下一讲我们继续写后台代码。