【asp.net Core MVC + angular6实战】 - 1. 环境搭建

最新推荐文章于 2024-09-26 16:35:54 发布

dotNET跨平台

最新推荐文章于 2024-09-26 16:35:54 发布

阅读量3.7k

点赞数 1

为什么打算写这些文章？

没有为什么，只是为了学习Angular和更了解.Net Core等技术

需要用到的技术？

后端使用.Net Core 2.1 + EF Core 2.1 + Mysql 5.7 + Identity （不知道Identity算不算一个独立的技术点）
前端主要使用的是Angular 6.x + Ant （出自阿里巴巴的一套angular开源组件库）https://ng.ant.design/docs/introduce/zh

大纲

开发环境搭建
Angular的使用姿势
ANT的使用姿势
.Net Core + EFCore + Mysql的使用姿势
Identity的使用姿势
系统发布（Windows和Ubuntu的服务器环境配置，包括Https环境的配置）

以上大纲只是暂时性的，写的过程中会随时调整，以实际发布文章为主

开发环境的搭建

　　我记得我当年刚出来找工作的时候，整个前端圈子都流行JQuery，基本前端开发=JQuery+一堆插件，伴随而生的也有一堆的UI库（easy UI，bootstrap。。。等的）。

　　如今才四五年过去，JQuery在不面向搜索引擎的网站中，基本上很难看到身影了（老旧的系统除外），新的各种BS软件基本选择都是Vue Angular React这三个框架了（统称前端三巨头）。前端的开发方式也发生了翻天覆地的变化，从引入一个Script就开始操作dom写逻辑的方式，变成了先安装NodejS，然后开始引入各种npm包啊，啥构建工具啊，然后再开始编码，再然后发布的时候，还要编译一下。。。，刚开始我也觉得这种方式特别麻烦。就感觉脱了裤子放屁一样。

　　但是没办法，大趋势就是这样。面对变化，我们只能去拥抱，去适应。真正了解过一段时间之后，才发现这么做确实是有道理的。个人感觉这是前端工程化的一个体现。JavaScript从脚本进化成为了真正的编程语言。（当然今天的猪脚不是JavaScript，而是它的超集TypeScript）

1.安装NodeJS

NodeJs的安装方式非常简单。https://nodejs.org/en/

640?wx_fmt=png

下载LTS版本的安装包，一路Next就好了。

安装好了，在命令行里面查看一下

640?wx_fmt=png

确认这样，应该没问题，也许你们的版本号和我不一样。我这个是之前安装的，和最新版是有小差别，但是完全不影响使用

2.安装Angular的包

2.1.首先全局安装Angular

npm install -g @angular/cli

　　Angular官网要求Angular6.0必须在node 8.x 和 npm 5.x 以上的版本才能正常使用，更低的版本也许会出现N多问题。

　　安装成功后，在命令行上运行 ng -v

　　如果出现这个东东，那么说明你成功的安装了Angular的最新版

　　如果没有出现这个东东，那么先重启一下电脑。然后再看，还是不行的话，可以跳转到第一步，连续重试三次，还是有问题，麻烦出门右转Angular官网 https://angular.cn/guide/quickstart

2.2 创建一个Angular项目，并运行起来

　　随便选择一个电脑里面，你喜欢目录（多次实践，千万不要选择非英文的路径，连C#也不行，必须纯英文路径，不然会有莫名错误），执行命令

ng new testapp  //testapp可以自己写你喜欢的名字，就是你的项目名

　　输入angular创建目录的命令后，按回车键，angular-cli会自动创建一个angular的模板，只需要一首歌的时间可以创建完成

　　 640?wx_fmt=png

　　如果是这样的话，那么说明创建成功了，进入testapp的目录，执行npm start ,然后这次估计要好几首歌的时间才能运行起来了。。。（看你的网速决定。。。如果实在是不行，可以把Npm的数据源切换到淘宝的源上去，但是请千万不要使用cnpm来替换npm，因为也会遇到莫名且搞不定的问题。。）

　　 640?wx_fmt=png

　　启动成功后，在浏览器界面输入 http://localhost:4200就可以看到Angular的默认界面了

　　 640?wx_fmt=png

　　到这里之后，说明Angular已经安装成功了

Angular权威教程

作者：[美]阿里·勒纳Ari Lerne）, [巴西]费利佩·库里Felipe Cour）, [美]内特·默里Nate Murray, [巴西]卡洛斯·塔沃尔达

当当广告

购买

　　2.3 安装ANT 组件库

　　在新版的NG cli里面提供了一个贼好用的命令 ng add 。。。。

　　恰好ant官方紧跟着就支持了。我们可以很方便的使用ng add ng-zorro-antd [options] 命令把ANT组件库添加到我们新建的angular项目中

　　 640?wx_fmt=png

　　如果没有报错的话，那就npm install ng-zorro-antd一下 ,我公司电脑就不用走这一步，但是家里电脑需要走这一步，不然就报错，不知道为啥，如果有知道的大佬可以指点一下

　　再次访问localhost:4200 ,当当当当。。。就会看到下边的这个图标，那么说明你的ant安装好了

640?wx_fmt=png

　　3.创建asp.Net Mvc Core 的项目

　　　　记得升级你们的猥琐死丢丢到最新版。。。不然Angular模板创建出来默认是4.x，是webpack的的模板，难用的一批。。。升级到最新版就是angular-cli的工程模板了。

　　3.1 创建工程

　　 640?wx_fmt=png

　　然后点击确定。。。

　　3.2 点击运行

　　第一次运行的时候，大家可以先泡一杯茶，然后打开抖音（此处广告五毛），然后使劲的嗨一会儿。再回来估计都还没运行起来。原因很简单，第一次运行的时候，会下载默认工程里面的angular所引用的包，贼慢。。

　　等待了一阵之后，浏览器突然弹出来一个页面

　　 640?wx_fmt=png

　　说明我们的.Net Core + Angular5.x的项目就搭建好了。。。

　　看到这里，某些细心的园友可能会觉得很无语。后面直接用猥琐死丢丢创建项目就好了，为毛前面要折腾那么多没卵用的东西？

　　因为Angular自带的模板是Angular5.x，但是最新的angular已经6.x了，5升级到6，不是那么简单。因为其中涉及到Rxjs的升级，还有angular的本身的一些API的升级，所以我打算把自己揣摩的方式告诉大家，当然大家也可以参照官方的升级文档进行升级 https://update.angular.io。

　　3.3 如何简单粗暴的升级Angular5.x到6.x

　　我刚开始学习的时候，先按照官方升级的指南升级的，爬了一堆坑，最后还是没搞定。最后用两个词搞定了 ‘复制’->‘粘贴’

　　　　3.3.1 复制我们前面创建的ng+ant的前端工程文件

　　　　 640?wx_fmt=png

　　　　3.3.2 直接删除掉.Net Core下的ClientApp下的全部文件

　　　　 640?wx_fmt=png

　　　　就这一堆东西，然后粘贴前端的工程文件到这里，

　　　　再然后就点击运行，会成功看到之前运行成的Ant的界面，

　　　　这样我们就成功把默认项目的5.x升级到6.x了

　　　　到这里呢，就算是已经搭建好了asp.net core mvc+angular6.x的开发环境

　　但是呢，本篇文章还没有结束，我打算分享一些我个人开发SPA项目的一些小经验（也或者说是小技巧）

写angular的程序，尽量使用vscode，猥琐死丢丢写TypeScript的体验真的比不上vscode（个人感觉）
在后台运行一个ps1界面，使用npm start 增量编译Angular,可以不用每次修改后，都等一首歌的时间才能看到效果
开发环境下，使用UseProxyToSpaDevelopmentServer("http://localhost:4200");替换UseAngularCliServer(npmScript: "start");，这样可以极大提高工作效率。
如果有愿意一起交流的大佬，可以加我们的qq群：80669150 ,可吹水，可斗图，可学习