【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/

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

  640?wx_fmt=png

  如果出现这个东东,那么说明你成功的安装了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项目的一些小经验(也或者说是小技巧)

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

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

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

     

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

原文地址https://www.cnblogs.com/chenxincoder/p/9333074.html

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

640?wx_fmt=jpeg

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

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

相关文章

YbtOJ#20070-[NOIP2020模拟赛B组Day5]诗人小K【状压dp】

正题 题目链接:http://noip.ybtoj.com.cn/contest/102/problem/4 题目大意 求有多少个长度为nnn的序列aaa满足1≤ai≤101\leq a_i\leq 101≤ai​≤10,且可以找到一组(i,j,k,l)(i,j,k,l)(i,j,k,l)使得(∑pij−1apx)&(∑pjk−1apy)&(∑pklapz)(\sum_{pi}^{j…

Codeforces Round #491 (Div. 2)

Codeforces Round #491 (Div. 2) A. If at first you dont succeed... 按题意判断 #include <bits/stdc.h> #define rep(i,a,b) for(int ia;i<b;i) #define pb push_back #define mem(W) memset(W,0,sizeof(W)) typedef long long ll; inline int read() {char cgetch…

学习分享会(2019.5.31)

学习分享会 First&#xff08;初三大佬发言&#xff09; 初三大佬在为初二大佬讲一堆哲学的道理&#xff0c;虽然十分高深&#xff0c;但还是听懂了一点点 Second&#xff08;初二大佬发言&#xff09; 初二大佬开始“秀”&#xff0c;首先是大佬LW讲了讲十分常识的东西&am…

微软宣布公开预览Dev Spaces for AKS

微软宣布公开预览面向Azure Kubernetes Services&#xff08;AKS&#xff09;的Dev Spaces&#xff0c;为团队提供了一种快速的Kubernetes迭代开发体验。该版本是继5月份Build 2018大会上Dev Spaces内部预览之后的版本。借助这个版本&#xff0c;微软希望为开发人员提供一种在A…

YbtOJ#20068-[NOIP2020模拟赛B组Day5]连通子图【构造】

正题 题目链接:http://noip.ybtoj.com.cn/contest/102/problem/2 题目大意 求构造一个包含根节点的联通子图kkk个的树。 解题思路 现在考虑一棵树&#xff0c;如果我们在根节点处加一个点&#xff0c;那么方案数会2\times 22。如果在根节点上加入一个父节点&#xff08;根会…

2018 ACM-ICPC World Finals - Beijing

2018 ACM-ICPC World Finals - Beijing A. Catch the Plane \(dp[v_i,t_i]\)表示时刻\(t_i\)在\(v_i\)点&#xff0c;到达终点的最大概率&#xff0c;那么转移方程为&#xff1a;\(dp[(v_i,t_i)] max(P_{ij}*dp[(v_{j1},t_{j1})] (1-Pij)*dp[(v_{i1},t_{i1})])\)\(dp[(v_i,t_…

解析Visual C# 7.2中的private protected访问修饰符

去年12月份&#xff0c;随着Visual Studio 2017 Update 15.5的发布&#xff0c;Visual C#迎来了它的最新版本&#xff1a;7.2. 在这个版本中&#xff0c;有个让人难以理解的新特性&#xff0c;就是private protected访问修饰符&#xff08;Access Modifier&#xff09;。至此&a…

【Floyed】廉价最短路径

廉价最短路径 题目大意&#xff1a; 一个图中&#xff0c;在满足最短路的前提下&#xff0c;求最小代价 原题&#xff1a; 题目描述 图是由一组顶点和一组边组成的。一条边连接两个顶点。例如&#xff0c;图1表示了一个有4个顶点V、5条边的图。图中&#xff0c;每条边e是有…

CF401C-Team【构造】

正题 题目链接:https://www.luogu.com.cn/problem/CF401C 题目大意 构造一个序列包含nnn个000和mmm个111且不含有连续两个000和连续三个111。 解题思路 考虑用110110110和101010来构造序列即可。 codecodecode #include<cstdio> #include<cstring> #include<…

哈希学习笔记

hash学习笔记 常用函数: $ hash[i] \sum _{ji} ^{len-1} {s[j]*X^{j-i}}, X ≥ |字符集| $ 取多个模&#xff0c;对于一个子串\(s[i]s[i1]..s[j]\)的\(hash hash[i] - hash[j1]*X^{j-i1}\)&#xff0c;预处理\(hash[i]\)以及\(X^i\)即可\(O(1)\)求出所有的子串hash值一般运用…

Net Core集成Exceptionless分布式日志功能以及全局异常过滤

相信很多朋友都看过我的上篇关于Exceptionless的简单入门教程[asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程][https://www.cnblogs.com/yilezhu/p/9193723.html] 上篇文章只是简单的介绍了Exceptionless是什么&#xff1f;能做什么呢…

【斐波那契】【前缀和】无限序列

无限序列 题目大意&#xff1a; 有这样一个规则&#xff1a;1.把“1”变成“10” 2.把“0”变成“1” 一个序列的第一位是“1” 然后是&#xff1a;“10”&#xff0c;“101”…… 序列无限次操作后会得到“1011010110110101101……” 问某一个区间内有多少个“1” 原题&…

CF496E-Distributing Parts【平衡树,贪心】

正题 题目链接:https://www.luogu.com.cn/problem/CF496E 题目大意 nnn个[li,ri][l_i,r_i][li​,ri​]&#xff0c;mmm个[ai,bi,ki][a_i,b_i,k_i][ai​,bi​,ki​]表示可以覆盖掉kik_iki​个ai≤li≤ri≤bia_i\leq l_i\leq r_i\leq b_iai​≤li​≤ri​≤bi​的区间&#xff0…

kmp学习笔记

kmp&#xff0c;扩展 kmp 学习笔记 说再前边 字符串水平基本为0&#xff0c;学了第4遍KMP了&#xff0c;总是忘。。。网上资料很多&#xff0c;就不详细讲解了。抄的kuangbin神犇模板 kmp 一些知识 循环节大小&#xff1a;n - nxt[n]模板[HDU2087] 下标从0开始 nxt[i] 为满足p[…

AspNetCore微服务下的网关-Kong(一)

Kong是Mashape开源的高性能高可用API网关和API服务管理层。它基于OpenResty&#xff0c;进行API管理&#xff0c;并提供了插件实现API的AOP。Kong在Mashape 管理了超过15,000 个API&#xff0c;为200,000开发者提供了每月数十亿的请求支持。本文将从架构、API管理、插件三个层面…

【DP】删数

删数 题目大意&#xff1a; 有一堆数x1,x2……xnx_1,x_2……x_nx1​,x2​……xn​&#xff0c;可以从两边删除一些数删除i~k的价值是∣xi–xk∣∗(k−i1)|xi – xk|*(k-i1)∣xi–xk∣∗(k−i1)&#xff0c;求价值最大是多少 原题&#xff1a; 题目描述 有N个不同的正整数数…

CF396B-On Sum of Fractions【数学】

正题 题目链接:https://www.luogu.com.cn/problem/CF396B 题目大意 定义 v(n)v(n)v(n)表示≤n\leq n≤n的最大整数u(n)u(n)u(n)表示>n>n>n的最小整数 求∑i2n1v(i)u(i)\sum_{i2}^n\frac{1}{v(i)u(i)}i2∑n​v(i)u(i)1​ 解题思路 有式子b−aab1a−1b\frac{b-a}{ab…

拥抱开源, Office 365开发迎来新时代

这个话题我曾经写过文章&#xff0c;也在一些场合做过专题分享。今天换一种方式&#xff0c;你可以直接点击下面这个小程序&#xff0c;用十分钟左右的时间&#xff0c;听我再讲一讲吧。你需要在微信里面才能看到下面的小程序链接&#xff0c;并且可以直接点击你可以打开该文档…

Wannafly挑战赛19

Wannafly挑战赛19 A. 队列Q 需要支持把一个元素移到队首&#xff0c;把一个元素移到队尾&#xff0c;移到队首就直接放到队首前面那个位置&#xff0c;原位置标为0&#xff0c;队尾同理。 #include <bits/stdc.h> #define rep(i,a,b) for(int ia;i<b;i) typedef long …

【模拟】俄罗斯方块

俄罗斯方块 题目大意&#xff1a; 在俄罗斯方块中&#xff0c;放一块方块进一个图中&#xff0c;问刚好和上的可能性有多少种 原题&#xff1a; 题目描述 相信大家都玩过“俄罗斯方块”游戏吧&#xff0c;“俄罗斯方块”是一个有趣的电脑小游戏&#xff0c;现有一个有C列、…