layui2.5 修改layuicms

雷哥layui2.5版本学习

学习地址:

https://www.bilibili.com/video/av59813890/?p=30

注意:

修改layuicms时注意下面是缓存的js,
<script type="text/javascript" src="js/cache.js"></script>
如果修改了没有返回需要清楚缓存,
如果把下面的cache.js给屏蔽了,那layuicms里的缓存就不能用了

1.先下载thinkphp5.1

配置好域名,让项目跑起来

2.在public/admin里把layuicms复制进来

3.升级layuicms里layui版本

a.把layuicms/layui/layui.js里的下面代码复制到最新版的layui/layui.js最上面

//防止页面单独打开【登录页面除外】
if(/layuicms2.0\/page/.test(top.location.href) && !/login.html/.test(top.location.href)){
    top.window.location.href = window.location.href.split("layuicms2.0/page/")[0] + 'layuicms2.0/';
}
//外部图标链接
var iconUrl = "https://at.alicdn.com/t/font_400842_q6tk84n9ywvu0udi.css";

b.把layuicms/layui/css/layui.css里的下面代码复制到最新版的layui/css/layui.css最上面

/* 自添加样式*/
@import "https://at.alicdn.com/t/font_400842_q6tk84n9ywvu0udi.css";
.layui-icon{ font-size:16px !important;}
.mag0{ margin:0 !important; }
::selection { background: #ff5722; color: #fff; }
.layui-red{ color:#f00 !important; font-weight:bold;}
.layui-blue{ color:#01AAED !important;}

c.把layuicms里的layui文件夹给删除了,把修改好的最新版的layui文件复制进去.

4.改login.html

a.把public\admin\page\login\login.html文件给复制到网站根目录里public\admin目录里

修改它里面引入资源的目录路径.

b.把login.html里的把有的../../替换成./

c.把login.html里

<script type="text/javascript" src="login.js"></script>

替换成

<script type="text/javascript" src="./page/login/login.js"></script>

修改后的效果:

5.改背景图片

替换public\admin\images里的登陆背景图片login_bg.jpg替换.

6.删除后台的顶级菜单

删除index.html里的下面的代码

<!-- 顶级菜单 -->
<ul class="layui-nav mobileTopLevelMenus" mobile>
    <li class="layui-nav-item" data-menu="contentManagement">
        <a href="javascript:;"><i class="seraph icon-caidan"></i><cite>layuiCMS</cite></a>
        <dl class="layui-nav-child">
            <dd class="layui-this" data-menu="contentManagement"><a href="javascript:;"><i class="layui-icon" data-icon=""></i><cite>内容管理</cite></a></dd>
            <dd data-menu="memberCenter"><a href="javascript:;"><i class="seraph icon-icon10" data-icon="icon-icon10"></i><cite>用户中心</cite></a></dd>
            <dd data-menu="systemeSttings"><a href="javascript:;"><i class="layui-icon" data-icon=""></i><cite>系统设置</cite></a></dd>
            <dd data-menu="seraphApi"><a href="javascript:;"><i class="layui-icon" data-icon=""></i><cite>使用文档</cite></a></dd>
        </dl>
    </li>
</ul>
<ul class="layui-nav topLevelMenus" pc>
    <li class="layui-nav-item layui-this" data-menu="contentManagement">
        <a href="javascript:;"><i class="layui-icon" data-icon=""></i><cite>内容管理</cite></a>
    </li>
    <li class="layui-nav-item" data-menu="memberCenter" pc>
        <a href="javascript:;"><i class="seraph icon-icon10" data-icon="icon-icon10"></i><cite>用户中心</cite></a>
    </li>
    <li class="layui-nav-item" data-menu="systemeSttings" pc>
        <a href="javascript:;"><i class="layui-icon" data-icon=""></i><cite>系统设置</cite></a>
    </li>
    <li class="layui-nav-item" data-menu="seraphApi" pc>
        <a href="javascript:;"><i class="layui-icon" data-icon=""></i><cite>使用文档</cite></a>
    </li>
</ul>

删除后的效果:

7.修改右侧刷新图标不显示的

到 https://www.layui.com/doc/element/icon.html 页面里找到刷新的图标  把index.html代码里的图片换了

效果:

6.修改左边的导航菜单

找到public\admin\js\index.js

把代码

function getData(json){
	$.getJSON(tab.tabConfig.url,function(data){
		if(json == "contentManagement"){
			dataStr = data.contentManagement;
			//重新渲染左侧菜单
			tab.render();
		}else if(json == "memberCenter"){
			dataStr = data.memberCenter;
			//重新渲染左侧菜单
			tab.render();
		}else if(json == "systemeSttings"){
			dataStr = data.systemeSttings;
			//重新渲染左侧菜单
			tab.render();
		}else if(json == "seraphApi"){
            dataStr = data.seraphApi;
            //重新渲染左侧菜单
            tab.render();
        }
	})
}

修改成:

function getData(json){
	$.getJSON(tab.tabConfig.url,function(data){
        dataStr = data
        //重新渲染左侧菜单
        tab.render();
	})
}

找到 public\admin\json\navs.json

把里的内容修改为(只留第一个数组)

[
	{
		"title": "文章列表11",
		"icon": "icon-text",
		"href": "page/news/newsList.html",
		"spread": false
	},
	{
		"title": "图片管理",
		"icon": "",
		"href": "page/img/images.html",
		"spread": false
	},
	{
		"title": "其他页面",
		"icon": "",
		"href": "",
		"spread": false,
		"children": [
			{
				"title": "404页面",
				"icon": "",
				"href": "page/404.html",
				"spread": false
			},
			{
				"title": "登录",
				"icon": "",
				"href": "page/login/login.html",
				"spread": false,
				"target": "_blank"
			}
		]
	}
]

效果:

7.主页里中间区域

找到public\admin\page\main.html 删除不需要的面版

删除完后的代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
</head>

<body class="childrenBody">
    <blockquote class="layui-elem-quote layui-bg-green">
        <div id="nowTime"></div>
    </blockquote>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg6 layui-col-md6">
            <blockquote class="layui-elem-quote title">最新文章 <i class="layui-icon layui-red"></i></blockquote>
            <table class="layui-table mag0" lay-skin="line">
                <colgroup>
                    <col>
                    <col width="110">
                </colgroup>
                <tbody class="hot_news"></tbody>
            </table>
        </div>
        <div class="layui-col-lg6 layui-col-md6">
            <blockquote class="layui-elem-quote title">最新文章 <i class="layui-icon layui-red"></i></blockquote>
            <table class="layui-table mag0" lay-skin="line">
                <colgroup>
                    <col>
                    <col width="110">
                </colgroup>
                <tbody class="hot_news"></tbody>
            </table>
        </div>

    </div>

    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/main.js"></script>
</body>

</html>

效果:

8.修改锁屏密码,和关闭公告

在public\admin\js\cache.js里可以修改锁屏密码,和关闭公告

9.修改newlist.html和newlist.js

public\admin\page\news\newsList.js里

layui.use(['form', 'layer', 'laydate', 'table', 'laytpl'], function() {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        table = layui.table;

    //新闻列表
    var tableIns = table.render({
        elem: '#newsList',
        url: '../../json/newsList.json',
        cellMinWidth: 95,
        page: true,
        height: "full-125",
        toolbar: '#tatleListBar',
        defaultToolbar: ['filter', 'print'], //'filter', 'print', 'exports'
        limit: 20,
        limits: [10, 15, 20, 25],
        id: "newsListTable",
        cols: [
            [
                { type: "checkbox", fixed: "left", width: 50 },
                { field: 'newsId', title: 'ID', width: 60, align: "center" },
                { field: 'newsName', title: '文章标题', width: 350 },
                { field: 'newsAuthor', title: '发布者', align: 'center' },
                {
                    field: 'newsStatus',
                    title: '发布状态',
                    align: 'center',
                    templet: function(d) {
                        if (d.newsStatus == "1") {
                            return '<span class = "layui-red" > 等待审核 </span>';
                        } else if (d.newsStatus == "0") {
                            return '<span class = "layui-blue" > 已存草稿 </span>';
                        } else {
                            return '审核通过';
                        }
                    }
                },
                { field: 'newsLook', title: '浏览权限', align: 'center' },
                {
                    field: 'newsTop',
                    title: '是否置顶',
                    align: 'center',
                    templet: function(d) {
                        return '<input type="checkbox" name="newsTop" lay-filter="newsTop" lay-skin="switch" lay-text="是|否" ' + d.newsTop + '>'
                    }
                },
                {
                    field: 'newsTime',
                    title: '发布时间',
                    align: 'center',
                    minWidth: 110,
                    templet: function(d) {
                        return d.newsTime.substring(0, 10);
                    }
                },
                { title: '操作', width: "170", toolbar: '#newsListBar', fixed: 'right', align: 'center' },
                // { title: '操作', width: 170, templet: '#newsListBar', fixed: "right", align: "center" }
            ]
        ]
    });

    //是否置顶
    form.on('switch(newsTop)', function(data) {
        console.log(data);
        var index = layer.msg('修改中，请稍候', { icon: 16, time: false, shade: 0.8 });
        setTimeout(function() {
            layer.close(index);
            if (data.elem.checked) {
                layer.msg("置顶成功11！");
            } else {
                layer.msg("取消置顶成功22！");
            }
        }, 500);
    })

    //搜索【此功能需要后台配合，所以暂时没有动态效果演示】

    //获取地址栏里URL的参数
    function getUrlParam(name, url = "") {
        console.log(url);
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        if (url == "") {
            var r = window.location.search.substr(1).match(reg); //获取地址栏里的url
        } else {
            var r = url;
        }
        console.log(r);
        if (r != null) {
            return decodeURI(r[2]);
            return null;
        }
    }

    $(".search_btn").on("click", function() {
        var params = $('#searchfrm').serialize();
        // var url = 'json/newsList.json?' + params;
        var url = '/json/newsList.json';
        console.log(url);
        $.get(url, params, function(res) {
            console.log(111);
            console.log(res);
        }, 'json')

        table.reload("newsListTable", {
            // url: '../../json/newsList.json?' + params,
            page: {
                curr: 1 //重新从第 1 页开始
            },
            // where: {
            //     id: getUrlParam("id", url),
            //     title: getUrlParam("title", url),
            // }
        });
        return false;
        //搜索
        // layer.msg("请输入搜索的内容");
        // if ($(".searchVal").val() != '') {
        //     table.reload("newsListTable", {
        //         page: {
        //             curr: 1 //重新从第 1 页开始
        //         },
        //         where: {
        //             key: $(".searchVal").val() //搜索的关键字
        //         }
        //     })
        // } else {
        //     layer.msg("请输入搜索的内容");
        // }
    });

    //添加文章
    function addNews(edit) {
        var index = layui.layer.open({
                title: "添加文章",
                type: 2,
                content: "newsAdd.html",
                success: function(layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    if (edit) {
                        body.find(".newsName").val(edit.newsName);
                        body.find(".abstract").val(edit.abstract);
                        body.find(".thumbImg").attr("src", edit.newsImg);
                        body.find("#news_content").val(edit.content);
                        body.find(".newsStatus select").val(edit.newsStatus);
                        body.find(".openness input[name='openness'][title='" + edit.newsLook + "']").prop("checked", "checked");
                        body.find(".newsTop input[name='newsTop']").prop("checked", edit.newsTop);
                        form.render();
                    }
                    setTimeout(function() {
                        layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            })
            //让弹出层默认最大化
        layui.layer.full(index);
        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
        $(window).on("resize", function() {
            layui.layer.full(index);
        })
    }

    //批量删除
    function batchdel() {
        var checkStatus = table.checkStatus('newsListTable'),
            data = checkStatus.data,
            newsId = [];
        if (data.length > 0) {
            for (var i in data) {
                newsId.push(data[i].newsId);
            }

            layer.confirm('确定删除选中的文章？', { icon: 3, title: '提示信息' }, function(index) {
                console.log(newsId);
                // $.get("删除文章接口",{
                //     newsId : newsId  //将需要删除的newsId作为参数传入
                // },function(data){
                tableIns.reload();
                layer.close(index);
                // })
            })
        } else {
            layer.msg("请选择需要删除的文章");
        }
    }

    //监听table表头按钮事件
    //'toolbar(newsList)'里的newsList指的是表格里的lay-filter="newsList"值
    table.on('toolbar(newsList)', function(obj) {
        switch (obj.event) {
            case 'add':
                addNews();
                // layer.msg('添加');
                break;
            case 'batchDel':
                batchdel();
                // layer.msg('删除');
                break;
        };
    });

    //监听列表操作
    table.on('tool(newsList)', function(obj) {
        console.log(obj);
        var layEvent = obj.event,
            data = obj.data;
        switch (layEvent) {
            case 'edit': //编辑
                addNews(data);
                break;
            case 'del':
                layer.confirm('确定删除此文章？', { icon: 3, title: '提示信息' }, function(index) {
                    // $.get("删除文章接口",{
                    //     newsId : data.newsId  //将需要删除的newsId作为参数传入
                    // },function(data){
                    // tableIns.reload();
                    obj.del(); //移除当前行
                    layer.close(index);
                    // })
                });
                break;
            case 'look': //预览
                layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问")
                break;
            default:
                //语句3;
                layer.alert("状态不对.")

        };

    });

})

public\admin\page\news\newsList.html里

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文章列表--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>

<body class="childrenBody">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>搜索</legend>
    </fieldset>
    <form class="layui-form" id="searchfrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline">
                    <input type="tel" name="id" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn search_btn" lay-submit="" lay-filter="demo1">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <table id="newsList" lay-filter="newsList"></table>

    <!--表格工具条操作-->
    <script type="text/html" id="tatleListBar">
        <a class="layui-btn" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-danger" lay-event="batchDel">批量删除</a>
    </script>

    <!--列表操作-->
    <script type="text/html" id="newsListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        <!-- <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">预览</a> -->
    </script>

    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="newsList.js"></script>
</body>

</html>

效果: