前言
- 在【0-1搭建网站】(一)Koa+koa/router+module-alias+eslint+prettier、【0-1搭建网站】(二)GraphQL+环境区分+path添加prefix+统一返回数据格式中,已经搭建好了用
Koa框架来写后端的大部分配置。 - 本篇文章就详细说一下怎么接入并使用
MongoDB。 - 包含本文在内,后端框架也已经搭建完毕,源码已上传到我的 GitHub 仓库,需要的可自取,顺手点个
Star,不胜感谢🙏。
Windows 本地安装
安装 MongoDB
- MongoDB 官网下载最新 的安装程序。
- 下载完成后,双击开始安装即可。
- 选择自定义安装
- 选择自己想要安装的路径,我这里是装到
E盘的 - 下一步直接用默认的就行
- 是否初始化可视化工具,看个人,我是安装了的,后面不用再单独去下载,只是安装时间会久一点
- 最后等待安装完成即可。
配置 MongoDB
- 给系统的环境变量添加
MongoDB的安装路径- 右键 “我的电脑 -> 属性”,选择“高级系统设置”
- 点击 “环境变量”
- 在 系统变量 中找到 “
Path”,选中后点击下方的 “编辑” - 点击 “新建”,输入
MongoDB的安装路径,保存后,把页面弹窗全部关闭即可
- 右键 “我的电脑 -> 属性”,选择“高级系统设置”
- 创建数据库文件的存放位置:因为启动
MongoDB服务之前必须创建数据库文件的存放文件夹,命令不会自动创建,而且不能启动成功。在data的目录下,创建一个db文件。
启动 MongoDB
Win + R打开 “运行”,输入cmd- 在终端输入
mongod --dbpath E:\MongoDB\data\db - 在浏览器输入
http://localhost:27017,出现下面的信息就启动成功了。27017是MongoDB服务的默认端口,如果不对,可以在启动服务的日志中搜索port查找服务启动的端口。
停止 MongoDB
- 在
cmd中连续按两次Ctrl + C即可停止服务。
使用 mongo.config 配置本地 MongoDB 服务
- 在
bin目录同级创建mongo.config文件,并写入以下内容:
dppath=E:\MongoDB\data\db
logpath=E:\MongoDB\data\log\mongo.log
- 在
data的目录下,创建一个log文件用于存放日志。 - 使用管理员身份运行
cmd,并输入一下命令mongod -dbpath "E:\MongoDB\data\db" -logpath "E:\MongoDB\data\log\mongo.log" -install -serviceName "MongoDB" - 显示以下信息即配置成功,我们就可以使用
net start MongoDB来启动服务,net stop MongoDB来停止服务。
使用 MongoDB Compass
- 打开
MongoDB Compass,输入本地启动的MongoDB服务的地址点击Connect即可。 - 这样就可以通过
MongoDB Compass的可视化界面对数据库进行操作了,快去试试吧!
项目接入
安装依赖
- 使用包管理工具安装 mongoose 依赖
npm install mongoose
在项目中使用
- 在
src/index.js中连接数据库,Koa应用程序的close事件和Node.js进程的exit事件中分别关闭数据库连接。注:连接的数据库名不存在会自动创建。
// src/index.js
+ const mongoose = require('mongoose')
...
+ mongoose
+ .connect('mongodb://localhost:27017/[数据库名]', {
+ useNewUrlParser: true,
+ useUnifiedTopology: true,
+ })
+ .then(() => console.log('MongoDB connected'))
+ .catch((err) => console.log(err))
...
startServers(app).then(() => {
const PORT = config.PORT || 3000
app.listen(PORT, () =>
console.log(`Server running at http://localhost:${PORT}`),
)
})
+ const disconnect = () => {
+ mongoose.connection
+ .close()
+ .then(() => console.log('MongoDB connection closed'))
+ .catch((err) => console.error('Error closing MongoDB connection:', err))
+ }
+ app.on('close', () => {
+ disconnect()
+ })
+ process.on('exit', () => {
+ disconnect()
+ })
- 修改
src/routes/login.js- 增加用户注册接口
// src/routes/login.js ... + router.post('/register', async (ctx) => { + ... + })- 创建数据库用户模型
+ const mongoose = require('mongoose') + const UserSchema = new mongoose.Schema({ + username: String, + password: String, + })- 使用用户模型通过接口创建新用户,连接的表不存在会自动创建
router.post('/register', async (ctx) => { + const { username, password } = ctx.request.body + const newUser = new User({ + username, + password, + }) + const res = await newUser.save() + if (res) { + ctx.body = { ...SUCCESS, data: null } + } else { + ctx.throw({ + ...PARAM_ERROR, + message: 'Username is exsit', + }) + } }) - 使用
Postman测试,并查看数据库数据
4.
MongoDB 数据库会对每条数据自动生成一个 ObjectId('662dff61386cb2c86b1c643d'),不用这个 id 也可以自己再生成一个
5. 用户肯定还有其他的一些数据,有些数据不必在登录时就需要填写,就会涉及到一些字段的声明是否必须、可为空等等。这里就简单提一下,每个表的 schema 很多地方都会用到,在 src 下创建一个 schema 目录用于存放相关文件,并将 schema 目录添加到路径别名中。在 schema 目录中新建一个 user.js 文件,存放 user 表的 schema
// package.json
{
...,
"_moduleAliases": {
...,
+ "@schema": "src/schema",
}
}
// src/schema/user.js
const mongoose = require('mongoose')
const UserSchema = new mongoose.Schema({
username: {
type: String,
required: true,
},
email: {
type: String,
required: false,
},
password: {
type: String,
required: true,
},
token: {
type: String,
required: false,
},
})
const User = mongoose.model('User', UserSchema)
module.exports = User
最终的目录结构:
|- config
|- config.dev.js
|- config.test.js
|- config.prod.js
|- index.js
|- node_modules
|- src
|- constants
|- common.js
|- response.js
|- middlewares
|- catchDeal.js
|- pathPrefix.js
|- index.js
|- resolvers
|- hello.js
|- routes
|- login.js
|- user.js
|- schema
|- user.js
|- servers
|- hello.js
|- typeDefs
|- hello.js
|- index.js
|- utils
|- authenticate.js
|- createOpt.js
|- .env
|- .eslint.js
|- .prettierrc
|- package-lock.json
|- package.json
后续计划
- 🤔使用什么脚手架、框架、工具等搭建前端服务呢?
最后
- 到这里,后端框架要使用的技术、工具等就基本上应用到项目中了,后续如果还有新的,我会继续更新相关的文章。
- 项目源码已上传到我的 GitHub 仓库,需要的可自取,顺手点个
Star,不胜感谢🙏。 - 有什么问题或想要在项目中增加什么配置欢迎大家评论区留言交流。
往期精彩
- 【0-1搭建网站】(二)GraphQL+环境区分+path添加prefix+统一返回数据格式
- 【0-1搭建网站】(一)Koa+koa/router+module-alias+eslint+prettier
- Node.js 版本管理工具 n 最全使用手册
- 磕磕绊绊的 4 年前端er,一次含泪总结
- 前端还不会 Nginx 吗?快来学起来
- 金九前端面试总结!
- 从0搭建Vite + Vue3 + Element-Plus + Vue-Router + ESLint + husky + lint-staged
- 「前端进阶」JavaScript手写方法/使用技巧自查
- 公众号打开小程序最佳解决方案(Vue)
「点赞、收藏和评论」
❤️关注+点赞收藏+评论+分享❤️,手留余香,谢谢🙏大家。