The software also needs to rely on the face to eat, take you to make a star face, also need the star face

The software also needs to rely on the face to eat, take you to make a star face, also need the star face

As we all know, programmers have to rely on technology to eat, but is it true that technology alone is enough? Teacher Cang, an artist of deyi shuangxin, said that she is naturally a pure technology. I think she is not limited to the following reasons, imagine if Teacher, like Fengjie, adds a cute non-mainstream dress in the country, will you study her teaching video again and again in front of the screen? This shows that appearance is very important. In fact, the same is true for software. for products that need to be oriented to customers, even if your architecture is awesome, the algorithms will be astonishing, however, when the front-end interface is not beautiful, the customer may not be interested in your product at all, even if your technology surpasses Teacher. Okay! First, let me introduce myself. My name is Liu Nima, a three-year-old programmer, who is very lucky in my colleagues' eyes. Recently, an intern named Cao nimei came from the company. I took her for development. The children's shoes that have headaches for the front end bring a small bench. Let's make a high BS background management interface together.

I. Overall Layout

"Nima Ge, the second development of the OA, Huang always asked me to do it. She thought the previous interface was too ugly, but I don't know how to change it !"

"Xiaomei, don't be afraid. Brother will help you ."

"Well, it is really difficult to see. You can see that the menu navigation is still the old drop-down type, and the page is not multiple forms. When you open a new menu, a page jumps over, it is not convenient for users to use it. You can change the front-end UI according to this."

Ii. Background Table Design

"Nima, you gave me this thing. I still don't know how to use it !"

"Where do you not understand ?"

"I don't know where to start ."

"You can't help it. Okay, the main interface is coming out. Let's do the navigation menu first, and design the menu table first ."

"Nima Ge, isn't it just a menu navigation? Why should we create a table ?"

"Xiaomei, the table must be created. Do you want to change the page if you have created a new function as before? This is too inflexible. We can dynamically load all menu item information into the table. In this way, the system will be automatically loaded without changing the navigation menu after new functions are added ."

The table structure is as follows:

 

3. dynamically display navigation menus

"Nima Ge, can the table be created? I will run the program to see ."

"Of course not, Xiaomei. Do we have children right away when we get married? We must do something later. To make the front-end ready, you must first learn to use the F12 key. We open the home page and press the F12 key. All the html code is displayed ."

"Look, the F12 key is very easy to use. No matter how many pieces of clothing are put on the outside, F12 is pressed, and all the pieces are clearly displayed in front of our eyes, in fact, the dazzling pages are also composed of these html tags."

"Let's take a look at the menu, which means that it is actually a hyperlink with icons. After clicking the hyperlink, an iframe will be opened and the link page will be displayed in the iframe ."

"Now you understand why you want to create a table. In fact, each field stores a piece of clothing in the menu, what is the icon, where the MVC path points to, and what is the menu name."

"Understand! Nima, You just taught me how to take my clothes off, and now teach me how to wear it back ."

"Xiaomei, this basic skill should be enhanced! You are not technically competent now! The format is as follows"

<Li title = "application configuration" onclick = "AddTabMenu ('c0000ef45-b8b6-493e-951a-9050706e2bba ','/CommonModule/SystemSetup/Index', 'application configuration', 'cog.png ', 'true'); linkAddTabMenu () ">  <a> <span> application configuration </span> </a> </li>

"When the values of several key attributes are obtained, We splice the html Tag and value to obtain the preceding menu item. Because there are multiple menu items, we need to create a loop, the menu items are spliced and then placed on the entire page. The following JS Code can play this role"

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 \ ">  <I class = \" chevron-down \ "> </I>"; html + = "</div> "; html + = GetSubmenu (accordionJson [I]. moduleId, "B-children"); html + = "</li>" ;}}) ;}$ ("# accordion "). append (html);} // navigation sub-menu 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 \ ">  <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 () \">  <a> <span>" + accordionJson [I]. fullName + "</span> </a> </li>" ;}}}); submenu + = "</ul>"; return submenu ;}

 

"Nima Ge, now I understand that it's amazing that you traverse Json data rows, retrieve fields, and then splice strings with" +. How can I get the background data in this Json file at once ?"

"Xiaomei, good! You can understand the JS Code now. You have a good question. This Json is not originally available, but implemented through a technology that interacts with the server, I usually call it AV Technology."

"Nima, you are dead. People don't know what you are talking about when they do not watch movies ."

"You don't know. I just want to talk about it. AV Is Ajax visit" to access background data through Ajax. Jquery has well encapsulated the access method. We only need to pass in the access address and parameters, and the background can return Json data to us. The background method is as follows"

/// <Summary> /// load the accordion menu /// </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 ");}}

"Xiaomei, let's see if the AV Technology is very powerful. We need to practice more in the future. It is good for you to have a better technology ."

"Nima Ge, today is really a long time to learn. Now I can basically understand the JS method. If I don't understand it, check jquery's API. The open form is implemented through the AddTabMenu () method. I think I will understand it by myself ."

"You can tell me the next knowledge point now ."

"Xiaomei, you just read it and did not do it yourself. There is a gap. You should take the code for fun first. The next knowledge point will be introduced next week. You can't remember how much posture is taught. Put the link address below and download it by yourself ."

"Nima Ge, the source code has a problem! It cannot run at all. You can just download it from the internet !!!"

"Let me see. I went there. You haven't changed the config string. You certainly won't be able to connect to the database. framework V4.1 \ LeaRun. webApp \ Web. modify the database connection string in Config."

The source code is more than 60 MB and has been uploaded to Baidu online storage ,:Http://pan.baidu.com/s/14e74i

 

In fact, I used my new application to publish a blog post. I posted an article titled how to increase the yield of coders-a journey of mvc + jquery framework formation (General Introduction) a few days ago) after talking about it, I will talk about the functions one by one and provide corresponding demos for you to download. There is a link to the company's website in the blog signature, and it is said that some bloggers reported it later, as a result, the Administrator was unable to post a blog on a large scale. At that time, I was angry. I did not want to write it, but I had to think about what I had promised. At that time, People mountain people sea was the one who asked for the source code. So I made a new vest and sent this blog post. Liu Nima also wants to teach Xiaomei many friends who are interested in the posture to continue to pay attention to it.

In addition, the management is huge. Please note that I have not put any links or signature columns in my blog posts, so I am purely engaged in technical exchanges.