Fastadmin 如何引入 layui 模块

FastAdmin,PHP,Fastadmin引入layui模,fastadmin使用layui。

FastAdmin基于RequireJS进行前端JS模块的管理,因此如果我们需要再引入第三方JS插件,则必按照RequireJS的规则进行载入。如果你还不了解什么是RequireJS,可以先简单了解下RequireJS,相关链接:http://www.ruanyifeng.com/blog/2012/11/require_js.html

FasrAdmin 前台文件在 require-frontend.js 或 frontend-init.js 后台文件在 require-backend.js 或 backend-init.js 对应的文件,定义插件的名称和依赖。

其中 require-frontend.js 和 require-backend.js 是官方自己的写好的依赖和插件。而打开 frontend-init.js 和 backend-init.js 我们可以发现是空白的。那正好用于我们自己编写,方便管理。

接下来我们就在 backend-init.js中添加如下代码:

define([‘backend‘], function (Backend) {
    require.config({
        paths: {
            ‘layui‘: ‘../libs/layerui/layui/layui‘,
        },
        shim: {
            ‘layui‘:{
                deps:[‘css!../libs/layerui/layui/css/layui.css‘],
                exports: "layui"
            },
        }
    });
});

  

首尾两行是backend-init.js中自带的,重点是require.config这部分。

pahts 内就是我们引入的js 模块名和路径。RequireJS 就是记载 js 文件的,所以定义到文件名即可 加载的文件 即是  ../libs/layerui/layui/layui.js

shim 是依赖配置,layui 它的依赖为一个CSS文件。如果插件没有依赖,则可以不写此部分。

exports这个为输出的变量名,表示在模块外部调用时返回的值,比如

require([‘layui‘], function(layui){
    //这里的layui的值就是layui这个变量的值
});

在对应的js 文件中调用 layui 模块

define([‘layui‘], function (undefined) {
    var Controller = {
        index: function () {
            //正常使用 layui 模块 即可
            layui.use(‘laydate‘, function(){
                var laydate = layui.laydate;

            }
    }
}

 就可以在对应的 js 文件中愉快的使用 layui 了

  特别注意的是,如果我们修改了require-backend.jsbackend-init.js文件,在部署到生产环境前需要使用php think min -m all -r all压缩打包一下JS和CSS文件

原文地址:https://www.cnblogs.com/Jun-tutu/p/12173541.html

时间: 2024-10-13 19:46:59

Fastadmin 如何引入 layui 模块的相关文章

maven多module项目中千万不要引入其他模块的单元测试代码

本文出处:http://blog.csdn.net/chaijunkun/article/details/35796335,转载请注明.由于本人不定期会整理相关博文,会对相应内容作出完善.因此强烈建议在原始出处查看此文. 这两天一直在整理一些旧的代码,将原来的混乱东西升级到maven管理.这其中也免不了将大项目拆分成若干个module(这里纠正一个发音,不是"猫丢",是['mɑ?d?ul],包阔我在内很多人都念错)来管理.然而为了在测试的时候图省事,在各个模块都引用的基础module中

关于Egret Engine 2.5.3引入GUI模块问题记录

基本环境: Egret Engine 2.5.3 Egret Wing 2.1 使用EgretWing创建Game项目,然后需要引入GUI模块. 具体引入模块教程可参考官方教程: http://edn.egret.com/cn/index.php/article/index/id/172 到这里我们的GUI界面还没法使用,还需要做下面的工作: 拷贝AssetAdapter.ts,ThemeAdapter.ts到src目录,AssetAdapter.js,ThemeAdapter.js到bin_d

Android 引入外部模块编译选择

/********************************************************************************* * Android 引入外部模块编译选择 * 说明: * 需要导入I2C.CAN的工具,但不想每次都去mmm,挺无聊的. * * 2017-11-9 深圳 南山平山村 曾剑锋 *******************************************************************************

基于layui模块的后台匹配搜索框

最近做了一个项目,其中需要从大量数据中筛选出需要的相应数据,因为数据量庞大,且变化,因此不能一次性渲染至前端页面,所以只能通过输入关键字,后台获取关键字搜索匹配返回数据给前端的方法,然后在网上大量寻找,始终找不到能完美融合项目的插件,于是萌发了自己写一个的想法,晚辈学疏才浅,望指教! 下面开始进入正题 前端部分 本想自己设计样式,但审美受限,感觉与整体项目风格不符,于是直接采用layui模块的样式 {% load staticfiles %} <!DOCTYPE html> <html

怎么在vue中引入layui

新项目想用layui框架,学习了把前辈是怎么引入layui的,这里记录下 1.index.html要引入layui.js文件 <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script> 2.main.js文件要配置好layui 这里用到的思路是,等layui加载好后再渲染页面 $( ()=>{ //这里用到

py文件控制台执行时,报错:引入的模块不存在

1.描述:该模块在IDE中是可以正确执行的.但是从cmd控制台执行时,报错:该模块引入的其他模块不存在. 2.解决:在该模块的#encoding:utf-8 之后另起一行加如下代码: #encoding:utf-8import sys import os import os.path sys.path.append(os.path.abspath('{bastpath}{sep}..'.format(bastpath=sys.path[0],sep=os.path.sep))) 将该项目路径加入

通过gulp为requireJs引入的模块添加版本号

由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-collerctor npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector 打包后的效果 "/css/style.css" => "/dist/css/style-1d87bebe.cs

引入math模块中的log()方法,导致&quot;TypeError: return arrays must be of ArrayType&quot;,什么原因?

from math import log from numpy import *import operator ............ re = log(pro,2) ............ TypeError: return arrays must be of ArrayType 把“from math import log”放在最后 from numpy import *import operatorfrom math import log ............ re = log(p

gradle-在一个模块中引入其它模块

现在有两个项目pet-api和pet-provider,这两个项目都在pet-parent当中,项目结构如下: 现在要在pet-provider中调用pet-api 先在parent中的settings.gradle中声明子模块,代码如下: 然后在api中的build.gradle加入以下配置 sourceCompatibility = '1.8' jar.enabled = true 最后在provider中的build.gradle中调用api dependencies { compile