Mongodb phản ứng

Tạo ứng dụng mẫu

Chạy lệnh sau trong một thiết bị đầu cuối để tạo một thư mục mới với các tệp cấu hình theo khuôn mẫu của bạn và ứng dụng React Native

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Mẹo

Lệnh tạo một thư mục mới trong thư mục hiện tại của bạn có cùng tên với giá trị của cờ

npx pod-install

Cài đặt phụ thuộc

Trong thiết bị đầu cuối của bạn, hãy chạy các lệnh sau để điều hướng đến ứng dụng gốc phản ứng và cài đặt các phụ thuộc của nó

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Để xây dựng và chạy ứng dụng trên thiết bị iOS hoặc trình mô phỏng, hãy cài đặt các phần phụ thuộc iOS bổ sung với CocoaPods.

npx pod-install

Mẹo

Đảm bảo chuyển về thư mục gốc của dự án giao diện người dùng sau khi bạn cài đặt các nhóm

Xây dựng ứng dụng

Tại thời điểm này, bạn nên có một ứng dụng React Native đầy đủ chức năng có thể chạy trên cả iOS và Android

Mẹo

Nếu bạn đang gặp lỗi hoặc gặp sự cố khác, thì đó có thể là sự cố với cách thiết lập môi trường cục bộ của bạn. Hãy xem hướng dẫn thiết lập môi trường phát triển chính thức của React Native và đảm bảo rằng bạn đã làm theo tất cả các bước cho Hệ điều hành phát triển và Hệ điều hành mục tiêu của mình.

Kiểm tra ứng dụng

Khi quá trình xây dựng hoàn tất, bạn sẽ có một ứng dụng chức năng chạy trên trình giả lập của mình. Trong ứng dụng, hãy đăng ký tài khoản mới và chơi với ứng dụng trong vài phút

• Thêm một vài việc cần làm vào danh sách

• Nhấn hộp kiểm trên một hoặc hai mục để đánh dấu chúng là hoàn thành

• Nhấn X vào một mục để xóa nó khỏi danh sách

Nếu bạn kết nối với cụm Atlas của mình và truy vấn bộ sưu tập

npx pod-install

Mẹo

Để tìm hiểu cách kết nối với cụm Atlas của bạn, hãy xem Kết nối với triển khai cơ sở dữ liệu.

Tương tự, mọi thay đổi trong bộ sưu tập sẽ tự động đồng bộ xuống ứng dụng React Native. Hãy thử thay đổi trạng thái hoàn thành của một mục trong cụm của bạn - ứng dụng React Native sẽ tự động cập nhật giá trị mới bất cứ khi nào có kết nối mạng

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Mẹo

Để tìm hiểu thêm về cách cập nhật dữ liệu trong cụm của bạn, hãy xem Cập nhật tài liệu.

ứng dụng bản đồ

Ứng dụng mẫu bao gồm Ứng dụng Atlas được định cấu hình đầy đủ trong thư mục

npx pod-install

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Nó cũng bao gồm các cấu hình được xác định trước sau đây

• Nguồn dữ liệu được liên kết với Cụm Atlas của bạn

• Lược đồ cho bộ sưu tập

  npx pod-install

  8 phù hợp với lớp

  npx pod-install

  5 trong ứng dụng React Native

• Nhà cung cấp xác thực cho phép người dùng đăng ký và đăng nhập vào ứng dụng của bạn bằng email và mật khẩu

• Cấu hình đồng bộ hóa linh hoạt với một vai trò phiên duy nhất cho phép người dùng chỉ đọc và ghi dữ liệu của chính họ

Phản ứng ứng dụng gốc

Ứng dụng React Native là ứng dụng khách di động được định cấu hình đầy đủ có thể chạy trên thiết bị iOS và Android. Nó nằm trong thư mục

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Ứng dụng sử dụng thư viện @realm/react chính thức. Thư viện bao gồm các móc và thành phần React cho phép bạn kết nối với Ứng dụng Atlas của mình, đọc và ghi dữ liệu cũng như tự động đồng bộ hóa các thay đổi từ các thiết bị khác.

Ứng dụng chứa một số tệp cấu hình và thư mục, nhưng bạn có thể bỏ qua chúng trừ khi bạn muốn tùy chỉnh ứng dụng. Đối với hướng dẫn này, bạn sẽ muốn làm quen với các thành phần React trong thư mục

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Tên tệp

Sự mô tả

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Lớp

npx pod-install

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Các móc nối và nhà cung cấp Realm mà chúng tôi tạo và xuất để hoạt động với Realm trong toàn bộ ứng dụng

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

Thành phần gốc của ứng dụng mà chúng tôi kết hợp với các nhà cung cấp móc nối Realm từ

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

Biểu mẫu đăng ký và đăng nhập người dùng mà người dùng nhìn thấy khi họ mở ứng dụng lần đầu tiên

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

Ứng dụng "danh sách việc cần làm" chính mà người dùng tương tác sau khi họ đăng nhập. Nó truy vấn các đối tượng

npx pod-install

npx pod-install

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

Biểu mẫu giao diện người dùng cho phép chúng tôi nhập dữ liệu cho đối tượng

npx pod-install

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

Nút có thể tái sử dụng để đăng xuất người dùng đã được xác thực

Xác định các mức độ ưu tiên

Chúng tôi muốn cho phép một số lượng nhỏ các cấp độ ưu tiên được đặt tên và chúng tôi muốn có thể dễ dàng sắp xếp các cấp độ. Để làm điều này, chúng tôi sẽ sử dụng một hàm trợ giúp để xác định một đối tượng "enum" ánh xạ một tập hợp các tên cấp độ được sắp xếp tới và từ một số nguyên biểu thị mức độ ưu tiên của chúng

Thêm đoạn mã sau trực tiếp dưới báo cáo nhập khẩu trong

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

ItemSchema. js

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

Các mức độ ưu tiên trong enum được sắp xếp từ quan trọng nhất đến ít nhất. Giá trị chỉ số tương ứng cho mỗi cấp độ tăng từ quan trọng nhất,

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

Mẹo

Trong ứng dụng TypeScript, bạn có thể xác định enum để lập mô hình này thay vì sử dụng hàm trợ giúp.

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

Cập nhật Mô hình dữ liệu mục việc cần làm

Bây giờ chúng ta có một

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

npx pod-install

Thêm các dòng sau vào mã của bạn trong

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

ItemSchema. js

npx pod-install

Ghi chú

Tại sao điều này không phá vỡ đồng bộ hóa

Tại thời điểm này, mô hình React Native

npx pod-install

Việc thêm một thuộc tính vào một đối tượng Realm không phải là một thay đổi vi phạm và do đó không yêu cầu thiết lập lại máy khách. Ứng dụng mẫu đã bật Chế độ phát triển, vì vậy các thay đổi đối với đối tượng Realm của máy khách được phản ánh trong lược đồ phía máy chủ. Để biết thêm thông tin, hãy xem Chế độ phát triển và Cập nhật mô hình dữ liệu của bạn

Thêm Bộ chọn Ưu tiên

Mô hình dữ liệu của ứng dụng của bạn hiện bao gồm một

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

npx pod-install

Trước tiên, chúng tôi sẽ cài đặt một thư viện bên ngoài để triển khai thành phần bộ chọn ưu tiên. Chạy phần sau trong thiết bị đầu cuối của bạn bên trong gốc dự án của bạn

npx pod-install

Nếu bạn đang xây dựng cho iOS, hãy đảm bảo liên kết các Cocoapod được liên kết sau khi bạn đã cài đặt gói

npx pod-install

Mẹo

Bạn có thể cần xây dựng lại ứng dụng của mình sau khi cài đặt. Để làm như vậy, hãy dừng trình đóng gói cho dự án của bạn và sau đó chạy lệnh xây dựng

Bây giờ gói đã được cài đặt đầy đủ, hãy cập nhật thành phần lời nhắc tạo việc cần làm mới để sử dụng bộ chọn

Thêm các mục nhập sau vào đầu

npx pod-install

TạoToDoPrompt. js

npx pod-install

Sau đó, sửa đổi thành phần

npx pod-install

• theo dõi

  import express from 'express';
  import Promise from 'bluebird';
  import logger from 'winston';
  import { MongoClient } from 'mongodb';
  import config from './config';
  
  const PORT = process.env.PORT || 3000;
  const server = express();
  
  server.use('/api/users', require('./api/users'));
  
  server.get('/', (req, res) => {
    res.send('Hello World');
  });
  
  MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
    if (err) {
      logger.warn(`Failed to connect to the database. ${err.stack}`);
    }
    server.locals.db = db;
    server.listen(PORT, () => {
      const { address, port }  = server.address();
      logger.info(`Node.js server is listening at http://${address}:${port}`);
    });
  });
  

  85 trong một hook trạng thái

• kết nối trạng thái với thành phần

  npx pod-install

  96 mà bạn đã nhập

• chuyển

  import express from 'express';
  import Promise from 'bluebird';
  import logger from 'winston';
  import { MongoClient } from 'mongodb';
  import config from './config';
  
  const PORT = process.env.PORT || 3000;
  const server = express();
  
  server.use('/api/users', require('./api/users'));
  
  server.get('/', (req, res) => {
    res.send('Hello World');
  });
  
  MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
    if (err) {
      logger.warn(`Failed to connect to the database. ${err.stack}`);
    }
    server.locals.db = db;
    server.listen(PORT, () => {
      const { address, port }  = server.address();
      logger.info(`Node.js server is listening at http://${address}:${port}`);
    });
  });
  

  85 cho trình xử lý

  npx pod-install

  98

src/CreateToDoPrompt. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Trong

npx pod-install

npx pod-install

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

ItemListView. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Sau đó, sửa đổi trình xử lý gửi việc cần làm mới để chấp nhận cấp độ

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

npx pod-install

ItemListView. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Cuối cùng, sửa đổi từng mục danh sách việc cần làm để bao gồm

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

npx pod-install

ItemListView. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Chạy và kiểm tra ứng dụng

Giờ đây, ứng dụng của bạn sẽ cho phép người dùng đặt mức độ ưu tiên cho từng mục việc cần làm mới

Xây dựng lại ứng dụng và mở nó. Thêm một số mục việc cần làm mới để xác nhận rằng bạn có thể chọn mức độ ưu tiên và danh sách hiển thị mức độ ưu tiên của từng việc cần làm

Thêm Chế độ Chuyển đổi vào giao diện người dùng

Đầu tiên, thêm một móc nối

npx pod-install

npx pod-install

ItemListView. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Sau đó, thêm một nút mới chuyển đổi chế độ vào cuối danh sách việc cần làm

ItemListView. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Cập nhật đăng ký đồng bộ hóa

Tại thời điểm này, ứng dụng có thể chuyển đổi chế độ trong giao diện người dùng, nhưng chúng tôi chưa làm gì khác để các chế độ giống hệt nhau về mặt chức năng. Hãy cập nhật đăng ký đồng bộ hóa để chỉ đồng bộ hóa dữ liệu có liên quan đến chế độ hiện tại

Trong

npx pod-install

npx pod-install

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

ItemListView. js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Quan trọng

Đừng quên thêm

npx pod-install

npx pod-install

Kiểm tra ứng dụng

Ứng dụng của bạn hiện được thiết lập để sửa đổi đăng ký đồng bộ hóa dựa trên chế độ hiện tại. Tuy nhiên, nếu bạn chạy ứng dụng và chuyển sang chế độ "chỉ quan trọng", bạn sẽ thấy rằng danh sách không thay đổi và cảnh báo sẽ xuất hiện trong bảng điều khiển

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Cập nhật cấu hình đồng bộ hóa

Chúng tôi nhận được cảnh báo vì ứng dụng khách đồng bộ hóa chỉ có thể lọc đăng ký dựa trên một trường nhất định nếu trường đó được liệt kê cụ thể dưới dạng "trường có thể truy vấn" trong cấu hình Đồng bộ hóa thiết bị của Ứng dụng Atlas của bạn

Để mọi thứ hoạt động, chúng tôi cần thêm

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

Đầu tiên, tìm thư mục

npx pod-install

npx pod-install

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

Sau đó, chạy lệnh đầu cuối sau từ trong thư mục

npx pod-install

npx pod-install

Chạy ứng dụng đã hoàn thành

Khi cấu hình đồng bộ hóa đã cập nhật của bạn được triển khai, ứng dụng của bạn sẽ hoàn tất và có đầy đủ chức năng. Xin chúc mừng

Xây dựng lại và chạy ứng dụng để đảm bảo mọi thứ hoạt động. Bạn sẽ có thể tạo, hoàn thành và xóa các mục việc cần làm cũng như chuyển sang và từ chế độ "chỉ quan trọng"