正式的進行查詢以前。讓我們使用統一的文件來重新初始化一個前后端分離的項目，以避免由于小版本問題可能給我們帶來的困擾。 # 效果展示  # 下載 請點擊：[下載地址](https://github.com/mengyunzhi/spring-boot-and-angular-guild/archive/step2.2.zip)，下載后將其解壓到自己喜歡的位置，以后這個位置便是我們學習的項目目錄了。解壓后將得到以下目錄： ``` . ├── api │?? ├── HELP.md │?? ├── mvnw │?? ├── mvnw.cmd │?? ├── pom.xml │?? └── src └── web-app ├── README.md ├── angular.json ├── browserslist ├── e2e ├── karma.conf.js ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 其中`api`文件夾為后臺，`web-app`文件夾為前臺。后臺是一個標準的`maven`托管的項目，前臺是一個標準的`npm`托管的項目。這也是網上一些示例代碼的標準的文件結構。說起來有些慚愧，大概是在3年前我購買了一套模板，然后下然到本地大概就是上面的文件結構，當時自己除了能看看源代碼外，根本就不知道應該如何在這種代碼下起環境，所以高喊上當。然后大概又過了1年，記憶差的自己在相同的站點上又以同樣的價格購買了相同的模板。。。下載到本地后竟然感覺似曾相識，不同的是此次一看目錄結構便知道是它是個`npm`管理的前臺項目，起動環境也是再常規不過的操作了。 ## 啟動前臺 進入前臺項目文件夾`web-app`，然后執行`npm install --registry=https://registry.npm.taobao.org`來完成依賴包的安裝。接著執行`ng serve`來啟動前臺。日志如下： ``` panjiedeMac-Pro:web-app panjie$ npm install --registry=https://registry.npm.taobao.org up to date in 6.965s ╭────────────────────────────────────────────────────────────────╮ │ │ │ New minor version of npm available! 6.9.0 → 6.11.3 │ │ Changelog: https://github.com/npm/cli/releases/tag/v6.11.3 │ │ Run npm install -g npm to update! │ │ │ ╰────────────────────────────────────────────────────────────────╯ panjiedeMac-Pro:web-app panjie$ ng serve 10% building 3/3 modules 0 active? ?wds?: Project is running at http://localhost:4200/webpack-dev-server/ ? ?wds?: webpack output is served from / ? ?wds?: 404s will fallback to //index.html chunk {main} main.js, main.js.map (main) 49.5 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 10.1 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.08 MB [initial] [rendered] Date: 2019-09-30T00:14:25.229Z - Hash: 54ed3cc2956637b195e9 - Time: 7060ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ? ?wdm?: Compiled successfully. ``` >[info] `ng serve`啟動項目；`ng serve --open`啟動項目并自動打開瀏覽器。 然后找到自己喜愛的瀏覽器(教程中使用chrome。IE系列瀏覽器的性格不太穩定，推薦使用firefox或chrome)，打開[http://localhost:4200](http://localhost:4200)，查看前臺啟動效果。 ## 啟動后臺 依次操作`IDEA` -> `open` -> `api/pom.xml` -> `open` -> `Open as Project`  耐心等待，直至`IDEA`為我們安裝成功所有的依賴，`IDEA`最上方的啟動按鈕點亮。  > 此時點擊啟動按鈕后，系統在啟動的過程中會發生錯誤，這是由于我們沒有配置數據庫連接信息造成的，正常。 # 參考文檔 | 名稱 | 鏈接 | | --- | --- | | Angular中文--搭建環境 | [https://www.angular.cn/guide/setup-local](https://www.angular.cn/guide/setup-local) | | 項目源碼| [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.2) | > 在教程中我們盡量給出所用到的知識點的一些官方鏈接，有些內容當前階段的你可能看不懂，這并不影響你對本教程的學習。我們之所以給出這些文檔是期望教程能起到拋磚引玉的作用，讓大家可以在官方教程中找到些靈感。