온라인 영어 암기 단어장 만들기(7) - 단어장 저장하기

단어와 뜻을 다 입력한 뒤, 저장 버튼을 구현하였다. 저장하는 내용은 제목(8월 모의고사)과 영단어와 뜻 목록을 데이터로 담아서 $.post 로 데이터를 전송하면 된다.

아래는 save 버튼 클릭시 발생하는 이벤트 구현소스이다.

$('.save-btn').click(function(){
    if ($('.add_element').val() == ""){
        alert("단어장 제목을 입력하세요.")
        $('.add_element').focus()
        return
    }
    var wm = $('.word_mean')
    if(wm.length == 0){
        alert("입력된 단어가 없습니다.")
        return
    }                
    var wlist = ""; var mlist = "";                
    for(var i=0; i<wm.length; i++){
        if($(wm[i]).children("input:eq(1)").val()==""){
            alert("영어 단어가 비어있습니다.")
            $(wm[i]).children("input:eq(1)").focus()
            return
        }else if( $(wm[i]).children("input:eq(2)").val()==""){
            alert("단어 뜻이 비어있습니다.")
            $(wm[i]).children("input:eq(2)").focus()
            return                        
        }
        wlist += $(wm[i]).children("input:eq(1)").val() + "|"
        mlist += $(wm[i]).children("input:eq(2)").val() + "|"

    }
    var obj = {}
    obj['title'] = $('.add_element').val()
    obj['wlist'] = wlist
    obj['mlist'] = mlist

    $.post( "/word/save", obj, function( data ) {
        if(data.isLogin==true){
            console.log(data) 
            $('.cancel-btn').click()
            study_list_view()                       
        }else{
            $(".logout_btn").click()
        }
        $(".add_element").val("")
        $(".word_list").val("")
    },'json');
    console.log(obj)
})

 

다음은 서버단에서 데이터를 저장하면 된다. word_sets, ws_rel_models, words 의 세  collection에 입력을 한다. word_sets에는 제목과 유저id를 입력하고, words 에는 영단어와 뜻을 입력한다. 그리고 각 collection의 _id의 셋트를   ws_rel_models에 입력하여 서로의 관계를 가지도록 데이터를 입력한다.  ws_rel_models에 _id를 저장할때는 스트링 형태로 변환하여 저장하였다.(ObjectId로 입력하니 나중에 조회가 안되어 ~ )

words에 입력할 때에는 기존에 동일한 단어가 있으면, 저장이 되지 않도록 한다.

const mongoose = require('mongoose');
const { ObjectId } = mongoose.Types;
const { Schema } = mongoose;    

const user_model     = mongoose.models['user']||
                       mongoose.model('user'        , 
                         new Schema({user_id:{type:String, unique:true, required: true}, 
                                     pw:{type:String, required:true}, 
                                     email:{type:String, required:true}}, { strict: false }));

const word_set_model = mongoose.models['word_set']||
                       mongoose.model('word_set'    , 
                         new Schema({user_id:{type:String, required:true},
                                     title:{type:String, required:true}}, { strict: false }));

const ws_rel_model=    mongoose.models['ws_rel_model']||
                       mongoose.model('ws_rel_model', 
                         new Schema({user_id:{type:String, required:true}, 
                                     word_set_id:{type:Schema.Types.ObjectId,ref:"word_set"}, 
                                     word_id:{type:Schema.Types.ObjectId,ref:"word"}}, { strict: false })); 

const word_model     = mongoose.models['word']||
                       mongoose.model('word'        , 
                         new Schema({w:{type:String, required:true, unique: true}, 
                                     m:{type:String, required:true}}, { strict: false }));    

router.post('/save', async(req, res) => { 
    console.log(req.session.username)
    if(req.session.username == undefined|| req.session.username==""){ 
        res.json({isLogin:false, state:'success', message:''})
    }else{
        if(req.body.title==''){res.json({isLogin: true, state: 'error', 
                                         message:'title is null'}); return;}
        if(req.body.wlist==''){res.json({isLogin: true, state: 'error', 
                                         message:'word is null'}); return;}
        if(req.body.mlist==''){res.json({isLogin: true, state: 'error', 
                                          message:'mean is null'}); return;}
        
        console.log(req.body)

        var r_set = await word_set_model.create({user_id: req.session.username, 
                                                 title: req.body.title})
        console.log(r_set)

        var r_word;
        var r_ws
        var ws = req.body.wlist.split("|")
        var ms = req.body.mlist.split("|")
        for(var i=0; i<ws.length;i++){
            if(ws[i]=="" || ms[i]=="") continue
            const existingData = await word_model.findOne({w: ws[i]});

            if(!existingData){
                r_word = await word_model.create({w: ws[i], m: ms[i]})
                r_ws = await ws_rel_model.create(
                    {user_id: req.session.username, word_set_id: r_set._id.toString(), 
                     word_id: r_word._id.toString()})
            }else{
                r_ws = await ws_rel_model.create(
                    {user_id: req.session.username, word_set_id: r_set._id.toString(), 
                     word_id: existingData._id.toString() })
            }
        }
        res.json({isLogin:true, state:'success', message:''})        
    }
})

 

해당 세트를 삭제하는 소스는 다음과 같다. 각 학습 항목의 오른쪽 끝의 ... 아이콘을 클릭하면 delete  메뉴를 통해 삭제하도록 구현하였다.

router.post('/delete', async(req, res) => { 
    console.log(req.session.username)
    if(req.session.username == undefined|| req.session.username==""){ 
        res.json({isLogin:false, state:'success', message:''})
    }else{
        console.log(req.body.id)

        var result = await ws_rel_model.deleteMany({user_id: req.session.username, word_set_id: req.body.id})
        console.log(result)
        result = await word_set_model.deleteOne({user_id: req.session.username, _id: req.body.id})
        console.log(result)
        res.json({isLogin:true, state:'success', message: result})
    }
})

 

다음은 실제 학습을 하는 화면을 구현할 예정이다.