Asp.NetMVC利用LigerUI搭建一個簡單的后台管理詳解（函登錄驗證）

上一篇 Asp.Net 中Grid詳解兩種方法使用LigerUI加載數據庫數據填充數據分頁  了解了LigerUI 中Grid的基本用法  現在結合上一篇的內容做一個簡單的后台管理，當然也有前台的頁面。支持登錄驗證。

1、打開VS新建一個MVC項目，右鍵點擊項目新建一個區域Admin作為后台部分

2、既然要做登錄限制我們在App_Start下面新建一個類 繼承Controller作為基處理控制器。

里面Session就是儲存用戶的登錄信息，登陸過的用戶跟沒有登錄的用戶就是在這個里面判斷，后面建的控制器都是繼承這個BaseController，OnActionExecuted重寫這個方法判斷登錄，下面是代碼

using System.Security.Principal;
using System.Web.Mvc;
using System.Web.Mvc.Filters;

namespace WyMVCLigerUIDemo20180626
{
    /// <summary>
    /// 基處理控制器，不僅可以取代全局過濾器，還提供派生類方法
    /// </summary>
    public abstract class BaseController : Controller
    {
        // GET: Base

        protected Model.UserInfo UserInfo => Session["UserInfo"] as Model.UserInfo;
        /// <summary>
        /// 數據庫操作上下文
        /// </summary>
        protected ModelContext Context => ModelContext.Current;

        /// <summary>
        /// 判斷是否登錄 沒有登錄強跳轉登錄界面
        /// </summary>
        /// <param name="filterContext"></param>
        protected override void OnActionExecuted(ActionExecutedContext filterContext)
        {
            if (UserInfo == null && filterContext.ActionDescriptor.ActionName.ToLower()!="login")
            {
                filterContext.HttpContext.Response.Redirect("/Admin/Home/Login",true);
            }
           
            base.OnActionExecuted(filterContext);
        }
    }
}

 

下面是UserInfo類就是一個ID、用戶名、密碼

using Qwit.ORM;

namespace WyMVCLigerUIDemo20180626.Model
{
    /// <summary>
    /// 管理員信息
    /// </summary>
    [Table("User")]
    public class UserInfo:ITablesCreateCompleted
    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Pass { get; set; }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="context"></param>
        public void OnTablesCreated(EntityContext context)
        { 
            //創建表的時候調用此方法，用於創建視圖和默認數據


        }
    }
}

 

3、在區域Areas里面的Admin下的控制器Controller新建一個控制器Home。Home作為后台的首頁，Login是登陸界面並添加相應的視圖 

下面是后台Home控制器中的代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WyMVCLigerUIDemo20180626.Model;

namespace WyMVCLigerUIDemo20180626.Areas.Admin.Controllers
{
    public class HomeController : BaseController
    {
        // GET: Admin/Home
        public ActionResult Index()
        {
            return View();
        }
        // GET: Admin/Home
        /// <summary>
        /// 登錄頁面
        /// </summary>
        /// <returns></returns>
        [AllowAnonymous]
        public ActionResult Login()
        {
            string loginID = "admin";
            string PasswordCon = "admin888";
            Session["LoginName"] = loginID;
            Session["Password"] = PasswordCon;
            UserInfo userInfo = new UserInfo();
            userInfo.Name = loginID;
            userInfo.Pass = PasswordCon;
            return View();
        }
        /// <summary>
        /// 登陸邏輯
        /// </summary>
        /// <param name="name"></param>
        /// <param name="pass"></param>
        /// <returns></returns>
        //[AllowAnonymous, HttpPost]
        //public ActionResult Login(string name, string pass)
        //{
        //    //eg:用戶登錄 
        //    var user = Context.Users.Where(q => q.Name.Equals(name)).FirstOrDefault();
        //    //同 var user =Context.Users.FirstOrDefault(q => q.Name.Equals(name));

        //    //推薦采用異步操作，即
        //    //var user =await Context.Users.FirstOrDefaultAsync(q => q.Name.Equals(name));

        //    if (user != null)
        //    {
        //        if (user.Pass.Equals(pass))
        //        {
        //            //密碼正確，登陸成功
        //        }
        //    }


        //    return Json(new Models.AjaxResult { Result = true });
        //}
        [HttpPost]
        public ActionResult LoginTow()
        {


            string namelogin = Request["txtName"].ToString();
            string pass = Request["txtPass"].ToString();
            if (Session["LoginName"].ToString() == namelogin && Session["Password"].ToString() == pass)
            {
                var user = new UserInfo() { Name = namelogin, Pass = pass };
                Session["UserInfo"] = user;
                return Content("SU");


            }
            else
            {
                return Content("ER");
            }

        }
    }
}

 

Login是對應的登錄視圖  里面設置的Session，登錄的賬號密碼，這里是寫死的沒有鏈接數據庫，怕寫的多以后再補上，LoginTow這個是登陸方法 前台Ajax請求的地址，看得到返回的不是View是一些文本  登錄成功失敗都返回相應的字符。下面是登陸界面

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>管理員登錄</title>
    <link href="/resources/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="/resources/dropkick/dropkick.css" rel="stylesheet" type="text/css" />
    <link href="/resources/easyui/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/resources/css/default.css" rel="stylesheet" type="text/css" />
    <link href="/resources/css/themes.css" rel="stylesheet" type="text/css" />
    <script src="/resources/js/jquery.1.11.3.min.js"></script>
    <script src="/resources/bootstrap/js/bootstrap.min.js"></script>
    <script src="/resources/dropkick/jquery.dropkick-min.js"></script>
    <script src="/resources/easyui/jquery.easyui.min.js"></script>
    <script src="/resources/js/pop.js"></script>
    <script src="/resources/js/myfunctions.js"></script>
    <script src="/resources/js/frame.js"></script>
    <script src="/resources/js/ajaxfileupload.js"></script>
    <style>
        .stymain {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            margin-top: 200px;
            border: 1px solid #808080;
            background: #eeeeee;
            padding: 5px;
            border-radius: 5px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#btnsubmit").click(function () {
                if ($("#txtLoginID").val() == "") {
                    alert("請填寫用戶名！");
                    return;
                }
                if ($("#txtPassword").val() == "") {
                    alert("請輸入密碼！");
                    return;
                }
                $.ajax({
                    type: "POST",
                    url: "LoginTow",
                    data: {
                        txtName: $("#txtLoginID").val(),
                        txtPass: $("#txtPassword").val()
                    },
                    success: function (data) {
                        if (data = "SU") {
                            setTimeout("location.href='/Admin/Home/Index';", 500);
                            //location.href("/Home/Index");
                        }
                        if (data == "ER") {
                            alert("用戶名密碼錯誤！！");
                            return;
                        }

                    }

                });
            })
        })
    </script>
</head>
<body>
    <div class="stymain">
        <div class="section-title">管理員登錄</div>
        <div class="form-horizontal">
            <div class="form-group col-sm-12">
                <label class="fg-text control-label">用戶名</label>
                <div class="fg-input">
                    <input type="text" class="form-control" name="txtLoginID" id="txtLoginID" placeholder="請填寫用戶名">
                </div>
            </div>
            <div class="form-group col-sm-12">
                <label class="fg-text control-label">密碼</label>

                <div class="fg-input">
                    <input type="password" class="form-control" name="txtPassword" id="txtPassword" placeholder="請填寫密碼">
                </div>
            </div>
        </div>
        <div class="form-btns">
            <button type="submit" name="btnsubmit" id="btnsubmit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> 登錄</button>
        </div>
    </div>
</body>
</html>

 

里面的代碼通俗易懂引用的css是網上隨便找了一個后台框架的css。懶得去寫樣式哈哈。Ajax請求后台的LoginTow方法。

4、后台首頁部分

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>后台界面</title>
    <link href="~/Scripts/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" id="mylink" />
    <link rel="stylesheet" type="text/css" href="~/Scripts/homeMain.css" />
    <script src="~/Scripts/lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="~/Scripts/lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
    <script src="~/Scripts/lib/jquery.cookie.js"></script>
    <script src="~/Scripts/lib/json2.js"></script>
    <script src="~/Scripts/lib/indexdata.js"></script>
    <script src="~/Scripts/homeMain.js" type="text/javascript"></script>
    <script>
        $(function () {
            $("#l-link").on("click", function () {
                $("#l-link").css("background-color", "blue");
                $(this).css("background-color", "yellow");
            })
        });
    </script>
    @{ 
        string url = HttpContext.Current.Request.Url.Host;
        int url22 = HttpContext.Current.Request.Url.Port;
        string UrlOK = "http:"+url+"/"+url22+ "/TableTring/index";

    }
</head>
<body style="padding:0px;background:#EAEEF5;">
    <div id="pageloading"></div>
    <div id="topmenu" class="l-topmenu">
        <div style="text-align:center;">
            <h1>XXX后台管理系統</h1>
        </div>
    </div>
    <div id="layout1" style="width:99.2%; margin:0 auto; margin-top:4px; ">
        <div position="left" title="菜單列表" id="accordion1">
            <div title="菜單一">
                <a class="l-link" href="javascript:f_addTab('1','表格分頁','http://localhost:62545/Admin/TableTring/index')">表格分頁</a>
                <a class="l-link" href="javascript:f_addTab('2','1子菜單二','http://www.cnblogs.com/w5942066/')">1子菜單二好</a>
                <a class="l-link" href="javascript:f_addTab('3','1子菜單三','http://localhost:62545/Admin/TableTring/index')">1子菜單三很好</a>
                <a class="l-link" href="javascript:f_addTab('4','1子菜單四','http://localhost:62545/Admin/TableTring/index')">1子菜單四相當好</a>
            </div>
            <div title="菜單二">
                <a class="l-link" href="javascript:f_addTab('5','2子菜單一','http://localhost:62545/Admin/TableTring/index')">2子菜單一</a>
                <a class="l-link" href="javascript:f_addTab('6','2子菜單二','http://localhost:62545/Admin/TableTring/index')">2子菜單二</a>
                <a class="l-link" href="javascript:f_addTab('7','2子菜單三','http://localhost:62545/Admin/TableTring/index')">2子菜單三</a>
                <a class="l-link" href="javascript:f_addTab('8','2子菜單四','http://localhost:62545/Admin/TableTring/index')">2子菜單四</a>
            </div>
            <div title="菜單三">
                <a class="l-link" href="javascript:f_addTab('9','3子菜單一',' http://localhost:62545/Admin/TableTring/index')">3子菜單一</a>
                <a class="l-link" href="javascript:f_addTab('10','3子菜單二','http://localhost:62545/Admin/TableTring/index')">3子菜單二</a>
                <a class="l-link" href="javascript:f_addTab('11','3子菜單三','http://localhost:62545/Admin/TableTring/index')">3子菜單三</a>
                <a class="l-link" href="javascript:f_addTab('12','3子菜單四','http://localhost:62545/Admin/TableTring/index')">3子菜單四</a>
            </div>
            <div title="菜單四">
                <a class="l-link" href="javascript:f_addTab('13','4子菜單一','http://localhost:62545/Admin/TableTring/index')">4子菜單一</a>
                <a class="l-link" href="javascript:f_addTab('14','4子菜單二','http://localhost:62545/Admin/TableTring/index')">4子菜單二</a>
                <a class="l-link" href="javascript:f_addTab('15','4子菜單三','http://localhost:62545/Admin/TableTring/index')">4子菜單三</a>
                <a class="l-link" href="javascript:f_addTab('16','4子菜單四','http://localhost:62545/Admin/TableTring/index')">4子菜單四</a>
            </div>
        </div>
        <div position="center" id="framecenter">
            <div tabid="home" title="我的主頁">
                @*<iframe frameborder="0" name="home" id="home" >*@
                @*</iframe>*@
                <div tabid="home" title="我的主頁">
                    <iframe frameborder="0" name="home" id="home" src="http://www.cnblogs.com/w5942066/"></iframe>
                </div>
            </div>
        </div>

    </div>
    <div style="height:32px; line-height:32px; text-align:center;">
        <h4>版權信息！Admin Test  Copyright © 2011-2014</h4>
    </div>
    <div style="display:none"></div>
</body>
</html>

 

里面的HomeMain的js跟css文件是里面原有的樣式跟js，為了頁面清爽我單獨拿了出來。里面LigerUI所需要的js都要添加，我是把下載下來的LigerUI里面Source文件夾下面的Lib文件直接拷貝到項目中的Script文件夾下面。

HomeMain的css跟js寫在Script文件夾下面 ，還要把里面的一個圖片拷貝進來不然運行的時候回報錯（不是什么大錯就是找不到加載中這個圖片的路徑）。首頁布局里面很清楚的看得出來上、左右，下（版權）。<div tabid="home" title="我的主頁">這個下面寫的是默認的界面 不可以被關閉。

可以是html文件 也可以外接一個連接。接互聯網上的網址 有時出來 有時候出不來 一般都是不允許的，框架里面是不允許顯示別的網址里面的東西（要是可以那這個框架豈不是跟瀏覽器一樣了哈哈）。里面的菜單可以寫死 也可以保存在數據庫里面后台獲取拼接出來看個人的愛好。

里面的菜單所對應的界面想列表頁面都是訪問的url+端口+Admin+控制器+方法 這里不要忘記了加Admin我弄的時候就是沒有加上Admin給我找了一晚上的錯誤，案例手里面寫上@UrlOK也應該可以 但是路徑前面會加上以前的Url這里下來還要研究一下。 

HomeMain.js

var tab = null;
var accordion = null;
var tree = null;
var tabItems = [];
$(function () {
    //布局
    $("#layout1").ligerLayout({
        leftWidth: 190,
        height: '100%',
        heightDiff: -34,
        space: 0,
        onHeightChanged: f_heightChanged,
        onLeftToggle: function () {
            tab && tab.trigger('sysWidthChange');
        },
        onRightToggle: function () {
            tab && tab.trigger('sysWidthChange');
        }
    });

    var height = $(".l-layout-center").height();

    //Tab
    tab = $("#framecenter").ligerTab({
        height: height,
        showSwitchInTab: true,
        showSwitch: true,
        onAfterAddTabItem: function (tabdata) {
            tabItems.push(tabdata);
            saveTabStatus();
        },
        onAfterRemoveTabItem: function (tabid) {
            for (var i = 0; i < tabItems.length; i++) {
                var o = tabItems[i];
                if (o.tabid == tabid) {
                    tabItems.splice(i, 1);
                    saveTabStatus();
                    break;
                }
            }
        },
        onReload: function (tabdata) {
            var tabid = tabdata.tabid;
        }
    });

    //面板
    $("#accordion1").ligerAccordion({
        height: height - 24, speed: null
    });

    $(".l-link").hover(function () {
        $(this).addClass("l-link-over");
    }, function () {
        $(this).removeClass("l-link-over");
    });
    //樹
    //$("#tree1").ligerTree({
    //    data: indexdata,
    //    checkbox: false,
    //    slide: false,
    //    nodeWidth: 120,
    //    attribute: ['nodename', 'url'],
    //    render: function (a) {
    //        if (!a.isnew) return a.text;
    //        return '<a href="' + a.url + '" target="_blank">' + a.text + '</a>';
    //    },
    //    onSelect: function (node) {
    //        if (!node.data.url) return;
    //        if (node.data.isnew) {
    //            return;
    //        }
    //        var tabid = $(node.target).attr("tabid");
    //        if (!tabid) {
    //            tabid = new Date().getTime();
    //            $(node.target).attr("tabid", tabid)
    //        }
    //        f_addTab(tabid, node.data.text, node.data.url);
    //    }
    //});

    function openNew(url) {
        var jform = $('#opennew_form');
        if (jform.length == 0) {
            jform = $('<form method="post" />').attr('id', 'opennew_form').hide().appendTo('body');
        } else {
            jform.empty();
        }
        jform.attr('action', url);
        jform.attr('target', '_blank');
        jform.trigger('submit');
    };


    tab = liger.get("framecenter");
    accordion = liger.get("accordion1");
    tree = liger.get("tree1");
    $("#pageloading").hide();

    css_init();
    pages_init();
});
function f_heightChanged(options) {
    if (tab)
        tab.addHeight(options.diff);
    if (accordion && options.middleHeight - 24 > 0)
        accordion.setHeight(options.middleHeight - 24);
}
function f_addTab(tabid, text, url) {
    tab.addTabItem({
        tabid: tabid,
        text: text,
        url: url,
        callback: function () {
            //addShowCodeBtn(tabid);
        }
    });
}
//function addShowCodeBtn(tabid) {
//    var viewSourceBtn = $('<a class="viewsourcelink" href="javascript:void(0)">查看源碼</a>');
//    var jiframe = $("#" + tabid);
//    viewSourceBtn.insertBefore(jiframe);
//    viewSourceBtn.click(function () {
//        showCodeView(jiframe.attr("src"));
//    }).hover(function () {
//        viewSourceBtn.addClass("viewsourcelink-over");
//    }, function () {
//        viewSourceBtn.removeClass("viewsourcelink-over");
//    });
//}
function showCodeView(src) {
    $.ligerDialog.open({
        title: '源碼預覽',
        url: 'dotnetdemos/codeView.aspx?src=' + src,
        width: $(window).width() * 0.9,
        height: $(window).height() * 0.9
    });

}

function pages_init() {
    var tabJson = $.cookie('liger-home-tab');
    if (tabJson) {
        var tabitems = JSON2.parse(tabJson);
        for (var i = 0; tabitems && tabitems[i]; i++) {
            f_addTab(tabitems[i].tabid, tabitems[i].text, tabitems[i].url);
        }
    }
}
function saveTabStatus() {
    $.cookie('liger-home-tab', JSON2.stringify(tabItems));
}
function css_init() {
    var css = $("#mylink").get(0), skin = getQueryString("skin");
    $("#skinSelect").val(skin);
    $("#skinSelect").change(function () {
        if (this.value) {
            location.href = "index.htm?skin=" + this.value;
        } else {
            location.href = "index.htm";
        }
    });


    if (!css || !skin) return;
    skin = skin.toLowerCase();
    $('body').addClass("body-" + skin);
    $(css).attr("href", skin_links[skin]);
}
function getQueryString(name) {
    var now_url = document.location.search.slice(1), q_array = now_url.split('&');
    for (var i = 0; i < q_array.length; i++) {
        var v_array = q_array[i].split('=');
        if (v_array[0] == name) {
            return v_array[1];
        }
    }
    return false;
}
function attachLinkToFrame(iframeId, filename) {
    if (!window.frames[iframeId]) return;
    var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
    var fileref = window.frames[iframeId].document.createElement("link");
    if (!fileref) return;
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", filename);
    head.appendChild(fileref);
}
function getLinkPrevHref(iframeId) {
    if (!window.frames[iframeId]) return;
    var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
    var links = $("link:first", head);
    for (var i = 0; links[i]; i++) {
        var href = $(links[i]).attr("href");
        if (href && href.toLowerCase().indexOf("ligerui") > 0) {
            return href.substring(0, href.toLowerCase().indexOf("lib"));
        }
    }
}

 

 f_addTab這個方法就是點擊左邊，內容在右邊顯示  調用的時候  <a class="l-link" href="javascript:f_addTab('1','表格分頁','http://localhost:62545/Admin/TableTring/index')">表格分頁</a>這是在框架里面顯示。要在外面顯示

 <a class="l-link" href="地址" target="_blank">標題</a> 就跟平常的一樣里面的各個JS害的慢慢研究作用

 

HomeMain.css

  body,html{height:100%;}
    body{ padding:0px; margin:0;   overflow:hidden;}  
    .l-link{ display:block; height:26px; line-height:26px; padding-left:10px; text-decoration:none; color:#333; list-style:none; border-bottom: 1px dashed #d2d2d2;}
    .l-link2{text-decoration:underline; color:white; margin-left:2px;margin-right:2px;}
    .l-layout-top{background:#102A49; color:White;}
    .l-layout-bottom{ background:#E5EDEF; text-align:center;}
    #pageloading{position:absolute; left:0px; top:0px; background:white url('loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}
    .l-link{ display:block; line-height:22px; height:22px; padding-left:16px; margin:4px;}
    .l-link-over{ background:#a5fcfe;} 
    .l-winbar{ background:#2B5A76; height:30px; position:absolute; left:0px; bottom:0px; width:100%; z-index:99999;}
    .space{ color:#E7E7E7;}
    /* 頂部 */ 
    .l-topmenu{ margin:0; padding:0; height:31px; line-height:31px; background:url('lib/images/top.jpg') repeat-x bottom;  position:relative; border-top:1px solid #1D438B;  }
    .l-topmenu-logo{ color:#E7E7E7; padding-left:35px; line-height:26px;background:url('lib/images/topicon.gif') no-repeat 10px 5px;}
    .l-topmenu-welcome{  position:absolute; height:24px; line-height:24px;  right:30px; top:2px;color:#070A0C;}
    .l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline} 
    .body-gray2014 #framecenter{margin-top:3px;}
    .viewsourcelink { background:#B3D9F7;  display:block; position:absolute; right:10px; top:3px; padding:6px 4px; color:#333; text-decoration:underline;}
    .viewsourcelink-over {   background:#81C0F2;}
    .l-topmenu-welcome label {color:white;  }
    #skinSelect { margin-right: 6px;}

 里面有鼠標點擊菜單的效果看個人愛好去調。

5、現在的路由還是前台的首頁 要寫了跳轉到后台打開App_Start目錄下的RouteConfig文件配置路由

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace WyMVCLigerUIDemo20180626
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
                 //namespaces: new[] { "WyMVCLigerUIDemo20180626.Areas.Admin.Controllers" }    //默認進入后台
                 namespaces: new[] { "WyMVCLigerUIDemo20180626.Controllers" }//默認前台
            );
        }
    }
}

 

我這里是先進入前台，再在前台網址里面加上/Admin 就能進入到后台，所以還要配置一下Areas區域下面Admin中的AdminAreaRegistration文件

using System.Web.Mvc;

namespace WyMVCLigerUIDemo20180626.Areas.Admin
{
    public class AdminAreaRegistration : AreaRegistration 
    {
        //public override string AreaName 
        //{
        //    get 
        //    {
        //        return "Admin";
        //    }
        //}
        public override string AreaName => "Admin";
        public override void RegisterArea(AreaRegistrationContext context) 
        {
            context.MapRoute(
                "Admin_default",
                "Admin/{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = UrlParameter.Optional },
                 new[] { "WyMVCLigerUIDemo20180626.Areas.Admin.Controllers" } //這一句要加上
            );
        }
    }
}

為了進去能正常先把字面自帶的模板去了 不要用

注釋了或者刪除了就可以，前台頁面配置跟路由中的一樣就可以 默認控制器Home  頁面Index。一樣的吧Views下面的_ViewStart.cshtml文件注釋了

6、運行項目

在地址欄后面加上/Admin進入后台 寫了登錄驗證跳轉登錄界面

你加了/Admin后面進入到登錄界面會補全的用戶admin密碼admin888在后台Home界面是寫好了的

看分頁信息

 

 

7、更改JS樣式讓菜單列表不充滿整個左邊

開始的時候界面是這個樣子的

他是填充滿整個左邊的菜單 個人看着不舒服 左找右找才知道是JS的問題

在網頁調了半天才知道是這個控制  在里面liger.all.js里面查找l-accordion-content  找到1760行把里面這個要么把前面的點刪除了 要么后面加上一點內容不讓他控制l-accordion-content這個樣式。注視了不行會出錯 還在查找中。

總結：工作的原因沒多少時間研究這些了，在大牛面前也是小菜一碟，用着別人的框架沒有自己深入研究我覺得沒意思，只知此然不知其所以然作為承租原來說有點悲哀了。只會復制加粘貼終究一事無成。關於后面的表格數據 搜索，新增、編輯還有系統的權限設置、參數配置、界面調整、樣式等等這些慢慢研究，學而不止！代碼我方群里有興趣的小伙伴可以研究研究。歡迎指出不足之處悉聽教導！