您现在的位置是:网站首页> 内容页

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

  • www.dhy0075. con
  • 2019-04-26
  • 111人已阅读
简介前言这个项目是基于ABPASPNetCore免费版,整合NG-Alian和NG-Zorro的项目,所以比较适合熟悉ABP和Angular2+的开发人员,如果你是新手,学习的话可以先了

前言

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

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

ABP资料:  

ABP官方文档-英文

ABP ASP.NET版 中文文档

Angular资料:

Angular官方中文文档

大漠穷秋Angular2基础视频教程

Antd-NG-Zorro 官方文档

NG-Alain 官网

 

话不多说,教程开始

 

一、下载项目

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

 

2、项目下载完成,准备配置项目

(clone根目录中的 src目录下 angular-zorro-free是前端angluar目录,aspnet-core是后台的目录)

 

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

1、还原nuget包

 

2、项目数据库连接字符串和跨域的基本配置  

将数据库连接字符串修改为你的连接字符串 (注意:默认数据库为sqlserver,最低2012版本)

 

3、修改项目调试启动配置信息

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

1、将     .Web.Host设置为启动项目

2、打开程序包管理控制台

3、设置默认项目为为 .EntityFrameworkCore

 4、输入命令,开始迁移 : update-database 

4、迁移完成

 

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

 

 四、前端项目初始化

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

1、打开前端项目目录( angular-zorro-free) (这里我使用的是vs code)

 

2、打开终端准备还原前端依赖库

3、输入命令,还原依赖库,我在这里是用的npm (npm install ) (可以用npm/yarn等等,看个人喜好)

4、安装完成,输入命令,运行项目 , npm start

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

登陆之后的页面

 

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

 

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

 

后端要修改的位置:

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

 

 前端要修改的位置:

找到 appconfig.json 配置文件,

1、将 remoteServiceBaseUrl 设置为后端的地址,如:    http://localhost:10010

2、将 appBaseUrl 设置为前端地址,如:      http://localhost:666

 

 

 按照上面这样修改完成之后应该就没有问题了,只要你没有改错的话....

 那么,这篇文章也就到此结束了,希望大家多多支持...

文章评论

Top