为适应不同开发人员,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做进一步研究:
 
 

Abp Zero——前端如何新增功能模块的更多相关文章

  1. abp项目如何按业务功能模块横向分割?

    1.为什么要做分层? 请先看项目分层的最后结构: 2.设计的初衷 项目较大,且主题鲜明,分为:BI模块.DM-用户洞察模块.Manage-应用管理模块.Report应用分析报表模块,大模块之间并无依赖 ...

  2. ABP Framework 5.2 RC 发布及新增功能介绍

    ABP Framework 5.2 RC 新增功能 目录 ABP Framework 5.2 RC 新增功能 单层解决方案模板 EF Core 数据库迁移 UI 和 数据库 选项 API 版本控制 源 ...

  3. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  4. ABP Framework V4.4 RC 新增功能介绍

    目录 新增功能概述 启动模板删除 EntityFrameworkCore.DbMigrations 项目 CMS-Kit 动态菜单管理 Razor引擎对文本模板的支持 DbContext/Entiti ...

  5. ABP Framework 5.3.0 版本新增功能和变更说明

    ABP Framework 5.3.0 稳定版已在2022年6月14日正式发布. 以下是本版本的新增功能: "开始"页面提供创建单层项目选项 启动模板提供 PWA 支持 Volo. ...

  6. RDIFramework.NET V3.3 Web版新增报表管理功能模块-重量级实用功能

    功能描述 在RDIFramework.NET V3.3 Web版本新增了全新的报表管理功能模块,非常实用的功能,重量级推荐.主要用于对日常常用的报表做定制展示.可以自动发布到模块(就可授权给指定资源访 ...

  7. 【php增删改查实例】第十节 - 部门管理模块(新增功能)

    正常情况下,在一个部门管理页面,不仅仅需要展示列表数据,还需要基本的增删改操作,所以,我们先把之前写好的新增功能集成进来. 在toolbar中,添加一个新增按钮. <div id="t ...

  8. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  9. 极简实用的Asp.NetCore框架再新增商城模块

    概述 关于这个框架的背景,在前面我已经交代过了.不清楚的可以查看这个链接 1.极简实用的Asp.NetCore模块化框架决定免费开源了 2.极简实用的Asp.NetCore模块化框架新增CMS模块 算 ...

随机推荐

  1. 为什么iphone手机比android手机流畅

    作为当下最流行.市场占用份额最大的两大手机操作系统IOS和android,目前两者加起来的市场占用率达到90%.我曾经一直用android手机,没有用过iphone,那时候正直iphone4和ipho ...

  2. mysqldump常用参数

    mysqldump常用参数说明  --all-databases 或 -A  导出全部数据库.--all-tablespaces 或 -Y 导出全部表空间--no-tablespaces  或 -y ...

  3. iOS 本地企业发布流程

    今天和后台弄了一下本地企业ipa发布, 准备工具:要发布的ipa文件一个,一个plist plist文件格式内容: <?xml version="1.0" encoding= ...

  4. The source attachment does not contain the source for the file SignatureParser.class错误

    在myeclipse整合tomcat的完毕后,再启动tomcat的时候会出现这样的错误,呵呵,错误的大致意思是什么相关联错误,其实是myeclipse新加入的tomcat的模式出现错误了,myecli ...

  5. mina高并发短连接导致java.io.IOException: Too many open files解决方案

    http://marsvaadin.iteye.com/blog/1698924 mina性能测试 http://hi.baidu.com/rendong/item/bb5d2b0e4563c76dd ...

  6. 一份Java学习路线图

    Java学习路线图 本文会持续更新,敬请关注.下划线的文字会在这个博客继续更新. 回顾自己的Java学习经历,从学校的课堂到现在每天的项目开发,一份路线路线图浮出来. 其中有未做好的地方,也有自我感觉 ...

  7. 开源图形库 c语言-图形图像库 集合[转]

    开源图形库 c语言-图形图像库 集合[转] Google三维API O3D O3D 是一个开源的 Web API 用来在浏览器上创建界面丰富的交互式的 3D 应用程序.这是一种基于网页的可控3D标准. ...

  8. Java中类的初始化顺序

    一.一个类的初始化顺序(没继承情况)  规则: 1.静态变量>普通变量>构造方法   2.变量定义的顺序决定初始化的顺序 3.静态变量和静态块是一样的,普通变量和非静态块是一样的,即能够把 ...

  9. 【JavaScript】理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  10. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果

    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...