持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天,点击查看活动详情
为了学习koa,做了一个前后端结合的项目,后端使用 koa 开发,前端使用 vue3+vite 。实现了类似网址收藏夹的功能。包括前台展示,以及后台管理。用到的技术有:
- JWT
- MongoDB
- Echarts
- AntDesign 2.x
- axios
- vuex
页面大概张这个样子:
管理端
前台
数据持久化使用了 MongoDB 数据库,以前只是对MongoDB有过简单的了解,但是没有实际用到过项目中,在做这个示例的过程中顺便学习一下MongoDB的基本用法,满足项目中增删改查的需求。
数据层级
- Mysql : 数据库db -> 表Table -> 记录Record -> 字段
- MongoDB : 数据库 -> 集合Collection -> 记录Document -> 字段
mongoose.js 简介
mongoose 是一个 odm(Object-Document mapping, 文档对象映射)。它的作用就是,在程序代码中,定义一下数据库中的数据格式,然后取数据时通过它们,可以把数据库中的 document 映射成程序中的一个对象,这个对象有 .save .update 等一系列方法,和 .title .author 等一系列属性。在调用这些方法时,odm 会根据你调用时所用的条件,自动转换成相应的 mongodb shell 语句帮你发送出去。自然地,在程序中链式调用一个个的方法要比手写数据库操作语句具有更大的灵活性和便利性。
在 nodejs 中使用 moogoose 简单的 demo
下面的列子将会创建一个集合并在集合中插入数据。
// 维护一个小猫的数据集
const mongoose = require('mongoose') // 引用 mongoose
mongoose.connect('mongodb://localhost:test') // 连接 test 数据库
// 定义数据结构。字段名以及对应的类型
const catSchema = mongoose.Schema({
name:string,
hairColor:string,
})
// 创建 Models,它们的实例就代表着可以从数据库保存和读取的 document 。
// model() 的第一个参数对应了数据库中的 collection 名字(单数)。
// 在这里 collection 的名字是 cats 。
// 如果集合在数据库中不存在会被自动创建。
const Cat = mongoose.model("cat",catSchema)
// 创建 document 实例
const cat1 = new Cat({name:'小狸花',hairColor:'红色'})
// 以下操作是往 collection 中插入记录
cat1.save((err) => {
if (err) return handleError(err)
})
// or
Cat.create({name:'小狸花',hairColor:'红色'}, (err) => {
if (err) return handleError(err)
})
mongoose 中的三个概念
Sechema
一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力,仅仅是定义数据属性的一个模型。
Model
由Schema发布生成的模型,具有抽象属性和行为的数据库操作对。可以认为是一个管理数据库属性、行为的类。
Entity
由Model创建的实体,他的操作会影响数据库。
增删改查
增
上面 例子 已经给出了新增的实例。
删
- remove()
改
- update()
查
- find()
cat1.find({name:'小狸花'})
- findOne()
cat1.find({hairColor:'红色'},(err,result) => {
})
总结
在这个demo中,实现了按分类筛选书签和按类型筛选的功能,总体来说MongoDB的搭建,以及数据库的链接配置上,在一些包的支持下都比较便捷。
示例代码:vue3-koa