Въведение:
MongoDB: MongoDB е програма за бази данни, ориентирана към различни платформи. Класифицирана като NoSQL програма за база данни, MongoDB използва подобни на JSON документи със схема.
NodeJS:Node.js е среда за изпълнение на JavaScript с отворен код, между платформи, която изпълнява JavaScript код извън браузър.
ReactJS:React е JavaScript библиотека за изграждане на потребителски интерфейси. Поддържа се от Facebook и общност от отделни разработчици и компании. React може да се използва като основа при разработването на едностранични или мобилни приложения, тъй като е оптимален за извличане на бързо променящи се данни, които трябва да бъдат записани.
В този урок ще създадем примерен NodeJS сървър, който ще получи списъка с сътрудници на OpenEBS (чрез Github API) и ще преобразува тяхното изображение в base64 и след това ще го съхрани MongoDB и ще покаже списъка с сътрудници в приложението Reactjs
Това може да се използва като референция за съхраняване на изображението в MongoDB. В този блог ще използвам NodeJs, но можете да използвате всеки език, за да постигнете това.
Предпоставка:
MongoDB: За съхраняване на подробности за сътрудника.
NodeJs: Създайте нашия код от страна на сървъра. и пакети като Mongoose, express.
FrontEnd:Малко познаване на фронтенд стека. Ще използвам ReactJS като FrontEnd рамка.
Нека да започнем с моя начален Nodejs код от страна на сървъра, където вече сме написали конфигурацията на сървъра и малък потребителски интерфейс с hello world.
Directory structure of project
Както можете да видите, имаме цялата основна конфигурация за стартиране за приложението Nodejs и Reactjs
можете да получите горния първоначален код за стартиране от тук
https://github.com/inyee786/base64ImageStore/tree/85b18cd1e0cb83ae419b31783a65461b80e89980
В този урок ще съхраним подробностите за първите 100 сътрудници на OpenEBS в MongoDB, който съдържа подробности за потребителите и тяхното изображение, и приложението Reactjs, където ще покажем списъка с потребители.
GithubContribuotrs: Създайте файлов сървър/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[encoding]) в MongoDB и крайната точка за създаване и REST API, която се използва от нашето приложение ReactJS.
ReactJS: Ако продължавате напред, предполагам, че имате основни познания за ReatJs
Ето как създадох основна структура на проекта 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;
нека импортира Hheader и 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 и др.
