MapGIS Pan-Spatial Map

# 和服务端进行交互

数据服务是一个应用的灵魂，它驱动着应用的各个功能模块的正常运转。MapGIS Pan-Spatial Map 在 src/api 中封装了登录相关服务、获取应用基本配置信息服务、获取系统配置信息服务，以及镜像相关服务；在 @mapgis/web-app-framework包的 service 模块封装了插件需要用到的服务，通过 API 的形式可以和任何技术栈的服务端应用一起工作，因为项目中引用了多个插件包，所以为了让各插件包能够同样基于VUE_APP_API_BASE_URL去跟服务端交互，在@mapgis/web-app-framework中提供了专门的getRequest()接口。

# 服务交互流程

在 MapGIS Pan-Spatial Map 中，服务端交互流程如下：

  • 组件内调用 service 服务 API
  • service 服务 API 封装请求数据，通过 request.js 发送请求
  • 组件获取 service 返回的数据，更新视图数据或触发其它行为

我们以登录为例，Login.vue 组件内，用户输入账号密码，点击登录，调用 api/login api

api/login 封装账户密码数据，通过 request.js 发送登录服务请求

import { request } from '@/utils/request'
/**
 * 登录服务
 * @param parameter 登录参数，包含用户名、密码等信息
 * @returns {*}
 */
export function login(parameter) {
  return request({
    url: userApi.Login,
    method: 'post',
    data: parameter
  })
}

Login.vue 获取登录服务返回的数据，进行后续操作














 



 
 
 
 
 
 










<template>
  ...
</template>
<script>
import {login} from '@/store/modules/user'
...
export default {
  name: 'Login',
  methods: {
    handleSubmit () {
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true
          login(this.form)
            .then(res => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              this.logining = false
            })
        }
      })
    },
    loginSuccess(res) {
      ...
    },
    requestFailed(err) {
      this.loginErrorInfo = err?.response?.data?.msg || err
      ...
    },
  }
}
</script>

# 服务模块结构

服务模块结构如下：

...
├── src
│   └── api                     # 数据服务模块
│       ├── login.js            # 用户数据服务
│       ├── app
│           └── webConfig.js    # 查询应用基本配置信息服务
│       ├── system
│           └── config.js       # 查询系统配置信息服务和获取镜像相关服务
...
│   └── utils                   # 数据服务模块
│       ├── request.js          # 基于 axios 的 http 请求工具
...

提示

凭证认证类型默认为 Bearer (opens new window)，您可以根据自己的需要实现其它类型的认证

# Base url 配置

您可以在项目根目录下的环境变量文件(.env、.env.backend、.env.development、.env.preview)中配置您的 API 服务 base url 地址。

生产环境，.env.backend 文件

VUE_APP_API_BASE_URL=http://localhost:8015

开发环境，.env.development 文件：

VUE_APP_API_BASE_URL=http://localhost:8000

← 服务 →