Java框架从入门到装逼，用EasyUI绘制主界面
ccwgpt 2024-09-20 13:33 28 浏览 0 评论
1.引入资源包
在上一节中，我们把基本的框架都搭好了，用了Spring，SPringMVC。这一节，我们先来画页面，前端框架采用EasyUI来实现。
easyui是一种基于jQuery的用户界面插件集合，使用easyui我们就不需要写很多代码，只需要通过编写一些简单HTML标记，就可以定义用户界面。
现在，我们把easyui需要的资源包拷贝进来。
2.绘制主界面
界面的话，我们就用html来实现吧，在WebContent目录下新建一个页面叫index.html。
目录结构如下：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学生管理主界面</title> <!-- 引入EasyUI资源文件 --> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script> </head> <body> </body> </html>
现在，我们来画四个按钮：
<!-- 工具栏 --> <div id="toolbar"> <a href="javascript:openUserAddPage()" class="easyui-linkbutton" iconCls="icon-add" >新增用户</a> <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" >编辑用户</a> <a href="javascript:delUser()" class="easyui-linkbutton" iconCls="icon-remove">删除用户</a> <a href="javascript:resetPassword()" class="easyui-linkbutton" iconCls="icon-modifyPassword">密码重置</a> </div>
可以看到每一个按钮都是用a标签来做的，我们给每一个a标签添加一个 easyui-linkbutton 的class，就可以实现这一效果：
同时，每一个按钮还有一个点击事件，对应的函数我们先不写，预留一个接口。
接下来，我们绘制搜索栏，到时候可以根据某些条件来查询学生数据。
代码：
<!-- 搜索栏 --> <div id="searchBox"> 用户名 <input type="text" id="username_search" size="20" onkeydown="if(event.keyCode==13) searchUser()"/> 昵称 <input type="text" id="nickname_search" size="20" onkeydown="if(event.keyCode==13) searchUser()"/> <a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a> </div>
自定义css样式：
#searchBox{
margin-top: 16px;
background: #fff8f8;
padding: 4px;
font-size: 14px;
width: 500px;
}
页面效果：
最后，画数据列表，我们使用easyUI给我们提供的datagrid组件来实现：
<br> <!-- 数据列表 --> <table id="grid0" class="easyui-datagrid" title="用户列表" style="width:980px;height:550px" data-options="pagination:true,pageSize:10,rownumbers:true,fitColumns:true, singleSelect:false,collapsible:false,url:''"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'username',width:80">用户名</th> <th data-options="field:'password',width:100">密码</th> <th data-options="field:'nickname',width:120">昵称</th> <th data-options="field:'xb',width:0,hidden:true" >性别</th> <th data-options="field:'vip',width:0,hidden:true">贵族等级</th> <th data-options="field:'xb_displayname',width:80" >性别</th> <th data-options="field:'vip_displayname',width:80">贵族等级</th> <th data-options="field:'createtime',width:250"">创建时间</th> <th data-options="field:'updatetime',width:250">最后更新时间</th> </tr> </thead> </table>
最终效果：
打开浏览器访问：http://localhost/student/index.html 即可看到该页面。
本节我们就简单的画一个页面，下一讲我们继续写后台代码。
相关推荐
- 迈向群体智能 | 智源发布首个跨本体具身大小脑协作框架
-
允中发自凹非寺量子位|公众号QbitAI3月29日，智源研究院在2025中关村论坛“未来人工智能先锋论坛”上发布首个跨本体具身大小脑协作框架RoboOS与开源具身大脑RoboBrain，可实...
- 大模型对接微信个人号，极空间部署AstrBot机器人，万事不求百度
-
「亲爱的粉丝朋友们好啊！今天熊猫又来介绍好玩有趣的Docker项目了，喜欢的记得点个关注哦！」引言前两天熊猫发过一篇关于如何在极空间部署AstrBot并对接QQ消息平台的文章，不过其实QQ现在已经很少...
- Seata，让分布式事务不再是难题!实战分享带你领略Seata的魅力!
-
终身学习、乐于分享、共同成长！前言Seata是一款开源的分布式事务解决方案，致力于提供高性能和简单易用的分布式事务服务。Seata将为用户提供了AT、TCC、SAGA和XA事务模式，为用户打造一站式的...
- 常见分布式事务解决方案（分布式事务解决的问题）
-
1.两阶段提交（2PC）原理：分为准备阶段（协调者询问参与者是否可提交）和提交阶段（协调者根据参与者反馈决定提交或回滚）。优点：强一致性，适用于数据库层（如XA协议）。缺点：同步阻塞：所有参与者阻塞...
- 分布式事务:从崩溃到高可用，程序员必须掌握的实战方案!
-
“支付成功，但订单状态未更新！”、“库存扣减后，交易却回滚了！”——如果你在分布式系统中踩过这些“天坑”，这篇文章就是你的救命稻草！本文将手把手拆解分布式事务的核心痛点和6大主流解决方案，用代码实战+...
- 谈谈对分布式事务的一点理解和解决方案
-
分布式事务首先，做系统拆分的时候几乎都会遇到分布式事务的问题，一个仿真的案例如下：项目初期，由于用户体量不大，订单模块和钱包模块共库共应用（大war包时代），模块调用可以简化为本地事务操作，这样做只要...
- 一篇教你通过Seata解决分布式事务问题
-
1 Seata介绍Seata是由阿里中间件团队发起的开源分布式事务框架项目，依赖支持本地ACID事务的关系型数据库，可以高效并且对业务0侵入的方式解决微服务场景下面临的分布式事务问题，目前提供AT...
- Seata分布式事务详解(原理流程及4种模式)
-
Seata分布式事务是SpringCloudAlibaba的核心组件，也是构建分布式的基石，下面我就全面来详解Seata@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合...
- 分布式事务最终一致性解决方案有哪些?MQ、TCC、saga如何实现?
-
JTA方案适用于单体架构多数据源时实现分布式事务，但对于微服务间的分布式事务就无能为力了，我们需要使用其他的方案实现分布式事务。1、本地消息表本地消息表的核心思想是将分布式事务拆分成本地事务进行处理...
- 彻底掌握分布式事务2PC、3PC模型（分布式事务视频教程）
-
原文：https://mp.weixin.qq.com/s/_zhntxv07GEz9ktAKuj70Q作者：马龙台工作中使用最多的是本地事务，但是在对单一项目拆分为SOA、微服务之后，就会牵扯出分...
- Seata分布式事务框架关于Annotation的SAGA模式分析
-
SAGAAnnotation是ApacheSeata版本2.3.0中引入的功能，它提供了一种使用Java注解而不是传统的JSON配置或编程API来实现SAGA事务模式的声明...
- 分布式事务，原理简单，写起来全是坑
-
今天我们就一起来看下另一种模式，XA模式！其实我觉得seata中的四种不同的分布式事务模式，学完AT、TCC以及XA就够了，Saga不好玩，而且长事务本身就有很多问题，也不推荐使用。S...
- 内存空间节约利器redis的bitmap(位图)应用场景有哪些你知道吗
-
在前面我们分享过一次Redis常用数据结构和使用场景，文章对Redis基本使用做了一个简单的API说明，但是对于其中String类型中的bitmap（位图）我们需要重点说明一下，因为他的作用真的不容忽...
- 分布式事务原理详解(图文全面总结)
-
分布式事务是非常核心的分布式系统，也是大厂经常考察对象，下面我就重点详解分布式事务及原理实现@mikechen本文作者：陈睿|mikechen文章来源：mikechen.cc分布式事务分布式事务指的是...
- 大家平时天天说的分布式系统到底是什么东西?
-
目录从单块系统说起团队越来越大，业务越来越复杂分布式出现：庞大系统分而治之分布式系统所带来的技术问题一句话总结：什么是分布式系统设计和开发经验补充说明：中间件系统及大数据系统前言现在有很多Java技术...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (52)
- java框架spring (43)
- grpc框架 (55)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)