为适应不同开发人员,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. uva193 - Graph Coloring

    Graph Coloring You are to write a program that tries to find an optimal coloring for a given graph. ...

  2. PL/pgSQL学习笔记之八

    http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 另外一种声明 PL/pgSQL 函数的方法是使用 returns ...

  3. asp.net架构基础知识--页面以及全局事件

    1.asp.net的请求过程,以及对应的处理请求的dll客户的请求页面由aspnet_isapi.dll这个动态连接库来处理,把请求的aspx文件发送给CLR进行编译执行,然后把Html流返回给浏览器 ...

  4. EasyUI-右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

  5. Codeforces Round #342 (Div. 2) A - Guest From the Past 数学

    A. Guest From the Past 题目连接: http://www.codeforces.com/contest/625/problem/A Description Kolya Geras ...

  6. Codeforces Round #215 (Div. 1) B. Sereja ans Anagrams 匹配

    B. Sereja ans Anagrams Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...

  7. <<SAP内存计算——HANA>> 书评

    <SAP内存计算——HANA>又是一本在地铁里读完的书,最近阅读量大增,都是托了地铁的福了. 一年多以前就在ITPUB里发过帖子问“SAP HANA归根揭底到底是什么?”,那时通过一些网络 ...

  8. java 图的邻接矩阵

    有向图 在有向图中,结点对<x ,y>是有序的,结点对<x,y>称为从结点x到结点y的一条有向边,因此,<x,y>与<y,x>是两条不同的边.有向图中的 ...

  9. BinaryWriter和BinaryReader用法

      C#的FileStream类提供了最原始的字节级上的文件读写功能,但我们习惯于对字符串操作,于是StreamWriter和 StreamReader类增强了FileStream,它让我们在字符串级 ...

  10. Can't find keyplane iOS模拟器键盘不显示解决办法

    静下心来学技术,新一波的问题再度来袭 学习swift的时候做一个app,需要用到数字键盘,但是在调试了几次后数字键盘便出不来了,控制台中弹出这样一个错误 Can't find keyplane tha ...