使用moy快速开发后台管理系统(二)

moy是什么?

moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架,是前端集成解决方案,为企业级应用开发而生。
github地址:https://github.com/iuap-design/tinper-moy

step 2. 实现路由切换页面展示

  1. 注册路由:在router/router.js文件中替换为如下代码:

    define(function() {
        return [{
            name: "/mainPage/main"
        }, {
            name: "/cardtable/cardtable"
        }]
    });
  2. 在左侧栏添加入口:在index.html中加入新增应用管理入口代码:

    <ul class="nav-menu height-full" id="menu">
      <!-- 原有代码请勿拷贝 -->
      <li class='nav-li'>
        ...
      </li>
      <!-- 新增应用管理入口代码 begin -->
      <li class='nav-li'>
        <!-- a标签地址要指向到你想去的页面的路由地址 -->
        <a href="#cardtable/cardtable">
          <i class="uf uf-4square-3"></i>
          <span class="nav-title">应用管理</span>
        </a>
      </li>
      <!-- 新增应用管理入口代码 end -->
    </ul>
  3. 在首页添加入口:在pages/mainPage/main.html中加入新增应用管理代码:

    <div class="u-row bottom-layout margin-0">
      <!-- 原有代码请勿拷贝 -->
      <div class="u-col-xs-6 u-col-md-3 content">
        ...
      </div>
      <!--新增应用管理 begin -->
      <div class="u-col-xs-6 u-col-md-3 content">
        <a href="#cardtable/cardtable">
          <div class="u-form-group">
            <div class="u-col-xs-12 content-svg">
              <img src="./static/applimanage.png">
            </div>
          </div>
        </a>
      </div>
      <!--新增应用管理 end -->
    </div>

这个时候在浏览器刷新下页面,点击左侧栏的应用管理,这个时候地址栏变成了http://localhost:8080/#cardtable/cardtable,页面一片空白,到这里,这一步已经完成了


到这里,我们已经完成了前面的准备工作,后面我会开始写如何去实现grid表格数据展示和分页

请期待下一篇。

(完)

posted @ 2017-03-08 16:19  古朋  阅读(276)  评论(0编辑  收藏  举报