Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > JavaScript: Фреймворки > React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
3 / 3 / 2
Регистрация: 16.01.2016
Сообщений: 51

React js связные таблицы

11.06.2022, 18:58. Показов 362. Ответов 0
Метки fetch(), hooks, mvc core, react js, table (Все метки)
Студворк — интернет-сервис помощи студентам
Добрый день! Извиняюсь за беспокойство, возникли вопросы по связным таблицам.

У меня есть Net Core MVC проект, к которому я пишу фронт на react.
У меня имеется таблица street_type, вторичный ключ которой используется в таблице street.
Мне необходимо, чтобы при отображении в таблице Street, поля street_type, выводило не id из таблицы street_type, а поле Name?

Так же, хотел уточнить, как сделать выпадающий список, чтобы выбиралось по Name из таблицы street_type, но при добавлении или изменении в запросе присваивался бы ID?
В общем выбор по полю name, а работало бы всё грамотно по id.
Заранее благодарю вас.

Вот примеры кода:

StreetType

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import React, { useState } from "react";
 
export const StreetType = ({id, name, short_name, onEdit, onDelete }) => {
  const [isEdit, setIsEdit] = useState(false);
 
  const handleEdit = () => {
    setIsEdit(!isEdit);
  };
 
  const handleDelete = () => {
    onDelete(id);
  };
 
  const handleOnEditSubmit = (evt) => {
    evt.preventDefault();
    onEdit(id, evt.target.name.value, evt.target.short_name.value);
    setIsEdit(!isEdit);
  };
 
  return (
    <>
      {isEdit ? (
        <form onSubmit={handleOnEditSubmit}>
          <input placeholder="name" name="name" defaultValue={name} />
          <input placeholder="short_name" name="short_name" defaultValue={short_name} />
          <button onSubmit={handleOnEditSubmit}>Save</button>
        </form>
      ) : (
 
        <div className="street_type">
          <span className="street_type-name">{name}</span>
          <span className="street_type-short_name">{short_name}</span>
          <div>
            <button onClick={handleEdit}>Изменить</button>
            <button onClick={handleDelete}>Удалить</button>
          </div>
        </div>
      )}
    </>
  );
};
Street

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

import React, { useState } from "react";
 
export const Street = ({
    id,
    code,
    document_name,
    short_name,
    description,
    note,
    street_typeId,
    districtId,
    create_date,
    create_resolution_date,
    create_resolution_number,
    create_resolution_typeId,
    create_street_reasonId,
    // destroy_date,
    // second_destroy_date,
    // destroy_resolution_date,
    // destroy_resolution_number,
    // destroy_resolution_typeId,
    // destroy_street_reasonId,
 
    onEdit, onDelete }) => {
  const [isEdit, setIsEdit] = useState(false);
 
  const handleEdit = () => {
    setIsEdit(!isEdit);
  };
 
  const handleDelete = () => {
    onDelete(id);
  };
 
  const handleOnEditSubmit = (evt) => {
    evt.preventDefault();
    onEdit(id, evt.target.code.value,
        evt.target.document_name.value,
        evt.target.short_name.value,
        evt.target.description.value,
        evt.target.note.value,
        evt.target.street_typeId.value,
        evt.target.districtId.value,
        evt.target.create_date.value,
        evt.target.create_resolution_date.value,
        evt.target.create_resolution_number.value,
        evt.target.create_resolution_typeId.value,
        evt.target.create_street_reasonId.value,
        // evt.target.destroy_date.value,
        // evt.target.second_destroy_date.value,
        // evt.target.destroy_resolution_date.value,
        // evt.target.destroy_resolution_number.value,
        );
    setIsEdit(!isEdit);
  };
 
  return (
    <>
      {isEdit ? (
        <form onSubmit={handleOnEditSubmit}>
          <input placeholder="code" name="code" defaultValue={code} />
          <input placeholder="document_name" name="document_name" defaultValue={document_name} />
          <input placeholder="short_name" name="short_name" defaultValue={short_name} />
          <input placeholder="description" name="description" defaultValue={description} />
          <input placeholder="note" name="note" defaultValue={note} />
          <input placeholder="street_typeId" name="street_typeId" defaultValue={street_typeId} />
          <input placeholder="districtId" name="districtId" defaultValue={districtId} />
          <input type={"date"} placeholder="create_date" name="create_date" defaultValue={create_date} />
          <input type={"date"} placeholder="create_resolution_date" name="create_resolution_date" defaultValue={create_resolution_date} />
          <input placeholder="create_resolution_number" name="create_resolution_number" defaultValue={create_resolution_number} />
          <input placeholder="create_resolution_typeId" name="create_resolution_typeId" defaultValue={create_resolution_typeId} />
          <input placeholder="create_street_reasonId" name="create_street_reasonId" defaultValue={create_street_reasonId} />
          {/* <input type={"date"} placeholder="destroy_date" name="destroy_date" defaultValue={destroy_date} />
          <input type={"date"} placeholder="second_destroy_date" name="second_destroy_date" defaultValue={second_destroy_date} />
          <input type={"date"} placeholder="destroy_resolution_date" name="destroy_resolution_date" defaultValue={destroy_resolution_date} />
          <input placeholder="destroy_resolution_number" name="destroy_resolution_number" defaultValue={destroy_resolution_number} />
          <input placeholder="destroy_resolution_typeId" name="destroy_resolution_typeId" defaultValue={destroy_resolution_typeId} />
          <input placeholder="destroy_street_reasonId" name="destroy_street_reasonId" defaultValue={destroy_street_reasonId} /> */}
          <button onSubmit={handleOnEditSubmit}>Save</button>
        </form>
      ) : (
        <div className="street">
          <span className="street-code">{code}</span>
          <span className="street-document_name">{document_name}</span>
          <span className="street-short_name">{short_name}</span>
          <span className="street-description">{description}</span>
          <span className="street-note">{note}</span>
          <span className="street-street_typeId">{street_typeId}</span>
          <span className="street-districtId">{districtId}</span>
          <span className="street-create_date">{create_date}</span>
          <span className="street-create_resolution_date">{create_resolution_date}</span>
          <span className="street-create_resolution_number">{create_resolution_number}</span>
          <span className="street-create_resolution_typeId">{create_resolution_typeId}</span>
          <span className="street-create_street_reasonId">{create_street_reasonId}</span>
          {/* <span className="street-destroy_date">{destroy_date}</span>
          <span className="street-second_destroy_date">{second_destroy_date}</span>
          <span className="street-destroy_resolution_date">{destroy_resolution_date}</span>
          <span className="street-destroy_resolution_number">{destroy_resolution_number}</span>
          <span className="street-destroy_resolution_typeId">{destroy_resolution_typeId}</span>
          <span className="street-destroy_street_reasonId">{destroy_street_reasonId}</span>           */}
          <div>
            <button onClick={handleEdit}>Изменить</button>
            <button onClick={handleDelete}>Удалить</button>
          </div>
        </div>
        
      )}
    </>
  );
};
StreetAdd
(В данной таблице необходимо отображение поля Name из таблицы StreetType. И использование выпадающего списка для выбора значений.)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

import { Input } from "antd";
 
export const StreetAdd = ({ onAdd }) => {
  const handleOnSubmit = (evt) => {
      evt.preventDefault();
      onAdd(
          evt.target.code.value,
          evt.target.document_name.value,
          evt.target.short_name.value,
          evt.target.description.value,
          evt.target.note.value,
          evt.target.street_typeId.value,
          evt.target.districtId.value,
          evt.target.create_date.value,
          evt.target.create_resolution_date.value,
          evt.target.create_resolution_number.value,
          evt.target.create_resolution_typeId.value,
          evt.target.create_street_reasonId.value,
 
        //   evt.target.destroy_date.value,
        //   evt.target.second_destroy_date.value,
        //   evt.target.destroy_resolution_date.value,
        //   evt.target.destroy_resolution_number.value,
        //   evt.target.destroy_resolution_typeId.value,
        //   evt.target.destroy_street_reasonId.value
      );
          evt.target.code.value = "";
          evt.target.document_name.value = "";
          evt.target.short_name.value = "";
          evt.target.description.value = "";
          evt.target.note.value = "";
          evt.target.street_typeId.value = "";
          evt.target.districtId.value = "";
          evt.target.create_date.value = "";
          evt.target.create_resolution_date.value = "";
          evt.target.create_resolution_number.value = "";
          evt.target.create_resolution_typeId.value = "";
          evt.target.create_street_reasonId.value = "";
        //   evt.target.destroy_date.value = "";
        //   evt.target.second_destroy_date.value = "";
        //   evt.target.destroy_resolution_date.value = "";
        //   evt.target.destroy_resolution_number.value = "";
        //   evt.target.destroy_resolution_typeId.value = "";
        //   evt.target.destroy_street_reasonId.value = "";
  };
 
  return (
      <form onSubmit={handleOnSubmit}>
          <h3>Редактировать типы улиц</h3>
          <Input placeholder="code" name="code" />
          <Input placeholder="document_name" name="document_name" />
          <Input placeholder="short_name" name="short_name" />
          <Input placeholder="description" name="description" />
          <Input placeholder="note" name="note" />
          <Input placeholder="street_typeId" name="street_typeId" />
          <Input placeholder="districtId" name="districtId" />
          <Input type={"date"} placeholder="create_date" name="create_date" />
          <Input type={"date"} placeholder="create_resolution_date" name="create_resolution_date" />
          <Input placeholder="create_resolution_number" name="create_resolution_number" />
          <Input placeholder="create_resolution_typeId" name="create_resolution_typeId" />
          <Input placeholder="create_street_reasonId" name="create_street_reasonId" />
          {/* <Input type={"date"} placeholder="destroy_date" name="destroy_date" />
          <Input type={"date"} placeholder="second_destroy_date" name="second_destroy_date" />
          <Input type={"date"} placeholder="destroy_resolution_date" name="destroy_resolution_date" />
          <Input placeholder="destroy_resolution_number" name="destroy_resolution_number" />
          <Input placeholder="destroy_resolution_typeId" name="destroy_resolution_typeId" />
          <Input placeholder="destroy_street_reasonId" name="destroy_street_reasonId" /> */}
 
          <button className="btn btn-light" onSubmit={handleOnSubmit}>Добавить</button>
          <hr />
      </form>
  );
};
А вот для примера обращение к Серверу:
Fetch запросы.

AppStreet

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257

import { useState, useEffect } from "react";
import { Street } from "./Street";
//import StreetTypeTable from "../table/StreetTypeTable";
import { StreetAdd } from "./StreetAdd";
 
export default function AppStreet() {
 
  
  const [street, setStreet] = useState([]);
 
 
  useEffect(() => {
    fetchData();
  }, []);
 
  const fetchData = async () => {
    await fetch("http://localhost:13523/street/")
      .then((response) => response.json())
      .then((data) => setStreet(data))
      .catch((error) => console.log(error));
  };
 
  const onAdd = async (code,
    document_name,
    short_name,
    description,
    note,
    street_typeId,
    districtId,
    create_date,
    create_resolution_date,
    create_resolution_number,
    create_resolution_typeId,
    create_street_reasonId,
    // destroy_date,
    // second_destroy_date,
    // destroy_resolution_date,
    // destroy_resolution_number,
    // destroy_resolution_typeId,
    // destroy_street_reasonId
    ) => {
    await fetch('http://localhost:13523/street/', {
      method: 'POST',
      body: JSON.stringify({
        code: code,
    document_name: document_name,
    short_name: short_name,
    description: description,
    note: note,
    street_typeId: street_typeId,
    districtId: districtId,
    create_date: create_date,
    create_resolution_date: create_resolution_date,
    create_resolution_number: create_resolution_number,
    create_resolution_typeId: create_resolution_typeId,
    create_street_reasonId: create_street_reasonId,
    // destroy_date: destroy_date,
    // second_destroy_date: second_destroy_date,
    // destroy_resolution_date: destroy_resolution_date,
    // destroy_resolution_number: destroy_resolution_number,
    // destroy_resolution_typeId: destroy_resolution_typeId,
    // destroy_street_reasonId: destroy_street_reasonId
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
      .then((response) => response.json())
      .then((data) => { setStreet((street) => [...street, data]) });
  };
 
  const onEdit = async (id, code,
    document_name,
    short_name,
    description,
    note,
    street_typeId,
    districtId,
    create_date,
    create_resolution_date,
    create_resolution_number,
    create_resolution_typeId,
    create_street_reasonId,
    // destroy_date,
    // second_destroy_date,
    // destroy_resolution_date,
    // destroy_resolution_number,
    // destroy_resolution_typeId,
    // destroy_street_reasonId
    ) => {
    await fetch(`http://localhost:13523/street/${id}`, {
      method: "PUT",
      body: JSON.stringify({
        id: id,
        code: code,
    document_name: document_name,
    short_name: short_name,
    description: description,
    note: note,
    street_typeId: street_typeId,
    districtId: districtId,
    create_date: create_date,
    create_resolution_date: create_resolution_date,
    create_resolution_number: create_resolution_number,
    create_resolution_typeId: create_resolution_typeId,
    create_street_reasonId: create_street_reasonId,
      // destroy_date: destroy_date,
      // second_destroy_date: second_destroy_date,
      // destroy_resolution_date: destroy_resolution_date,
      // destroy_resolution_number: destroy_resolution_number,
      // destroy_resolution_typeId: destroy_resolution_typeId,
      // destroy_street_reasonId: destroy_street_reasonId
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      }
    })
      .then((response) => response.json())
      .then((data) => {
        setStreet((street) => [...street, data]);
        const updateddatas = street.map((data) => {
          if (data.id === id) {
            data.id = id;
            data.code = code;
            data.document_name = document_name;
            data.short_name = short_name;
            data.description = description;
            data.note = note;
            data.street_typeId = street_typeId;
            data.districtId = districtId;
            data.create_date = create_date;
            data.create_resolution_date = create_resolution_date;
            data.create_resolution_number = create_resolution_number;
            data.create_resolution_typeId = create_resolution_typeId;
            data.create_street_reasonId = create_street_reasonId;
            // data.destroy_date=destroy_date;
            // data.second_destroy_date=second_destroy_date;
            // data.destroy_resolution_date=destroy_resolution_date;
            // data.destroy_resolution_number=destroy_resolution_number;
            // data.destroy_resolution_typeId=destroy_resolution_typeId;
            // data.destroy_street_reasonId = destroy_street_reasonId;
          }
 
          return data;
        });
 
        setStreet((street) => updateddatas);
      })
      //.catch((error) => console.log(error));
  };
 
  const onDelete = async (id) => {
    await fetch(`http://localhost:13523/street/${id}`, {
      method: "DELETE"
    })
      .then((response) => {
        if (response.status !== 200) {
          return;
        } else {
          setStreet(
            street.filter((data) => {
              return data.id !== id;
            })
          );
        }
      })
      .catch((error) => console.log(error));
  };
  return (
    <div className="App">
      <StreetAdd onAdd={onAdd} />
 
      <table className="table table-striped table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="coll">ID</th>
            <th scope="coll">Код</th>
            <th scope="coll">Полное наименование</th>
            <th scope="coll">Сокращенное наименование</th>
            <th scope="coll">Историческая справка</th>
            <th scope="coll">Словесное описание местонахождения</th>
            <th scope="coll">Идентификатор типа улицы</th>
            <th scope="coll">Район</th>
            <th scope="coll">Дата регистрации</th>
            <th scope="coll">Дата документа регистрации</th>
            <th scope="coll">Номер документа регистрации</th>
            <th scope="coll">Тип документа регистрации</th>
            <th scope="coll">Идентификатор причины регистрации</th>
            
            <th scope="coll">Действия</th>
          </tr>
        </thead>
        <tbody>
          {street.map((data) => {
              return (
                <tr>
                  <td>{data.id}</td>
 
 
                  <td>{data.code}</td>
                  <td>{data.document_name}</td>
                  <td>{data.short_name}</td>
                  <td>{data.description}</td>
                  <td>{data.note}</td>
                  <td>{data.street_typeId}</td>
                  <td>{data.districtId}</td>
                  <td>{data.create_date}</td>
                  <td>{data.create_resolution_date}</td>
                  <td>{data.create_resolution_number}</td>
                  <td>{data.create_resolution_typeId}</td>
                  <td>{data.create_street_reasonId}</td>
                  <td>
                    <Street id={data.id} key={data.id} onEdit={onEdit} onDelete={onDelete} />
                  </td>
                </tr>
              )
            })
}
        </tbody>
      </table>
 
 
 
 
 
 
 
      {/* {street.map((data) => (
        <Street
          id={data.id}
          key={data.id}
          code={data.code}
          document_name={data.document_name}
          short_name={data.short_name}
          description={data.description}
          note={data.note}
          street_typeId={data.street_typeId}
          districtId={data.districtId}
          create_date={data.create_date}
          create_resolution_date={data.create_resolution_date}
          create_resolution_number={data.create_resolution_number}
          create_resolution_typeId={data.create_resolution_typeId}
          create_street_reasonId={data.create_street_reasonId}
          // destroy_date={data.destroy_date}
          // second_destroy_date={data.second_destroy_date}
          // destroy_resolution_date={data.destroy_resolution_date}
          // destroy_resolution_number={data.destroy_resolution_number}
          // destroy_resolution_typeId={data.destroy_resolution_typeId}
          // destroy_street_reasonId={data.destroy_street_reasonId}
          onEdit={onEdit}
          onDelete={onDelete}
        />
      ))} */}
    </div>
  );
 
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 11.06.2022, 18:58
Ответы с готовыми решениями:

Таблицы с React
Как отсюда получить таблицу для работы с React? Может кто-то работал с этим Добавлено через 17 минут отсюда...

Посоветуйте практический курс на React redux/ react
Всем привет. Столкнулся с тем, что мне не хватает практики. Подскажите какой практический курс по реакту. типо...

поиск в бд(связные таблицы)
У меня создана бд. Подключал через adotable. Как организовать поиск в связной таблице? Этот код работает для первой таблицы, а для...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 11.06.2022, 18:58
Помогаю со студенческими работами здесь

Вставка в связные таблицы по ИД
Добрый день! Возник такой вопрос, есть БД с 5 табличками, как вывести данные из связных таблиц я разобрался: Select * from Medications m,...

delphi + access (связные таблицы)
как организовать вывод данных связной таблицы в DBGrid отображаются ID а нужно данные соответствующие ID (столбец Вид страховки) БД и...

Не получается сохранить связные таблицы
Здравствуйте, Проблема такая: Есть БД Access содержащая две связанные таблицы Клиенты и Заказы(связь осуществляется с помощью счетчика),...

Spring и Postgres - связные таблицы
Доброго времени, подкажите как избавиться от следующей ошибки: org.hibernate.tool.hbm2ddl.SchemaExport : HHH000389: Unsuccessful: alter...

Занести значение в две связные таблицы
Доброго времени суток. Есть две связные таблицы: customer, в которой хранится информация об пользователях, и user_login, в которой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru