我和小美的擼碼日記(1)之軟件也需靠臉吃飯，帶您作張明星臉（附後臺經典框架 DEMO 下載）

衆所周知程序員得靠技術吃飯，可是真的光靠技術就夠了嗎？Teacher蒼，一位德藝雙馨的藝術家,論技術她天然是爐火純青，我以爲她桃李遍天下的緣由不只限於些，試想若是Teacher蒼長得跟鳳姐同樣再帶點鄉村可愛非主流的打扮，屏幕前的您還會一次又一次研習她的教學視頻麼？這說明外表仍是很是重要的。其實軟件也正是這樣，那些須要面向客戶的產品，就算你的架構再牛逼，算法再駭人聽聞，可是前端界面不夠漂亮時客戶可能根本對你的產品徹底不感興趣，縱使您的技術超越Teacher蒼都無濟於事了。好了！先自我介紹一下，我叫劉尼瑪是一個三年碼齡的程序猿，在同事眼中擼得一手好碼。最近公司來了一位實習生小妹名叫曹尼美，由我帶她作開發。那些爲前端感到頭疼的童鞋們帶好小板凳，咱們一塊兒來作一個高大上的BS後臺管理界面。

1、 整體佈局

      「尼瑪哥，那套OA的二次開發黃總讓我來作，她嫌之前的界面太醜了，可是我不知道怎麼改呀！」

      「小美，不要怕，哥來幫你看看。」

      「恩，的確是很差看，你看下菜單導航仍是那種古老的下拉式，並且頁面也不是多窗體，打開一個新菜單上一個頁面就跳轉過去了，用戶使用起來也不方便，給你一個前端UI你按這個改.」

  

2、後臺表設計

      「尼瑪哥，你給我這個東西，我仍是不知道怎麼用呀！」

      「你哪裏不懂？」

      「哪裏都不懂，不知道怎麼下手。」

      「拿你沒辦法，好吧主體界面出來了，咱們先把導航的菜單作好，先來設計下菜單表。」

      「尼瑪哥，不就是作個菜單導航嗎？爲何要建表？」

      「小美，表是確定要建的，難道你還想像之前那樣，新作了一個功能，就改一下頁面嗎？那樣太不靈活了，咱們能夠把菜單項的相關信息都存到表裏面動態加載出來。那樣之後好擴展，加了新功能之後也不用改導航菜單，系統就自動加載出來了。」

      表結構以下：

     

 

3、動態顯示導航菜單

    

　　「尼瑪哥，表建好了就能夠了麼？我運行下程序看看。」

     「固然不是呀，小美，難道我倆結婚了立刻就有小孩了麼，確定後面還須要作一些事情的。要作好前端你首先要學會使用F12這個鍵。咱們打開首頁，按下F12鍵，全部的html代碼就出來了。」

      

      「你看看，F12鍵很好用吧，不論外面套了多少件衣服，F12一按，乾乾淨淨的全都展示在咱們眼前，其實再炫的頁面也都是這一個個html標記組合而成的。」

     「咱們看一下菜單，說明白了其實就是一個帶圖標的超連接，點完超鏈接就打開一個iframe,在iframe裏面顯示連接頁面。」

     「如今你就明白爲何要建一個表了吧，其實每一個字段裏存放的就是那個菜單的一件衣服，圖標是什麼、MVC路徑指向哪兒、菜單名稱是什麼。」

     「明白啦！尼瑪哥，剛剛你教我脫衣服，如今教我怎麼穿回去吧。」

     「小美，這個基本功要增強一下！你如今技術不行呀！脫以前格式以下」

<li title="應用配置" onclick="AddTabMenu('c108ef45-b8b6-493e-951a-9050706e2bba', '/CommonModule/SystemSetup/Index', '應用配置',  'cog.png','true');linkAddTabMenu()">
<img src="/Content/Images/Icon16/cog.png"/>
<a>
<span>應用配置</span>
</a>
</li>

    「幾個關鍵屬性的值都取到了，那麼咱們就把html標籤跟值拼接起來就獲得上面這個菜單項，因爲有多個菜單項因此要來一個循環，一個個菜單項拼接起來再放放整個頁面，下面這段JS代碼就能夠起到這個做用」

  var accordionJson = "";
        function GetAccordionMenu() {
            var html = "";
            getAjax("/Home/LoadAccordionMenu", "", function (data) {
                accordionJson = eval("(" + data + ")");
                $.each(accordionJson, function (i) {
                    if (accordionJson[i].ParentId == '9f8ce93a-fc2d-4914-a59c-a6b49494108f') {
                        html += "<li title=" + accordionJson[i].FullName + ">";
                        html += "<div class=\"link\"><img src='/Content/Images/Icon16/" + accordionJson[i].Icon + "'>";
                        html += "<span>" + accordionJson[i].FullName + "</span><i class=\"chevron-down\"></i>";
                        html += "</div>";
                        html += GetSubmenu(accordionJson[i].ModuleId, "b-children");
                        html += "</li>";
                    }
                });
            })
            $("#accordion").append(html);
        }
        //導航子菜單
        function GetSubmenu(ModuleId, _class) {
            var submenu = "<ul class=\"submenu " + _class + "\">";
            $.each(accordionJson, function (i) {
                if (accordionJson[i].ParentId == ModuleId) {
                    if (IsBelowMenu(accordionJson[i].ModuleId) > 0) {
                        submenu += "<li title=" + accordionJson[i].FullName + "><a class=\"link\"><img src='/Content/Images/Icon16/" + accordionJson[i].Icon + "'><span>" + accordionJson[i].FullName + "</span><i class=\"submenu-chevron-down\"></i></a>";
                        submenu += GetSubmenu(accordionJson[i].ModuleId, "c-children")
                        submenu += "</li>";
                    } else {
                        submenu += "<li class='linkAddTabMenu' title=" + accordionJson[i].FullName + " onclick=\"AddTabMenu('" + accordionJson[i].ModuleId + "', '" + accordionJson[i].Location + "', '" + accordionJson[i].FullName + "',  '" + accordionJson[i].Icon + "','true');linkAddTabMenu()\"><img src='/Content/Images/Icon16/" + accordionJson[i].Icon + "'><a><span>" + accordionJson[i].FullName + "</span></a></li>";
                    }
                }
            });
            submenu += "</ul>";
            return submenu;
        }

 

      「尼瑪哥，這下我明白了，你是經過遍歷Json數據行，把字段取出來，再用「+」來拼接字符串，好神奇呀。能夠這個Json怎麼一會兒就獲得了後臺數據呢？」

      「小美，不錯呀，你如今能看懂JS代碼了，你問得好，這個Json不是原本就有，而是經過一種與服務端交互的技術實現，通常我把他叫作AV技術。」

      「尼瑪哥，你壞死了，人家平時不怎麼看電影的不知道你在說些什麼東西。」

      「你不知道我就講一下，AV是Ajax visit」經過Ajax的方式來訪問後臺數據。Jquery已經很好的封裝了訪問方法，咱們只用傳入訪問地址和參數，後臺就能夠給咱們傳回Json數據了。你看一下後臺方法是這樣的」

    

        /// <summary>
        /// 加載手風琴菜單
        /// </summary>
        /// <returns></returns>
        public ActionResult LoadAccordionMenu()
        {
            List<Base_Module> list = base_modulebll.GetList().FindAll(t => t.Enabled == 1);
            return Content(list.ToJson().Replace("&nbsp;", ""));
        }

    public class Base_ModuleBll : RepositoryFactory<Base_Module>
    {
        public List<Base_Module> GetList()
        {
            return this.Repository().FindList("ORDER BY ParentId ASC,SortCode ASC");
        }
    }

          「小美，看看AV技術很強大吧，之後要多多練習呀，技術好點對你有好處的。」

          「尼瑪哥，今天真是長知識了，如今JS方法我基本能看懂了，不懂的再查下jquery的API。那窗體的打開是經過AddTabMenu()這個方法實現的吧，我想我本身看看代碼都會明白的。」

          「那你如今給我講下一個知識點吧。」

          「小美，你剛剛只是看了，本身沒有動手去作，這是有差距的，代碼你先拿去玩一玩。下一個知識點下週講，姿式教多了你一會兒也記不住，一招招練噢。連接地址放在下面，你本身去下載吧。」

        

         「尼瑪哥，源碼有問題呀！根本運行不了，你隨便從網上下的吧！！！」

         「我看看，我去，你config字符串都沒改，確定連不上數據庫呀你把LeaRun.Framework V4.1\LeaRun.WebApp\Web.Config裏數據庫鏈接字符串改了就行了。」

        源碼下載地址：http://download.csdn.net/detail/jeff95599/8248247

 

      其實篇博客是我用新申請的小號發的，前幾天發過一篇《如何提升碼農產量--mvc+jquery框架造成之旅(整體介紹)》當時講了後結會一個個功能來說並提供對應的demo給你們下載，博客簽名處有放了公司網站的連接，後來有聽說有博友舉報，結果讓管理員大大給處理了大號無法發博客。當時比較生氣，原本想不寫了，可是想一想答應過的事就要作到，並且當時評論底下求源碼的也是People mountain people sea。因此我仍是從新搞了個馬甲發了這篇博文，劉尼瑪還要教小美不少姿式有興趣的朋友請繼續關注;高手請繞道。

另外管理大大，也請明鑑，我在博文中沒有放連接、簽名欄也沒有，純粹的作技術交流。