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

个人头像

admin

文章都是52ABP官方发布和原创归纳整理的信息

前言

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

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

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. 修改项目调试启动配置信息

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

  1. .Web.Host 设置为启动项目
  2. 打开程序包管理控制台,并设置默认项目为 .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.jsonCorsOrigins 的配置,修改为你的前端的地址(如:前端项目地址为 http://localhost:666 ,就在这里修改或添加这个地址),以 英文逗号 分隔

前端要修改的位置:

找到 appconfig.json 配置文件,

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

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


个人头像

admin

文章都是52ABP官方发布和原创归纳整理的信息