专栏首页小黑在哪里初识ABP vNext(3):vue对接ABP基本思路

初识ABP vNext(3):vue对接ABP基本思路

  • 登录
  • 权限
  • 本地化
  • 创建项目
    • ABP
    • vue-element-admin

前言

上一篇介绍了ABP的启动模板以及AbpHelper工具的基本使用,这一篇将进入项目实战部分。因为目前ABP的官方模板只支持MVC和Angular,MVC的话咱.NET开发人员来写还可以,专业前端估计很少会用这个。。。Angular我本人不熟,所以选择vue来做UI。

开始

我使用vue-element-admin[1]来作为模板,这个项目貌似很多人用,选择他的i18n[2]分支,因为我需要国际化功能。在开始编码前,需要先分析几个重要问题:

  • 用户登录/token
  • 用户权限控制
  • 应用程序本地化/语言切换

好在ABP模板提供了Angular版本,我们可以参考Angular版本来做。

登录

因为ABP的授权模块是使用IdentityServer4,所以IdentityServer4的一些默认端点在ABP里也是同样有效的,可以参考下IdentityServer4官网[3]。运行ABP模板项目,看一下IdentityServer4发现文档,uri是:/.well-known/openid-configuration

可以看到token端点是/connect/token,这是IdentityServer4默认的,通过这个端点就可以登录用户获取token。后面请求接口时,把token放到HTTP Header的authorization字段即可。

权限

进入ABP的/swagger界面:

ABP内置了一个/api/abp/application-configuration接口,它用于返回本地化文本,权限和一些系统设置信息。看一下数据格式:

auth.policies字段中包含了系统的所有权限,auth.grantedPolicies字段则包含了当前用户所拥有的权限,因为我现在没登录所以是空的。通过这两个字段就可以和vue-element-admin的菜单权限对应起来,实现权限控制。

currentUser字段表示当前用户信息,没登录时就是空的,isAuthenticated为false,这个字段也可以作为用户是否登录(token是否有效)的判断依据。

本地化

本地化对于大部分的小型系统可能都用不上,不过ABP作为一个优秀且全面的框架,必然会支持本地化功能。同样的,本地化信息也可以通过/api/abp/application-configuration接口来获取:

localization.languages字段表示系统所支持的语言类型,前端的语言切换选项就可以使用这个字段。

localization.values字段就是本地化的文本信息了,你在后端配置的本地化文本都可以从这里获取到,通过这个字段结合vue-element-admin的国际化功能,就可以让你的系统支持多语言。vue-element-admin的国际化方案是通过 vue-i18n[4]来实现,你也可以直接在前端部分来做国际化,如果你只有一个前端应用的话,但是在后端做复用性更好一些。

语言切换时只需要把对应的语言名称放到HTTP Header的accept-language字段就行。

创建项目

在开始编码前,先创建好前后端的模板项目。

ABP

这里直接用Abp CLI命令来创建解决方案吧:

abp new "Xhznl.HelloAbp"
-t app
-u none --separate-identity-server
-m none
-d ef -cs "Server=localhost;User Id=sa;Password=Password@2020;Database=HelloAbp;MultipleActiveResultSets=true"

创建一个名为"Xhznl.HelloAbp"的解决方案,使用app作为模板,不需要UI,并且将Identity Server应用程序与API host应用程序分开,使用Entity Framework Core作为数据库提供程序,并指定连接字符串。创建完成后会得到一个aspnet-core文件夹。

项目结构如下,因为指定了--separate-identity-server参数,所以多了个IdentityServer项目,如果不指定的话它是集成在HttpApi.Host中的。

通常小型系统没必要把Identity Server应用程序与API host应用程序分开,会增加运维成本,这里只是为了演示分布式部署的情况,为后面的微服务做准备。

ABP还支持为每个模块单独配置数据库(如果你不需要分库,可以忽略以下内容),修改DbMigrator、IdentityServer项目的appsettings.json配置文件:

在ConnectionStrings中添加AbpIdentityServer配置,为Identity Server配置独立的数据库连接字符串,不配置的话默认使用Default配置。AbpIdentityServer这个key是来自ABP的IdentityServer模块中的一个常量,具体请参考源码。

在开发环境光定义连接字符串还不够,因为HelloAbpIdsDB数据库还不存在,需要使用EF Core Code Frist迁移系统创建和维护这个数据库。新建一个项目:

步骤比较多,具体流程请参考官网:数据库迁移[5],这里就不重复介绍了,你也可以选择不分库。

完成以上步骤,最终会生成2个数据库,并且包含了一些默认的种子数据。

然后验证一下HttpApi.Host和IdentityServer项目是否可以正常运行,前提是你电脑需要有sqlserver,redis。

HttpApi.Host:

IdentityServer:

vue-element-admin

vue-element-admin的基本使用就不介绍了,相信很多人见过这个,不了解的可以自己去搜索学习一下。

去GitHub下载i18n[6]分支的代码,或者直接用git clone命令。

在项目根目录下执行指令:

安装依赖:npm install

启动项目:npm run dev

启动正常的话可以看到这个界面:

最后

本篇先做准备工作,下一篇将从登录功能开始编码实现。。。代码已上传至GitHub:https://github.com/xiajingren/HelloAbp,欢迎star。

参考资料

[1]vue-element-admin: https://github.com/PanJiaChen/vue-element-admin

[2]i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n

[3]IdentityServer4官网: https://identityserver4.readthedocs.io/

[4]vue-i18n: https://github.com/kazupon/vue-i18n

[5]数据库迁移: https://docs.abp.io/zh-Hans/abp/latest/Entity-Framework-Core-Migrations#使用多个数据库

[6]i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n

本文分享自微信公众号 - 小黑在哪里(xhznl_xjr),作者:xhznl

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 初识ABP vNext(1):开篇计划&基础知识

    ABP vNext(以下简称ABP)的前身是asp.net boilerplate(老版abp),它不是一个简单的版本更新,而是完全基于.NET Core的重写...

    xhznl
  • 初识ABP vNext(2):ABP启动模板

    上一篇介绍了ABP的一些基础知识,本篇继续介绍ABP的启动模板。使用ABP CLI命令就可以得到这个启动模板,其中包含了一些基础功能模块,你可以基于这个模板来快...

    xhznl
  • 初识ABP vNext(4):vue用户登录&菜单权限

    几乎所有的系统都绕不开登录功能,那么就从登录开始,完成用户登录以及用户菜单权限控制。

    xhznl
  • 支持 Markdown 语法和代码高亮

    为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言,只要遵循它...

    追梦人物
  • 【Tomcat安装】特别简单,一看就会,一装就能用

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    韩旭051
  • C# 实时折线图,波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图。本文仅供学习分享使用,如有不足之处,还请指正。

    zls365
  • bootstrap-table 前端分页,刷新事件代码实例

    参考文档: http://bootstrap-table.wenzhixin.net.cn/

    一个会写诗的程序员
  • ALPHA ZERO对象棋的启示

    2016年1月27日,《自然》刊文报道,谷歌公司开发人工智能程序alpha go(阿尔法围棋)以5:0的战绩完胜欧洲冠军,围棋职业二段樊麾。这是围棋人工智能首次...

    企鹅号小编
  • Q4OS Linux发行版使用Debonaire新桌面主题

    Q4OS团队宣布他们在基于Debian的GNU/Linux发行版中使用Trinity Desktop Environment的新桌面主题。Q4OS是基于最新De...

    Debian社区
  • 泛终端的精细化智能防御体系建设

    终端安全按照“本体防护、责任落实、统一准入、安全可视、在运合规”的管控原则,采取终端防病毒、泛终端准入控制、桌面终端管理、DNS安全监测分析、终端威胁分析以及基...

    FB客服

扫码关注云+社区

领取腾讯云代金券