jquery官网、jquery官网框架搭建 收藏 0

基于SpringBoot 的CMS系统，拿去开发企业官网真香（附源码）

• 系统100%开源
• 模块化开发模式，铭飞所开发的模块都发布到了maven中央库。可以通过pom.xml文件的方式拉取源代码

基于MIT开源协议，可直接商用无需授权，但请尊重开源精神不要去掉代码中铭飞的注释和版权信息

• 免费完整开源：基于MIT协议，源代码完全开源，无商业限制,MS开发团队承诺将MCMS内容系统永久完整开源；关注Java项目分享
• 标签化建站：不需要专业的后台开发技能，只要使用系统提供的标签，就能轻松建设网站；
• html静态化：系统支持全站静态化；
• 跨终端：站点同时支持PC与移动端访问，同时会自动根据访问的终端切换到对应的界面，数据由系统统一管理；
• 海量模版：铭飞通过MStore（MS商城）分享更多免费、精美的企业网站模版，降低建站成本；关注Java项目分享
• 丰富插件：为了让MCms适应更多的业务场景，在MStore用户可以下载对应的插件，如：站群插件、微信插件、商城插件等；
• 每月更新：铭飞团队承诺每月28日为系统升级日，分享更多好用等模版与插件；
• 文档丰富：为了让用户更快速的使用MCms系统进行开发，铭飞团队持续更新开发相关文档，如标签文档、使用文档、视频教程等；

• 企 业：帮助创立初期的公司或团队快速搭建产品的技术平台，加快公司项目开发进度；
• 开发者：帮助开发者快速完成承接外包的项目，避免从零搭建系统；
• 学习者：初学JAVA的同学可以下载源代码来进行学习交流；

建议开发者使用以下环境，这样避免版本带来的问题

• Windows、Linux
• Eclipse、Idea
• Mysql≧5.7
• JDK≧8
• Tomcat≧8

MCms内容插件提供最基本的菜单、权限、角色、栏目、内容、静态化、等常用功能。视频教程：内容插件视频教程 配合代码生成器使用快速提升开发效率：代码生成器在线视频教程、代码生成器使用文档

项目访问路径/swagger-ui.html#/

系统部署手册

懒人做法，将所有的资源打成一个jar包，维护资源不方便，不推荐

打包指令增加参数 -f bin-xml ,执行完成会在target目录会生成 “ 项目-bin ” 发布文件夹

config：配置文件

html：静态化自动生成的目录(自动生成)

static：静态资源文件

templets：(必须)模版目录，需要复制一份

upload：(必须)上传的文件夹

WEB-INF：ftl视图文件

mcms.log：自动生成的日志文件

*.sh：linux启动、停止脚本

*.bat：window启动、停止脚本

做开源我们是业余的，写代码我们是认真的。研发产品的路上我们一直在探索、一直在学习、一直在用心投入，希望能给更多的企业与开发者提供一些更有价值的服务。

源码资料获取方式：关注小编+转发文章+私信【 666 】免费获取八股文面试资料获取方式：关注小编+转发文章+私信【 13 】免费获取重要的事情说三遍，转发+转发+转发，一定要记得点赞转发哦!!!面试官：Spring 和 Spring Boot 的区别是什么？

对于 Spring和 SpringBoot到底有什么区别，我听到了很多答案，刚开始迈入学习 SpringBoot的我当时也是一头雾水，随着经验的积累、我慢慢理解了这两个框架到底有什么区别，相信对于用了 SpringBoot很久的同学来说，还不是很理解 SpringBoot到底和 Spring有什么区别，看完文章中的比较，或许你有了不同的答案和看法！

作为 Java开发人员，大家都 Spring都不陌生，简而言之， Spring框架为开发 Java应用程序提供了全面的基础架构支持。它包含一些很好的功能，如依赖注入和开箱即用的模块，如：

SpringJDBC、SpringMVC、SpringSecurity、SpringAOP、SpringORM、SpringTest，这些模块缩短应用程序的开发时间，提高了应用开发的效率例如，在 JavaWeb开发的早期阶段，我们需要编写大量的代码来将记录插入到数据库中。但是通过使用 SpringJDBC模块的 JDBCTemplate，我们可以将操作简化为几行代码。

SpringBoot基本上是 Spring框架的扩展，它消除了设置 Spring应用程序所需的 XML配置，为更快，更高效的开发生态系统铺平了道路。

SpringBoot中的一些特征：

1、创建独立的 Spring应用。2、嵌入式 Tomcat、 Jetty、 Undertow容器（无需部署war文件）。3、提供的 starters 简化构建配置4、尽可能自动配置 spring应用。5、提供生产指标,例如指标、健壮检查和外部化配置6、完全没有代码生成和 XML配置要求

首先，让我们看一下使用Spring创建Web应用程序所需的最小依赖项

与Spring不同，Spring Boot只需要一个依赖项来启动和运行Web应用程序：

在进行构建期间，所有其他依赖项将自动添加到项目中。

另一个很好的例子就是测试库。我们通常使用 SpringTest， JUnit， Hamcrest和 Mockito库。在 Spring项目中，我们应该将所有这些库添加为依赖项。但是在 SpringBoot中，我们只需要添加 spring-boot-starter-test依赖项来自动包含这些库。

Spring Boot为不同的Spring模块提供了许多依赖项。一些最常用的是：

spring-boot-starter-data-jpaspring-boot-starter-securityspring-boot-starter-testspring-boot-starter-webspring-boot-starter-thymeleaf

有关 starter的完整列表，请查看Spring文档。

让我们来看一下 Spring和 SpringBoot创建 JSPWeb应用程序所需的配置。

Spring需要定义调度程序 servlet，映射和其他支持配置。我们可以使用 web.xml 文件或 Initializer类来完成此操作：

还需要将 @EnableWebMvc注释添加到 @Configuration类，并定义一个视图解析器来解析从控制器返回的视图：

再来看 SpringBoot一旦我们添加了 Web启动程序， SpringBoot只需要在 application配置文件中配置几个属性来完成如上操作：

上面的所有Spring配置都是通过一个名为auto-configuration的过程添加 Bootweb starter来自动包含的。

这意味着 SpringBoot将查看应用程序中存在的依赖项，属性和 bean，并根据这些依赖项，对属性和 bean进行配置。当然，如果我们想要添加自己的自定义配置，那么 SpringBoot自动配置将会退回。

现在我们来看下如何在Spring和Spring Boot中配置Thymeleaf模板引擎。

在 Spring中，我们需要为视图解析器添加 thymeleaf-spring5依赖项和一些配置：

SpringBoot1X只需要 spring-boot-starter-thymeleaf的依赖项来启用 Web应用程序中的 Thymeleaf支持。   但是由于 Thymeleaf3.0中的新功能，我们必须将 thymeleaf-layout-dialect 添加为 SpringBoot2XWeb应用程序中的依赖项。配置好依赖，我们就可以将模板添加到 src/main/resources/templates文件夹中， SpringBoot将自动显示它们。

为简单起见，我们使用框架默认的 HTTPBasic身份验证。让我们首先看一下使用 Spring启用 Security所需的依赖关系和配置。

Spring首先需要依赖 spring-security-web和 spring-security-config 模块。接下来， 我们需要添加一个扩展 WebSecurityConfigurerAdapter的类，并使用 @EnableWebSecurity注解：

这里我们使用 inMemoryAuthentication来设置身份验证。同样， SpringBoot也需要这些依赖项才能使其工作。但是我们只需要定义 spring-boot-starter-security的依赖关系，因为这会自动将所有相关的依赖项添加到类路径中。

SpringBoot中的安全配置与上面的相同 。

Spring和 SpringBoot中应用程序引导的基本区别在于 servlet。Spring使用 web.xml 或 SpringServletContainerInitializer作为其引导入口点。SpringBoot仅使用 Servlet3功能来引导应用程序，下面让我们详细来了解下

Spring支持传统的 web.xml引导方式以及最新的 Servlet3+方法。

配置 web.xml方法启动的步骤

Servlet容器（服务器）读取 web.xml

web.xml中定义的 DispatcherServlet由容器实例化

DispatcherServlet通过读取 WEB-INF/{servletName}-servlet.xml来创建 WebApplicationContext。最后， DispatcherServlet注册在应用程序上下文中定义的 bean

使用 Servlet3+方法的 Spring启动步骤

容器搜索实现 ServletContainerInitializer的类并执行 SpringServletContainerInitializer找到实现所有类 WebApplicationInitializer“WebApplicationInitializer创建具有XML或上下文 @Configuration类 WebApplicationInitializer创建 DispatcherServlet与先前创建的上下文。

Spring Boot应用程序的入口点是使用@SpringBootApplication注释的类

默认情况下， SpringBoot使用嵌入式容器来运行应用程序。在这种情况下， SpringBoot使用 publicstaticvoidmain入口点来启动嵌入式 Web服务器。此外，它还负责将 Servlet， Filter和 ServletContextInitializerbean从应用程序上下文绑定到嵌入式 servlet容器。SpringBoot的另一个特性是它会自动扫描同一个包中的所有类或 Main类的子包中的组件。

SpringBoot提供了将其部署到外部容器的方式。我们只需要扩展 SpringBootServletInitializer即可：

这里外部 servlet容器查找在war包下的 META-INF文件夹下MANIFEST.MF文件中定义的 Main-class， SpringBootServletInitializer将负责绑定 Servlet， Filter和 ServletContextInitializer。

最后，让我们看看如何打包和部署应用程序。这两个框架都支持 Maven和 Gradle等通用包管理技术。但是在部署方面，这些框架差异很大。例如，Spring Boot Maven插件在 Maven中提供 SpringBoot支持。它还允许打包可执行 jar或 war包并 就地运行应用程序。

在部署环境中 SpringBoot 对比 Spring的一些优点包括：

1、提供嵌入式容器支持2、使用命令java -jar独立运行jar3、在外部容器中部署时，可以选择排除依赖关系以避免潜在的jar冲突4、部署时灵活指定配置文件的选项5、用于集成测试的随机端口生成

简而言之，我们可以说 SpringBoot只是 Spring本身的扩展，使开发，测试和部署更加方便。

Jquery插件（常用的插件库）

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

随着Jquery知识点的结束，我也开始接触到框架来了。

开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？

插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。

打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。

理解完插件和框架的区别，下面来写一写这几天初步学习的插件库

1.jquery 对于我而言肯定是一个熟悉的框架了

官网网址：https://jquery.com/

插件库：http://www.jq22.com/

这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

2.Select2 官网网址：https://select2.org/

3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1

4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/

5.Swiper 官网网址：https://www.swiper.com.cn/

6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html

以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写

select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。

使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示

min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问

我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。

这个是一个案例效果图接下来就根据这个案例来编写。

首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下

在body里面写上一个普通的下拉列表：

我把js注释一下看看效果如何：

这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）

在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器

在案例中我们如下编写 （效果如右）：

这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。

例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）

在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）

案例中简单的写了两个属性

插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。

翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。

使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master

这个官网有一点优势emmmmmm他有中文模式 左上角可以选择

将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：

我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）

将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择

在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）

当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中

它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:

效果如下：

当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式

在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）

在我的案列中写了几个案例js代码如下：

文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上

这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。

lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。

使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x

使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件

我使用了12张图片然后js就一句，就可以实现懒加载功能

要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别

普通加载：

懒加载：

懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件

所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。

Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。

用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库

同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：

先上一张效果图：

如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列

这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：

不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服

nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。

同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：

以案列为准，由于没有css我直接手写了有个简单的css样式。

当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：

js写法：无论那样的写法他实现的功能是一样的

这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）

自定义规则

内置规则

这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。

对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）

就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看

以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip

我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，

有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。

学习中，有地方错误还请指正。

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

《》

作者：一生的风景

转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com