使用moy快速开发后台管理系统(二)
moy是什么?
moy?是基于模型框架?kero?和?UI?框架?neoui?實(shí)現(xiàn)的應(yīng)用框架,是前端集成解決方案,為企業(yè)級(jí)應(yīng)用開(kāi)發(fā)而生。
github地址:https://github.com/iuap-design/tinper-moy
step 2. 實(shí)現(xiàn)路由切換頁(yè)面展示
-
注冊(cè)路由:在
router/router.js文件中替換為如下代碼:define(function() {return [{name: "/mainPage/main" }, { name: "/cardtable/cardtable" }] }); -
在左側(cè)欄添加入口:在
index.html中加入新增應(yīng)用管理入口代碼:<ul class="nav-menu height-full" id="menu"> <!-- 原有代碼請(qǐng)勿拷貝 --> <li class='nav-li'> ... </li> <!-- 新增應(yīng)用管理入口代碼 begin --> <li class='nav-li'> <!-- a標(biāo)簽地址要指向到你想去的頁(yè)面的路由地址 --> <a href="#cardtable/cardtable"> <i class="uf uf-4square-3"></i> <span class="nav-title">應(yīng)用管理</span> </a> </li> <!-- 新增應(yīng)用管理入口代碼 end --> </ul> -
在首頁(yè)添加入口:在
pages/mainPage/main.html中加入新增應(yīng)用管理代碼:<div class="u-row bottom-layout margin-0"><!-- 原有代碼請(qǐng)勿拷貝 --> <div class="u-col-xs-6 u-col-md-3 content"> ... </div> <!--新增應(yīng)用管理 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> <!--新增應(yīng)用管理 end --> </div>
這個(gè)時(shí)候在瀏覽器刷新下頁(yè)面,點(diǎn)擊左側(cè)欄的應(yīng)用管理,這個(gè)時(shí)候地址欄變成了http://localhost:8080/#cardtable/cardtable,頁(yè)面一片空白,到這里,這一步已經(jīng)完成了
到這里,我們已經(jīng)完成了前面的準(zhǔn)備工作,后面我會(huì)開(kāi)始寫如何去實(shí)現(xiàn)grid表格數(shù)據(jù)展示和分頁(yè)
請(qǐng)期待下一篇。
(完)
轉(zhuǎn)載于:https://www.cnblogs.com/olddoublemoon/p/6519974.html
總結(jié)
以上是生活随笔為你收集整理的使用moy快速开发后台管理系统(二)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。