仿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 项目
一、页面分析
首先分析我大概要做些什么效果:
二、创建 WebApi + Angular 7 项目
首先运行命令创建一个新项目:
dotnet new angular -o FakeBilibili
由于 ASP.NET Core 的默认 Angular 项目使用的是 Angular6 框架,在此将命令行工作目录转移到当前目录,将当前 Angular 项目删除并使用 Angular CLI 创建新的 Angular 项目:
可选择使用 --skipGit 跳过 Git 安装。
ng new ClientApp --skipGit
Angular 7中,当运行 ng new 命令时,若没有指定样式表类型或是否使用默认路由,会额外在命令行出现选择项。在此为更方便地编写样式表选择使用 scss。
在 Angular.json 文件中更改 styles 属性使用 scss,这里影响的只是 Angular CLI 创建组件时的选项:
由于在一个 Angular+WebAPI 项目中同时存在后台服务器以及 Angular 服务器,修改 Configure方法使其外部使用 Angular CLI 实例,而不是启动它自己的实例。
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
此处指定端口号为 4200 是因为 Angular 应用默认端口号为 4200,可以在 package.json 文件中对端口号进行修改:
三、启动服务器
在 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 项目工作目录中:
第一次运行 npm start 命令可能会等待很长时间,Angular 项目编译完成后如下:
等待 Angular 项目编译完成后打开 localhost:5000或5001,出现的是默认的 Angular 项目的模板:
如果没有覆盖原 Angular 项目的话,出现的是微软项目的模板:
原文地址:https://www.cnblogs.com/gokoururi/p/10666735.html
.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com
仿B站(一) 目的分析以及创建 WebAPI + Angular7 项目相关推荐
- (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航...
(https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航 首页支持微信登陆,只有第8套模板支持(endv模板),后 ...
- 2022最新SpringBoot2.X仿B站项目part1笔记
文章目录 SpringBoot仿B站项目介绍 1.技术架构 2.多模块的开发,多环境的配置 2.1maven的本地配置 2.2新建模块,POM文件 2.3 父工程POM文件 2.4创建Mysql的表格 ...
- vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载 功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
- SpringBoot 仿B站后端项目实战 Day01
SpringBoot 仿B站后端项目实战 1. 搭建环境 1)项目架构 业务(功能)架构 用户服务: 注册登录 /大会员权限/ 查找视频在线视频流播放+实时弹幕管理后台 视频上传/数据统计/系统消息推 ...
- 用Vue开发仿旅游站webapp项目总结
<article data-v-13f76525="" itemscope="itemscope" itemtype="http://schem ...
- 精仿B站源码+自动采集360视频
介绍: 精仿B站源码+自动采集360视频 精仿哔哩哔哩还原度高达90% 响应式设计无需担心网页卡顿问题 整体简洁明了让你的视觉效果达到极致,追寻探索化的中心欢迎您的使用 采用了无数据库全本地化设计(无 ...
- 仿B站首页头部动画的实现
B站的前端样式一直是我学习和模仿的对象,特别是它的首页头部动画,可以随着鼠标的移动进行场景的变化,很酷,所以我对它进行了大体上的模仿 废话不多说,先看效果 仿B站首页动画演示 视频打不开点击这里 完整 ...
- php高仿互站网源码,2020新版友价高仿互站网源码 虚拟交易商城整站源码
2020新版友价高仿互站网源码 虚拟交易商城站长服务平台整站源码 本套源码自带数据,压缩包大小是2.15G,解压密码是:www.ym3.net,来自于知吗网站整站打包,感兴趣的朋友可自行下载研究.另外 ...
- 2017年11月8日最新仿互站导航t5友价商城-9套模板首页都增加微信登陆
今天测试效果如下,直接看图吧,入口在下方,点击图片直达 把9套餐模板都添加了微信首页登陆,仿互站的导航,操作比互站还要方便,官方一直对https 支持不太友好,索性把所有的https bug都修复了, ...
最新文章
- Transformer哪家强?Google爸爸辨优良!
- 争议中挺进全新里程——中国“超级对撞机”《概念设计报告》发布侧记
- 7-20(排序) 奥运排行榜(25 分)
- java $ 用法_Java的Volatile实例用法及讲解
- day3--numpy
- win10显示nvidia控制面板的方法
- 2019汤家凤高等数学强化班讲义
- http://dongxicheng.org/
- linux运行搜狗拼音,搜狗输入法 for Linux版的安装图文教程
- 快递市场定价 到底有何影响
- 新浪微博架构和FEED架构分析--人人架构
- ESP32开发路程WIFI篇——极简连接WIFI,模拟设备连接阿里云,ESP32连接阿里云
- Azure云平台之游戏
- c语言开发apu,三款新APU E-450、E-300、C-60开始列装
- 使用Android模拟机开发调试移动端页面
- 百度地图JavaScript API GL1.0给折线添加箭头
- 锤子发布会的那些梗-2016年10月18号
- 让电脑速度快上100%方法
- Linux 多线程编程(实现生产者消费者模型)
- Mysql的连接分类和详解
热门文章
- ms project 入门_Microsoft Project 2010入门
- linux 基准测试_如何对Linux系统进行基准测试:3个开源基准测试工具
- 共享计算机后无法访问磁盘,win10电脑共享硬盘无法访问如何解决
- linux guard什么进程,使用linux系统性能监控工具KSysguard监控远端主机介绍
- python装饰器执行顺序
- java 简单json和对象相互转换
- 使用Java API的5个技巧
- POP3口令扫描案例
- .NET6之MiniAPI(二十三):Refit
- Dapr牵手.NET学习笔记:用docker-compose部署服务