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

一、 總體布局

????? “尼瑪哥，那套OA的二次開發黃總讓我來做，她嫌以前的界面太丑了，但是我不知道怎么改呀！”

????? “小美，不要怕，哥來幫你看看。”

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

??

二、后臺表設計

????? “尼瑪哥，你給我這個東西，我還是不知道怎么用呀！”

????? “你哪里不懂？”

???? ?“哪里都不懂，不知道怎么下手?！?/p>

????? “拿你沒辦法，好吧主體界面出來了，我們先把導航的菜單做好，先來設計下菜單表。”

????? “尼瑪哥，不就是做個菜單導航嗎？為什么要建表？”

????? “小美，表是肯定要建的，難道你還想像以前那樣，新做了一個功能，就改一下頁面嗎？那樣太不靈活了，我們可以把菜單項的相關信息都存到表里面動態加載出來。那樣以后好擴展，加了新功能以后也不用改導航菜單，系統就自動加載出來了。”

????? 表結構如下：

?????

?

三、動態顯示導航菜單

????

　　“尼瑪哥，表建好了就可以了么？我運行下程序看看?！?/p>

???? “當然不是呀，小美，難道我倆結婚了馬上就有小孩了么，肯定后面還需要做一些事情的。要做好前端你首先要學會使用F12這個鍵。我們打開首頁，按下F12鍵，所有的html代碼就出來了。”

??????

????? “你看看，F12鍵很好用吧，不論外面套了多少件衣服，F12一按，干干凈凈的全都展現在我們眼前，其實再炫的頁面也都是這一個個html標記組合而成的?！?/p>

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

???? “現在你就明白為什么要建一個表了吧，其實每個字段里存放的就是那個菜單的一件衣服，圖標是什么、MVC路徑指向哪兒、菜單名稱是什么?！?/p>

???? “明白啦！尼瑪哥，剛剛你教我脫衣服，現在教我怎么穿回去吧。”

???? “小美，這個基本功要加強一下！你現在技術不行呀！脫之前格式如下”

<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技術。”

??????“尼瑪哥，你壞死了，人家平時不怎么看電影的不知道你在說些什么東西?！?/p>

????? “你不知道我就講一下，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()這個方法實現的吧，我想我自己看看代碼都會明白的?！?/p>

????????? “那你現在給我講下一個知識點吧?！?/p>

????????? “小美，你剛剛只是看了，自己沒有動手去做，這是有差距的，代碼你先拿去玩一玩。下一個知識點下周講，姿勢教多了你一下子也記不住，一招招練噢。鏈接地址放在下面，你自己去下載吧?！?/p>

????????

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

???????? “我看看，我去，你config字符串都沒改，肯定連不上數據庫呀你把LeaRun.Framework V4.1\LeaRun.WebApp\Web.Config里數據庫連接字符串改了就好了?！?/p>

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

?

????? 其實篇博客是我用新申請的小號發的，前幾天發過一篇《如何提高碼農產量--mvc+jquery框架形成之旅(總體介紹)》當時講了后結會一個個功能來講并提供對應的demo給大家下載，博客簽名處有放了公司網站的鏈接，后來有據說有博友舉報，結果讓管理員大大給處理了大號沒法發博客。當時比較生氣，本來想不寫了，但是想想答應過的事就要做到，而且當時評論底下求源碼的也是People mountain people sea。所以我還是重新搞了個馬甲發了這篇博文，劉尼瑪還要教小美很多姿勢有興趣的朋友請繼續關注;高手請繞道。

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

?

?

轉載于:https://www.cnblogs.com/liuleama/p/4128307.html

總結

以上是生活随笔為你收集整理的我和小美的撸码日记(1)之软件也需靠脸吃饭，带您做张明星脸（附后台经典框架 DEMO 下载）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。