javascript - 在 express 中将新的 select2 选项标签写入本地数据库

Question

我正在使用 select2在 Express 应用中创建一个输入框，用户可以在其中从列表中选择主题，并可以使用任何新添加的选项更新此列表。

我正在努力解决的问题是 select2在客户端运行，而我用来播种 <option> 的任何数据标签(我想附加新选项)是服务器端的。

我希望用户能够添加原始列表中不存在的主题，以便将来的用户看到新添加的选项(以及原始选项)

这些是我考虑过的用于实现此目的的选项(以增加可取性):

• 添加新 <option>Subject</option>每个添加标签的 html 标签
• 将新标签推送到一个数组，并为 <option> 播种来自这个数组的 s
• 为 <option> 播种来自json对象，并在创建标签时更新此对象
• 为 <option> 播种来自外部数据库(例如 mongoose)，并在创建标签时更新它

据我所知，所有这些选项都需要我的客户端代码 ( select2-js ) 与服务器端代码(我的数组、.json 文件或 mongoose 架构所在的位置)进行对话，而且我不知道该怎么做。

在我目前的方法中，我试图指定一个“本地”json文件作为我的数据源 select2调用 ( see here )。但是，这不会为数据库提供任何选项，因此它没有像我预期的那样工作。

然后我检查每个新标签是否存在于数组 ( dataBase ) 中，如果不存在，则将其添加到数据库中:

// Data to seed initial tags:
var dataBase = [
    { id: 0, text: 'Maths'},
    { id: 1, text: 'English'},
    { id: 2, text: 'Biology'},
    { id: 3, text: 'Chemistry'},
    { id: 4, text: 'Geography'}
];


$(document).ready(function() {
    $('.select2-container').select2({
        ajax: {
            url: '../../subjects.json',
            dataType: 'json',
        },
        width: 'style',
        multiple: true,
        tags: true,
        createTag: function (tag) {
            var isNew = false;
            tag.term = tag.term.toLowerCase();
            console.log(tag.term);
            if(!search(tag.term, dataBase)){
                if(confirm("Are you sure you want to add this tag:" + tag.term)){
                    dataBase.push({id:dataBase.length+1, text: tag.term});
                    isNew = true;
                }
            }
            return {
                        id: tag.term,
                        text: tag.term,
                        isNew : isNew
                    };
        },
        tokenSeparators: [',', '.']
    })
});

// Is tag in database?
function search(nameKey, myArray){
    for (var i=0; i < myArray.length; i++) {
        if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
            return true
        }
    }
    return false
};

但是，这种方法会将新标签添加到数组中，一旦我刷新页面，该数组就会被销毁，并且不会存储新标签。

我如何修改它以加载服务器端数据( json 、 mongoose 文档或任何其他被认为是最佳实践的内容)，并使用新添加的选项(通过我的测试)更新此数据)?

Answer 1

在您的服务器端，您可以有一个 API 来维护和返回标签数组。如果您希望数组在服务器关闭后仍然存在，您可以将标签数组存储在数据库中。

服务器端:

let dataBase = [
{ id: 0, text: 'Maths'},
{ id: 1, text: 'English'},
{ id: 2, text: 'Biology'},
{ id: 3, text: 'Chemistry'},
{ id: 4, text: 'Geography'}
];
//Assuming you have a nodejs-express backend
app.get('/tags', (req,res) => {
res.status(200).send({tags: dataBase});
} );

客户端:

$(document).ready(function() {
dataBase=[];
$.get("YOUR_SERVER_ADDRESS/tags", function(data, status){
console.log("Data: " + data + "\nStatus: " + status);
dataBase = data;
});

$('.select2-container').select2({
    data: dataBase,
    placeholder: 'Start typing to add subjects...',
    width: 'style',
    multiple: true,
    tags: true,
    createTag: function (tag) {
        var isNew = false;
        tag.term = tag.term.toLowerCase();
        console.log(tag.term);
        if(!search(tag.term, dataBase)){
            if(confirm("Are you sure you want to add this tag:" + tag.term)){
                dataBase.push({id:dataBase.length+1, text: tag.term});
                isNew = true;
                //Update the tags array server side through a post request
            }
        }
        return {
                    id: tag.term,
                    text: tag.term,
                    isNew : isNew
                };
    },
    tokenSeparators: [',', '.']
})
});

// Is tag in database?
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
    if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
        return true
    }
}
return false
};