vue向后台请求数据的配置和方法

一、与后台连接端口的配置

新建一个vue项目之后，向后台请求端口连接，作如下配置：

项目目录下的config，打开 index.js 

 下面的红色标识处需要重新配置相关参数，

 如下：

target: 'http://localhost:9085/',   这里的端口号对应后台启动的端口号；

     proxyTable: {
        '/api/*': {
          target: 'http://localhost:9085/',
          ws: true,
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          },
        },
      },

二、使用 fetch 请求后台接口，获取数据信息

1. 首先在vue项目utils 工具包下创建fetch.js 文件，内容如下：

import axios from 'axios';
import {
  Message
} from 'element-ui';

export default function defaultFetch() {}

export async function fetch(options) {

  try {
    let instance = await axios.create({
      timeout: 20000, // 超时
      headers: {
        // 'X-touchspring-Token': store.state.user.token,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    });
    let result = await instance(options);
    result = result.data;
    console.log(result);
    if (result.code === 1200 || result.code === 2000) {
      return result;
    } else {
      Message({
        message: result.message,
        type: 'error',
        showClose: true,
        duration: 2 * 1000,
      });
    }
  } catch (err) {
    console.log(err)
  }
}

2. 在src 下新建一个 api 文件夹，创建一个 js 文件，（名字自己随意）如：indoorMap.js ；

在里面可以编辑各种向后台请求接口的方法：增删查改等···

 

 实现方法indoorMap.js 需引入fetch ，qs,两个文件；     qs.stringify() 实现 json 数据的格式化为字符串

import { fetch } from "../utils/fetch";
import qs from 'qs';

/**
 * 查询所有室内地图信息
 */
export function findAllIndoorMap() {
	return fetch({
        /*url与后台映射地址匹配;  method 与映射的方法匹配-->包括 GetMapping PostMapping
         *    PutMapping  DeleteMapping 等注解方法
         */
		url: '/api/indoorMaps',
		method: 'get',
	});
}

/**
 * 根据mapId查询indoorMap
 */
export function findIndoorMapByMapId(mapId) {
	return fetch({
		url: `/api/indoorMaps/${mapId}`,
		method: 'get',
	});
}

/**
 * 根据id查询indoorMap
 */
export function findIndoorMapById(id) {
	return fetch({
		url: `/api/indoorMapsIds/${id}`,
		method: 'get',
	});
}

/**
 * 添加
 */
export function insertIndoorMap(indoorMap) {
	return fetch({
		url: '/api/indoorMaps',
		method: 'post',
		data: qs.stringify(indoorMap),
	});
}

/**
 * 更新
 */
export function updateIndoorMap(indoorMap) {
	return fetch({
		url: '/api/indoorMaps',
		method: 'put',
		data: qs.stringify(indoorMap),
	});
}

3. 界面中实现与后台数据库进行增删查改功能 

首先在 script 中引入 indoormap.js 文件中的需要的方法，import 引入

代码横线处为引用方式  const result =  ；

三、后台接口

 controller 层   对应接口的编写和  Maping接口

    /**
     * 查询当前项目所有室内地图
     *
     * @return .
     */
    @GetMapping("indoorMap/{projectId}")
    public ResultData findAllIndoorMap(@PathVariable("projectId") String projectId) {
        List indoorMapList = indoorMapDao.findByProjectId(projectId);
        if (indoorMapList != null) {
            return ResultData.ok().putDataValue("indoorMaps", indoorMapList);
        } else {
            return ResultData.notFound();
        }

    }


    /**
     * 根据mapId查询indoorMap
     *
     * @return .
     */
    @GetMapping("{mapId}/indoorMaps")
    public ResultData findIndoorMapByMapId(@PathVariable("mapId") String mapId) {
        IndoorMap indoorMap = indoorMapDao.findByMapId(mapId);
        if (indoorMap != null) {
            return ResultData.ok().putDataValue("indoorMaps", indoorMap);
        } else {
            return ResultData.notFound();
        }

    }


    
    /**
     * 根据id查询indoorMap
     *
     * @return .
     */
    @GetMapping("indoorMaps/{id}")
    public ResultData findIndoorMapById(@PathVariable("id") String id) {
        IndoorMap indoorMap = indoorMapDao.findById(id);
        if (indoorMap != null) {
            return ResultData.ok().putDataValue("indoorMaps", indoorMap);
        } else {
            return ResultData.notFound();
        }

    }


    /**
     * 保存
     *
     * @return .
     */
    @PostMapping("indoorMaps")
    public ResultData saveIndoorMap(IndoorMap indoorMap) {
        if (indoorMap != null) {
            //判断mapId是否一样
            indoorMap.setId(IdWorker.nextId());
            indoorMap.setCreateAt(new Date());
            indoorMap.setUpdateAt(new Date());
            int res = indoorMapDao.insertIndoorMap(indoorMap);
            if (res == 1) {
                return ResultData.ok().putDataValue("indoorMaps", indoorMap);
            } else {
                return ResultData.serverError();
            }
        } else {
            return ResultData.notFound();
        }

    }


    /**
     * 更新修改
     *
     * @return .
     */
    @PutMapping("indoorMaps")
    public ResultData updateIndoorMap(IndoorMap indoorMap) {
        if (indoorMap != null) {
            indoorMap.setUpdateAt(new Date());
            int res = indoorMapDao.updateIndoorMap(indoorMap);
            if (res == 1) {
                return ResultData.ok().putDataValue("indoorMaps", indoorMap);
            } else {
                return ResultData.serverError();
            }
        } else {
            return ResultData.notFound();
        }

    }