Введение:
MongoDB: MongoDB — это кроссплатформенная программа для работы с базами данных, ориентированная на работу с документами. MongoDB классифицируется как программа базы данных NoSQL и использует JSON-подобные документы со схемой.
NodeJS.Node.js — это кроссплатформенная среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript вне браузера.
ReactJS.React — это библиотека JavaScript для создания пользовательских интерфейсов. Он поддерживается Facebook и сообществом отдельных разработчиков и компаний. React можно использовать в качестве базы при разработке одностраничных или мобильных приложений, так как он оптимален для получения быстро меняющихся данных, которые необходимо записывать.
В этом руководстве мы создадим образец сервера NodeJS, который получит список участников OpenEBS (через API Github) и преобразует их образ в base64, а затем сохранит его в MongoDB и покажет список участников в приложении Reactjs.
Это можно использовать в качестве ссылки для хранения изображения в MongoDB. В этом блоге я буду использовать NodeJ, но вы можете использовать любой язык для достижения этой цели.
Необходимое условие:
MongoDB: для хранения сведений об авторе.
NodeJs: создайте код на стороне сервера. и такие пакеты, как Mongoose, express.
Внешний интерфейс:небольшие знания о внешнем стеке. Я собираюсь использовать ReactJS в качестве фреймворка FrontEnd.
Давайте начнем с моего загрузочного кода Nodejs на стороне сервера, где мы уже написали конфигурацию сервера и небольшой пользовательский интерфейс с приветствием, мир.
Directory structure of project
Как видите, у нас есть все базовые настройки начальной загрузки для приложений Nodejs и Reactjs.
вы можете получить приведенный выше начальный код начальной загрузки отсюда
https://github.com/inyee786/base64ImageStore/tree/85b18cd1e0cb83ae419b31783a65461b80e89980
В этом руководстве мы собираемся хранить сведения о первых 100 участниках OpenEBS в MongoDB, которая содержит сведения о пользователях и их изображения, и в приложении Reactjs, где мы покажем список пользователей.
GithubContribuotrs: создайте файл server/githubContibutors.js и импортируйте основные пакеты в начало файла.
const mongo = require('../config/dbconnection');
const request = require('request');
const express = require('express');
Давайте начнем с создания схемы MongoDB участника GitHub.
const contributorSchema = new mongo.Schema({
login: String,
githubID: {
type: Number,
required: true,
unique: true
},
contentType: String,
image: {
base64: String,
imageFormat: String
}
});
const Contributor = mongo.model('contributors', contributorSchema);
Функция для получения списка участников
let baseUrl = "https://api.github.com/";
function getListOfContibutors() {
let options = {
url: `${baseUrl}repos/openebs/openebs/contributors?per_page=100`,
headers: {
' User-Agent': 'request'
}
};
return new Promise(function (resolve, reject) {
request.get(options, function (err, resp, body) {
if (err) {
reject(err);
} else {
resolve(body);
}
})
})
}
позвольте преобразовать все изображение в изображение base64
function getImage(avtarurl) {
const options = {
url: `${avtarurl}&&s=100`,
encoding: 'base64'
};
return new Promise(function (resolve, reject) {
request.get(options, function (err, resp, body) {
if (err) {
reject(err);
} else {
const userDetails = {
contentType: resp.headers['content-type'],
image: {
imageFormat: resp.headers['content-type'].split('/')[1],
base64: resp.body
}
}
resolve(userDetails);
}
})
})
}
Теперь настал захватывающий этап, когда мы вызовем две функции и сохраним изображение в MongoDB.
async function main() {
const listOfContributors = JSON.parse(await getListOfContibutors());
const userDetailsPromise = listOfContributors.map(async (user) => {
const getImageDetails = await getImage(user.avatar_url);
return {
login: user.login,
githubID: user.id,
...getImageDetails
}
})
const userDetails = await Promise.all(userDetailsPromise);
Contributor.insertMany(userDetails)
.then(function (docs) {
console.log("Data inserted successfully")
})
.catch(function (err) {
console.log(err)
});
}
давайте создадим конечную точку RestAPI, через которую мы можем запросить MongoDB, чтобы получить список участников Github.
router.get('/contributors', (req, res) => {
Contributor.find({}, 'login githubID image.base64 image.contentType -_id', (err, users) => {
if (err) res.status(500).send(err)
res.status(200).json(users);
});
});
Поскольку я не хочу отправлять все сведения об участниках из коллекции участников MongoDB, мы отправим только некоторые сведения из коллекций.
После этого нам нужно импортировать указанный выше маршрут в файл index.js.
добавьте это в файл index.js
const github = require('./routes/githubContibutors')
app.use('/api',github)
Теперь наша конечная точка готова к использованию
посетите этот http://localhost:3001/api/contributors, эта конечная точка будет перечислять 100 участников Openebs
До сих пор мы успешно сохраняли информацию об участнике и изображение (base64 [кодировка]) внутри MongoDB и создавали конечную точку REST API, которая используется нашим приложением ReactJS.
ReactJS: если вы продвигаетесь вперед, я предполагаю, что у вас есть базовые знания о ReatJ.
Вот как я создал базовую структуру проекта Reactjs, а ниже приведены подробные сведения о компонентах.
Заголовок: common/Header.js Это фиктивный компонент с жестко закодированным текстом.
import React from 'react'
function Header() {
return (
<div>
<h1>OpenEBS 100 contributors</h1>
</div>
)}
export default Header;
ContributorCard: components/ContributorCard.js Это наименьший компонент, в котором мы показываем сведения об авторе и показываем изображение, закодированное в base64.
import React from 'react'
import Card from 'react-bootstrap/Card';
export default function ContributorCard(props) {
const { login, image: { base64, imageFormat } } = props.contributor;
return (<Card style={{ width: '8rem' }}>
<Card.Img variant="top" style={{borderRadius : '50%'}} src={`data:image/${imageFormat};base64,${base64}`} />
<Card.Body>
<Card.Title>{login}</Card.Title>
</Card.Body>
</Card>
)
}
ListOfContributors: components/ListOfContributors.js В этом компоненте мы перечислим участников и вызовем конечную точку RestApi.
import React, { Component } from 'react'
import axios from 'axios';
import ContributorCard from './ContributorCard'
export class ListOfContributors extends Component {
constructor(props) {
super(props);
this.state = {
contributors: []
}
}
async componentWillMount() {
const contributors = await axios.get('/api/contributors').then(res => res.data);
this.setState({ contributors: contributors })
}
render() {
return (<div className="d-flex flex-wrap"> {
this.state.contributors.map(contributor => (<ContributorCard key={contributor.githubID} contributor={contributor} />))}
</div>)
}
}
export default ListOfContributors;
давайте импортируем компоненты Header и ListOfContributors в файл app.js.
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import ListOfContributors from './components/ListOfContributors';
import Header from './common/Header'
function App() {
return ( <div className="App">
<Header />
<ListOfContributors />
</div>
);
}
export default App;
и теперь наше приложение готово к работе, посетите localhost:3000, вы увидите результат ниже.
Обо мне:
Вы можете следить за мной в указанных ниже профилях и задавать любые вопросы, связанные с Angular, SPA, JavaScript, Kubernetes и т. д.
