easyUI入门+eclipse项目导入导出
什么是easyUI?
easyUI是由jquery+html4组成的,用于做后台的管理界面
为什么用easyUI?
从效果来看easyui的界面效果要远远差于bootstrap,跟layui比,界面效果也更差那为什么要学它呢?
首先从开发成本上来说,easyUI是不收费的,其次从官网的学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要优于layui。
UI框架
ui框架 | 流行年份 | 是否收费 | 特点 |
---|---|---|---|
easyUI | 2016年 | 不收费 | 不支持响应式,不够美观,功能全面 |
bootstrap | 2016-2018年 | 收费 | 页面美观,支持响应式 |
layUI | 2018-2019年 | 不收费 | 页面美观,但本身带bug,支持响应式 |
了解easyUI
首先需要引入easyUI
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/themes/material/easyui.css">
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/themes/icon.css">
<!-- 组件库源文件的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/themes/material/easyui.css">
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/themes/icon.css">
<!-- 组件库源文件的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<title>Insert title here</title>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>
</html>
效果
项目导入导出
导入
1,Eclipse中导入项目,点击File->Import;
或者在Eclipse项目浏览内空白处右击,在弹出的菜单列表中选择“Import”命令;
2,在单击“Import”命令后会弹出“Import”窗口,进入“Select”步骤,在“Select”步骤中,展开“General”目录,弹出下级子目录,选择“Existing Projects into Workspace”选项,点击 Next 如下图:
3,切换到“Import Projects”步骤,在“Import Projects”步骤中,单击下面的“Browse…”按钮
4、弹出“浏览文件夹”窗口。在弹出的“浏览文件夹”窗口中,选择项目所在的文件夹,再单击“确定”按钮返回“Import”窗口,点击Finish即导入成功。
导出
1、点击File->Export,弹出“Export”窗口,在弹出的窗口上展开“General”目录,选择下级子目录中的“Archive File”选项,点击Next;
2、弹出“Archive File”窗口,在弹出的“Archive File”窗口中选择你要导出的文件,然后在“To archive file:”文本框输入要保存的文件名,一般写成项目名.zip或.tar,点击Finish即可导出整个项目;
还可以以jar包方式进行导出
1、进入Export界面,选择java下的JAR file ,点击Next;
2,在JAR file文本框中输入要保存到地方和文件名,其他默认,点击Finish即可;
3、可以将我们打包的jar文件添加到另外文件的Build Path目录中,右击我们要导入的项目,选择Build Path,然后选择Configure Build Path;
4、在Libraries界面下,选择Add External JARS,然后找到我们刚刚导出的JAR包导入即可;
对于导包的一些建议:在一个项目需要其他依赖包的时候,最好先自己创建一个文件夹,比如就叫做lib文件夹,然后将这些jar包拷贝到lib目录下,然后将jar导入到Build Path中,这样jar包就会一直跟随项目,否则如果我们直接依赖外部的包的话,一旦外部的jar包发生移动,或者删除,你的项目就会找不到依赖,导致跑不起来。
1,右击项目,New->Folder,然后将jar包复制粘贴到目录下,右击选择Build Path->Add to Build Path;
总结
今天就到这里了如果有什么不对的地方欢迎大家在评论区留言交流改进!!