前言
這個項目是基於 ABP ASPNetCore 免費版,整合 NG-Alian 和 NG-Zorro 的項目,所以比較適合熟悉 ABP 和 Angular2+ 的開發人員,
如果你是新手,學習的話可以先了解以下資料
ABP資料:
Angular資料:
話不多說,教程開始
一、下載項目
- 到github clone項目 : 項目地址
- 項目下載完成,准備配置項目
clone根目錄中的 src目錄下 angular-zorro-free是前端angluar目錄,aspnet-core是后台的目錄)
二、后端解決方案初始化配置
- 還原nuget包
- 項目數據庫連接字符串和跨域的基本配置
將數據庫連接字符串修改為你的連接字符串 (注意:默認數據庫為SQL Server
,最低要求2012
版本)
- 修改項目調試啟動配置信息
三、后端解決方案初始化數據庫
- 將 .Web.Host 設置為啟動項目
- 打開程序包管理控制台,並設置默認項目為 .EntityFrameworkCore
- 輸入命令,遷移數據庫:
update-database
如果沒有用過EFCore Code First做遷移,請先查閱資料 官方文檔
到這里呢,后端解決方案就配置完成了,如果你的環境沒有問題,這個時候只需要 Ctrl+F5 就能運行,運行成功后就能在瀏覽器看到如下界面了
四、前端項目初始化
后端項目配置完成之后,開始配置前端項目
- 打開前端項目 並 還原前端依賴庫
(前端項目目錄:angular-zorro-free)
(這里我使用的是vs code打開的項目) (輸入命令,還原依賴庫,我在這里是用的npm (npm install ) (可以用npm/yarn等等,看個人喜好))
- 前端依賴還原完成,輸入命令運行項目:
npm start
編譯成功之后會自動打開瀏覽器,就能看到這個界面,默認賬號: admin 密碼: 123qwe
登陸之后的界面
至此,整個項目就成功運行起來
補充: 如果 后端 和 前端 的地址(IP、端口、域名)都修改了,需要重新修改后端和前端的配置
后端要修改的位置:
修改 appsettings.json 中 CorsOrigins 的配置,修改為你的前端的地址(如:前端項目地址為 http://localhost:666 ,就在這里修改或添加這個地址),以 英文逗號 分隔
前端要修改的位置:
找到 appconfig.json 配置文件,
- 將 remoteServiceBaseUrl 設置為后端的地址,如: http://localhost:10010
- 將 appBaseUrl 設置為前端地址,如: http://localhost:666
按照上面這樣修改完成之后應該就沒有問題了,只要你沒有改錯的話....
那么,這篇文章也就到此結束了,希望大家多多支持...