easyUI入门+eclipse项目导入导出

什么是easyUI?

easyUI是由jquery+html4组成的,用于做后台的管理界面

为什么用easyUI?

从效果来看easyui的界面效果要远远差于bootstrap,跟layui比,界面效果也更差那为什么要学它呢?
首先从开发成本上来说,easyUI是不收费的,其次从官网的学习文档的完整性、前端框架的稳定性,组件的丰富性考虑,easyui都要优于layui。

UI框架

ui框架流行年份是否收费特点
easyUI2016年不收费不支持响应式,不够美观,功能全面
bootstrap2016-2018年收费页面美观,支持响应式
layUI2018-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;
在这里插入图片描述

总结

今天就到这里了如果有什么不对的地方欢迎大家在评论区留言交流改进!!

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值