javascript - 如何使用 vue js 在提交时将表单数据保存在 .yml 文件中？

Question

我正在开发一个简历生成器，我希望能够保存 将表单数据输入到 .yml 文件中，但我似乎找不到任何文章 给我一些线索。我希望一旦单击提交按钮，数据就会自动写入.yml 文件中

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <div class="biography">
        <h2>Fill in your education information</h2>
        <label for="degree">Degree</label>
        <input id="degree"  type="text">
        <br/>
        <label for="from">From</label>
        <input id="from" type="date">
        <br/>
        <label for="to">To</label>
        <input id="to"  type="date">
        <br/>
        <button id="submit" type="submit">Submit</button>
    </div>
</template>

<script>
    export default {
        name: "Education"
    }
</script>

<style scoped>
    input {
        margin-left: 100px;
        margin-bottom: 10px;
        border: 2px;
        width: 300px;
        height: 3em;
        display: inline-block;
    }
    button {
        font-size: 16px;
        padding: 10px;
        background-color: #004d4d;
        color: white;
        border-radius: 6px;
    }
    button:active {
        background-color: #00e6e6;
    }
    label {
        position: absolute;
    }
</style>

Answer 1

如果您编写一个函数将输入值转换为表示有效 YAML 文本的字符串，则可以使用 Blob API 将其转换为文件。

作为媒体类型，请使用与您公司使用的其他 YAML 文件相同的类型(text/yaml、application/yaml、text/vnd.yaml 等)，因为我们(据我所知)还没有 YAML 的标准类型文件。

要实际保存文件，您需要从该 Blob 创建一个 URL，用户可以单击下载。 (请参阅 SO 或任何 JS blob-to-url 教程中有关此问题的大量其他问题。)

如果您实际上向服务器端脚本提交表单，可能有一堆服务器库可以创建 YAML 文件，您可以将其作为表单 POST 请求的响应返回。