Layui中设置公共的接口

第一种方式

创建一个js文件,用来存储接口数据
在这里插入图片描述
http.js

const $api="http://localhost:8085/";

然后在需要的页面中引入并且使用即可了
在这里插入图片描述

第二种方式

在js/lay-module/中创建一个http目录及在里面创建一个http.js文件
在这里插入图片描述
http.js

layui.define(function(exports){ //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
  var obj = {
    api:"http://localhost:8085/"  //根据自己项目的端口而定
  }; 
  
  //输出test接口
  exports('http', obj);	//定义变量名来接收obj变量
});   

然后在lay-config.js中添加(访问路径)
在这里插入图片描述
然后在需要使用的页面先引入后使用即可
在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui table ,需要使用接口返回的数据进行渲染表格。具体步骤如下: 1. 定义表格的列属性,包括标题、字段名、宽度等信息。 2. 使用 layui 的 table 模块初始化表格,并将列属性传递给它。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); }); ``` 3. 在接口请求成功后,将返回的数据传递给表格进行渲染。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], done: function(res, curr, count){ // 成功请求后的回调函数 // res 是接口返回的数据 // curr 是当前页码 // count 是数据总数 // 通过 res.data 获取表格数据 // 通过 res.code 判断请求状态,一般情况下 0 表示成功 } }); }); ``` 4. 在接口请求失败时,可以使用 `table.reload()` 方法重新加载表格。 ```javascript layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url: '/api/table', cols: [[ //表头 {field: 'id', title: 'ID', width:80}, {field: 'username', title: '用户名', width:120}, {field: 'email', title: '邮箱', width:150}, {field: 'sex', title: '性别', width:80}, {field: 'city', title: '城市'}, {field: 'sign', title: '签名'}, {field: 'experience', title: '积分', sort: true}, {field: 'score', title: '评分', sort: true}, {field: 'classify', title: '职业'}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], done: function(res, curr, count){ if (res.code !== 0) { // 请求失败,重新加载表格 table.reload('demo'); } } }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值