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

一、 總體布局

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

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

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

??

二、后臺(tái)表設(shè)計(jì)

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

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

???? ?“哪里都不懂，不知道怎么下手。”

????? “拿你沒辦法，好吧主體界面出來了，我們先把導(dǎo)航的菜單做好，先來設(shè)計(jì)下菜單表。”

????? “尼瑪哥，不就是做個(gè)菜單導(dǎo)航嗎？為什么要建表？”

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

????? 表結(jié)構(gòu)如下：

?????

?

三、動(dòng)態(tài)顯示導(dǎo)航菜單

????

　　“尼瑪哥，表建好了就可以了么？我運(yùn)行下程序看看。”

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

??????

????? “你看看，F12鍵很好用吧，不論外面套了多少件衣服，F12一按，干干凈凈的全都展現(xiàn)在我們眼前，其實(shí)再炫的頁面也都是這一個(gè)個(gè)html標(biāo)記組合而成的。”

???? “我們看一下菜單，說明白了其實(shí)就是一個(gè)帶圖標(biāo)的超鏈接，點(diǎn)完超連接就打開一個(gè)iframe,在iframe里面顯示鏈接頁面。”

???? “現(xiàn)在你就明白為什么要建一個(gè)表了吧，其實(shí)每個(gè)字段里存放的就是那個(gè)菜單的一件衣服，圖標(biāo)是什么、MVC路徑指向哪兒、菜單名稱是什么。”

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

???? “小美，這個(gè)基本功要加強(qiáng)一下！你現(xiàn)在技術(shù)不行呀！脫之前格式如下”

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

??? “幾個(gè)關(guān)鍵屬性的值都取到了，那么我們就把html標(biāo)簽跟值拼接起來就得到上面這個(gè)菜單項(xiàng)，由于有多個(gè)菜單項(xiàng)所以要來一個(gè)循環(huán)，一個(gè)個(gè)菜單項(xiàng)拼接起來再放放整個(gè)頁面，下面這段JS代碼就可以起到這個(gè)作用”

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);}//導(dǎo)航子菜單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數(shù)據(jù)行，把字段取出來，再用“+”來拼接字符串，好神奇呀。可以這個(gè)Json怎么一下子就得到了后臺(tái)數(shù)據(jù)呢？”

????? “小美，不錯(cuò)呀，你現(xiàn)在能看懂JS代碼了，你問得好，這個(gè)Json不是本來就有，而是通過一種與服務(wù)端交互的技術(shù)實(shí)現(xiàn)，一般我把他叫做AV技術(shù)。”

??????“尼瑪哥，你壞死了，人家平時(shí)不怎么看電影的不知道你在說些什么東西。”

????? “你不知道我就講一下，AV是Ajax visit”通過Ajax的方式來訪問后臺(tái)數(shù)據(jù)。Jquery已經(jīng)很好的封裝了訪問方法，我們只用傳入訪問地址和參數(shù)，后臺(tái)就可以給我們傳回Json數(shù)據(jù)了。你看一下后臺(tái)方法是這樣的”

????

/// <summary>/// 加載手風(fēng)琴菜單/// </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技術(shù)很強(qiáng)大吧，以后要多多練習(xí)呀，技術(shù)好點(diǎn)對(duì)你有好處的。”

????????? “尼瑪哥，今天真是長知識(shí)了，現(xiàn)在JS方法我基本能看懂了，不懂的再查下jquery的API。那窗體的打開是通過AddTabMenu()這個(gè)方法實(shí)現(xiàn)的吧，我想我自己看看代碼都會(huì)明白的。”

????????? “那你現(xiàn)在給我講下一個(gè)知識(shí)點(diǎn)吧。”

????????? “小美，你剛剛只是看了，自己沒有動(dòng)手去做，這是有差距的，代碼你先拿去玩一玩。下一個(gè)知識(shí)點(diǎn)下周講，姿勢教多了你一下子也記不住，一招招練噢。鏈接地址放在下面，你自己去下載吧。”

????????

???????? “尼瑪哥，源碼有問題呀！根本運(yùn)行不了，你隨便從網(wǎng)上下的吧！！！”

???????? “我看看，我去，你config字符串都沒改，肯定連不上數(shù)據(jù)庫呀你把LeaRun.Framework V4.1\LeaRun.WebApp\Web.Config里數(shù)據(jù)庫連接字符串改了就好了。”

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

?

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

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

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/liuleama/p/4128307.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。