Как фронтенд-разработчики создают базы данных

база данных

Как фронтенд-разработчики создают базы данных

Недавно меня спросили, какой самый простой способ для фронтенд-разработчиков хранить пользовательские данные. Теперь только для этой части, позвольте мне объяснить, как это сделать.

Создайте базу данных

Во-первых, иметь базу данных. можешь идтиmlabНайдите на сайте бесплатную. После регистрации нажмите в столбце MongoDB DeploymentsСоздать новую базу данных (создать новую). Созданная база данных песочницы не требует денег, поэтому я использую ее.

После создания базы данных создайте учетную запись, чтобы вы могли подтвердить свою личность. Щелкните имя базы данных, затем щелкнитепользователи, а затем щелкнитеДобавить пользователь базы данных (добавить пользователь базы данных).把选用的用户名和密码写下来，之后要用。

В верхней части страницы базы данных вы должны увидеть адрес MongoDB. Это адрес страницы базы данных, как и адрес веб-страницы. По соглашению формат адреса MongoDB выглядит следующим образом:

mongodb://<用户名>:<密码>@<主机>:<端口>/<数据库名称>

Например, моя база данных:

mongodb://admin:superSecretPassword@ds111885.mlab.com:11885/medium

Построить сервер

здесь

посмотри что я написалserver.jsФайл запуска:

// 初始化项目
const express = require('express'); // 需要导入处理请求的express库
const app = express(); // 实例化express库
app.use(require("cors")()) // 允许跨域请求
app.use(require('body-parser').json()) // 自动解析请求数据，并转成JSON

// 基本路径
app.get("/", function (request, response) {
  response.send("TODO") // 所有的请求都以一个字符串"TODO"来响应
});

// 基本路径
app.post("/", function (request, response) {
  response.send("TODO") // 所有的请求都以一个字符串"TODO"来响应
});

app.put("/", function (request, response) {
  response.send("TODO") // 所有的请求都以一个字符串"TODO"来响应
});

// 因为我们用的是glitch的网络域，所以监听请求的端口要设成process.env.PORT。
// 否则，端口可以设成80或者别的什么。
var listener = app.listen(process.env.PORT, function () {
  console.log('Your app is listening on port ' + listener.address().port);
});

сначала импортироватьexpressБиблиотека, эта библиотека используется для обработки запроса, отправленного на сервер.

Запрос с перекрестным доменом отправляется из домена веб-сайта на сервер в другом домене к запросу на использованиеuse(require(cors))чтобы разрешить вид запроса.app.use(require('body-parser').json())Это предложение автоматически анализирует запрос и преобразует его в JSON.

Тогда мыgetМетод вводит путь обработки и функцию обратного вызова для обработки. То есть всякий раз, когда вы открываете сайт/Когда путь к странице, запрос будет обрабатываться функцией обратного вызова. Основной домен неявно в них, так чтоЕсли shining-koala.glitch.com является доменным именем, путь/aboutОтносится к адресу http://shiny-koala.glitch.com/about.

Точнее, «открытие страницы» означает использованиеGETметод отправки запроса на сервер. Различные методы Http — это просто разные типы запросов, отправляемых на сервер. Мы используем только следующие методы:

  • GETМетод используется для получения ресурсов с сервера. Например, необходимые ресурсы HTML, CSS и JavaScript загружаются при открытии страницы Facebook.
  • POSTметоды используются для создания ресурсов на сервере. Например, при публикации в Facebook информация, написанная в сообщении,POSTЗапрос отправляется на сервер Facebook.
  • PUTМетод используется для обновления ресурса на сервере. Например, при редактировании сообщения ваши правкиPUTЗапрос отправляется на сервер Facebook.

app.postфункция,app.putapp.getПринцип работы точно такой же. Конечно, эти две функции не обрабатываются, но методы POST и PUT вполне разумны.

дорожка

REST test test,очень удобно.或者也可以用Insomnia

Дисплей (показать)кнопка.

До сих пор мы использовали только/дорожка.但我们要的是把不同用户的信息存储起来，所以需要为每个用户设置一个不同的路径。 Например:/ZaninAndreaа также/JohnGreenдорожка.

Тогда возникает проблема: нельзя прописать все пути по одному, да и масштабируемость у этого метода плохая. что нам нужнопараметры маршрута,Таким образом, просто напишите путь:/:userВот и все.

/

  • /ZaninAndreaЗахватить
  • /Johnny45Захватить
  • /alex/score Не делайтеЛовить

Потом,userЗначение может быть вrequest.params.userПолучена переменная.

// 基本路径
app.get("/:user", function (request, response) {
  response.send(request.params.user) 
});

// 基本路径
app.post("/:user", function (request, response) {
  response.send(request.params.user) 
});

// 基本路径
app.put("/:user", function (request, response) {
  response.send(request.params.user) 
});

Теперь все запросы с именем пользователя, серверы имени пользователя могут ответить.

Добавить данные в базу

Мы знаем, кто такой пользователь, и теперь нам нужно сохранить информацию о пользователе.

Для запроса базы данных мы будем использоватьmongodbбиблиотека. Его можно установить одним из двух способов:

npm install mongodb --save

Если вы используете Glitch, вы также можете перейти кpackage.jsonФайл, нажмитеДобавление пакетов (Добавить пакет)кнопка.

Давайте загрузим библиотеку и сохраним адрес MongoDB в переменной:

const mongodb = require('mongodb'); // 加载mongodb库
const uri = process.env.URI;

Этот адрес является конфиденциальной информацией, поскольку, пока он у вас есть, вы можете получить доступ к базе данных. Этот адрес лучше указать в.envфайл так, чтобы никто другой не мог его увидеть.

URI=mongodb://admin:PASSWORD@ds111885.mlab.com:11885/medium

Глюк запустится автоматически.envфайл для загрузки этой переменной вprocess.env

mongodb.MongoClient.connect(uri, function(err, db) {
  // 基本路径
  app.get("/:user", function (request, response) {
    response.send(request.params.user) 
  });

  // 基本路径
  app.post("/:user", function (request, response) {
    response.send(request.params.user) 
  });

  // 基本路径
  app.put("/:user", function (request, response) {
    response.send(request.params.user) 
  });

    // 因为我们用的是glitch的网络域，所以监听请求的端口要设成process.env.PORT。
    // 否则，端口可以设成80或者别的什么。
  var listener = app.listen(process.env.PORT, function () {
    console.log('Your app is listening on port ' + listener.address().port);
  });
})

user

mongodb.MongoClient.connect(uri, function(err, db) {
  const collection = db.collection('users')
  // ...
}

POST方法的路径，用这个方法来把一个新用户的数据加进去。 Затем мы используемPUTПуть к методу для обновления.

  app.post("/:user", function (request, response) {
    // 在服务器上插入一个新的文档
    collection.insertOne({ ...request.body, user : request.params.user }, function (err, r) {
      if (err){
        response.send("An error occured") 
      }else{
        response.send("All well")
      }
    })
  });

коллекцияcollection.insertOneМетод вставки добавляет в коллекцию новый документ. В нашем примере у каждого пользователя есть отдельный документ.

{ ...request.body, user : request.params.user }Использование параметраспред операторОбъединяет данные в содержимом тела запроса с пользовательскими данными, полученными из URL-адреса.

Результатом заключается в том, что документы хранятся в сборе.

Второй параметр — это функция обратного вызова, которая просто информирует пользователя о результате операции.

Получить данные из базы данных

既然服务器上已经有了些数据，那么我们就想要读取数据。 мы используемGETспособ читать.

app.get("/:user", function (request, response) {
  collection.find({ user : request.params.user }).toArray(function (err, docs) {
    if (err){
      response.send("An error occured") 
    }else{
      response.send(docs)
    }
  })
});

Данные обновляют базу

наконец,PUTможно использовать для обновления существующих пользовательских данных.

  // 基本路径
  app.put("/:user", function (request, response) {
    collection.updateOne({ user : request.params.user },
                         {$set:{ ...request.body, user : request.params.user }},
                         function (err, r) {
      if (err){
        response.send("An error occured") 
      }else{
        response.send("All well")
      }
    })
  });

Первый параметр — это фильтр, напримерGETметод используется таким же образом.

Второй параметр — документ обновления. СмотретьздесьУзнать больше. В этом примере мы указываем базе данных объединить данные, переданные пользователем, с существующими данными.

Однако будьте осторожны, так как вложенные параметры будут заменены, а не объединены.

до свидания

Эта статья далека от завершения как руководство по программированию баз данных и серверной части, но ее должно быть достаточно, чтобы вы начали создавать базу данных, чтобы помочь вам с вашими собственными проектами.

В будущей статье я мог бы написать что-нибудь об аутентификации. До тех пор, пожалуйста, не используйте эту базу данных для хранения конфиденциальных данных.

существуетздесьМы можем провести незначительный ремонт в этом проекте. Конечно, ему нужна собственная база данных, если не создана, пожалуйста, огляните назадСоздайте базу данныхЭта часть.

Если вам понравилась эта статья, пожалуйста, поаплодируйте ей, чтобы ее увидело больше людей. Спасибо!

Категории