简介

这篇文章主要是对metronic首页的js和css进行简单的介绍，以及针对QiYuAdmin项目梳理出一些公用的js和css，什么是共用的js和css？共用的js和css是很多页面都会用到相同的js和css，比如说现在有100个页面，这100个页面大部分都会引用到jquery插件，那么jquery插件就可以当做一个共用的js放入“common”里面，如果说我们想升级jquery，此时就比较方便了，只需要改”common“里面jquery的版本就ok了。那么接下来就针对QiYuAdmin这个项目进行共用js和css的梳理。源码分享请加QQ群：140874613

css梳理
js梳理

css梳理

这篇文章是基于上一篇文章： QiYuAdmin-Thymeleaf的include封装共用js和css（项目优化）所以如果有些比较模糊的可以看一看上一篇文章。

先来看下common_head.html里面的css文件

接下来就针对这里面所有的css进行分析一下，哪些可以当做共用的css

fonts.googleapis.com

这个是谷歌的样式api，那么它到底是个什么玩意呢？百度一下发现有很多人在这个上面遇上了坑，因为他需要访问谷歌的服务器获取这些样式，如果谷歌服务器停了，或者访问谷歌服务器非常的慢，那么将会影响你的项目的访问速度，针对QiYuAdmin我们可以做一个实验做一下对比：第一次访问首页是加载了谷歌样式的api，第二次访问首页是没有加载了谷歌样式的api，我们看下有什么区别。

这样对比更清楚，如下所示

这里给CSDN测试了一个非常恶心的bug，我为了测试刚才的实验，清了一下浏览器的缓存，然后我写的东西就丢失了，它应该是将文章保存在了浏览器的缓存了，除非点一下保存到草稿才可以持久化。

实验的结果：QiYuAdmin首页整体的布局和样式并没有什么变化，不仔细看没什么区别，如果仔细看的话会发现微小的区别，没有引入的比引入的字体颜色要重一点，引入了谷歌api的样式要浅一点。

结论：如果你的项目要求局域网或者对谷歌api的样式没有要求，我感觉可以将其删掉，我们现在给XXX银行总部用的项目也将其删掉，完全没有问题。

font-awesome、simple-line-icons

font-awesome：它是Bootstrap专用图标字体，它包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
simple-line-icons：收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友
结论：他们都是共用的css

bootstrap.min.css

共用的css

bootstrap-switch.min.css

这个是基于bootstrap的一个插件：开关。

如果哪个功能用到的话可以引入，但是它不是共用的css

bootstrap-table.min.css

这个插件之前的文章也提到过，他是一个表格插件，由于QiYuAdmin项目是一个后台管理系统，大部分的功能都会涉及到表格，所以这里我们将其当做共用的css。

daterangepicker.min.css

时间插件，不是共用css，暂时还没有用到。

morris.css

折线图，不是共用css

fullcalendar.min.css

日历控件，不是共用css

jqvmap.css

矢量地图，不是共用css。

layer-custom.css

这个是基于layer插件，我们扩展的样式表，这个需要和layer配套使用，从目前的功能来看，他还不算一个共用的css，但是随着项目功能的增多，弹出框增多，我们可以将其当做一个共用的css，这里暂且不是共用css。

sweetalert.css

这个插件是弹出插件里面最好看的一款，之前用的都是layer，发现它之后，项目所有用到layer的弹出消息的都换成了sweetalert了。所以他是一个共用的css。

bootstrap.addtabs.css

这个插件有专门一篇文章写道了它 QiYuAdmin-bootstrap.addtabs美化（SpringBoot实战）
这个插件就单独首页用到了，所以他不是一个共用的css，它是在首页引入的css。

components.min.css

这个是文件非常重要，是整个项目的核心文件，如果你把这个文件给删掉，那么你就用不了这个metronic了。它里面主要是对一些插件再一次进行了处理，各种好看样式比如说：各种好看的按钮，表格，还有portlet，还有重置css样式等等核心的功能。
结论：它是共用的css文件，有个经验教训，请不要私自该这个文件，最好是不要修改它。请除非必须的时候。

plugins.min.css

这个文件也是一个核心的文件，它主要是针对很多插件的css文件，比如说：时间控件（datepicker）、Bootstrap-select、bootstrap-switch等等，基于这些插件，又给优化了一些。是一个共用的css文件

qiyu-custom

这个是我们自己定义的一个css文件，意图其实和上面的plugins.min.css一样一样的。也是共用的css文件

layout.min.css

这个是整个项目的布局文件，是共用的css文件

blue.min.css

这个是主题文件，蓝色为主，共用的css文件

custom.min.css

这个是metronic框架给咱们预留的一个自定义的文件，metronic都已经把文件给咱们想好了，不过我们已经定义了一个自己的文件qiyu-custom.css。

所以这里可以删掉了。

共用js梳理

先看下onload_js.html文件里面的js

接下来，耐心一点吧，一个一个看吧

respond.min.js、excanvas.min.js、ie8.fix.min.js

 <!--[if lt IE 9]><script th:src="@{/assets/global/plugins/respond.min.js}"></script><script th:src="@{/assets/global/plugins/excanvas.min.js}"></script><script th:src="@{/assets/global/plugins/ie8.fix.min.js}"></script><![endif]-->

我们看到这三个文件是由一段注释给包裹住了，它是一段语法，代表的是如果您的浏览器是ie9或者是ie9以下则会执行里面的代码，还有其它语法如下：

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

如果你的项目已经废弃了IE的话，那么这段可以直接删掉了，那么这三个js文件是什么意思呢？我们来一一看下。
respnose.min.js：它是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design），这个是共用的。

excanvas.min.js：看他的名字大致就能猜到了，让IE对canvas的支持。你如果用到了canvas的话是需要加入进来的。

e8.fix.min.js：这个是针对IE8修复的问题。

综合上述：需要根据您的项目来定，哪些是共用的，哪些是非共用的，如果你的项目支持IE9或者废弃IE，那么就可以忽略这段代码了。

jquery.min.js、bootstrap.min.js

共用的js

js.cookie.min.js

这个是前端对cookie的操作，不是共用的。

jquery.slimscroll.min.js

jquery滚动条，不是共用的

jquery.blockui.min.js

jquery加载等待的时候，页面出现的遮罩层，并出现一些等待的效果。这个是共用的，基本上页面上每次的点击大部分都会有这种情况。

bootstrap-table.min.js

这个梳理css的时候就说明了它是共用的了。

moment.min.js

一个轻量级的 JavaScript 解析、验证、操作和展示日期库。不是共用的。

daterangepicker.min.js

时间控件，很明显不是共用的。

morris.min.js

梳理css的时候就说明了它不是共用的了。

raphael-min.js

这个是一个画图的js文件，可以用它纯写代码画流程图，不是共用的。

jquery.waypoints.min.js

你是否希望当用户仅仅滚动滑条的时候，就能触发各种各样的动态效果呢？比如图片浮现、文字漂移等各种各样的动画！waypoints将会帮你实现你想要的功能，所有不是必须的。

jquery.counterup.min.js

这个就是之前的一篇文章，在线演示里面提到的，等项目里面的数字给加载完之后才能点击其它的功能。就是它惹的祸。

amcharts下面相关

这个是一个图表，我感觉比echarts要好看一点。就是咱们首页上的图标。

ammap

和上面一样，都是同一个插件，这个是一个地图。am相关的都是一些像Echarts那样的插件，不是共用的。

fullcalendar.min.js

日历插件，貌似日历插件就这一个感觉比较好点，没有接触其它好的插件。

horozontal-timeline.js

这个是timeline的控件。

jquery.flot.min.js

它是一个Jquery下图表插件，具有简单使用，交互效果，具有吸引力外观特点。不是共用的。

jquery.easypiechart.min.js

这个是一个简单的图表插件。不是共用的。

jquery.sparkline.min.js

当我们需要一些画一些小图，例如一些小的线图，小的柱图的时候就需要这个插件了，不过他不是共用的。

jqvmap

矢量地图，不是共用的。

layer.js

这个还是梳理css的时候说的，如果以后功能很多的时候需要用到的地方也很多的时候就需要将他划分为共用的js了。

bootstrap-sweetalert

公用的。

bootstrap-addtabs

不是公用的。

app.min.js

这个文件非常的重要，是metronic的核心js文件，就和css文件里面的componet.css文件一样，比如说：改变主题背景和各种全局的属性、方法等等，公用的。

qiyu-components.js

这个咱们自己封装的方法，公用的。

dashboard.min.js

这个是初始化主面板的js，我们的首页内容很多时候都是自己自定义的，所以不一定用到它。

layout.min.js

布局js，核心的文件，只有首页用，不是公用的。

quick-sidebar.min.js

左侧导航菜单，只有首页采用，不是公用的。

quick-nav.min.js

这个是悬浮菜单，其实都可以删掉的。

总结：其实用到的不多，很多都是针对于某项功能的插件，很多都是未来可能会用到的插件，现在用到的其实很少。下一篇文章将会增强一下bootstrap-table表格的功能，在表格的上方增加几个搜索框，将其封装成共用的方法，只要用到了bootstrap-table表格并在其上方增加条件都可以调用这个共用的方法，实现模糊搜索。

QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)相关推荐

html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...
网页的基本结构新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
【SpringBoot项目实战+思维导图】瑞吉外卖①(项目介绍、开发环境搭建、后台登陆/退出功能开发)
文章目录软件开发整体介绍软件开发流程角色分工软件环境瑞吉外卖项目介绍项目介绍产品原型技术选型功能架构角色开发环境搭建数据库环境搭建创建数据库数据库表导入数据库表介绍 Ma ...
Node.js学习（express+node项目实战）
一. 什么是node.js? JavaScript 运行时环境既不是语言,也不是框架,它是一个平台 node中的javascript没有BOM.DOM 在 Node 中为 JavaScript 提供 ...
webSocket介绍及项目实战【在线聊天系统】
文章目录一:消息推送常用方式介绍 1.1 轮询:浏览器以指定的时间间隔向服务器发出HTTP请求,服务器实时返回数据给浏览器 1.2 长轮询:浏览器发出ajax请求,服务器端接收到请求后,会阻塞请求直 ...
CSS样式小项目实战 - 网页变色小按钮
小项目练手实战 - 变色小按钮 [背景分析] 为了满足用户体验,提高项目网页的视觉冲击力,各大网站上都有一些有颜色的按钮,当鼠标划上去的时候会变色,让用户的体验非常好.为了满足用户需求,同时让代码效率 ...
vue视频教程（Vue.js前端开发基础与项目实战）
适合人群: 适合网页设计与制作人员.网站建设开发人员.院校相关专业的学生.个人网站制作爱好者学习计划: 1.建议每天学习两小时 2.课堂代码可在附件中下载课程目标: 学习Vue前端框架,能使用Vu ...
Springboot + layui + FTP文件上传删除 + HTTP文件下载预览 + pdf.js文件预览（项目实战总结）
文件管理 0.需求及前言 1.前端,上传按钮嵌入数据表格中 2.利用IIS部署FTP文件服务器 3.后台FTP连接和文件操作 4.FTP遇到的问题和解决方案 5.预览PDF文件V1.0:FTP+临时文 ...
Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】
目录前言基础理论(5天) 基础理论-Day01 基础理论-Day02 基础理论-Day03 基础理论-Day04 基础理论-Day05 项目实战项目实战-Day01 项目实战-Day02 ...
Vue2.x+Node.js 拼多多商城项目实战
课程目录 1.Vue技术点补充(1).mp4 1.Vue技术点补充(2).mp4 1.知识点补充-上(1).mp4 2.知识点补充-上(2).mp4 3.商城项 ...

QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)

简介