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 =  ；

<script>

	import {insertIndoorMap,updateIndoorMap,findAllIndoorMap,findIndoorMapById,} from "../api/indoorMap";
	import { formatDate } from '../utils/dateConvert';

	

	/**
	 * 彈窗提交數據
	 */
	async function submitData() {

		delete this.form.data.createAt;
		delete this.form.data.updateAt;
-------------------------------------------------------------------------------------
		const result = (this.form.data.id) ? await updateIndoorMap(this.form.data) : await insertIndoorMap(this.form.data);
		const messages = (this.form.data.id) ? '更新成功' : '添加成功';

		if (result.code === 1200) {
			this.$message({
				message: messages,
				type: 'success',
			});
			this.initData();
			this.dialogVisible = false;
		} else {
			this.$message({
				message: '添加失敗',
				type: 'fail',
			});
			this.dialogVisible = false;
		}

	}

	/**
	 * 編輯按鈕
	 */
	function editIndoorMap() {
		if (this.isSelectCurrentRow === true) {
			this.dialogVisible = true;
			this.dialogTitle = "編輯樓層信息";
		} else {
			this.$message({
				message: '請選中記錄！',
				type: 'error',
			});
		}
	}

	/**
	 * 添加操作
	 */
	function addIndoorMap() {
		this.dialogTitle = '添加樓層信息';
		this.dialogVisible = true;
	}

	/**
	 * 處理關閉彈窗
	 */
	function handleClose() {
		this.form.data = {};
		this.dialogVisible = false;
	}

	/**
	 * 初始化數據列表
	 * @returns {Promise.<void>}
	 */
	async function initData() {
-------------------------------------------------------------------------------------
		const result = await findAllIndoorMap();
		if (result.code === 1200) {
			this.tableData = [];
			result.data.indoorMaps.forEach((im) => {
				let createAt = formatDate1(im.createAt);
				let updateAt = formatDate1(im.updateAt);
				let indoorMap = im;
				indoorMap.createAt = createAt;
				indoorMap.updateAt = updateAt;
				this.tableData.push(indoorMap);
			});
		}
	}

	

	/**
	 * 選中某行數據
	 * @param row
	 * @returns {Promise.<void>}
	 */
	async function rowClick(row) {
		this.isSelectCurrentRow = true;
		let id = row.id;
		if (id !== null) {
-------------------------------------------------------------------------------------
			const result = await findIndoorMapById(id);
			if (result.code === 1200) {
				this.form.data = result.data.indoorMaps;

				console.log("-圖片地址-" + result.data.indoorMaps.image);
			}
		}

	}


	
	function cancelButton() {
		this.form.data = {};
		this.dialogVisible = false;
	}


	export default {
		data() {
			return {
				tableDisable: true,
				hideButton: true,
				tableData: [],
				totalDataCount: 1,
				pageCount: 5,
				pageSize: 1,

				doType: '',
				dialogTitle: '',
				dialogVisible: false,

				labelPosition: 'left',

				form: {
					data: {
						id: '',
						mapId: '',
						image: '',
						width: '',
						height: '',
						createAt: '',
						updateAt: '',
					},
				},

				

			};
		},
		methods: {

			initData,
			rowClick,
			handleClose,
			submitData,
			handleImageSuccess,
			addIndoorMap,
			editIndoorMap,
			formatDate1,
			cancelButton,

			hideTable() {
				this.tableDisable = !this.tableDisable;
				this.hideButton = !this.hideButton;
			},

		},


		created() {

			this.initData();
		},

	};
</script>

三、後臺接口

 controller 層   對應接口的編寫和  Maping接口

    /**
     * 查詢當前項目所有室內地圖
     *
     * @return .
     */
    @GetMapping("indoorMap/{projectId}")
    public ResultData findAllIndoorMap(@PathVariable("projectId") String projectId) {
        List<IndoorMapDto> 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();
        }

    }