前端的技术文档

技术栈

• mvvm框架：vue
• 数据流管理： vuex
• 路由管理： souche-router
• 地图选型： 百度地图JSSDK（后期会接入高德）

整体架构图

整体框架图.png

baidu-map-moudle

封装的百度地图jssdk，已经封装好的类：

1. baidu-lushu: 轨迹轮放专用类，依赖lushu.js，在本地项目的public下打包好。
2. baidu-map-base: 百度地图基类，用于初始化地图，传入不同的经纬度，可以定位到不同的点，必须穿入承载地图的dom节点的ID。
3. baidu-marker: 地图覆盖物marker类，可在地图上初始化标志物，可以传入自定义图片。
4. baidu-poly-line: 地图画线类，传入点数据，可以在地图上初始化一条线

注意： 该类下的经纬点参数，一律不需要经过坐标系转化，转化的过程需要在业务组件内完成

公共组件

公共组件抽离出地图共用部分，可以被不同的业务组件调用，比如轨迹轮放，传入小车的信息和经过转化的经纬点数组，可以实现轨迹轮放功能，用于实现某一地图功能而开发。

业务组件

业务组件主要是调用api获取数据，将数据转化为相应的坐标系，并传入公共组件，业务组件主要承载相关业务的逻辑代码，以及外部装饰（例如，margin、padding和一些结构样式）

路由转换以及页面结构

页面结构.png

共用部分

导航栏和标题栏属于共用部分，在index.vue文件下被调用，业务组件在其router-view下被切换。

独立部分

404异常页和login、m-shareposition是独立的几个页面，不需要被header和menu所修饰

路由信息

export default {
    '/app': {
        path: 'views/index',
        name: 'index',
        children: {
            'track': {
                name: 'track',
                path: 'views/car-track'
            }
        }
    },
    '/login': {
        path: 'views/login',
        name: 'login'
    },
    '/m-sharepostion': {
        path: 'views/share-position',
        name: 'share-position'
    }

};

• /app 系统主要功能路由，每个详细的功能分别是它的子路由，比如/app/track等，进入这一级路由之前会被beforeEach钩子函数给捕获，检查登录信息和token，如果没有token将会被退回到login页面
• /login 登录页路由
• /m-sharepostion 移动端位置分享页面