ABP實踐(1)-通過官方模板建立ASP.NET Core 2.x版本+vue.js單頁面模板-啟動執行專案
1,開啟 ABP官網下載模板頁面
2,根據下圖選擇對應的選項及輸入專案名
注:上圖驗證碼下方的選擇框打鉤表示下載最新穩定版,不打鉤表示下載最新版本(有可能是預覽版)
3,解壓下載的壓縮包
解壓之後是個abp版本號命名的資料夾如下圖
啟動服務端專案步驟如下
1,vs2017開啟服務端專案xxx.sln,開啟之後右鍵解決方案還原Nuget包(vs2017開啟之後放著會自動還原其他版本有些需要下圖的操作)
2,專案開啟之後解決方案分層分析定義如下
3.1刪除基礎層xxx.EntityFrameworkCore下的Migrations預設的所有檔案(專案下載完之後 第一次需要刪掉裡面自帶的歷史記錄 )
3.2開啟工具>程式控制臺
①先設定遷移層xxx.migrator為啟動項
然後開啟展現層xxx.Web.Host下的appsettings.json修改資料庫連線字串ConnectionStrings (這裡有個疑問?遷移層下也有個配置資料庫的檔案,但是沒有效果後續研究看看---疑問可以忽略不看)
連線字串Data Source=ip;Initial Catalog=資料庫名稱;user=使用者名稱;password=密碼;
②新增資料遷移執行命令Add-Migration first_init結果如下圖表示成功
③執行更新資料庫命令Update-Database結果如下圖表示成功(執行完之後可以看到根據EF模型Model自動建立了資料庫和表)
④設定展現層xxx.Web.Host為啟動項f5執行可以看到如下介面
啟動前端vue專案步驟如下
1,前提是有vue執行環境( nodejs下載安裝 + yarn 類似npm包管理)
2,執行cmd→進入vue前端專案的目錄
3,①執行yarn install
②執行yarn serve --open
啟動之後 在瀏覽器看到的是 空白頁面 如果是用chrome瀏覽器按f12就可以看到如下圖的報錯,這說明存在跨域問題 看下面第③步 我們來解決這個問題
③停止服務端執行,就是停止vs;然後開啟展現層xxx.Web.Host專案下的appsettings.json檔案找到 CorsOrigins 在這個值加上 ,http://localhost:8082 這裡是控制有哪些域名埠可訪問,根據實際情況設定
修改之後重新執行服務端,然後重新整理頁面可看到頁面如下表示成功執行(預設賬號是admin密碼是123qwe)
