全栈 Todolist-database 篇(Cloud MongoDB)

2021-02-02 10:22:05 浏览数 (1)

全栈 Todolist-MongoDB 篇

写在最前面

  • 这篇是辅助 server 篇 配置 MongoDB clound 数据库的文章,大家可以先看 server 篇。

您可以按照顺序阅读

  • 全栈 Todolist-server 篇 Node(server) React(client) MongoDB(database) Typescript
  • Todolist-database 篇(Cloud MongoDB)
  • Todolist-client 篇(React Typescript)

0、注册使用 MongoDB Atles

  • www.mongodb.com/cloud/atlas
  • 注册或者登陆,可以使用 google 账号或者邮箱注册登陆。

一、创建集群

1、选择创建

2、咋们选择免费的集群 tab

3、所有的都默认选择即可 AWS 和 美国的服务器

4、配置完以后,正式创建集群

二、Database Access 数据库用户配置

5、选择创建新用户

6、用户管理者配置

  • 选择 ==password== 模式,用户名和密码,下面有随机密码的选项,使用后建议复制一下保存下来。其他的都默认,最后 ==Add User==

三、NetWork Access 网络安全配置

6、选择 NetWork Access 配置

7、配置 IP

  • 地址白名单,为了方便我们先直接选择==access from anywhere==, comment 备注一下 ‘anywhere’

confirm 确定以后,等到 status 状态由 pending --> Active 咋们就可以正常使用这个配置好的云数据库了。

四、配置 nodemon.json

  • 还记得咋们 server 篇配置的 nodemon.json 中的三个参数嘛。
  • nodemon.json
代码语言:javascript复制
{
    "env": {
        "MONGO_USER": "your-username",
        "MONGO_PASSWORD": "your-password",
        "MONGO_DB": "your-db-name"
    }
}

username 和 password 在 database access 中配置过了,db-name 就是 Clusters 的 title,初始的名字一般为 Cluster0

代码语言:javascript复制
{
    "env": {
        "MONGO_USER": "xxx", // 你配置的 username
        "MONGO_PASSWORD": "xxx", // 配置的 password 
        "MONGO_DB": "Cluster0"
    }
}
  • 配置好以后,我们点击 Cluster 中的 Cluster0 的 connect 按钮。
  • 选择 Connect your application
  • 默认 node, copy 这段代码,到我们 server 中的 app.ts 中就可以了。
  • app.ts
代码语言:javascript复制
import express, { Express } from 'express';
import mongoose from 'mongoose';
import cors from 'cors';
import todoRoutes from './routes';
import bodyParser from 'body-parser';

const app: Express = express();

const PORT: string | number = 4000;
// const PORT: string | number = process.env.PORT || 4000;

console.log(process.env.PORT);

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(todoRoutes);

const uri: string = `mongodb srv://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@cluster0.4qpw4.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`;
// 这段 url 来自mongoDB cloud

const options = { useNewUrlParser: true, useUnifiedTopology: true };
mongoose.set('useFindAndModify', false);

mongoose
    .connect(uri, options)
    .then(() =>
        app.listen(PORT, () =>
            console.log(`Server running on http://localhost:${PORT}`)
        )
    )
    .catch((error) => {
        throw error;
    });

复制代码

五 最后的最后,我们启动服务器看看链接是否成功

代码语言:javascript复制
yarn start

0 人点赞