【问题总结（23）】post功能

思路

目标 把数据放store里
过程 参考二次录入 site.vue代码demo accountStore.js
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// js
const siteList = await this.$store.dispatch('site/GetList')//由此定位store/site.js
await this.$store.dispatch('site/Destroy', record)
const operatingStateMap = { add: 'site/Add', update: 'site/Update' }
//store/modules/site.js
import { siteService } from '@/api'//由此定位api/site.service.js

 actions: {
    async GetList ({ commit }, options) {
      const data = await siteService.getList()
      commit('SET_LIST', data)
      return data
    },
    async GetCurrent ({ commit }, options) {
      const data = await siteService.getCurrent(options)
      return data
    },
    async Destroy ({ commit }, options) {
      const data = await siteService.destroy(options)
      return data
    },
    async Add ({ commit }, options) {
      const data = await siteService.add(options)
      return data
    },
    async Update ({ commit }, options) {
      const data = await siteService.update(options)
      return data
    }
  }
//api/site.service.js
const getList = async (options) => {
  const path = '/site'//与下面的add（）相同
  const { data } = await createAuthInstance(baseUrl).get(path)//get功能
  return data
}

const getCurrent = async (options) => {
  const path = `/site/${options.nanoId}`//与下面的destroy() update()相同
  const { data } = await createAuthInstance(baseUrl).get(path)
  return data
}

const destroy = async (options) => {
  const path = `/site/${options.nanoId}`
  const { data } = await createAuthInstance(baseUrl).delete(path)
  return data
}

const add = async (options) => {
  const path = `/site`
  const { data } = await createAuthInstance(baseUrl).post(path, options)//post功能
  return data
}

const update = async (options) => {
  const path = `/site/${options.nanoId}`
  const { data } = await createAuthInstance(baseUrl).put(path, options)//put功能
  return data
}

开始注意到 不同的api接口方法，其request的方法也不同

对比demo
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
export function getAll (parameter) {
  return request({
    url: '/api/v1/account',
    method: 'get',
    params: parameter
  })
}

export function getOne (parameter) {
  return request({
    url: '/api/v1/account/id',
    method: 'get',
    params: parameter
  })
}

export function create (parameter) {
  return request({
    url: '/api/v1/account',
    method: 'post', //post功能：上传内容
    data: parameter
  })
}

export function update (parameter) {
  return request({
    url: '/api/v1/account/id',
    method: 'put',
    data: parameter
  })
}

export function destroy (parameter) {
  return request({
    url: '/api/v1/account/id',
    method: 'delete',
    params: parameter
  })
}

学习request http

request

get post的区别

HTTP请求的几种类型

url

HTTP协议详细介绍

什么是超文本

客户端 服务端 socket

客户端和服务端的网络通信过程