【asp.net core mvc + angular6实战】 - 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/
下载LTS版本的安装包,一路Next就好了。
安装好了,在命令行里面查看一下
确认这样,应该没问题,也许你们的版本号和我不一样。我这个是之前安装的,和最新版是有小差别,但是完全不影响使用
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的模板,只需要一首歌的时间可以创建完成
如果是这样的话,那么说明创建成功了,进入testapp的目录 ,执行npm start ,然后这次估计要好几首歌的时间才能运行起来了。。。(看你的网速决定。。。如果实在是不行,可以把Npm的数据源切换到淘宝的源上去,但是请千万不要使用cnpm来替换npm,因为也会遇到莫名且搞不定的问题。。)
启动成功后,在浏览器界面输入 http://localhost:4200就可以看到Angular的默认界面了
到这里之后,说明Angular已经安装成功了
2.3 安装ANT 组件库
在新版的NG cli里面提供了一个贼好用的命令 ng add 。。。。
恰好ant官方紧跟着就支持了。我们可以很方便的使用ng add ng-zorro-antd [options] 命令把ANT组件库添加到我们新建的angular项目中
如果没有报错的话,那就npm install ng-zorro-antd一下 ,我公司电脑就不用走这一步,但是家里电脑需要走这一步,不然就报错,不知道为啥,如果有知道的大佬可以指点一下
再次访问localhost:4200 ,当当当当。。。就会看到下边的这个图标,那么说明你的ant安装好了
3.创建asp.Net Mvc Core 的项目
记得升级你们的猥琐死丢丢到最新版。。。不然Angular模板创建出来默认是4.x,是webpack的的模板,难用的一批。。。升级到最新版就是angular-cli的工程模板了。
3.1 创建工程
然后点击确定。。。
3.2 点击运行
第一次运行的时候,大家可以先泡一杯茶,然后打开抖音(此处广告五毛),然后使劲的嗨一会儿。再回来估计都还没运行起来。原因很简单,第一次运行的时候,会下载默认工程里面的angular所引用的包,贼慢。。
等待了一阵之后,浏览器突然弹出来一个页面
说明我们的.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的前端工程文件
3.3.2 直接删除掉.Net Core下的ClientApp下的全部文件
就这一堆东西,然后粘贴前端的工程文件到这里,
再然后就点击运行,会成功看到之前运行成的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 ,可吹水,可斗图,可学习
【asp.net core mvc + angular6实战】 - 1. 环境搭建的更多相关文章
- (0)ASP.NET Core 简单介绍 和开发环境搭建 - ASP.NET从MVC5升级到MVC6
ASP.NET从MVC5升级到MVC6 总目录 ASP.NET Core 首先,ASP原本只是一种技术,这种技术从上个世纪90年代就有了. Active Service Page 和 Java Ser ...
- ASP.NET CORE MVC 2.0 项目中引用第三方DLL报错的解决办法 - InvalidOperationException: Cannot find compilation library location for package
目前在学习ASP.NET CORE MVC中,今天看到微软在ASP.NET CORE MVC 2.0中又恢复了允许开发人员引用第三方DLL程序集的功能,感到甚是高兴!于是我急忙写了个Demo想试试,我 ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- 【新书推荐】《ASP.NET Core微服务实战:在云环境中开发、测试和部署跨平台服务》 带你走近微服务开发
<ASP.NET Core 微服务实战>译者序:https://blog.jijiechen.com/post/aspnetcore-microservices-preface-by-tr ...
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-1
来个目录吧: 第一章 第二章 第三章 暂时就这么多.后面路线更新吧 本系列文章为翻译加上我个人的使用心得理解,希望帮助热爱学习的程序员. 珍重声明:本系列文章会跟原文有点出入,去掉了罗里吧嗦的文字. ...
- 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-4
来个目录吧: 第一章-入门 第二章- Entity Framework Core Nuget包管理 第三章-创建.修改.删除.查询 第四章-排序.过滤.分页.分组 第五章-迁移,EF Core 的co ...
- ASP.NET Core MVC+EF Core项目实战
项目背景 本项目参考于<Pro Entity Framework Core 2 for ASP.NET Core MVC>一书,项目内容为party邀请答复. 新建项目 本项目开发工具为V ...
- ASP.NET Core分布式项目实战
ASP.NET Core开发者成长路线图 asp.net core 官方文档 https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/ ...
- ASP.NET Core 中文文档 第四章 MVC(01)ASP.NET Core MVC 概览
原文:Overview of ASP.NET Core MVC 作者:Steve Smith 翻译:张海龙(jiechen) 校对:高嵩 ASP.NET Core MVC 是使用模型-视图-控制器(M ...
随机推荐
- 【粗糙版】javascript的变量、数据类型、运算符、流程结构
本文内容: javascript的变量 javascript的数据类型 javascript的运算符 javascript的流程结构 首发日期:2018-05-09 javascript的变量 创建变 ...
- 实现wc部分功能 java
GitHub地址:https://github.com/carlylewen/ruangong 相关要求 基本功能 wc.exe -c file.c //返回文件 file.c 的字符数(实现 ...
- Linux 中yum的配置
1.进入yum的路径 cd /etc/yum.repos.d 2.将原始的repo文件移入一个新建的backup文件下做备份 mv CentOS* backup 3.在/etc/yum.repos.d ...
- win7升级IE11后F12无法正常操作
今天在win7下把ie9升级为ie11,但是升级后发现ie11的F12无法正常操作,经过查找,发现需要安装win7补丁:KB3008923 下载地址:http://www.microsoft.com/ ...
- php配置文件php.ini的详细解析(续)
file_uploads = On // ...
- docker 中运行 mysql
在宿主机Host的终端执行: 1. 搜索docker镜像仓库中提供的mysql docker search mysql 2.下载mysql镜像 docker pull mysql 3.改变目录权限,非 ...
- 寒假训练——搜索 K - Cycle
A tournament is a directed graph without self-loops in which every pair of vertexes is connected by ...
- [小米 Online Judge]找出单独出现的数字
描述: 给出N个数字.其中仅有一个数字出现过一次,其他数字均出现过两次,找出这个出现且只出现过一次的数字.要求时间和空间复杂度最小. 输入: 输入多个数字,每个数字以空格分开,回车结束 输出: 输出内 ...
- centos7下安装docker(25docker swarm---replicated mode&global mode)
swarm可以在service创建或运行过程中灵活的通过--replicas调整容器的副本数量,内部调整调度器则会根据当前集群资源使用的情况在不同的node上启动或停止容器,这就是service默认的 ...
- HTTP协议中GET和POST的区别(详细描述)
HTTP协议在现代网络通信中被广泛应用,在HTTP 1.0版本中有7种请求方式,在HTTP 1.1版本中有8种请求方式,而这些请求方式中最常用的就是GET和POST,网上关于GET与POST请求方式的 ...