项目简介及背景

优房数据C端产品是集海外房产信息、数据、收集、分析、营销及服务为一体的海外房产互联网平台，在为国际买家、海外经纪人提供实时全面的房源数据，同时为国际投资服务机构提供专业精准的客户画像、企业数据及服务接口，订制符合标准的房源报告，为国际高净值客户或机构进行海外投资提供真正的专业并且智能化的数据及数据衍生品。

系统主要功能页面

首页、房源列表页及详情页、新闻资讯列表页及详情页、主题房源列表页及详情页、Ping++聚合支付-支付宝微信扫码支付功能、个人账户管理：房产报告管理、订单管理、收藏房源等等功能。

技术栈

Client: Vue全家桶、Iview UI，及其他第三方Vue插件，例如：axios、moment、lodash、lazyload、qrcoder等等。Pages目录总计27个.vue组件，Components目录总计124个.vue组件，Router配置共计16个页面。

PS：本项目17年初刚进公司时开发的第一版为前后耦合架构，后端Java+Thymeleaf模板引擎，前端jQuery，后来18年采用Vue重构。地图早期为Google maps，后采用Mapbox GL重构替换，数据可视化图表是Echarts。

第三方库

• Vue: cn.vuejs.org/v2/guide/in…
• Vuex：vuex.vuejs.org/zh/guide/
• Axios: axios-http.com/docs/api_in…
• Lodash: www.lodashjs.com/
• Vue-Lazyload: www.npmjs.com/package/vue…
• Vue-Router: router.vuejs.org/zh/api/
• qrcoder: www.npmjs.com/package/qrc…
• moment：www.npmjs.com/package/mom…
• vue-ripple-directive：www.npmjs.com/package/vue…

API 接口说明

获取房源列表数据

GET /house/search

Parameter	Type	Description
filed	String	Required, 排序字段
direction	String	Required, 排序顺序，desc：降序，asc：升序
page	Number	Required, 分页页数
pageSize	Number	Required, 分页大小
action	String	搜索方法：房源地址/MLS、城市、邮编
keyword	String	搜索关键字
type	Number	房源类型
beds	Number	卧室数量
baths	Number	卫浴数量
year	Number	房龄
minPrice	Number	最低价格
maxPrice	Number	最高价格
minSize	Number	最小面积
maxSize	Number	最大面积
maxX	Number	地图拖动搜索房源——北
minX	Number	地图拖动搜索房源——南
maxY	Number	地图拖动搜索房源——东
minY	Number	地图拖动搜索房源——西
isShowShareGroup	Boolean	是否展示分享组名称

安装、运行及部署构建步骤

# 安装依赖（第一次生成项目后）
npm install

# 开始本地开发，通过webpack-dev-server实时编译代码
npm run dev

# 构建测试环境的代码
npm run build:test

# 构建生产环境的代码
npm run build:prod

链接地址

生产环境：beta-client.mf-data.com

核心代码逻辑

①、关于地图的具体解决方案可以详看：juejin.cn/post/707202…

②、房屋贷款公式：Principal and Interest-本金和利息公式、Property Taxes-房产税公式，Homeowners' Insurance-业主保险公式，Mortgage Insurance-抵押贷款保险公式、每月还款本息(月供)。

③、房源详情页的10个图表模块的交互体验优化，如果数据齐全的情况下大概累计有上百个图表，没有数据的图表则不会展示，大多数房源的房源详情页里至少有50个图表以上。

初始技术方案是进入详情页后，就默认并发请求所有业务模块的图表数据接口，并展示全部图表实例，这样性能很差，页面会卡2~5s左右😅。

最终解决方案是默认进来页面后不请求业务模块的图表数据接口，只展示这10个业务模块的标题，每个模块都做成折叠面板的形式，点击标题则请求接口并展开该模块下的图表，并且只在第一次展开时请求一次接口即可，接口数据缓存起来，之后关闭再打开不会再请求接口，这样做以后性能比之前好了很多，详情页加载耗时大大缩短，性能极大改善。

④、使用Ping++聚合支付分为支付宝和微信支付两种场景，相关的页面付费弹窗的交互及接口轮询逻辑，及支付成功和失败场景，以及订单列表和重新支付等场景。

目录结构

├── build                                       // 构建工具配置文件夹
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js                    // Webpack基础配置
│   ├── webpack.dev.conf.js                     // 开发环境配置
│   └── webpack.prod.conf.js                    // 生产环境配置
├── config                                      // 项目配置
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── src                                         // 源码目录
│   ├── api                                     // 接口配置，对接口进行统一管理
│   ├── axios                                   // 公共静态资源
│   │   └── index.js                            // axios封装配置
│   ├── components                              // 公共通用、业务组件
│   │   ├── houseDetails                        // 房源详情页
│   │   ├── videoPlayer                         // 视频播放组件
│   │   ├── houseListMapInfowindow              // 地图的InfoWindow/Popup弹窗交互组件
│   │   ├── sameLatLngMapInfowindow             // 地图的InfoWindow/Popup弹窗交互组件
│   │   └── BackTop                             // 自定义返回顶部组件
│   ├── mixin                                   // 公共混入组件
│   │   └── echarts_radio                       // Echarts图表封装组件
│   ├── pages                                   // 业务组件页面
│   │   ├── account                             // 个人账户页
│   │   ├── homePage                            // 首页
│   │   ├── YFSJinfo                            // 页底公司介绍信息页
│   │   ├── houseListMap                        // 房源列表页，含左侧地图及右侧房源列表
│   │   ├── themeHouseList                      // 主题房源列表页
│   │   ├── themeHouseDetails                   // 主题房源详情页
│   │   └── errorPage                           // 错误页，例如404
│   ├── router                                  // 路由配置
│   │   ├── index.js                            // 路由配置及相关鉴权逻辑等等
│   │   └── routerMap.js                        // 路由枚举字典表
│   ├── utils                                   // 工具方法类库
│   │   └── globalBase.js                       // 挂载全局方法工具函数
│   ├── App.vue                                 // 页面入口根实例
│   └── main.js                                 // 程序入口文件，加载各种公共组件及插件配置 
├── static                                      // 公共静态资源
│   ├── css                                     // 公共通用样式
│   ├── img                                     // 公共图片
│   └── js                                      // 第三方库及插件的js文件
└──index.html                                   // 入口html文件

4 directories, 163 .vue组件，12 .js文件