axios 我如何创建JSON文件到我的Mac,而我提交表单?

cgh8pdjw  于 2022-12-12  发布在  iOS
关注(0)|答案(1)|浏览(167)

我得到了简单的形式。我需要保存数据从提交的形式到JSON文件到我的mac。
我可以使用什么?AXIOS?VUELIDATE?我必须创建前端-创建表单,保存文件,将其发送到服务器(与同事servisa)有效数据,弹出窗口与“完成”
谢谢你

<div>
    <form>
      <div>
        <label
          for="order-id">
        </label>

        <input
          required
          minlength="1"
          id="order-id"
          type="text"
          placeholder="1547089" />
      </div>

    <div> 
        <label
          for="password">
        </label>
        <input
          v-model="password"
          required
          minlength="4"
          maxlength="4"
          type="password"
          placeholder="****" />
    </div>
        <div
          id="div-submit">
            <button
              v-bind:disabled="password.length < 4"
              id="submit"
            </button>
        </div>
    </form>
  </div>

<script>
export default {
  data() {
    return {
      password: '',
    }
  },
  setup(){
    const result = ref(null)

    fetch("http://localhost:5173/?")
      .then(response => response.json())
      .then(data =>result.value = data);

    return { result }
  }
}
rjjhvcjd

rjjhvcjd1#

我不是100%我得到你正在寻找什么:你想下载一个JSON文件到你的电脑上吗?
出于安全原因,您不能直接这样做,但我使用了一个变通方法。您需要在模板中使用一个<a>,并使用一个函数来更新它,并使用代码单击它。
JS/TS:

const downloadAnchorElem: Ref<HTMLAnchorElement | null> = ref(null);
const downloadAttrDownload = ref('');
const downloadAttrHref = ref('');
async function download(data: any) {
    const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
    downloadAttrHref.value = dataStr;
    downloadAttrDownload.value = data.title + '.json';
    await nextTick()
    downloadAnchorElem.value!.click();
}

模板:

<a ref="downloadAnchorElem" style="display: none;"
    :href="downloadAttrHref"
    :download="downloadAttrDownload"></a>

如果已经有一个JSON字符串,可以修改方法并传入该字符串,那么就不再需要JSON.stringify部分,但仍然需要encodeURIComponent

相关问题