【Abp VNext】实战入门（五）：【7】前端管理界面 vue-element-admin Get Post 方法传参 路径参数传递

一、前言：

前端框架 vue-element-admin 调用后 Abp Vnext 后端接口服务 参数传递方法总结，针对get 和非 get 有点儿不一样；

二、数据传递格式：

1、abp vnext 要求数据传递格式为 Content-Type：application/x-www-form-urlencoded

2、在接口请求类 request.js 请求拦截中 为所有接口请求添加 Content-Type

//http/request.js
// 1、添加请求拦截
service.interceptors.request.use((request) => {
  //0、开启转圈加载：最好是接口请求超过0.5秒才开启 否则每次接口调用都能看到转圈体验就不好了
  ShowLoading_Exit()
  // 1、Header添加Content-Type
  request.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  //2、自动检测并绑定token 
  if (Store.state.TokenInfo.AccessToken) {
    request.headers['Authorization'] = `Bearer ${Store.state.TokenInfo.AccessToken}`
  }
  return request
}, (error) => { // 请求出错
  console.log('请求拦截器错误:', error) // for debug
  //关闭转圈加载
  HideLoading_Exit()
  return Promise.reject(error)// 返回结果 可以采用 Result.Then(res=> do something!);
})

三、Get参数传递：常规参数

如：https://localhost:44349/api/app/device ?MaxResultCount=4&SkipCount=0

//business/device.js
import request from '@/http/request'
// 获取设备列表信息
export function GetLst(input) {
  return request({
    url: '/api/app/device',
    method: 'get',
    params: input //重点注意使用 params接收参数
  })
}

//xxx.vue
    Device_Load() {
    //参数方式1：可行
    // const tmpInput = new URLSearchParams()
    // tmpInput.append('MaxResultCount', 2)
    // tmpInput.append('SkipCount', 1)      

	//参数方式2：也可行
	const tmpInput = {
        MaxResultCount: 2,
        SkipCount: 1
      }
      
      this.$Api.Device.GetLst(tmpInput).then(res => {
        console.log(res)
      })
    }

四、Get路径参数传递：参数直接作为路径的形式传递 伪静态

狗日的Abp vnext 统一的格式改成了这种 和以前的 ABP不一样了 前端调用的时候一脸懵逼都，都不知道如何传递路径参数；也不知道这种格式优势是什么，完全没有以前的get，create、put香…

接口调用方式：https://localhost:44349/api/app/device /18

//business/device.js
import request from '@/http/request'
// 获取设备列表信息
export function GetById(id) {
  return request({
    url: `/api/app/device/${id}`,
    method: 'get'
  })
}

//detai.vue 
import Device from '@/business/device.js'
Device.GetById(18).then(res => {
        console.log(res)
      })

五、Post参数传递：

import request from '@/http/request'
export function Login(data) {
  return request({
    url: '/connect/token',
    method: 'post',
    data: data //重点注意使用 data接收参数
  })
}

//xxx.vue
 const qs = require('qs')
 let loginForm={
        username: 'admin',
        password: 'Admin12345*',
        client_id: 'GasMonitoring_App',
        client_secret: '1q2w3e*',
        grant_type: 'password'
      }
      
 let tmpInput=qs.stringify(loginForm)
 
 this.$Bussiness.User.Login(tmpInput).then((res) => {
      console.log(res)
 }

六、总结：

针对 这种 https://localhost:44349/api/app/device /18 参数直接作为链接的一部分存在的接口，真的没感觉有啥优势；

查询单条记录是这个基础路径/api/app/device 查询列表记录也是这个基础路径/api/app/device 调用起来感觉很混乱；

前端采用的vue-element-admin 自带的 axios 接口请求封装 又没办法 直接声明一个接口通过传递不同参数或者格式来拼成最后的请求路径； 还不如以前的 Get GetAll Create Put 明明白白的一对一来的干净利索。