一、让页面秀起来

其他 2019-09-29 08:17:54 阅读次数: 0

一、LayIM展示-客服模式

二、LayIM展示-通讯聊天模式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LayIM测试</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<script src="./layui/layui.js"></script>
<script>
    layui.use('layim', function (layim) {
        // 清空所有本地缓存消息
        localStorage.clear();
        //基础配置
        layim.config({
            init: {
                mine: {
                    "username": "访客",
                        "id": "100000123",
                        "status": "online",
                        "remark": "在深邃的编码世界，做一枚轻盈的纸飞机",
                        "avatar": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3865525855,2169088944&fm=26&gp=0.jpg"
                },
                    "friend": [{
                    "groupname": "分组1", //好友分组名
                    "id": 1, //分组ID
                    "list": [{ //分组下的好友列表
                        "username": "好友1", //好友昵称
                        "id": "1", //好友ID
                        "avatar": "https://aaapicture.oss-cn-hangzhou.aliyuncs.com/19-05-21/images/7f3394c83a030aa7f315bdeffc548be2.jpeg", //好友头
                        "sign": "这是签名", //好友签名
                        "status": "online" //若值为offline代表离线，online或者不填为在线
                    }, { //分组下的好友列表
                        "username": "好友2", //好友昵称
                        "id": "2", //好友ID
                        "avatar": "https://aaapicture.oss-cn-hangzhou.aliyuncs.com/19-01-05/images/zZLewZleDFNofU8jUdIyFmzTC21QYORwOWHdfmKB.jpeg", //好友头像
                        "sign": "好友签名", //好友签名
                        "status": "online" //若值为offline代表离线，online或者不填为在线
                    }]
                }],
                //群组列表
                "group": [{
                    "groupname": "测试4564231231235456456", //群组名称
                    "id": 1, //群组id
                    "avatar": "http://img2.imgtn.bdimg.com/it/u=3751529336,918538666&fm=26&gp=0.jpg", //群组头像
                    "members": 2, //群成员数量
                    "tr_no": "1566123132" //群号码
                    ,
                }, {
                    "groupname": "测试名字",
                        "id": 2,
                        "avatar": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=320178652,790985626&fm=26&gp=0.jpg",
                        "members": 1,
                        "tr_no": "1534833831"
                }]
            }, //获取主面板列表信息，下文会做进一步介绍
            //获取群员接口（返回的数据格式见下文）
            members: {
                url: '', //接口地址（返回的数据格式见下文）
                type: 'get', //默认get，一般可不填
                data: {} //额外参数
            },
            //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
            uploadImage: {
                url: '', //接口地址
                type: 'post' //默认post
            },
            //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
            uploadFile: {
                url: '', //接口地址
                type: 'post' //默认post
            },
            //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
            tool: [{
                alias: 'code', //工具别名
                title: '代码', //工具名称
                icon: '' //工具图标，参考图标文档
            }],
            msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html', //消息盒子页面地址，若不开启，剔除该项即可
            find: layui.cache.dir + 'css/modules/layim/html/find.html', //发现页面地址，若不开启，剔除该项即可
            chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
        })
    });
</script>
</body>
</html>

二、从接口加载数据 

1、分析数据结构

init接口就是为了实现主界面的

 提供的数据接口结构的格式为：

{
  "code": 0
  ,"msg": ""
  ,"data": {
    "mine": {
      "username": "纸飞机"
      ,"id": "100000"
      ,"status": "online"
      ,"sign": "在深邃的编码世界，做一枚轻盈的纸飞机"
      ,"avatar": "http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg"
    }
    ,"friend": [{
      "groupname": "前端码屌"
      ,"id": 1
      ,"online": 2
      ,"list": [{
        "username": "贤心"
        ,"id": "100001"
        ,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1"
        ,"sign": "这些都是测试数据，实际使用请严格按照该格式返回"
      },{
        "username": "Z_子晴"
        ,"id": "108101"
        ,"avatar": "http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg"
        ,"sign": "微电商达人"
      },{
        "username": "Lemon_CC"
        ,"id": "102101"
        ,"avatar": "http://tp2.sinaimg.cn/1833062053/180/5643591594/0"
        ,"sign": ""
      },{
        "username": "马小云"
        ,"id": "168168"
        ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1"
        ,"sign": "让天下没有难写的代码"
      },{
        "username": "徐小峥"
        ,"id": "666666"
        ,"avatar": "http://tp2.sinaimg.cn/1783286485/180/5677568891/1"
        ,"sign": "代码在囧途，也要写到底"
      }]
    },{
      "groupname": "网红"
      ,"id": 2
      ,"online": 3
      ,"list": [{
        "username": "罗玉凤"
        ,"id": "121286"
        ,"avatar": "http://tp1.sinaimg.cn/1241679004/180/5743814375/0"
        ,"sign": "在自己实力不济的时候，不要去相信什么媒体和记者。他们不是善良的人，有时候候他们的采访对当事人而言就是陷阱"
      },{
        "username": "长泽梓Azusa"
        ,"id": "100001222"
        ,"sign": "我是日本女艺人长泽あずさ"
        ,"avatar": "http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg"
      },{
        "username": "大鱼_MsYuyu"
        ,"id": "12123454"
        ,"avatar": "http://tp1.sinaimg.cn/5286730964/50/5745125631/0"
        ,"sign": "我瘋了！這也太準了吧  超級笑點低"
      },{
        "username": "谢楠"
        ,"id": "10034001"
        ,"avatar": "http://tp4.sinaimg.cn/1665074831/180/5617130952/0"
        ,"sign": ""
      },{
        "username": "柏雪近在它香"
        ,"id": "3435343"
        ,"avatar": "http://tp2.sinaimg.cn/2518326245/180/5636099025/0"
        ,"sign": ""
      }]
    },{
      "groupname": "我心中的女神"
      ,"id": 3
      ,"online": 1
      ,"list": [{
        "username": "林心如"
        ,"id": "76543"
        ,"avatar": "http://tp3.sinaimg.cn/1223762662/180/5741707953/0"
        ,"sign": "我爱贤心"
      },{
        "username": "佟丽娅"
        ,"id": "4803920"
        ,"avatar": "http://tp4.sinaimg.cn/1345566427/180/5730976522/0"
        ,"sign": "我也爱贤心吖吖啊"
      }]
    }]
    ,"group": [{
      "groupname": "前端群"
      ,"id": "101"
      ,"avatar": "http://tp2.sinaimg.cn/2211874245/180/40050524279/0"
    },{
      "groupname": "Fly社区官方群"
      ,"id": "102"
      ,"avatar": "http://tp2.sinaimg.cn/5488749285/50/5719808192/1"
    }]
  }
}

2、layim.config通过请求获取数据的方式

layim.config({
    init: {
        url: 'class/doAction.php?action=get_user_data', data: {}
    },
    //获取群成员
    members: {
        url: 'class/doAction.php?action=groupMembers', data: {}
    }
    //上传图片接口
    , uploadImage: {
        url: 'class/doAction.php?action=uploadImage' //（返回的数据格式见下文）
        , type: '' //默认post
    }
    //上传文件接口
    , uploadFile: {
        url: 'class/doAction.php?action=uploadFile' //
        , type: '' //默认post
    }
    //自定义皮肤
    ,uploadSkin: {
        url: 'class/doAction.php?action=uploadSkin'
        , type: 'post' //默认post
    }                    
    ,systemSkin: {//选择系统皮肤
        url: 'class/doAction.php?action=systemSkin'
        , type: 'post' //默认post
    }
    , isAudio: false //开启聊天工具栏音频
    , isVideo: false //开启聊天工具栏视频

    //扩展工具栏
    // , tool: [{
    //         alias: 'code'
    //         , title: '代码'
    //         , icon: '&#xe64e;'
    //     }]
    ,title: '我的webim' 
    ,copyright:true
    , initSkin: '1.jpg' //1-5 设置初始背景
    , notice: true //是否开启桌面消息提醒，默认false
    , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
    , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
    , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可
});

3、在服务端定义数据，并在前端获取数据

后台代码：

public IActionResult GetInit()
{
    string str = "{\"code\":0,\"msg\":\"\",\"data\":{\"mine\":{\"username\":\"纸飞机\",\"id\":\"100000\",\"status\":\"online\",\"sign\":\"在深邃的编码世界，做一枚轻盈的纸飞机\",\"avatar\":\"http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg\"},\"friend\":[{\"groupname\":\"前端码屌\",\"id\":1,\"online\":2,\"list\":[{\"username\":\"贤心\",\"id\":\"100001\",\"avatar\":\"http://tp1.sinaimg.cn/1571889140/180/40030060651/1\",\"sign\":\"这些都是测试数据，实际使用请严格按照该格式返回\"},{\"username\":\"Z_子晴\",\"id\":\"108101\",\"avatar\":\"http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg\",\"sign\":\"微电商达人\"},{\"username\":\"Lemon_CC\",\"id\":\"102101\",\"avatar\":\"http://tp2.sinaimg.cn/1833062053/180/5643591594/0\",\"sign\":\"\"},{\"username\":\"马小云\",\"id\":\"168168\",\"avatar\":\"http://tp4.sinaimg.cn/2145291155/180/5601307179/1\",\"sign\":\"让天下没有难写的代码\"},{\"username\":\"徐小峥\",\"id\":\"666666\",\"avatar\":\"http://tp2.sinaimg.cn/1783286485/180/5677568891/1\",\"sign\":\"代码在囧途，也要写到底\"}]},{\"groupname\":\"网红\",\"id\":2,\"online\":3,\"list\":[{\"username\":\"罗玉凤\",\"id\":\"121286\",\"avatar\":\"http://tp1.sinaimg.cn/1241679004/180/5743814375/0\",\"sign\":\"在自己实力不济的时候，不要去相信什么媒体和记者。他们不是善良的人，有时候候他们的采访对当事人而言就是陷阱\"},{\"username\":\"长泽梓Azusa\",\"id\":\"100001222\",\"sign\":\"我是日本女艺人长泽あずさ\",\"avatar\":\"http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg\"},{\"username\":\"大鱼_MsYuyu\",\"id\":\"12123454\",\"avatar\":\"http://tp1.sinaimg.cn/5286730964/50/5745125631/0\",\"sign\":\"我瘋了！這也太準了吧  超級笑點低\"},{\"username\":\"谢楠\",\"id\":\"10034001\",\"avatar\":\"http://tp4.sinaimg.cn/1665074831/180/5617130952/0\",\"sign\":\"\"},{\"username\":\"柏雪近在它香\",\"id\":\"3435343\",\"avatar\":\"http://tp2.sinaimg.cn/2518326245/180/5636099025/0\",\"sign\":\"\"}]},{\"groupname\":\"我心中的女神\",\"id\":3,\"online\":1,\"list\":[{\"username\":\"林心如\",\"id\":\"76543\",\"avatar\":\"http://tp3.sinaimg.cn/1223762662/180/5741707953/0\",\"sign\":\"我爱贤心\"},{\"username\":\"佟丽娅\",\"id\":\"4803920\",\"avatar\":\"http://tp4.sinaimg.cn/1345566427/180/5730976522/0\",\"sign\":\"我也爱贤心吖吖啊\"}]}],\"group\":[{\"groupname\":\"前端群\",\"id\":\"101\",\"avatar\":\"http://tp2.sinaimg.cn/2211874245/180/40050524279/0\"},{\"groupname\":\"Fly社区官方群\",\"id\":\"102\",\"avatar\":\"http://tp2.sinaimg.cn/5488749285/50/5719808192/1\"}]}}";
    return Json(JsonConvert.DeserializeObject(str));
}

前台代码:

    <script>
        layui.use('layim', function (layim) {
            // 清空所有本地缓存消息
            localStorage.clear();
            //基础配置
            layim.config({
                init: {
                    url: '/Login/GetInit', data: {}
                }, //获取主面板列表信息，下文会做进一步介绍
                //获取群员接口（返回的数据格式见下文）
                members: {
                    url: '', //接口地址（返回的数据格式见下文）
                    type: 'get', //默认get，一般可不填
                    data: {} //额外参数
                },
                //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
                uploadImage: {
                    url: '', //接口地址
                    type: 'post' //默认post
                },
                //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
                uploadFile: {
                    url: '', //接口地址
                    type: 'post' //默认post
                },
                //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
                tool: [{
                    alias: 'code', //工具别名
                    title: '代码', //工具名称
                    icon: '' //工具图标，参考图标文档
                }],
                msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html', //消息盒子页面地址，若不开启，剔除该项即可
                find: layui.cache.dir + 'css/modules/layim/html/find.html', //发现页面地址，若不开启，剔除该项即可
                chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
            })
        });
    </script>

展示结果:

猜你喜欢

转载自www.cnblogs.com/fger/p/11605673.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022