« 上一篇下一篇 »

【asp.net core mvc + angular6实战】 - 1. 环境搭建

    为什么打算写这些文章?

    没有为什么,只是为了学习Angular和更了解.NetCore等技术

    需要用到的技术?

    后端使用.NetCore2.1+EFCore2.1+Mysql5.7+Identity(不知道Identity算不算一个独立的技术点)

    前端主要使用的是Angular6.x+Ant(出自阿里巴巴的一套angular开源组件库)https://ng.ant.design/docs/introduce/zh

    大纲

    开发环境搭建

    Angular的使用姿势

    ANT的使用姿势

    .NetCore+EFCore+Mysql的使用姿势

    Identity的使用姿势

    系统发布(Windows和Ubuntu的服务器环境配置,包括Https环境的配置)

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

    开发环境的搭建

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

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

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

    1.安装NodeJS

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

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

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

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

    2.安装Angular的包

    2.1.首先全局安装Angular

    npminstall-g@angular/cli

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

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

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

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

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

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

    ngnewtestapp//testapp可以自己写你喜欢的名字,就是你的项目名

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

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

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

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

    2.3安装ANT组件库

    在新版的NGcli里面提供了一个贼好用的命令ngadd。。。。

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

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

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

    3.创建asp.NetMvcCore的项目

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

    3.1创建工程

    然后点击确定。。。

    3.2点击运行

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

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

    说明我们的.NetCore+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的前端工程文件

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

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

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

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

    到这里呢,就算是已经搭建好了asp.netcoremvc+angular6.x的开发环境

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

    写angular的程序,尽量使用vscode,猥琐死丢丢写TypeScript的体验真的比不上vscode(个人感觉)

    在后台运行一个ps1界面,使用npmstart增量编译Angular,可以不用每次修改后,都等一首歌的时间才能看到效果

    开发环境下,使用UseProxyToSpaDevelopmentServer("http://localhost:4200");替换UseAngularCliServer(npmScript:"start");,这样可以极大提高工作效率。

    如果有愿意一起交流的大佬,可以加我们的qq群:80669150,可吹水,可斗图,可学习