vue-axios前端与beego后端，请求数据的交互方式

1. url批量参数形式，后端无需做截取

前端:  
data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      limit: 10,
      offset: 0,
      formInline: {
        title: "",
        content: "",
        warned_at: "",
        user_id: "",
        response_at: "",
        remark: "",
        type: "0"  // 预设值
      }
    };
  },
  mounted() {
    this.initTotal();
    this.onSubmit();
  },
  methods: {
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        var time = daterc.split("T", 1)
        return time;
      }
    },
    initTotal() {
      this.$axios.get(`/productiveProcess/`, {
          params: {
            query: this.formInline    // 跟拼接网址是一种形式，不同就是这样的话query可以是一堆，实质就是为了多传参数
          }
      }).then(res => {
        this.total = res.data.length;
      });
    },
    onSubmit() {
      this.$axios.get(`/productiveProcess/`, {
          params: {
            query: this.formInline,
            limit: this.limit,
            offset: this.offset
          }
      }).then(res =>{
        this.$axios.get(`/user/`).then(ures =>{
          if(res.data != null) {
            for (let data of res.data){
              for (let u of ures.data){
                if (data.user_id === u.id){
                  data.user_id = u.username
                }
              }
            }
          }
        }).then(()=>{
          this.tableData = res.data
        })
      })
    },

 

同种形式的参考：

（1）
    initTotal() {
      this.$axios({
        url: `/warning`,
        method:'GET',
        params:{"query":"type:1"}
      }).then(res => {
        this.total = res.data.length;
      });
    },

（2）
    this.$axios
      .get(`/warningVisualization?sortby=id&order=desc&limit=1`)
      .then(res => {
        if (res.data != null) {
          for (let data of res.data) {
            data.name = data.name + " 企业的工商营业执照即将过期,请更新!";
          }
        }
        this.warnTableData = res.data[0];
      });

后端：
func (c *WarningController) GetAll() {
	var fields []string
	var sortby []string
	var order []string
	var query = make(map[string]string)
	var limit int64 = 10
	var offset int64

	// fields: col1,col2,entity.col3
	if v := c.GetString("fields"); v != "" {
		fields = strings.Split(v, ",")
	}
	// limit: 10 (default is 10)
	if v, err := c.GetInt64("limit"); err == nil {
		limit = v
	}
	// offset: 0 (default is 0)
	if v, err := c.GetInt64("offset"); err == nil {
		offset = v
	}
	// sortby: col1,col2
	if v := c.GetString("sortby"); v != "" {
		sortby = strings.Split(v, ",")
	}
	// order: desc,asc
	if v := c.GetString("order"); v != "" {
		order = strings.Split(v, ",")
	}
	// query: k:v,k:v
	if v := c.GetString("query"); v != "" {
		for _, cond := range strings.Split(v, ",") {
			kv := strings.SplitN(cond, ":", 2)
			if len(kv) != 2 {
				c.Data["json"] = errors.New("Error: invalid query key/value pair")
				c.ServeJSON()
				return
			}
			k, v := kv[0], kv[1]
			query[k] = v
		}
	}

	l, err := models.GetAllWarning(query, fields, sortby, order, offset, limit)
	if err != nil {
		c.Data["json"] = err.Error()
	} else {
		c.Data["json"] = l
	}
	c.ServeJSON()
}

 2. 附带json参数形式，后端需做截取（ 去掉：{、}、"、" ）

前端：
data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 10,
      limit: 10,
      offset: 0,
      formInline: {
        name: "",
        contact: "",
        address: "",
        phone: "",
        category: ""
      }
    };
  },
  mounted() {
    this.initTotal();
    this.onSubmit();
  },
  methods: {
    initTotal() {
      this.$axios.get(`/supplier/`).then(res => {
        this.total = res.data.length;
      });
    },
    onSubmit() {
      this.$axios
        .get(`/supplier/`, {
          params: {
            query: this.formInline,
            limit: this.limit,
            offset: this.offset
          }
        })
        .then(res => {
          this.tableData = res.data;
        });
    },

 

后端：
func (c *SupplierController) GetAll() {
	var fields []string
	var sortby []string
	var order []string
	var query = make(map[string]string)
	var limit int64
	var offset int64

	// fields: col1,col2,entity.col3
	if v := c.GetString("fields"); v != "" {
		fields = strings.Split(v, ",")
	}
	// limit: 10 (default is 10)
	if v, err := c.GetInt64("limit"); err == nil {
		limit = v
	}
	// offset: 0 (default is 0)
	if v, err := c.GetInt64("offset"); err == nil {
		offset = v
	}
	// sortby: col1,col2
	if v := c.GetString("sortby"); v != "" {
		sortby = strings.Split(v, ",")
	}
	// order: desc,asc
	if v := c.GetString("order"); v != "" {
		order = strings.Split(v, ",")
	}

	// query: k:v,k:v
	if v := c.GetString("query"); v != "" {

		// 去掉 { 和 }
		v = strings.TrimPrefix(v, "{")
		v = strings.TrimSuffix(v, "}")

		for _, cond := range strings.Split(v, ",") {
			kv := strings.SplitN(cond, ":", 2)
			if len(kv) != 2 {
				c.Data["json"] = errors.New("Error: invalid query key/value pair")
				c.ServeJSON()
				return
			}

			// 去掉 " 和 "
			kv[0] = strings.TrimPrefix(kv[0], "\"")
			kv[0] = strings.TrimSuffix(kv[0], "\"")
			kv[1] = strings.TrimPrefix(kv[1], "\"")
			kv[1] = strings.TrimSuffix(kv[1], "\"")

			k, v := kv[0], kv[1]
			query[k] = v
		}
	}
	flag := ""
	l, err := models.GetAllSupplier(flag, query, fields, sortby, order, offset, limit)
	if err != nil {
		c.Data["json"] = err.Error()
	} else {
		c.Data["json"] = l
	}
	c.ServeJSON()
}

3. 其他参见：

    1）beego内的数据交互（自带的前端显示系统）：https://blog.csdn.net/chushoufengli/article/details/94319104