• Abp Zero——前端如何新增功能模块


    为适应不同开发人员,abp rezo的UI实现了spa和mpa两套;
    spa——Single-page Application(单页面应用),默认“http://localhost/Account/Login”登录后转到spa界面。spa是基于angluarjs开发,angluarjs优点不细说,但学习成本较高;
    mpa——Multi-page Application (多页面应用),地址:http://localhost/Mpa/Dashboard”。mpa基于jquery开发,优点是无痛上手,而angluarjs的优点即是jquery的不足,也就是mpa的不足。
     
    这里主要总结开发一个功能模块时,后端程序员和前端程序员的分工。其中重点说前端,Spa模式:
    假定测试网址为:http://localhost/
    后端开发:
    后端从domain(领域层)到application(应用层)开发完。由于abp zero集成swagger,此时所有API都可从http://localhost/swagger/ 查看和测试。
    前端开发:
    第一步:创建angularjs的视图页和控制器。
    第二步:添加angularjs路由;
    第三步:在菜单提供者中添加对应菜单项,具体位置:web中"app/startup/AppNavigationProvider.cs"。虽然这是后端代码,但由于涉及前端菜单图标、路由名等,前端开发人员编写更为适合,当然需要后端人员做配合。
     
    下面举例说明:
    假定有“Region(行政区)”的功能模块,swagger查看Region模块的API,如图:
     
    接下来需要前端程序员出马了:
    第一步:创建angularjs的视图页和控制器,如图:
     
    第二步:在App/app.js里添加angularjs路由,如图:
     
    注意:由于abp zero已经对app文件夹下所有css和js一并用Bundle做加载,所以路由里不再指定Region模块的控制器地址。
    Bundle配置如图:
     
    第三步:在“AppNavigationProvider.cs”中添加了对应的菜单项,如图:
     
    最终效果如图:
     
    对于如何生成以上导航菜单,这主要依赖abp的动态js。abp动态生成js中的“/AbpScripts/GetScripts”包含了会话、本地化、菜单、权限许可等内容,非常便利。若想深入了解,可打开此js做进一步研究:
     
     
  • 相关阅读:
    sql左外连接、右外连接、group by、distinct(区别)、intersect(交叉)、通配符、having
    nvarchar,varchar 区别
    链家笔试链家——找寻最小消费获取最大平均分java
    利用SpringAOP 实现 日志输出
    AOP 学习笔记
    Spring AOP中pointcut expression表达式解析
    基于@Aspect的AOP配置
    URI 中特殊字符处理
    给电脑设置视力保护色
    Spring不支持依赖注入static静态变量
  • 原文地址:https://www.cnblogs.com/duanxian/p/5942081.html
Copyright © 2020-2023  润新知