1.引入资源包
在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC。这一节,我们先来画页面,前端框架采用EasyUI来实现。
easyui是一种基于jQuery的用户界面插件集合,使用easyui我们就不需要写很多代码,只需要通过编写一些简单HTML标记,就可以定义用户界面。
现在,我们把easyui需要的资源包拷贝进来。
![c362327d4b08f9f3e8f704204f2a1b5f.png](https://i-blog.csdnimg.cn/blog_migrate/0321e933b0cd20afe18b6199b97b243a.jpeg)
2.绘制主界面
界面的话,我们就用html来实现吧,在WebContent目录下新建一个页面叫index.html。
![a16309ed48e14d4a5516134a7c229baa.png](https://i-blog.csdnimg.cn/blog_migrate/8d03d440530c03cd2c75b0244f7bab92.jpeg)
目录结构如下:
![6a52103f450df034aa28cca899a19306.png](https://i-blog.csdnimg.cn/blog_migrate/c30f28d640d12eddd32fbd278f12ccdb.jpeg)
代码:
学生管理主界面
现在,我们来画四个按钮:
新增用户 编辑用户 删除用户 密码重置
可以看到每一个按钮都是用a标签来做的,我们给每一个a标签添加一个 easyui-linkbutton 的class,就可以实现这一效果:
![5bfc1cc5866ae9dcdd21630b35e229b3.png](https://i-blog.csdnimg.cn/blog_migrate/c7f02a2612d2458f780a54f98ac8b283.jpeg)
同时,每一个按钮还有一个点击事件,对应的函数我们先不写,预留一个接口。
接下来,我们绘制搜索栏,到时候可以根据某些条件来查询学生数据。
代码:
用户名 昵称 搜索
自定义css样式:
#searchBox{ margin-top: 16px; background: #fff8f8; padding: 4px; font-size: 14px; width: 500px;}
页面效果:
![5c884a4fc439338e98609deeb5f4493a.png](https://i-blog.csdnimg.cn/blog_migrate/9d67ec56c873834e3fc56d715a8371d3.jpeg)
最后,画数据列表,我们使用easyUI给我们提供的datagrid组件来实现:
最终效果:
![ff50f55128fc81e1e46561b2ae91b0a4.png](https://i-blog.csdnimg.cn/blog_migrate/fc5fa4b05345c7c442893c1a5573ee47.jpeg)
打开浏览器访问:http://localhost/student/index.html 即可看到该页面。
本节我们就简单的画一个页面,下一讲我们继续写后台代码。