Hi，大家好，昨天我們完成了登入&變更密碼機制，按照預定的作業流程，我們今天來處理的是表單輸入的機制，在這裡我們會使用vue.js送出資料到後端，後端資料接收資料後，利用sequelize 存入資料庫，那麼讓我們開始吧

輸入表單送出

<div id="app">
    <div class="d-flex align-items-center py-4 bg-body-tertiary">
        <main class="form-signin w-100 m-auto">
            <h1 class="h3 mb-3 fw-normal">請輸入您的問題</h1>

            <div class="form-floating">
                <input type="text" v-model="data.casedesc" class="form-control" id="floatingInput">
                <label for="floatingInput">問題概述</label>
            </div>
            <label for="floatingPassword">詳細說明</label>
            <div class="form-floating">
                <textarea v-model="data.caseinfo" id="floatingPassword" style="width: 100%;" rows="20">
                </textarea>
            </div>
            <button class="btn btn-primary w-100 py-2" @click="senddata()">送出</button>
        </main>
    </div>
</div>
<script>
    const { createApp, onBeforeMount, reactive } = Vue
    const data = reactive({ casedesc: "", caseinfo: "" })
    createApp({
        setup() {
            return { data }
        },
        methods: {
            senddata() {
                axios.post("/saf/mgr/api/saveCase", {
                    casedesc: data.casedesc,
                    caseinfo: data.caseinfo
                }).then(function (response) {
                    let rt = response.data
                    if (rt.status == "00") {
                        alert("存檔成功")
                    }
                }).catch(function (response) {
                    alert(response.response.data)
                })
            }
        }
    })
        .mount('#app')
</script>

說明：

1. 在vue.js 的setup()處，初始化表單變數「data」，並賦予 casedesc: "問題描述", caseinfo: "詳細說明" 2個屬性
2. 在表單中利用 v-model 將表單元件與vue.js 之變數進行連結，之後表單元素的值變更後，vue.js 中的 data 內容也跟著變更
3. 定義 senddata method ，透過 axios 套件進行 post，並檢驗回傳值，若回傳的 json 物件中的 status = "00"，表示寫入成功，並顯示訊息

router 接收作業

打開 /routers/mgr.js，新增下方之 router 功能

/**
 * 客服資料新增
 */
router.post("/api/saveCase", async(req, res, next) => {
    let dataobj = req.body
    try {
        let result = await casedao.saveCase(dataobj)
        if(result) {
            res.json(result)
        } else {
            res.status(500).send("資料儲存失敗")
        }
    } catch(err) {
        res.status(500).send((err.message || err))
    }
})

說明：
router 的動作很單純，接收表單資料後，呼叫 casedao 的 saveCase，並檢驗回傳值，若回傳值不為空，則將回傳值以 json 型態送回前端，否則直接拋出 http 500 的錯誤

資料庫新增動作

開啟 /model/casedao.js，在 「module.exports = {」處加入下方之程式碼

module.exports = {
    /**
     * 新增客服資料
     */
    saveCase: async(dataobj)=> {
        return new Promise((resolve, reject) => {
            //狀態預設為處理中
            dataobj.casestatus = "00"
            //紀錄現在時間
            dataobj.logdate = new Date()
            cases.create(dataobj)
            .then((newobj)=>{
                let result = {
                    status: "00",
                    caseid: newobj.dataValues.caseid
                }
                resolve(result)
            }).catch((err)=>{
                reject((err.message || err))
            })
        })
    }
}

說明：
利用 sequelize 的新增，是一件很簡單的事情，只要完成表格定義後，呼叫 create 方法，將寫入的資料入後，即完成新增動作，而且更無腦的一點是，即使傳入的物件屬性可能有部份在資料表中不存在， sequelize 會自動忽略不在定義檔中的屬性值，故我們可以像上面的列子一樣，很無腦的將整個 req.body 的資料檔參數傳入。
sequelize 完成新增後，會將該次新增的資料以物件型態回傳，以上述情形為例，因為 caseid 由資料庫所編訂，因此我們在新增完畢後，即可取到資料庫產出之 caseid，之後就可以回傳給呼叫端進行後續應用

結語

我們今天完成了資料庫新增，當然這個也是第一版而已，因為我們並未進行資料的檢核，而且通常使用者會以畫面或錄影說明問題，故我們還需要加上檔案上傳機制，所以還不能算是一個合格的資料新增功能，明天我們將繼續加強資料檢核部份，那麼我們明天再繼續吧