Ligerui首页的快速搭建

一、目录

　1、多层架构+MVC+EF+AUTOFAC+AUTOMAPPER；

　2、MVC中验证码的实现（经常用，记录备用）

　3、Ligerui首页的快速搭建

　4、Ligerui Grid组件--学生信息列表。

二、正文

　 （嘿，写完了才发现这篇文章挺水。本来还想说说那些JS代码的，想想还是不继续水了……但是写都写了，凑个数，哈哈）

　 大多数信息管理系统首页都是ligerui官网首页这个模样，左边导航，右边一个iframe。高级点的带选项卡。

　　

　　在这个首页中，包含了ligerui很多组件：ligerLayout（布局）、Tab（选项卡）、ligerAccordion（面板）、ligerTree（树）。ligerLayout将页面划分块，一般就是上下左右中（有的控件，如easyui是东南西北中），主要菜单那一块就是左，右边内容就是右，也可能是中（隐藏右边）。Tab对应图中“我的主页”，操作观感和浏览器顶部选项卡一样。ligerAccordion在图中对应的是主要菜单、功能列表、应用场景、实验室，点击可以展开或者隐藏。ligerTree嘛就是功能列表下面那一堆喽。

　　那我们的标题是“快速构建”，那咋个算快呢？Follow me：

　　First Step:先去这下载ligerui源码：http://git.oschina.net/ligerui/LigerUI/，下载来的文件把Source文件夹拷贝进我们的VS解决方案当中；

　　Second Step:第一篇文章说过，我们UI层是基于MVC的，那自然需要在任意Controller下新建一个action，比如我们是这样的：

  public class LigerUIController : Controller
     {
         //
         // GET: /Admin/LigerUI/

         public ActionResult Index()
         {
             return View();
         }

     }

LigerUIController

　　接着，在Index action方法体内右键添加视图Index。

　　Third Step:来到我们的ligerui官网首页鼠标右键：

　　点击过后框架的代码就出来喽，全部复制到我们第二步新建的Index视图当中。到这，已经成功一大半。

　　Fourth Step:MVC里头因为引入了路由机制，所以我们所复制代码中引入的JS文件路径：

　　需要修改：

　　上图有展现了引入的两种常用方式，第一种是MVC自带的方法，第二种是使用绝对路径。上图路径是在我项目当中相关文件的路径。CSS样式引入和JS一致。

　　Fifth Step:第四步修改完成后，把我们的项目运行起来，在浏览器地址栏输入刚才我们新建的action路径，比如我的就是:http://localhost:6273/ligerui/index ，哈，效果出来了：

　　

　　是不是和官网的不太一样，这是为啥呢？如果你是谷歌浏览器，按下F12快捷键，点击Console:

　　

　　看到木，错误全在这！前五个错误告诉我们哪些文件找不到，你只需要在index视图当中找到相应代码，并修改其路径（Source文件夹当中）就能达到和官网一致效果！

　　可以看到我们就是复制源码，小小修改。

　　还有就是左侧功能列表下的树控件的数据来自一个JS文件，从这里看出来：

　　

　　

  //树
                 $("#tree1").ligerTree({
                    //注意这里indexdata
                     data: indexdata,
                     checkbox: false,
                     slide: false,
                     nodeWidth: ,
                     attribute: ['nodename', 'url'],
                     onSelect: function (node) {
                         if (!node.data.url) 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);
                     }
                 });

ligerTree

　　source文件夹找到indexdata.js文件，按需修改节点名称即可。

　　

　　这种“查看网页源代码”对于学习前端控件挺有用的，看官网demo时候，右键“查看网页源代码”，仿照官网例子小改动来满足自己的需求。

　　下几篇，用一个学生信息列表来看看ligerui中的grid组件。

---

　　2013-12-03