IDCF Boat House 快速开发指南

IDCF Boat House 项目架构：

指南概要

如上Boat House项目架构图所示:

• 基于 Spring Boot 框架开发的 Product Service 将为Boat House提供 REST API 数据支持；
• 基于Node Js + Vue 框架开发的后端管理平台 Management Web 将为Boat House提供后台数据管理功能。

本指南将以 Product Service 和 Boat House 后端管理平台 Management Web 为例在接下来的三个章节中介绍如何快速上手进行 管理网站 和 后台服务 的开发，以及跨技术栈/IDE情况下如何进行前后端到端的调试。

参考资料：

• boathouse架构图
• boathouse-本地调试结构图
• Selenium结构图

Product Service 快速上手指南

简介

Boat House Product Service 是 ：

• Boat House 的产品后台数据服务
• 基于Spring Boot 框架开发的 RESTFUL API
• 向前对 Boat House 各网站提供产品数据接口，向后使用MySql数据库进行数据存储

开发环境

• Windows/Mac OS
• Itellij IDEA IDE / Visual Studio Code
• Docker for Windows/Mac

  快速开始

开发模式我们提供了两种方式：

• 基于SmartIDE容器化开发环境的方式进行开发（推荐）：使用这种方式开发人员本地只需要安装docker，以及smartide命令行工具，不需要依赖开发所依赖的SDK, 甚至开发工具，所有的这些开发依赖都已经帮您在容器中配置好，你只需要一键启动开发环境，并开始你的开发调试。
• 本地开发环境进行开发：此种方式就是传统的软件开发模式，本地需要安装SDK，开发工具等。

（模式一）SmartIDE容器化开发模式

1. 如果本地没有开发环境，请参考以下连接，一步快速启动开发环境：https://gitee.com/idcf-boat-house/boat-house-backend/blob/master/src/product-service/api/.ide/readme.md

（模式二）传统开发模式

1. 安装 Itellij IDEA
2. 使用 IDEA 打开 Product Service Api 代码
3. 点击 pom.xml 查看外部引用项，并点击加载
4. Docker启动MySql本地数据库

    docker pull mysql
    docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=[Your Password] -d mysql
    docker ps

   
5. 修改 application.properties 文件数据库连接字符串
6. 运行 Product Service 站点
7. 浏览器打开 Swagger UI 地址（http://localhost:8080/api/v1.0/swagger-ui.html）

Management Web 快速上手指南

简介

Boat House Management Web 是：

• Boat House 的后台管理网站
• 基于 Node JS + Express + Vue 框架开发的网站应用
• 向前给 Boat House 管理者提供管理整个餐厅的功能，向后调用 REST API 使用 统计服务/产品服务/账户服务

开发环境

• Windows/Mac OS
• VS Code IDE
• nodejs

快速开始

1. 安装 VS Code, nodejs
2. 使用 VS Code 打开 Management Web 代码
3. 点击 package.json 查看外部引用项，并运行 npm install 加载
4. 修改 server.js 文件product service api 地址
5. 运行 npm run build 进行应用打包
6. 点击左侧 Debug 工具栏，启动 Debug
7. 浏览器打开网站地址（http://localhost:4000）

Product Service & Management Web 跨技术栈/IDE连调指南

整体架构图：

具体步骤

• Product Service ： IDEA Debugging Mode

1. IDEA中打开Product Service api 项目目录
2. 加载 Pom 文件中所需要的外部引用包
3. 点击右上角 Debug 键
4. Debug 已启动，端口号（默认8080）如下
5. 打开 Swagger UI(http://localhost:8080/), 确认服务已经可以被访问
6. 在要调试的方法上打断点

• Management Web 后端：VS Code Debugging Mode

1. VS Code中选中项目中的 server.js 文件，修改 product service 地址为 http://localhost:8080
2. 点击左侧 Debug 工具栏，启动 Debug
3. Debug 已启动，端口号（默认4000）如下
4. 在 server.js 要调试的后台函数中打断点

• Management Web 前端：用户浏览器（开发者模式）

1. 打开 Boat House 后台管理网站
2. F12开启浏览器开发者模式，点击Source找到要调试的.vue文件，在要调试的 js 函数中打断点
3. 开始连调，浏览器页面触发JS方法，监控 Http Request/Response 流转过程