Блог

Главная - Вопросы по программированию - Передача переменных в скомпилированное приложение React из Index.html чтобы controller.js

Передача переменных в скомпилированное приложение React из Index.html чтобы controller.js

#node.js #reactjs #express

#node.js #reactjs #экспресс

Вопрос:

Я пытаюсь передать переменные из index.html к моему приложению react, которое скомпилировано и запущено на сервере express / node локально. Я пытался использовать объект window, но node.js не распознаете объект window.

В основном, после загрузки приложения index.html получите информацию о пользователе из строки запроса и отправьте данные в UserController. Смотрите код ниже

index.html

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="telephone=no" name="format-detection">
    <meta content="no" name="msapplication-tap-highlight">
    <meta content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width" name="viewport">
    <title>App Frontend</title>
</head>

<body>
    <div id="root"></div>
    <script src="js/compiledscript.js"></script>
    <script>
        new AppCode({
            root: document.getElementById('root'),
            host: 'http://localhost:3500',
            endpoints: {
                folder: '/api/folder',
                file: '/api/file'
            },
            headers: {
                'Content-Type': 'application/json'
            }
        });

        //Get iframe data query from parent
        function getParamValue(paramName)
        {
            var url = window.location.search.substring(1); //get rid of "?" in querystring
            var qArray = url.split('amp;'); //get key-value pairs
            for (var i = 0; i < qArray.length; i  ) 
            {
                var pArr = qArray[i].split('='); //split key and value
                if (pArr[0] == paramName) 
                    return pArr[1]; //return value
            }
        }

        var userData = {
            username: getParamValue('username'),
            userid: getParamValue('userid')
        }

        window.userData = userData;
        //console.log(getParamValue('username'));
        //console.log(getParamValue('userid'));


    </script>

</body>

</html>

userController.js

 const mongoose = require('mongoose');
const path = require('path');
const fs = require('fs');

const User = mongoose.model('User');
//const users = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'data', 'users.json'), 'utf-8'));

/*
const users = window.userData;
const userid = users.userid;
exports.userid = userid; 
*/


exports.getAll = async (req, res) => {
    const users = await User.find();
    res.json(users);
};


exports.bang = async (req, res, next) => {
    await User.remove();
    next();
};


exports.addNewUser = async (req, res, next) => {
    await User.create(users);
   // next();
};

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

1. Вместо этого вы могли бы прочитать строку запроса в componentDidMount вашем самом верхнем компоненте React.

Ответ №1:

Если вы отправляете HTML-файл как статический файл,

Вы можете сделать это решение:

Решение:

установите ejs , выполнив команду npm i ejs , затем измените ваш файл с index.html на index.ejs ,

добавьте эту строку в свое приложение app.set('view engine', 'ejs'); и отправьте файл по

 res.render('index.ejs', {
 // here data to pass
});

затем вы можете передать данные index.ejs , и они будут отображаться

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

если вы можете использовать рендеринг на стороне сервера

тогда решением было бы сокращение

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

1. Я использую const router = express . Маршрутизатор (); внутри моего index.js файл маршрута

2. Я вижу это уже в app. app.set (‘view engine’, ‘pug’);

3. если вы устанавливаете механизм просмотра на pug, почему вы его не используете?

4. Я кодирую / обновляю существующее приложение, поэтому некоторые вещи уже внутри app.js Я понятия не имею о том, как все было устроено. Учусь по ходу дела. Просто нужно передать данные из index.html к другим частям приложения.

5. что именно вы пытаетесь сделать (что делает приложение) (рендеринг на стороне сервера, рендеринг на стороне клиента)?

Метки: