正式的进行查询以前。让我们使用统一的文件来重新初始化一个前后端分离的项目，以避免由于小版本问题可能给我们带来的困扰。 # 效果展示  # 下载 请点击：[下载地址](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) | > 在教程中我们尽量给出所用到的知识点的一些官方链接，有些内容当前阶段的你可能看不懂，这并不影响你对本教程的学习。我们之所以给出这些文档是期望教程能起到抛砖引玉的作用，让大家可以在官方教程中找到些灵感。