Spring Webflux&Angular集成測試

原始項目地址:

https://github.com/hantsy/angular-spring-reactive-sample

項目使用的數據庫是Mongo，需要先安裝

Mongo安裝配置步驟:

下載mongodb-win32-x86_64-2008plus-ssl-4.0.3.zip，解壓壓縮包

新建一個mongdb的數據文件目錄和日志文件

新建一個mongo.conf文件

#?mongod.conf #?for?documentation?of?all?options,?see: #???http://docs.mongodb.org/manual/reference/configuration-options/ #?where?to?write?logging?data. systemLog: ??destination:?file ??logAppend:?true ??path:?d:\xxx\mango.log #?Where?and?how?to?store?data. storage: ??dbPath:?d:\xxx\db ??journal: ????enabled:?true #??engine: #???mmapv1: #????enabled:?true #??wiredTiger: #?how?the?process?runs #processManagement: #??fork:?true??#?fork?and?run?in?background #??pidFilePath:?/var/run/mongodb/mongod.pid??#?location?of?pidfile #??timeZoneInfo:?/usr/share/zoneinfo #?network?interfaces net: ??port:?xxxx ??bindIp:?xx.xx.xx.xx??#?Enter?0.0.0.0,::?to?bind?to?all?IPv4?and?IPv6?addresses?or,?alternatively,?use?the?net.bindIpAll?setting. #security: #operationProfiling: #replication: #sharding: ##?Enterprise-Only?Options #auditLog: #snmp:

進入壓縮包解壓后的bin目錄，在控制臺執行命令安裝服務

mongod.exe?--config d:\xxxx\mongodb.conf?--install

啟動mongodb服務

net start mongodb

參考文檔：

https://blog.csdn.net/fengziyun/article/details/9384013

https://www.jianshu.com/p/4a91529fbaed

啟動服務端程序

使用eclipse選擇項目server目錄中的pom文件，導入maven項目

修改application.yml中的服務端口和mangodb的服務地址和端口

使用spring-boot:run 啟動項目

啟動成功后可以使用瀏覽器訪問服務地址可以使用admin/password登錄，由于服務端只提供rest服務沒有頁面其他效果看不到

啟動客戶端程序

使用vscode打開client目錄

執行npm install任務

執行ng serve啟動客戶端資源服務器

啟動成功后，如下

可以使用admin/password或者user/password登錄測試

字體重疊是由于fonts.googleapis.com的訪問問題

@import "https://fonts.googleapis.com/css?family=Material+Icons";

/*?fallback?*/ @font-face?{ ??font-family:?'Material?Icons'; ??font-style:?normal; ??font-weight:?400; ??src:?url(https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)?format('woff2'); } .material-icons?{ ??font-family:?'Material?Icons'; ??font-weight:?normal; ??font-style:?normal; ??font-size:?24px; ??line-height:?1; ??letter-spacing:?normal; ??text-transform:?none; ??display:?inline-block; ??white-space:?nowrap; ??word-wrap:?normal; ??direction:?ltr; ??-webkit-font-feature-settings:?'liga'; ??-webkit-font-smoothing:?antialiased; }

@import "https://fonts.googleapis.com/css?family=Roboto:400,300";

/*?cyrillic-ext?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2)?format('woff2'); ??unicode-range:?U+0460-052F,?U+1C80-1C88,?U+20B4,?U+2DE0-2DFF,?U+A640-A69F,?U+FE2E-FE2F; } /*?cyrillic?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2)?format('woff2'); ??unicode-range:?U+0400-045F,?U+0490-0491,?U+04B0-04B1,?U+2116; } /*?greek-ext?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2)?format('woff2'); ??unicode-range:?U+1F00-1FFF; } /*?greek?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2)?format('woff2'); ??unicode-range:?U+0370-03FF; } /*?vietnamese?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2)?format('woff2'); ??unicode-range:?U+0102-0103,?U+0110-0111,?U+1EA0-1EF9,?U+20AB; } /*?latin-ext?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2)?format('woff2'); ??unicode-range:?U+0100-024F,?U+0259,?U+1E00-1EFF,?U+2020,?U+20A0-20AB,?U+20AD-20CF,?U+2113,?U+2C60-2C7F,?U+A720-A7FF; } /*?latin?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?300; ??src:?local('Roboto?Light'),?local('Roboto-Light'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2)?format('woff2'); ??unicode-range:?U+0000-00FF,?U+0131,?U+0152-0153,?U+02BB-02BC,?U+02C6,?U+02DA,?U+02DC,?U+2000-206F,?U+2074,?U+20AC,?U+2122,?U+2191,?U+2193,?U+2212,?U+2215,?U+FEFF,?U+FFFD; } /*?cyrillic-ext?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2)?format('woff2'); ??unicode-range:?U+0460-052F,?U+1C80-1C88,?U+20B4,?U+2DE0-2DFF,?U+A640-A69F,?U+FE2E-FE2F; } /*?cyrillic?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2)?format('woff2'); ??unicode-range:?U+0400-045F,?U+0490-0491,?U+04B0-04B1,?U+2116; } /*?greek-ext?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2)?format('woff2'); ??unicode-range:?U+1F00-1FFF; } /*?greek?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2)?format('woff2'); ??unicode-range:?U+0370-03FF; } /*?vietnamese?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2)?format('woff2'); ??unicode-range:?U+0102-0103,?U+0110-0111,?U+1EA0-1EF9,?U+20AB; } /*?latin-ext?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.woff2)?format('woff2'); ??unicode-range:?U+0100-024F,?U+0259,?U+1E00-1EFF,?U+2020,?U+20A0-20AB,?U+20AD-20CF,?U+2113,?U+2C60-2C7F,?U+A720-A7FF; } /*?latin?*/ @font-face?{ ??font-family:?'Roboto'; ??font-style:?normal; ??font-weight:?400; ??src:?local('Roboto'),?local('Roboto-Regular'),?url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2)?format('woff2'); ??unicode-range:?U+0000-00FF,?U+0131,?U+0152-0153,?U+02BB-02BC,?U+02C6,?U+02DA,?U+02DC,?U+2000-206F,?U+2074,?U+20AC,?U+2122,?U+2191,?U+2193,?U+2212,?U+2215,?U+FEFF,?U+FFFD; }

客戶端打包部署

在vscode控制臺輸入ng build會生成dist打包目錄

將dist目錄中的文件拷貝到server/src/resources/static目錄下

訪問服務端ip:服務端port/index.html效果同上，測試發現調用服務的時候鏈接里多了個/api導致錯誤，查找到/api替換為空功能恢復正常

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。