Layui中设置公共的全局变量接口

最新推荐文章于 2024-08-12 17:12:18 发布

怪只怪满眼尽是人间烟火

最新推荐文章于 2024-08-12 17:12:18 发布

阅读量5.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38959210/article/details/112369837

版权

layui http模块封装 javascript 前后端交互

关键词由CSDN通过智能技术生成

前端专栏收录该内容

46 篇文章 0 订阅

订阅专栏

1.新建一个http.js文件

在js文件夹下的lay-module文件夹中新建一个http文件夹，并新建一个http.js文件

http.js

/**
  扩展一个http模块
**/      
 
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
  var obj = {
   api:"http://localhost:8090/"  //根据自己项目的端口而定
  };
  
  //输出test接口
  exports('http', obj);
});

2.编辑lay-config.js文件

在lay-config.js文件中，新加一行

window.rootPath = (function (src) {
    src = document.scripts[document.scripts.length - 1].src;
    return src.substring(0, src.lastIndexOf("/") + 1);
})();

layui.config({
    base: rootPath + "lay-module/",
    version: true
}).extend({
    miniAdmin: "layuimini/miniAdmin", // layuimini后台扩展
    miniMenu: "layuimini/miniMenu", // layuimini菜单扩展
    miniTab: "layuimini/miniTab", // layuimini tab扩展
    miniTheme: "layuimini/miniTheme", // layuimini 主题扩展
    miniTongji: "layuimini/miniTongji", // layuimini 统计扩展
    step: 'step-lay/step', // 分步表单扩展
    treetable: 'treetable-lay/treetable', //table树形扩展
    tableSelect: 'tableSelect/tableSelect', // table选择扩展
    iconPickerFa: 'iconPicker/iconPickerFa', // fa图标选择扩展
    echarts: 'echarts/echarts', // echarts图表扩展
    echartsTheme: 'echarts/echartsTheme', // echarts图表主题扩展
    wangEditor: 'wangEditor/wangEditor', // wangEditor富文本扩展
    layarea: 'layarea/layarea', //  省市县区三级联动下拉选择器
	http: 'http/http', // 后端接口封装
});

3.开始调用

3.1在要调用的页面引入lay-config.js文件

		 <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		 <script src="../js/lay-config.js" charset="utf-8"></script>

3.2使用layui.use调用封装号的功能

layui.use(['form','table','http'], function() {

                var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
	                http = layui.http;
                   console.log(http);

});