仿B站(一) 目的分析以及创建 WebAPI + Angular7 项目

前言:

本系列文章主要为对所学 Angular 框架的一次微小的实践,对 b站页面作简单的模仿。

本系列文章主要参考资料:

微软文档:    https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=windows

Angular 文档:   https://angular.cn/tutorial

Typescript 文档: https://www.typescriptlang.org/docs/home.html

此系列皆使用 VSCode+C#+Typescript+Angular+EF Core 作为开发环境。如果有什么问题或者意见欢迎在留言区进行留言。 

如果图片看不清的话请在新窗口打开图片或保存本地查看。

项目 github 地址:https://github.com/NanaseRuri/FakeBilibili

 本章内容:页面分析、创建 WebAPI + Angular7 项目

 一、页面分析

首先分析我大概要做些什么效果:

640?wx_fmt=png

640?wx_fmt=png

  二、创建 WebApi + Angular 7 项目

 首先运行命令创建一个新项目:

    dotnet new angular -o FakeBilibili

640?wx_fmt=png

由于 ASP.NET Core 的默认 Angular 项目使用的是 Angular6 框架,在此将命令行工作目录转移到当前目录,将当前 Angular 项目删除并使用 Angular CLI 创建新的 Angular 项目:

可选择使用 --skipGit 跳过 Git 安装。

    ng new ClientApp --skipGit

Angular 7中,当运行 ng new 命令时,若没有指定样式表类型或是否使用默认路由,会额外在命令行出现选择项。在此为更方便地编写样式表选择使用 scss。

640?wx_fmt=png

 

640?wx_fmt=png

在 Angular.json  文件中更改 styles 属性使用 scss,这里影响的只是 Angular CLI 创建组件时的选项:

640?wx_fmt=png

由于在一个 Angular+WebAPI 项目中同时存在后台服务器以及 Angular 服务器,修改 Configure方法使其外部使用 Angular CLI 实例,而不是启动它自己的实例。

          spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); 

640?wx_fmt=png

此处指定端口号为 4200 是因为 Angular 应用默认端口号为 4200,可以在 package.json 文件中对端口号进行修改:

 640?wx_fmt=png

三、启动服务器

在 ClientApp 工作目录中运行 npm start 命令(PS:使用 npm start 是约定,本质上运行的是 ng serve),然后在 ASP.NET Core 项目文件夹中运行 dotnet run 命令:

当第一次运行 dotnet run 命令时会提醒创建 .vscode 文件夹,其中的 launch.json 可以配置启动环境,默认为 development 环境。

当使用 spa.UseProxyToSpaDevelopmentServer 方法后,如果在 Angular 项目未编译完成启动 https://localhost:5001/5000 会发生错误。

ClientApp 工作目录中:

ASP.NET Core 项目工作目录中:

640?wx_fmt=png

640?wx_fmt=png

第一次运行 npm start 命令可能会等待很长时间,Angular 项目编译完成后如下:

 640?wx_fmt=png

 等待 Angular 项目编译完成后打开 localhost:5000或5001,出现的是默认的 Angular 项目的模板:

640?wx_fmt=png

如果没有覆盖原 Angular 项目的话,出现的是微软项目的模板:

640?wx_fmt=png

原文地址:https://www.cnblogs.com/gokoururi/p/10666735.html

.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com 
640?wx_fmt=jpeg


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/316015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codeforces Round #736 (Div. 1Div2)

Codeforces Round #736 (Div2) Codeforces Round #736 (Div. 1) 题号题目难度AGregor and Cryptography签到BGregor and the Pawn Game模拟CWeb of Lies思维DIntegers Have Friends思维st表EThe Three Little PigsF1Gregor and the Odd Cows (Easy)F2Gregor and the Odd Cows …

Mac中搭建Kubernetes

Kubernetes是Google和RadHat公司共同主导的开源容器编排项目,功能非常强大,也非常的火热和流行,但同时里面也有很多的概念和名词需要我们去学习和理解。学习任何一个技术先需要把基础环境搭建起来,本篇就介绍怎样在Mac中启动单节点…

CF1458C Latin Square

CF1458C Latin Square 题意: T 组测试数据,每次给一个 nnn\times nnn 的矩阵,每行每列都是个 1→n1\to n1→n 的排列。有 m 次操作,如果是 UDLR 就是要把整个矩阵每行/每列往一个方向循环移动一格。如果是 IC,就是把…

树莓派也跑Docker和.NET Core

树莓派就是一个卡片大小的迷你电脑。有了电脑,我们当然得先安装系统。系统下载https://www.raspberrypi.org/downloads/raspbian/ ,我选择的Raspbian Stretch Lite,不带界面的最小安装。下载win32diskimager(烧录系统)…

Codeforces Round #700 (Div. 1Div. 2)

Codeforces Round #700 (Div. 1&&Div. 2) 题号题目知识点AYet Another String Game签到BThe Great Hero贪心CSearching Local Minimum思维二分DPainting the Array I贪心EPainting the Array II贪心FContinuous City二进制构造GOdd Mineral Resource莫队分块域值HScho…

开源]OSharpNS 步步为营系列 - 1. 业务模块设计

OSharpNS全称OSharp Framework with .NetStandard2.0,是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架。这个框架使用最新稳定版的.NetCore SDK(当前是.NET Core 2.2),对 AspNetCore 的配置、依赖注入、日志、缓存、实体…

CF1479A Searching Local Minimum

CF1479A Searching Local Minimum 题意&#xff1a; 题解&#xff1a; 先说结论&#xff1a; 若l&#xff0c;r满足&#xff1a; al−1>al,ar<ar1a_{l-1}>a_{l},a_{r}<a_{r1}al−1​>al​,ar​<ar1​al,al1,....,ara_{l},a_{l1},....,a_{r}al​,al1​,....…

C#8.0的两个有趣的新特性以及gRPC

最近每天忙着跑很多地方&#xff0c;回家就不想动了&#xff0c;没什么心情写东西。今天有空&#xff0c;稍微写一点。下文中&#xff1a;关于C#语法特性的部分需要Visual Studio 2019支持。关于.NET Core的部分需要安装.NET 3.0 Preview4&#xff0c;低版本或许也可以但我没实…

CF1479B Painting the Array

CF1479B1 Painting the Array I CF1479B1 Painting the Array II 题意&#xff1a; 本题与 CF1480D2 的唯一区别是本题询问最大可能解. 给定一个数组a,你将ai染为bi色,其中b是由你指定的一个01数组.将a数组中被染成0色的数字取出来并依在a中出现的顺序排列,组成数组a(0).同理…

在 ASP.NET Core 中安装 MVC

目录本文出自《从零开始学 ASP.NET CORE MVC》目录 视频课程效果更佳&#xff1a;从零开始学 Asp.Net Core MVC 在ASP.NET Core 中安装 MVC在本视频中&#xff0c;我们将讨论在 ASP.NET Core 应用程序中设置 MVC。到目前为止&#xff0c;我们在本系列视频中使用的 ASP.NET Core…

CF1479C Continuous City

CF1479C Continuous City 题意&#xff1a; 给定 L, R. 构造一个有向带权图, 其中点数不大于 32, 且所有边都是从较小的点指向较大的点. 假设这个有向图有 n 个点, 你需要保证从 1到n 的所有路径的权值都在 [L, R]内且不存在 x∈[L,R], 使得不存在或存在多于一条从 1 到 n 的…

Office转PDF,Aspose太贵,怎么办?

在程序开发中经常需要将Office文件转换成PDF&#xff0c;著名的Aspose的三大组件可以很容易完成这个功能&#xff0c;但是Aspose的每个组件都单独收费&#xff0c;而且每个都卖的不便宜。在老大的提示下&#xff0c;换了一种思路来解决这个问题。环境dotNetCore:2.1CentOS:7.5D…

Codeforces Round #541 (Div. 2)

Codeforces Round #541 (Div. 2) 题号题目知识点ASea Battle思维BDraw!贪心模拟CBirthday思维DGourmet choiceEString MultiplicationFAsya And KittensGMost Dangerous Shark

收起.NET程序的dll来

作为上床后需要下床检查好几次门关了没有的资深强迫症患者&#xff0c;有一个及其搞我的问题&#xff0c;就是dll问题。曾几何时&#xff0c;在没有nuget的年代&#xff0c;当有依赖项需要引用的时候&#xff0c;只能通过文件引用来管理引用问题&#xff0c;版本问题&#xff0…

CF1479D Odd Mineral Resource

CF1479D Odd Mineral Resource 题意&#xff1a; 给定一棵树&#xff0c;每个点有颜色 cic_ici​&#xff0c;多次查询&#xff0c;每次给定 u,v,l,r&#xff0c;你需要给出一个颜色 x&#xff0c;使得 x 满足&#xff1a; x∈[l,r]x\in [l,r]x∈[l,r] x在u到v的路径上出现了…

从壹开始 [ Ids4实战 ] 之三║ 详解授权持久化 用户数据迁移

哈喽大家周三好&#xff0c;今天终于又重新开启 IdentityServer4 的落地教程了&#xff0c;不多说&#xff0c;既然开始了&#xff0c;就要努力做好?。书接上文&#xff0c;在很久之前的上篇文章《二║ 基础知识集合 & 项目搭建一》中&#xff0c;我们简单的说了说 Identi…

Codeforces Round #516 (Div. 2Div.1)

Codeforces Round #516 (Div. 2&&Div.1) (Div.1) 题号题目知识点AMake a triangle!贪心题BEquations of Mathematical Magic推公式COh Those Palindromes推导题(猜结论)DLabyrinthbfs剪枝EDwarves, Hats and Extrasensory Abilities思维构造FCandies for ChildrenGLas…

微软XAML Studio - WPF, UWP, Xamarin等技术开发者的福音

最近在继续倒腾WPF的项目&#xff0c;继续使用Caliburn.Micro和Xceed来堆代码。每次调试xaml上的binding&#xff0c;都有种要疯的赶脚。今天路过 https://channel9.msdn.com/ 浏览 WPF相关的学习视频时&#xff0c;遇到微软推荐的相关视频 - XAML sutdio简介https://channel9.…

CF1063A Oh Those Palindromes

CF1063A Oh Those Palindromes 题意&#xff1a; 一个非空字符串叫做回文串。如果它从左到右&#xff0c;从右到左读相同&#xff0c;那么它就是回文串。 例如&#xff0c;“ABCBA”,“A”和“ABBA”都是回文串&#xff0c;而“ABAB”和“XY”则不是。 如果可以通过从字符串…

AddMvc 和 AddMvcCore 的区别

目录本文出自《从零开始学 ASP.NET CORE MVC》目录 视频课程效果更佳&#xff1a;从零开始学 Asp.Net Core MVC ASP.NET Core 为什么有 AddMvc 和 AddMvcCore 他们是什么关系&#xff1f;在本视频中&#xff0c;我们将讨论 AddMvc()和 AddMvcCore()方法之间的区别。要在 ASP.NE…