[52ABP系列] - 001、SPA免费项目模版搭建教程

前言

这个项目是基于 ABP ASPNetCore 免费版，整合 NG-Alian 和 NG-Zorro 的项目，所以比较适合熟悉 ABP 和 Angular2+ 的开发人员，

如果你是新手，学习的话可以先了解以下资料

ABP资料:　　

ABP官方文档-英文

ABP ASP.NET版 中文文档

Angular资料:

Angular官方中文文档

大漠穷秋 Angular2 基础视频教程

Antd-NG-Zorro 官方文档

NG-Alain 官网

话不多说，教程开始

一、下载项目

1. 到github clone项目 : 项目地址

1. 项目下载完成，准备配置项目
   clone根目录中的 src目录下 angular-zorro-free是前端angluar目录，aspnet-core是后台的目录)

二、后端解决方案初始化配置

1. 还原nuget包

1. 项目数据库连接字符串和跨域的基本配置
   将数据库连接字符串修改为你的连接字符串 (注意:默认数据库为 SQL Server ，最低要求 2012 版本)

1. 修改项目调试启动配置信息
2. 

三、后端解决方案初始化数据库

1. 将 .Web.Host 设置为启动项目
2. 
3. 打开程序包管理控制台,并设置默认项目为 .EntityFrameworkCore

1. 输入命令，迁移数据库: update-database
   如果没有用过EFCore Code First做迁移，请先查阅资料 官方文档

到这里呢，后端解决方案就配置完成了，如果你的环境没有问题，这个时候只需要 Ctrl+F5 就能运行，运行成功后就能在浏览器看到如下界面了

四、前端项目初始化

后端项目配置完成之后，开始配置前端项目

1. 打开前端项目 并 还原前端依赖库
   (前端项目目录:angular-zorro-free)
   (这里我使用的是vs code打开的项目)
   (输入命令，还原依赖库，我在这里是用的npm (npm install ) (可以用npm/yarn等等，看个人喜好))

1. 前端依赖还原完成，输入命令运行项目: npm start

编译成功之后会自动打开浏览器，就能看到这个界面，默认账号: admin 密码: 123qwe

登陆之后的界面

至此，整个项目就成功运行起来

补充: 如果 后端 和 前端 的地址(IP、端口、域名)都修改了,需要重新修改后端和前端的配置

后端要修改的位置：

修改 appsettings.json 中 CorsOrigins 的配置，修改为你的前端的地址(如:前端项目地址为 http://localhost:666 ,就在这里修改或添加这个地址)，以 英文逗号 分隔

前端要修改的位置：

找到 appconfig.json 配置文件,

1. 将 remoteServiceBaseUrl 设置为后端的地址，如: http://localhost:10010
2. 将 appBaseUrl 设置为前端地址，如: http://localhost:666

按照上面这样修改完成之后应该就没有问题了，只要你没有改错的话....
那么,这篇文章也就到此结束了,希望大家多多支持...