首页 > 解决方案 > 将请求快速发布到 json 本地文件

问题描述

我正在尝试对提交表单的项目进行快速模拟,该值将发布到本地 JSON 文件。我的 Get 请求有效并从 JSON 文件返回数据,但是,我正在努力设置 POST 请求。

这就是我的快速路线。

var express = require('express');
var router = express.Router();
var db = require('../mock/db.json');

/* GET items listing. */
router.get('/', function(req, res, next) {
  res.json(db);
});

// POST new Entry
router.post('/', async (req, res, next) =>{
  console.log('here inserting new entry', req.body);
  try {
    const { value } = req.body;
    console.log(value);
    // HOW DO I ADD THIS ENTRY TO THE JSON FILE?
  } catch (e) {
    return next(e)
  }
})

module.exports = router;

这就是我的表单组件中的内容:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

//form submit axios request to express API post to json.


function EntryForm() {

    const [ value, setValue ]= useState();

    function handleChange(evt){
            setValue(evt.target.value);
    }

    function submitForm(evt){
            console.log(value);
            evt.preventDefault();
            axios.post("http://localhost:3000/items/", value)
      .then(res => console.log(res))
      .catch(err => console.log(err));
    }


  return (
    <div className="entryForm">
        {/* form to add a value */}
                <div className="card">
                    <div className="card-header">
                        <h5 className="card-title">Value Converter</h5>
                    </div>
                    <form>
                            <div className="card-body">
                                <label htmlFor="number" className="form-label">Enter Value</label>
                                <input type="value" onChange={handleChange} className="form-control" id="value" aria-describedby="value" placeholder="Example: 10M, 3B, .5M"/>
                                <button onClick={submitForm} type="submit" className="submit-button btn btn-primary col-sm-12">Submit</button>
                                <a href="/results">Go to Results </a>
                        </div>
                </form> 
            </div>
</div>);}

导出默认的EntryForm;

I know I'm missing something but cant figure out what yet. 
Thanks for the help.

标签: jsonreactjsexpress

解决方案


推荐阅读