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


前言

這個項目是基於 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

按照上面這樣修改完成之后應該就沒有問題了,只要你沒有改錯的話....
那么,這篇文章也就到此結束了,希望大家多多支持...

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM