React Nodejs: совместное использование кода между интерфейсом и серверной частью

#node.js #reactjs #npm #package.json

#node.js #reactjs #npm #package.json

Вопрос:

У меня есть интерфейс, встроенный в React, и серверная часть, встроенная в Nodejs (фреймворк Adonisjs). Я хочу поделиться некоторым кодом между клиентом и сервером. Моя команда не может использовать NPM или GitHub для этого из-за политики компании.

Читая документы NPM, я нашел возможное решение:

В package.json я включил следующую строку в запись «зависимости»:

 "sharedCodeModule": "index.js:../<sharedCodeFolder>" 
 

Делая это, я мог бы импортировать модуль как во фронтальной, так и во внутренней части. Дело в том, что я никогда не видел такого решения этой проблемы (не то, чтобы я много искал). Кто-нибудь может увидеть какие-либо проблемы в этом подходе?

Ps: Извините за плохой английский. Не является носителем языка.

Комментарии:

1. Вы можете создать частное репозиторий на GitHub или BitBucket и использовать репозиторий с URL-адреса с надлежащей аутентификацией.

2. Из-за политики компании a не может разместить код на github или BitBucket

Ответ №1:

Не уверен, что я понимаю вопрос, но, если ваш серверный сервер идеально настроен для отправки запросов post и get, ваш интерфейс должен принимать только функции вызова вашего сервера. Попробуйте использовать npm axios, и у вас может быть example.js файл, подобный:

 import axios from 'axios';

export default axios.create({
    baseURL: 'http://127.0.0.1:8000/'
})
 

где вы переключаете этот baseUrl на то, что вам действительно нужно. И затем в вашем интерфейсе у вас должны быть запросы axios post и get, например, вы либо импортируете вышеупомянутый файл в файл компонента интерфейса, либо делаете post / get like:

 import axiosFunc from "./example";

class WhateverComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      (...)
    };
  }
(...)
handleSubmit = async () => {
    const response = await axiosFunc.post("/yourEndPointHere", {
        exampleParam: this.state.param
    });
    message.success("success.");
};
(...)
 

Или, как вы можете видеть по ссылке, которую я вам дал, с помощью axios вы вызываете его напрямую и выполняете свои запросы, как в примере ниже:

 axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 

Опять же, я не уверен, что понял, что вы на самом деле хотите сделать, я надеюсь, что axios вам поможет.

Комментарии:

1. Даже я обнаружил редкое требование usecase. Если я использую кучу кода, такого как объекты проверки схемы данных, используя пакеты типа yup, очевидно, что проверки в значительной степени будут общими для обоих и требуют одинаковых проверок. Поэтому мне сложно импортировать их в серверную часть. Я думаю, всегда полезно делиться кодом, который не так уязвим или что-то в этом роде, чтобы избежать ненужного дублирования.