java——easyUI前端框架入门&如何自己去开发一个前端框架？（提供思路）

最新推荐文章于 2023-02-13 00:04:09 发布

不怕报错就怕不报错的小猿猿

最新推荐文章于 2023-02-13 00:04:09 发布

阅读量662

点赞数 1

本文链接：https://blog.csdn.net/men_ma/article/details/106877905

版权

转载请标明出处：https://blog.csdn.net/men_ma/article/details/106847165.
本文出自不怕报错就怕不报错的小猿猿的博客

java——easyUI前端框架入门

比较流行的三种前端ui框架
我们为什么要学习easyUI？（分析角度）
动手实践（需要完成的页面效果图）
如何自己去开发一个前端框架？（思路）
总结

比较流行的三种前端ui框架

在这里插入图片描述

我们为什么要学习easyUI？（分析角度）

各自的优缺点：

分析角度(层面)	easyUI	layui框架	bootstrap框架
金钱方面	不要钱	不要钱	要钱（首先会被排除）
界面效果	easyUI比bootstrap差	easyUI比layui更差	比easyUI好
从学习文档的官网的完整性上	优于layui	低于easyUI
前端框架的稳定性	优于layui	低于easyUI
组件的丰富性	优于layui	低于easyUI
是否支持响应式	不支持响应式	支持响应式	支持响应式

easyUI的唯一缺点：不支持响应式，界面不美观
总结(bootstrap、layui、easyUI各自的优缺点)：

bootstrap优点：支持响应式布局、界面美观
缺点：要钱
layui优点：支持响应式布局、界面美观
缺点：框架不稳定有bug
easyUI优点：不要钱、稳定性好、丰富的组件
缺点：界面不好看（不美观），不支持响应式布局

从公司的角度考虑选用哪个框架的角度（因素）
成本
公司的后端技术人员前端功底
前端的社区活跃度

动手实践（需要完成的页面效果图）

在这里插入图片描述

首先先下载jQuery EasyUI 官方API文档中文版的离线文档

方式一（要积分）：下载路径（资源）
链接: jQuery EasyUI 官方API文档中文版
version 1.5 Build 1
.

方式二（免费）：
链接（不怎么全）: jquery easyui api 中文文档 v1.5.1 官方离线简体中文版.

所需要的文件（介绍）

在这里插入图片描述

导入依赖文件

在这里插入图片描述
注意：一定要修改src存放路径，不然最终没有效果

接下来我们来解释这些依赖文件是干嘛用的

文件名	作用
easyui.css	全局样式
icon.css	定义图标
jquery.easyui.min.js	组件库源码的js文件

导入依赖文件的顺序是怎么样的？顺序不同是否有影响？

先导入css文件，再导入js文件
顺序：easyUI.css--------->icon.css------------------>jquery.min.js----------->jquery.easyui.js
如果顺序不同，有些功能会出不来，所以得严格根据导入的顺序来导入文件

index.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录后的主界面</title>
<!--全局样式  -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!--定义图标  -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!--组件库源码的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
</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>