Kar*_*nas 6 javascript drag-and-drop mongodb node.js vue.js
我正在创建一个非常基本的功能看板。
到目前为止,我的板子有 4 个型号:
用户模型
var userSchema = new Schema({
name: {
type: String,
required: true
}
})
module.exports = mongoose.model('User', userSchema)
Run Code Online (Sandbox Code Playgroud)
板型
var boardSchema = new Schema({
title: {
type: String,
required: true
},
lists: [ listSchema ]
members: [
{
type: Schema.Types.ObjectId,
ref: 'user'
}
]
});
module.exports = mongoose.model('Board', boardSchema)
Run Code Online (Sandbox Code Playgroud)
列表模式
let listSchema = new Schema({
title: {
type: String,
required: true
},
userCreated: {
type: Schema.Types.ObjectId,
required: true,
ref: 'user'
},
boardId: {
type: Schema.Types.ObjectId,
required: true,
ref: 'board'
},
sort: {
type: Number,
decimal: true,
required: true
}
})
module.exports = mongoose.model('List', listSchema)
Run Code Online (Sandbox Code Playgroud)
卡片模式
var cardSchema = new Schema({
title: {
type: String,
required: true
},
description: {
type: String
},
boardId: {
type: Schema.Types.ObjectId,
required: true,
ref: 'board'
},
listId: {
type: Schema.Types.ObjectId,
required: true,
ref: 'list'
},
members: [
{
type: Schema.Types.ObjectId,
ref: 'user'
}
],
sort: {
type: Number,
decimal: true,
required: true
}
})
module.exports = mongoose.model('Card', cardSchema)
Run Code Online (Sandbox Code Playgroud)
我在寻找什么?
我的前端是用 Vue.js 和 sortable.js 拖放库制作的。
我想找到渲染带有列表(列)和卡片的板的最佳方法。
据我了解,我应该首先通过成员数组中的用户 ID 获取我的董事会。
然后我的电路板已经嵌入了列表。
在第二个 api 请求中,我通过 boardId 获取所有卡片。
我的问题是 -如何正确地将所有卡片放入/渲染到每个拥有的列表中?
所以最后我想要一些类似的东西:
{
title: 'My board',
lists: [
{
title: 'My list',
_id: '35jj3j532jj'
cards: [
{
title: 'my card',
listId: '35jj3j532jj'
}
]
},
{
title: 'My list 2',
_id: '4gfdg5454dfg'
cards: [
{
title: 'my card 22',
listId: '4gfdg5454dfg'
},
{
title: 'my card 22',
listId: '4gfdg5454dfg'
}
]
}
]
members: [
'df76g7gh7gf86889gf989fdg'
]
}
Run Code Online (Sandbox Code Playgroud)
我试过什么?
到目前为止,我只想到了一件事,那就是:
但是这样看来,我的列表需要有一个空数组,cards: []
仅用于按 id 进行前端卡片到列表排序,这似乎有些错误。
这是一个好方法吗?或者我应该重新设计我的模型和模式并采用其他方式?任何帮助,将不胜感激!
您定义的架构非常好,只是进行了一项修改。
板模型中不需要有“列表”,因为它已经在列表中可用,而且如果您将其保留在板中,那么每次添加新列表时,您也需要编辑板。
流程是这样的。
最初,当用户登录时,您需要向他们显示面板列表。这应该很容易,因为您只需使用 board 集合上的 user_id 进行查找查询即可。
Board.find({members: user_id}) // where user_id is the ID of the user
Run Code Online (Sandbox Code Playgroud)
现在,当用户单击特定板时,您可以获取带有 board_id 的列表,类似于上面的查询。
List.find({boardId: board_id}) // where board_id is the ID of the board
Run Code Online (Sandbox Code Playgroud)
同样,您可以借助list_id和board_id来获取卡片。
Card.find({boardId: board_id, listId: list_id}) // where board_id is the ID of the board and listId is the Id of the list
Run Code Online (Sandbox Code Playgroud)
现在,让我们看一下您可能同时需要来自 2 个或更多集合的数据的情况。例如,当用户单击面板时,您不仅需要面板中的列表,还需要该面板中的卡片。在这种情况下,您需要编写这样的聚合,
Board.aggregate([
// get boards which match a particular user_id
{
$match: {members: user_id}
},
// get lists that match the board_id
{
$lookup:
{
from: 'list',
localField: '_id',
foreignField: 'boardId',
as: 'lists'
}
}
])
Run Code Online (Sandbox Code Playgroud)
这将返回板,并且在每个板中,将有一个与该板关联的列表数组。如果特定的板没有列表,那么它将有一个空数组。
同样,如果您想将卡片添加到列表和看板中,聚合查询将是一个更复杂的机器人,因此,
Board.aggregate([
// get boards which match a particular user_id
{
$match: {members: user_id}
},
// get lists that match the board_id
{
$lookup:
{
from: 'list',
localField: '_id',
foreignField: 'boardId',
as: 'lists'
}
},
// get cards that match the board_id
{
$lookup:
{
from: 'card',
localField: '_id',
foreignField: 'boardId',
as: 'cards'
}
}
])
Run Code Online (Sandbox Code Playgroud)
这也会添加一系列卡片。同样,您也可以获得列表卡片。