交友项目【基础环境搭建】

墨蓝 2023-10-08 23:01 28阅读 0赞

**目录**

1：交友项目架构介绍

1.1：前后端分离的概述

1.2：YAPI介绍（虚拟机中已经配好）

基本信息

使用

安装跨域拓展（浏览器上安装跨域处理插件）

2：虚拟机工具项目搭建

2.1：虚拟机配置

2.1.1：修改虚拟机子网IP

2.1.2：配置虚拟机

第一步：查看虚拟机中docker中的镜像

第二步：进入base目录运行docker-compose.yml

第三步：输入命令 docker-compose up -d

3：安装电脑版Android模拟器，安装apk

3.1：介绍

3.2：在手机端模拟器上安装探花Apk

4：安装调试的工具PostMan

--------------------

## 1：交友项目架构介绍 ##

### 1.1：前后端分离的概述 ###

项目基于前后端分离的架构进行开发，前后端分离架构总体上包括前端和服务端，通常是多人协作开发

*  前后端分离开发基于**HTTP+JSON**交互 （RESTFul风格）
 *  通过接口文档（API文档）定义规范
 *  前后端按照文档定义请求及响应数据

![d35cbd1021be4cd793191f66abfed423.png][]

### 1.2：YAPI介绍（虚拟机中已经配好） ###

#### 基本信息 ####

YAPI已经在linux虚拟机中准备好了

请求地址：[http://192.168.136.160:3000/][http_192.168.136.160_3000]

用户名/密码：[tanhua@itcast.cn][tanhua_itcast.cn]/123456

#### 使用 ####

![8589d6fb060e4c5eb5ce605900d31ccd.png][]

![b97c8a42232649db93477a06fdfa51d7.png][]

![28ace9c55a1a4cb1b3cd1f8d1e192521.png][]

![1b88fc9624b7433aa6adb450e6e54899.png][]

*  对于接口的定义我们采用YApi进行管理，YApi是一个开源的接口定义 管理 提供mock数据的管理平台。![fd306af1bf714187b2acaacef7dddfc0.png][]
 *  接口定义：提供了交友项目中的所有接口，只需要根据接口完成后端开发即可
 *  mock数据，YApi提供了mock功能，就是模拟服务端返回测试数据：
 *  还可以运行http请求（需要在Chrome中安装支持跨域扩展 [chrome 安装 yapi 扩展教程 - 掘金][chrome _ yapi _ -]）：

#### 安装跨域拓展（浏览器上安装跨域处理插件） ####

这个是处理浏览器的请求的跨域的插件：

![803ca8339dff4fde8869f35ce0cf5de3.png][]

我将压缩包解压到了安装浏览器的那个目录然后在浏览器端加载拓展程序即可

![60d9f95a646f479fbcc57513b79e484d.png][]

## 2：虚拟机工具项目搭建 ##

虚拟机导入到本地的VM中，虚拟机中已经将全部的东西部署，只需要导入即可

![f221214dda374a81bbcf7faccd90255d.png][]

### 2.1：虚拟机配置 ###

#### 2.1.1：修改虚拟机子网IP ####

子网ip改为136，虚拟机配置了静态的ip地址 192.168.136.160

由于课程中使用了较多的软件，且之间会有联系，推荐同学IP地址设置为192.168.136.160 ![0fe948bf99c24149b9f3e584a8a42de2.png][]

仅仅需要修改虚拟机中的子网IP即可。

#### 2.1.2：配置虚拟机 ####

拷贝虚拟机 ![1a6d84be30664c5597d7019a4a5a30f4.png][]

添加虚拟机（文件/打开，选择解压后`linux-tanhua/centos7.vmx`）

![f221214dda374a81bbcf7faccd90255d.png][]

登录linux系统 ![50d47c2c05fe4e0b8c0fc05f2589d6b8.png][]

然后进入到虚拟机之后

我们需要将虚拟机中配置好的docker环境中的镜像进行启动

#### 第一步：查看虚拟机中docker中的镜像 ####

![c0f2cba90e1947928ef20b6cf434e7ac.png][]

#### 第二步：进入base目录运行docker-compose.yml ####

这个文件包含了启动配置镜像的命令可以进行一键启动

![3c85750c75a54da5bf620f7d34000aeb.png][]

![d8dd16e9fa2d4a93a315895425f8956e.png][]

#### 第三步：输入命令 docker-compose up -d ####

![a991a9e53d114105847c23184cb8f7ee.png][]

这样虚拟机的的基础环境已经全部完成配置

## 3：安装电脑版Android模拟器，安装apk ##

### 3.1：介绍 ###

*  客户端由前端团队进行开发，前端提供apk进行对接，所以，需要我们安装安卓的模拟器进行测试。

### 3.2：在手机端模拟器上安装探花Apk ###

*  国内常见的安卓模拟器产品，比如：
    
     *  网易：下载：[MuMu模拟器官网\_安卓模拟器\_网易手游模拟器][MuMu]
     *  夜神：下载：[夜神安卓模拟器-安卓模拟器电脑版下载\_安卓手游模拟器\_手机模拟器\_官网][-]
     *  雷电：下载：[雷电安卓模拟器-手游模拟器安卓版\_android手机模拟器电脑版\_雷电模拟器官网][-_android]
     *  ==逍遥==：下载：[逍遥安卓模拟器\_安卓模拟器电脑版\_安卓手游模拟器哪个好用\_逍遥手机模拟器官网][Link 1]
 *  选择一个自己可以用的模拟器就可以，本文档使用`逍遥模拟器`
 *  ![c3cd101f3e594008bfa87081a1635b26.png][]

下载：

安装：运行软件，一直下一步即可

*  逍遥模拟器可以安装在VMware虚拟机中

![7c20399f554c4685bf641cec8478d2c4.png][]

![b46066c0a4bd4d79a09b1bc5e864fa29.png][]

配置模拟器，显示成手机尺寸

拷贝：探花交友-v20220118.apk

![029d15920d7f402b8b95f747a8d14d8b.png][]

使用逍遥安装apk

![911f8b5db6134562bf07a34922d324e0.png][]

运行探花app ：ip需要在电脑黑窗口查看ipconfig

![4856f3b2efee4f78bb25fa5aec057677.png][]

## 4：安装调试的工具PostMan ##

Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。postman被500万开发者和超100,000家公司用于每月访问1.3亿个API。

官方网址：[Postman][]

解压资料文件夹中的软件，安装即可

![d7668125c5f744b89467609cf587cc1b.png][]

[d35cbd1021be4cd793191f66abfed423.png]: https://img-blog.csdnimg.cn/d35cbd1021be4cd793191f66abfed423.png
[http_192.168.136.160_3000]: http://192.168.136.160:3000/
[tanhua_itcast.cn]: mailto:tanhua@itcast.cn
[8589d6fb060e4c5eb5ce605900d31ccd.png]: https://img-blog.csdnimg.cn/8589d6fb060e4c5eb5ce605900d31ccd.png
[b97c8a42232649db93477a06fdfa51d7.png]: https://img-blog.csdnimg.cn/b97c8a42232649db93477a06fdfa51d7.png
[28ace9c55a1a4cb1b3cd1f8d1e192521.png]: https://img-blog.csdnimg.cn/28ace9c55a1a4cb1b3cd1f8d1e192521.png
[1b88fc9624b7433aa6adb450e6e54899.png]: https://img-blog.csdnimg.cn/1b88fc9624b7433aa6adb450e6e54899.png
[fd306af1bf714187b2acaacef7dddfc0.png]: https://img-blog.csdnimg.cn/fd306af1bf714187b2acaacef7dddfc0.png
[chrome _ yapi _ -]: https://juejin.im/post/6844904057707085832
[803ca8339dff4fde8869f35ce0cf5de3.png]: https://img-blog.csdnimg.cn/803ca8339dff4fde8869f35ce0cf5de3.png
[60d9f95a646f479fbcc57513b79e484d.png]: https://img-blog.csdnimg.cn/60d9f95a646f479fbcc57513b79e484d.png
[f221214dda374a81bbcf7faccd90255d.png]: https://img-blog.csdnimg.cn/f221214dda374a81bbcf7faccd90255d.png
[0fe948bf99c24149b9f3e584a8a42de2.png]: https://img-blog.csdnimg.cn/0fe948bf99c24149b9f3e584a8a42de2.png
[1a6d84be30664c5597d7019a4a5a30f4.png]: https://img-blog.csdnimg.cn/1a6d84be30664c5597d7019a4a5a30f4.png
[50d47c2c05fe4e0b8c0fc05f2589d6b8.png]: https://img-blog.csdnimg.cn/50d47c2c05fe4e0b8c0fc05f2589d6b8.png
[c0f2cba90e1947928ef20b6cf434e7ac.png]: https://img-blog.csdnimg.cn/c0f2cba90e1947928ef20b6cf434e7ac.png
[3c85750c75a54da5bf620f7d34000aeb.png]: https://img-blog.csdnimg.cn/3c85750c75a54da5bf620f7d34000aeb.png
[d8dd16e9fa2d4a93a315895425f8956e.png]: https://img-blog.csdnimg.cn/d8dd16e9fa2d4a93a315895425f8956e.png
[a991a9e53d114105847c23184cb8f7ee.png]: https://img-blog.csdnimg.cn/a991a9e53d114105847c23184cb8f7ee.png
[MuMu]: https://mumu.163.com/
[-]: https://www.yeshen.com/
[-_android]: https://www.ldmnq.com/
[Link 1]: https://www.xyaz.cn/
[c3cd101f3e594008bfa87081a1635b26.png]: https://img-blog.csdnimg.cn/c3cd101f3e594008bfa87081a1635b26.png
[7c20399f554c4685bf641cec8478d2c4.png]: https://img-blog.csdnimg.cn/7c20399f554c4685bf641cec8478d2c4.png
[b46066c0a4bd4d79a09b1bc5e864fa29.png]: https://img-blog.csdnimg.cn/b46066c0a4bd4d79a09b1bc5e864fa29.png
[029d15920d7f402b8b95f747a8d14d8b.png]: https://img-blog.csdnimg.cn/029d15920d7f402b8b95f747a8d14d8b.png
[911f8b5db6134562bf07a34922d324e0.png]: https://img-blog.csdnimg.cn/911f8b5db6134562bf07a34922d324e0.png
[4856f3b2efee4f78bb25fa5aec057677.png]: https://img-blog.csdnimg.cn/4856f3b2efee4f78bb25fa5aec057677.png
[Postman]: https://www.postman.com/
[d7668125c5f744b89467609cf587cc1b.png]: https://img-blog.csdnimg.cn/d7668125c5f744b89467609cf587cc1b.png