学习
实践
活动
专区
工具
TVP
写文章

abp&ng-alain 改造前端一——项目准备

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称,网址:http://aspnetboilerplate.com/。ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

目录:https://www.jianshu.com/p/589af988637c

源代码:https://github.com/ZhaoRd/abp-alain

项目准备

官方网址下载ABP实例代码

克隆ng-alain项目,将克隆下来的项目复制到abp模板项目跟目录,和angular平级 命令:git clone --depth 1 https://github.com/cipchk/ng-alain.git

安装npm包

在命令行切换到angular项目中,运行

在命令行切换到abpalain项目中,运行 ,该项目只能使用npm命令,cnpm会导致运行报错

修改abpalain项目端口

由于abpalain项目默认启动端口4200,与angualr冲突,这里讲abpalain的端口修改为4201,找到abpalain项目下的 文件,修改start命令,修改结果如下

项目修改之后,需要添加后端的cors,找到AbpAlain.Web.Host项目中 文件,在 中添加 修改结果如下经过以上的端口修改,可以保存abp-alain项目能够访问到后端项目

引入abp包

找到abpalain项目的 文件,在 节点添加和abp有关的包文件,如下图,红色标记的是需要添加的

添加包文件之后,运行 命令进行安装

总结

经过以上步骤,项目已准备完毕,下来正式进入ng-alain的改造工作,主要是参考angular项目,修改 ng-alain项目,下篇主要介绍的是ng-alain正常启动并且正常获取abp信息

我的公众号

源代码

源代码:https://github.com/ZhaoRd/abp-alain

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180703G1SEX700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券