Day28 NodeJS实作 II

前端新增的基本页面设计完，今天的内容是以後端为主，建立新增待办事项的API，以将前端传递的资料写入资料库。

後端应用程序

这里的後端实作以Express作为框架、mongoDB作为资料库，使用mongoose套件作为资料库管理工具。

let express = require("express");
let mongoose = require("mongoose");

接着加入Path为/api/addItem的post方法，分别为接收资料与写入资料库的中介与回传资料的中介层，并设定Server监听port为2000，为了避免资料在写入前就进入回传资料的方法，这边使用promise套件，以Promise进行非同步执行。

let Promise = require("promise");
let app = express();
var saveRes;
let port = process.env.PORT || 2000;

app.use(express.json());
app.post("/api/addItem", (req, res, next) => {
    addItem(req.body).then(next);   // 写入资料库，下面定义
});

app.post("/api/addItem", (req, res) => {
    res.end(saveRes);
});

app.listen(port);

定义addItem函式与设定Promise，透过mongoose建立与资料库的连线，将请求的资料内容写入资料库，并回传储存状态讯息。

let addItem = ((data) => { new Promise((resolve, reject)=> {
    mongoose.connect("mongodb://localhost:27017/todoProj")
        .then(() => {
            let Schema = mongoose.Schema;
            let itemSchema = new Schema({
                Title: String,
                Note: String,
                Date: String,
                Tag: String
            });

            let itemData = mongoose.model("Item", itemSchema);

            let _item = itemData({
                Title: data.Title,
                Note: data.Note,
                Date: data.Date,
                Tag: data.Tag
            });

            _item.save((err) => {
                if (err) saveRes = "Failed";
                saveRes = "Success";
                resolve(saveRes);
            });
        }).catch(err=>{
          console.log(err);
          reject(err);
        });
    });
});

前端应用程序

在前一天的完成的应用程序中，首先设定package.json中的proxy为http://localhost:2000。再到App.js里，AddItem函式的onSubmit方法透过submitHandler解析提交资料後，将资料以fetch方法向後端应用程序提出POST请求，并取得储存状态讯息。

// App.js
// ...
// function AddItem()

const onSubmit = data => AddTodo(data);

function AddTodo(data) {
  console.log(data);
  fetch("/api/addItem", {
    method: "POST",
    body: JSON.stringify(data),
    headers: new Headers({ "Content-Type": "application/json" })
  }).then(res => {
    alert(res.text())
  }).catch(err => console.log(err));
}

小结

前端与後端的连接上，最常遇到的就是proxy的问题，解决的方法感觉都很靠运气...如果有大大能提供点建议就真的太感谢 今天的进度就到新增项目完成，希望明天能顺利完成编辑的前後端...