1.引入资源包

在上一节中，我们把基本的框架都搭好了，用了Spring，SPringMVC。这一节，我们先来画页面，前端框架采用EasyUI来实现。

easyui是一种基于jQuery的用户界面插件集合，使用easyui我们就不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。

现在，我们把easyui需要的资源包拷贝进来。

2.绘制主界面

界面的话，我们就用html来实现吧，在WebContent目录下新建一个页面叫index.html。

目录结构如下：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>学生管理主界面</title>
  7. 	<!-- 引入EasyUI资源文件 -->
  8. 	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
  9. 	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
  10. 	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
  11. 	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
  12. 	<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
  14. </head>
  15. <body>
  17. </body>
  18. </html>

现在，我们来画四个按钮：

  1.    <!-- 工具栏 -->
  2. 	<div id="toolbar">
  3. 		<a href="javascript:openUserAddPage()" class="easyui-linkbutton" iconCls="icon-add" >新增用户</a>
  4. 		<a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" >编辑用户</a>
  5. 		<a href="javascript:delUser()" class="easyui-linkbutton" iconCls="icon-remove">删除用户</a>
  6. 		<a href="javascript:resetPassword()" class="easyui-linkbutton" iconCls="icon-modifyPassword">密码重置</a>
  7. 	</div>

可以看到每一个按钮都是用a标签来做的，我们给每一个a标签添加一个 easyui-linkbutton 的class，就可以实现这一效果：

同时，每一个按钮还有一个点击事件，对应的函数我们先不写，预留一个接口。

接下来，我们绘制搜索栏，到时候可以根据某些条件来查询学生数据。

代码：

  1. 	<!-- 搜索栏 -->
  2. 	<div id="searchBox">
  3. 		&nbsp;用户名&nbsp;<input type="text" id="username_search" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
  4. 		&nbsp;昵称&nbsp;<input type="text" id="nickname_search" size="20" onkeydown="if(event.keyCode==13) searchUser()"/>
  6. 		<a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
  7. 	</div>

自定义css样式：

  1. #searchBox{
  2. 	margin-top: 16px;
  3.     background: #fff8f8;
  4.     padding: 4px;
  5.     font-size: 14px;
  6.     width: 500px;
  7. }

页面效果：

最后，画数据列表，我们使用easyUI给我们提供的datagrid组件来实现：

  1.    <br>
  3. 	<!-- 数据列表 -->
  4. 	<table id="grid0" class="easyui-datagrid" title="用户列表" style="width:980px;height:550px"
  5. 			data-options="pagination:true,pageSize:10,rownumbers:true,fitColumns:true,
  6. 			singleSelect:false,collapsible:false,url:''">
  7. 		<thead>
  8. 			<tr>
  9. 				<th data-options="field:'ck',checkbox:true"></th>
  10. 				<th data-options="field:'username',width:80">用户名</th>
  11. 				<th data-options="field:'password',width:100">密码</th>
  12. 				<th data-options="field:'nickname',width:120">昵称</th>
  13. 				<th data-options="field:'xb',width:0,hidden:true" >性别</th>
  14. 				<th data-options="field:'vip',width:0,hidden:true">贵族等级</th>
  15. 				<th data-options="field:'xb_displayname',width:80" >性别</th>
  16. 				<th data-options="field:'vip_displayname',width:80">贵族等级</th>
  17. 				<th data-options="field:'createtime',width:250"">创建时间</th>
  18. 				<th data-options="field:'updatetime',width:250">最后更新时间</th>
  19. 			</tr>
  20. 		</thead>
  21. 	</table>

最终效果：

打开浏览器访问：http://localhost/student/index.html 即可看到该页面。

本节我们就简单的画一个页面，下一讲我们继续写后台代码。

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面的更多相关文章

  1. 【Java框架型项目从入门到装逼】第七节 - 学生管理系统项目搭建

    本次的教程是打算用Spring,SpringMVC以及传统的jdbc技术来制作一个简单的增删改查项目,对用户信息进行增删改查,就这么简单. 1.新建项目 首先,打开eclipse,新建一个web项目. ...

  2. 【Java框架型项目从入门到装逼】第一节 - Spring框架 IOC的丧心病狂解说

    大家好,好久不见,今天我们来一起学习一下关于Spring框架的IOC技术. 控制反转--Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的 ...

  3. 【Java框架型项目从入门到装逼】第五节 - 在Servlet中接收和返回数据

    在上一节的程序中,我们可以看到HttpServletRequest, HttpServletResponse这两个对象.可以说,这是JavaWeb中至关重要的两个对象.接下来,我们来做一个简短的说明: ...

  4. 【Java框架型项目从入门到装逼】第十二节 项目分层

    这一节我们开始对项目进行分层,一般来说,一个web项目的层次结构如下图所示: controller层为我们的控制层,用来接收用户的请求,比如新增一个学生的信息,新增的请求最先就是走到这一层.contr ...

  5. 【Java框架型项目从入门到装逼】第三节 - 如何用Tomcat发布web项目？

    啥叫Tomcat?有道词典是这么说的. 这个我们姑且不管,实际上呢,Tomcat是一种Web服务器,我们自己做好了一个Web项目,就可以通过Tomcat来发布.服务器呢,又分为硬件服务器和软件服务器. ...

  6. 【Java框架型项目从入门到装逼】第四节 - 编写第一个Servlet程序

    在开始这一节之前呢,我们还需要把Tomcat配置到Eclipse中,配置的方式很简单,打开Eclipse,Window,Preferences,进入到这个页面: 将Tomcat的安装目录配置到Ecli ...

  7. 【Java框架型项目从入门到装逼】第九节 - 数据库建表和CRUD操作

    1.新建学生表 这节课我们来把和数据库以及jdbc相关的内容完成,首先,进行数据库建表.数据库呢,我们采用MySQL数据库,我们可以通过navcat之类的管理工具来轻松建表. 首先,我们得建一个数据库 ...

  8. 【Java框架型项目从入门到装逼】第十四节 查询用户列表展现到页面

    这一节,我们来实现一下用户列表搜索,最终的效果如下: 这边我们要使用easyUI给我们提供的datagrid组件. HTML结构如下 <!-- 数据列表 --> <table id= ...

  9. 【Java框架型项目从入门到装逼】第十三节 用户新增功能完结篇

    这一节,我们把用户新增的功能继续做一个完善.首先,新增成功后,需要给前台返回一个信息,就是告诉浏览器,这次用户新增的操作到底是成功了呢,还是失败了呢?为此,我们需要专门引入一个结果类,里面只有两个属性 ...

随机推荐

  1. 五.Spring与RabbitMQ集成--HelloWorld

    spring对RabbitMQ做了很好的集成,我们称之为spring AMQP,其官方文档写得十分详尽,文档地址:https://docs.spring.io/spring-amqp/referenc ...

  2. time模块整理

    time模块中包含的方法 time() -- 返回当前系统的时间戳clock() -- 在UNIX系统上,它返回的是"进程时间",它是用秒表示的浮点数(时间戳). 而在WINDOW ...

  3. 青否云 - 小程序待办事项vue开源系统

    青否云最新开源系统:小程序待办事项 vue-demo 青否云 vue demo 下载地址:https://github.com/qingful/vue-demo 官网 http://cloud.qin ...

  4. java 拦截器

    一.前言 这是一篇关于 java 拦截器的文章,是我的写 java  web 所遇见的问题.当我们写好一个网站,必须要通过登陆页面才可以进入这个系统.那么我们就得写个 java 拦截器,如果是通过登录 ...

  5. 《微软的软件测试之道》【PDF】下载

    <微软的软件测试之道>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382291 内容简介 书的第三部分探讨某些我们工作中使用过的 ...

  6. SUID、SGID、Sticky BIT

    添加SUID: chmod 4755 可执行文件名 或 chmod u+s 可执行文件名 删除SUID: chmod 755 可执行文件名 或 chmod u-s 可执行文件名 [root@local ...

  7. （一）最小的Django

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 本文基本内容均出自<Lightweight Django>(中文为<轻量级D ...

  8. BZOJ2001 HNOI2010 城市建设

    题目大意:动态最小生成树,可以离线,每次修改后回答,点数20000,边和修改都是50000. 顾昱洲是真的神:顾昱洲_浅谈一类分治算法 链接: https://pan.baidu.com/s/1c2l ...

  9. OpenStack运维（四）：OpenStack备份恢复

    1.备份注意事项 要保留多少备份? 是否需要异地备份? 备份间隔多久? 恢复策略? 2.备份什么 2.1 数据库备份 2.1.1  制定crond 每天备份一次 2.1.2 备份命令根据系统而定,可用 ...

  10. Oracle学习笔记_09_字符串相关函数

    二.参考资料 0.Oracle中的字符串类型及相关函数详解 1.ORACLE 字符串操作 2.oracle函数大全-字符串处理函数