abp angular 和mvc_ABP+Angular框架搭建踩坑记
最近用angular和.net core 搭建一个前后端分离的BS框架,准备使用ABP模板实现。
因为准备前端代码也在VS2019里面写,所以此处勾上了One solution ...即前后端都放在一个解决方案里面。
2、创建后解压下载下来的安装包,打开刚才填的项目名的解决方案。如果数据库也在本机,则使用windows验证登录数据库创建一个按appsettings.json里面的数据库连接字符串中的数据库名在本机创建一个相应的数据库。后期要部署再其他数据库可以重新配置数据库连接字符串,用EF重新迁移数据库,用MySQL或者其他数据库需要安装相应EF 相关的数据库组件当然可能也会踩坑,此处不延申了。
3、用VS运行OPS02.Migrator迁移数据库,也可以用EF命令行 update-database迁移数据库(用命令行的时候注意选中 XXX.Migrator项目)
4、运行XXX.Web.Host项目,后端项目就跑起来了,可以在http://localhost:21021/swagger/index.html看到后端的一些webapi。
5、cmd命令行工具里面用cd命令进入XXX.Web.Host目录,运行npm install 命令(前提需要安装好node.js),运行此命令由于angular cli版本问题可能会出错,报错卸载angular重装,在搜到的卸载重装的命令执行了很多遍,我这边还是报错,看了一下项目 主要就是@angular-devkit/build-angular包没有安装上,单独执行npm install -save-dev @angular-devkit/build-angular安装还是报错,在卸载重装的时候需要清理angular安装cache,看cmd的报错猜想可能是angular-devkit/build-angular没清理干净,于是到 用户名\AppData\Roaming\npm\node_modules目录下面手动删掉angular-devkit/build-angular,再执行便npm install -save-dev @angular-devkit/build-angular安装成功了。然后执行npm start 访问http://localhost:4200 地址即可看到登录页面(执行npm start前需确保后端在运行中,否则前端项目启动时访问后端接口出错会加载不出页面)。输入用户名admin密码123qwe即可登录
5.前后端都在VS2019里面写在VS里面能同时启动运行前后端项目,可以修改XXX.Web.Host中的Startup.cs配置AspNetCore.SpaServices.AngularCli,在Startup.cs的IServiceProvider ConfigureServices(IServiceCollection services)方法中添加
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "./dist";
});
定义Spa静态文件根目录,
然后在Configure(IApplicationBuilder app, ILoggerFactory loggerFactory)方法中配置使用Spa静态文件服务
app.UseStaticFiles();
最后配置使用Spa网页
app.UseSpa(spa =>
{
spa.Options.SourcePath = "./";
if (true)
{
spa.UseAngularCliServer(npmScript: "start");
}
});
配置完之后的Startup.cs如下,配置好之后即可以在VS启动XXX.Web.Host项目同时启动angular前端和ABP.net core 后端
usingSystem.IO;usingSystem;usingSystem.Linq;usingSystem.Reflection;usingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.Hosting;usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Logging;usingCastle.Facilities.Logging;usingAbp.AspNetCore;usingAbp.AspNetCore.Mvc.Antiforgery;usingAbp.Castle.Logging.Log4Net;usingAbp.Extensions;usingOPS02.Configuration;usingOPS02.Identity;usingAbp.AspNetCore.SignalR.Hubs;usingAbp.Dependency;usingAbp.Json;usingMicrosoft.OpenApi.Models;usingNewtonsoft.Json.Serialization;usingMicrosoft.AspNetCore.SpaServices.AngularCli;namespaceOPS02.Web.Host.Startup
{public classStartup
{private const string _defaultCorsPolicyName = "localhost";private const string _apiVersion = "v1";private readonlyIConfigurationRoot _appConfiguration;publicStartup(IWebHostEnvironment env)
{
_appConfiguration=env.GetAppConfiguration();
}publicIServiceProvider ConfigureServices(IServiceCollection services)
{//MVC
services.AddControllersWithViews(
options=>{
options.Filters.Add(newAbpAutoValidateAntiforgeryTokenAttribute());
}
).AddNewtonsoftJson(options=>{
options.SerializerSettings.ContractResolver= newAbpMvcContractResolver(IocManager.Instance)
{
NamingStrategy= newCamelCaseNamingStrategy()
};
});
IdentityRegistrar.Register(services);
AuthConfigurer.Configure(services, _appConfiguration);
services.AddSignalR();//Configure CORS for angular2 UI
services.AddCors(
options=>options.AddPolicy(
_defaultCorsPolicyName,
builder=>builder
.WithOrigins(//App:CorsOrigins in appsettings.json can contain more than one address separated by comma.
_appConfiguration["App:CorsOrigins"]
.Split(",", StringSplitOptions.RemoveEmptyEntries)
.Select(o=> o.RemovePostFix("/"))
.ToArray()
)
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
)
);//Swagger - Enable this line and the related lines in Configure method to enable swagger UI
services.AddSwaggerGen(options =>{
options.SwaggerDoc(_apiVersion,newOpenApiInfo
{
Version=_apiVersion,
Title= "OPS02 API",
Description= "OPS02",//uncomment if needed TermsOfService = new Uri("https://example.com/terms"),
Contact = newOpenApiContact
{
Name= "OPS02",
Email= string.Empty,
Url= new Uri("https://twitter.com/aspboilerplate"),
},
License= newOpenApiLicense
{
Name= "MIT License",
Url= new Uri("https://github.com/aspnetboilerplate/aspnetboilerplate/blob/dev/LICENSE"),
}
});
options.DocInclusionPredicate((docName, description)=> true);//Define the BearerAuth scheme that's in use
options.AddSecurityDefinition("bearerAuth", newOpenApiSecurityScheme()
{
Description= "JWT Authorization header using the Bearer scheme. Example: \"Authorization: Bearer {token}\"",
Name= "Authorization",
In=ParameterLocation.Header,
Type=SecuritySchemeType.ApiKey
});
});
services.AddSpaStaticFiles(configuration=>{
configuration.RootPath= "./dist";
});//Configure Abp and Dependency Injection
return services.AddAbp(//Configure Log4Net logging
options => options.IocManager.IocContainer.AddFacility(
f=> f.UseAbpLog4Net().WithConfig("log4net.config")
)
);
}public voidConfigure(IApplicationBuilder app, ILoggerFactory loggerFactory)
{
app.UseAbp(options=> { options.UseAbpRequestLocalization = false; }); //Initializes ABP framework.
app.UseCors(_defaultCorsPolicyName);//Enable CORS!
app.Use(async (context, next) => { await next(); if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api/services", StringComparison.InvariantCultureIgnoreCase)) { context.Request.Path = "/index.html"; awaitnext(); } });
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAbpRequestLocalization();
app.UseEndpoints(endpoints=>{
endpoints.MapHub("/signalr");
endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
endpoints.MapControllerRoute("defaultWithArea", "{area}/{controller=Home}/{action=Index}/{id?}");
});//Enable middleware to serve generated Swagger as a JSON endpoint
app.UseSwagger(c => { c.RouteTemplate = "swagger/{documentName}/swagger.json"; });//Enable middleware to serve swagger-ui assets (HTML, JS, CSS etc.)
app.UseSwaggerUI(options =>{//specifying the Swagger JSON endpoint.
options.SwaggerEndpoint($"/swagger/{_apiVersion}/swagger.json", $"OPS02 API {_apiVersion}");
options.IndexStream= () =>Assembly.GetExecutingAssembly()
.GetManifestResourceStream("OPS02.Web.Host.wwwroot.swagger.ui.index.html");
options.DisplayRequestDuration();//Controls the display of the request duration (in milliseconds) for "Try it out" requests.
}); //URL: /swagger
app.UseSpa(spa=>{
spa.Options.SourcePath= "./";if (true)
{
spa.UseAngularCliServer(npmScript:"start");
}
});
}
}
}
abp angular 和mvc_ABP+Angular框架搭建踩坑记相关推荐
- Angular教程英雄之旅版本踩坑记录
Angular教程英雄之旅版本踩坑记录 前言 问题1 问题2 问题3 问题4 总结 前言 这两天心血来潮,跟着Angular官网的教程英雄之旅(https://angular.cn/tutorial) ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- python从入门到实践django看不懂_Python编程:从入门到实践踩坑记 Django
<>踩坑记 Django Django Python 19.1.1.5 模板new_topic 做完书上的步骤后,对主题添加页面经行测试,但是浏览器显示 服务器异常. 个人采用的开发环境是 ...
- 东八区转为0时区_踩坑记 | Flink 天级别窗口中存在的时区问题
❝ 本系列每篇文章都是从一些实际的 case 出发,分析一些生产环境中经常会遇到的问题,抛砖引玉,以帮助小伙伴们解决一些实际问题.本文介绍 Flink 时间以及时区问题,分析了在天级别的窗口时会遇到的 ...
- windows container 踩坑记
windows container 踩坑记 Intro 我们有一些服务是 dotnet framework 的,不能直接跑在 docker linux container 下面,最近一直在折腾把它部署 ...
- android小程序_小程序踩坑记
小程序踩坑记 希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记 小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...
- 口罩、安全帽识别比赛踩坑记(二) 比赛流程及 SSD / YOLO V3 两版本实现
本篇文章主要对比赛流程中的各个环节进行展开说明,并对笔者践行过的代码及更改的地方进行记录.如哪里有侵权请联系笔者进行删除.另外在这里对比赛举办方表示感谢 ~ ~ 其中开源代码会在整理后放在github ...
- 移动端踩坑记---------ios下输入法遮挡input
移动端踩坑记---ios下输入法遮挡input 最近项目中遇到了一个比较严重移动端IOS下的Fixed兼容问题,网上也有很多人躺在这个问题上了,现在开始详细讨论一下这个问题. 现在我们先来看一 ...
- 口罩、安全帽识别比赛踩坑记(一) 经验漫谈及随想
前言 因为疫情迎来的史无前例大假期,从开始理直气壮的天天划手机,到中间百无聊赖的躺尸,再到之后实在憋得慌,就想找点什么事搞一搞.恰好这时,一直关注的极视角联合 Intel 公司举办了一个对口罩和安全帽 ...
最新文章
- 特殊标记字段(#)实时富文本显示
- 分数运算C++代码实现
- 27 个问题,告诉你Python为什么这么设计
- 淘汰原因_我是唱作人2马頔淘汰怎么回事?马頔个人资料照片被淘汰原因揭秘...
- 厦门大学计算机考研怎么样6,【图片】一战厦大计算机上岸,经验帖。慢更【考研吧】_百度贴吧...
- 【远程沟通】“云答辩”“云招聘”双管齐下,解救“最难毕业生”
- 【docker】第五节:docker常用命令总结
- 一文读懂人工智能的前世今生(建议收藏)
- 导出文件后打不开_PPT | 快速导出4K超高视频
- day17--JQuery
- tensorflow之FIFOQueue
- 杰理AD15 玩具类编解码音频芯片
- tensorflow获取动态shape
- Qt之QTreeWidget增删节点
- MySQL数据库的DQL(数据查询语言)使用---指定查询字段、去重(distinct)、where条件子句、联表查询(xxx join)、分页(order by)和排序(limit)
- Mac OS X: XAMP在Mac上的实现
- 为什么移动端跨平台开发不靠谱?
- SAP SM04踢人操作(摘录)
- Ugurgallen只是使用ps的简单拼贴技术,却刺痛42万人的心!
- Latex学习笔记——常用符号的输入
热门文章
- Selinux Error while expanding policy libsepol.check_assertions: 2 neverallow failures occurred
- 北京奥运会门票价格确定 开幕式票价最低200元
- Linux系统之neofetch工具的基本使用
- 基于CPLD的数字时钟设计
- open3D与电脑的连接设置
- RNN 入门教程 Part 3 – 介绍 BPTT 算法和梯度消失问题
- shiro和axios的跨域问题
- 西雅图不相信爱情,66岁比尔盖茨离婚!财产分割成焦点
- linux 多ip出口ip,linux查看出口ip的方法
- 高DPI下部分软件显示不全的解决方法