веб-разработка

Информационный сайт о развитии

Услуги по разработке сайтов

Мы предлагаем:

Индивидуальный дизайн сайта

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

Адаптивная веб-разработка

Создайте веб-сайт, который адаптируется к нескольким устройствам, будь то настольный компьютер, планшет или мобильный телефон, чтобы обеспечить наилучшие впечатления от просмотра.

Создание платформы электронной коммерции

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

Разработка бэкэнд-системы

Создайте стабильную и эффективную серверную систему, включая управление базами данных, интеграцию API и настройку сервера, чтобы обеспечить бесперебойную работу веб-сайта.

Услуги по оптимизации сайта

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

Обслуживание и обновления сайта

Предоставляйте услуги по регулярному обслуживанию веб-сайта и обновлению контента для обеспечения его безопасности и актуальности информации.

Техническая поддержка и консультации

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

Веб-страница: планирование и дизайн веб-страницы; Дизайн и изготовление презентаций веб-страниц

Система веб-приложений: различные системы приложений, такие как онлайн-рейтинги, помощники по управлению карьерой и жизнью, умные помощники по изучению языков и т. д.

.NET,C++,Java,PHP,JSP,JavaScript Programming Oracle DB, Microsoft SQL, MySQL, MariaDB

HTML

HTML (язык гипертекстовой разметки) — это основной стандартный язык для создания веб-страниц. Он отвечает за определение структуры и содержания веб-страниц, объединение текста, изображений, ссылок и другого мультимедиа с помощью различных тегов.

инфраструктура

Стандартный HTML-элемент состоит из начального тега, содержимого и закрывающих тегов. Например:<p>Это текст</p>. Теги могут быть вложены в иерархическую древовидную структуру DOM.

Общие категории тегов

Текстовая метка:h1–h6 представляют заголовки, p — абзацы, а br — разрывы строк.
Список тегов:ul — неупорядоченный список, ol — упорядоченный список, а li — элемент списка.
Ссылки и изображения:Тег a используется для создания гиперссылок, а тег img — для встраивания изображений.
Этикетка контейнера:div и span используются для управления макетом и стилем.

Заявка на недвижимость

Теги могут содержать атрибуты, предоставляющие дополнительную информацию. Общие свойства включают в себя:

Имя свойства	Инструкция по применению
href	Определяет целевой URL-адрес ссылки.
src	Определите исходный путь изображений или мультимедиа.
alt	Альтернативный текст, когда изображение не может быть отображено.
class / id	Используется для выбора стиля CSS или операций JavaScript.

Семантические теги

Современный HTML подчеркивает семантику и использует такие теги, как заголовок, нижний колонтитул, статья, навигация и т. д. Это не только помогает в поисковой оптимизации (SEO), но также улучшает читаемость и доступность ваших веб-страниц.

Связь с CSS и JavaScript

HTML отвечает за структуру контента, CSS — за визуальный стиль, а JavaScript — за интерактивное поведение. Сочетание этих трех факторов может создать современное и полноценное веб-приложение.

HTML-имя цвета

Ниже перечислены стандартные названия веб-цветов, поддерживаемые HTML. Эти имена можно использовать непосредственно в атрибутах CSS или HTML, и браузер автоматически преобразует их в соответствующие числовые значения.

основной цвет

Предварительный просмотр цвета	Английское имя	Шестнадцатеричный код
	Black	#000000
	White	#FFFFFF
	Red	#FF0000
	Blue	#0000FF
	Yellow	#FFFF00
	Lime	#00FF00
	Cyan / Aqua	#00FFFF
	Magenta / Fuchsia	#FF00FF

Серая серия

Предварительный просмотр	имя	код
	LightGray	#D3D3D3
	Silver	#C0C0C0
	DarkGray	#A9A9A9
	Gray	#808080
	DimGray	#696969
	SlateGray	#708090

Розовый и красный

Pink (#FFC0CB)
LightPink (#FFB6C1)
HotPink (#FF69B4)
DeepPink (#FF1493)
Crimson (#DC143C)
Tomato (#FF6347)
DarkRed (#8B0000)

синий и зеленый

SkyBlue (#87CEEB)
DeepSkyBlue (#00BFFF)
RoyalBlue (#4169E1)
Navy (#000080)
ForestGreen (#228B22)
SeaGreen (#2E8B57)
Teal (#008080)

Оранжевый, желтый и коричневый цвета

	Orange	#FFA500
	Gold	#FFD700
	Khaki	#F0E68C
	Chocolate	#D2691E
	SaddleBrown	#8B4513

JavaScript

Особенности JavaScript

JavaScript — это эффективный, гибкий и динамичный язык сценариев, который широко используется во внешней и внутренней разработке. Ниже приведены основные возможности JavaScript:

1. Динамически типизированный язык

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

пусть значение = 10; // инициализируется числовым типом
значение = «Привет»; // можно изменить на строковый тип

2. Объектно-ориентированная поддержка

JavaScript поддерживает объектную ориентацию и используетпрототипное наследованиеспособ реализации наследования и повторного использования объектов. Это позволяет JavaScript более гибко определять объекты и манипулировать ими.


let person = {
name: "Alice",
greet: function() {
    return "Hello, " + this.name;
}
};

3. Функции — это объекты (функции высокого порядка).

В JavaScript функции также являются объектами, которые можно передавать как параметры, возвращать или присваивать переменным. Эта функция поддерживает множество шаблонов функционального программирования.

функция приветствие (имя) {
вернуть «Привет» + имя;
}
пусть говорятПривет = приветствие;
console.log(sayHello("Алиса")); // Функции можно использовать как переменные

4. Поддержка асинхронных операций.

JavaScript изначально поддерживает асинхронные операции, особенно черезPromiseиasync/awaitДелает обработку асинхронного поведения более интуитивно понятной. Это полезно для обработки асинхронных операций, таких как сетевые запросы и события синхронизации.


async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
fetchData();

5. Обширные кроссплатформенные приложения.

Первоначально JavaScript использовался для фронтенд-разработки в веб-браузерах, но в настоящее время широко используется при внутренней разработке (например, Node.js), настольных приложениях, мобильных приложениях и даже устройствах Интернета вещей.

Гибкость и разнообразие JavaScript делают его одной из основных технологий современной веб-разработки и обеспечивают мощную поддержку в различных областях применения.

Логическое значение JavaScript

Концепция ценностей Боллинджера

В JavaScript Boolean — это базовый тип данных, имеющий только два возможных состояния или значения:

true: Олицетворяет истину, да, открытие или успех.
false: представляет ложь, нет, закрыто или не удалось.

Логическое значение является основой для всех логических суждений и управления процессами, напримерif...elseОператоры и циклы.

1. Прямое присвоение и сравнение

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

пусть isLogged = true;
пусть isGuest = ложь;

// Оператор сравнения вернет логическое значение
пусть isGreater = (10 > 5); // правда
пусть isEqual = (5 === '5'); // false (потому что типы данных разные)

2. Используйте (If/Else) в условном суждении.

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

пусть возраст = 20;

если (возраст >= 18) {
  console.log("Я взрослый и могу голосовать.");
} еще {
  console.log("Несовершеннолетний.");
}

пусть userValid = checkUserStatus(); // Предполагаем, что возвращаем true или false

если (userValid) {
  // если userValid true
  displayDashboard();
} еще {
  // если userValid имеет значение false
  показатьLoginError();
}

3. Логические операторы

Логические операторы используются для объединения или инвертирования логических значений. Существует три основных типа:

!(НЕ): логическое отрицание, инвертирование логического значения.
&&(И): Логическое И, только если обе стороныtrueТолько тогда сообщение будет возвращеноtrue。
||(ИЛИ): Логическое ИЛИ, если одна сторонаtrueПросто отправь обратноtrue。

пусть isLoggedIn = true;
пусть hasPermission = ложь;

// ! (НЕ)
пусть isNotLoggedIn = !isLoggedIn; // ложь

// && (И)
если (isLoggedIn && hasPermission) {
  console.log("Пользователь вошел в систему и имеет разрешения.");
}

// || (ИЛИ)
если (isLoggedIn || isGuest) {
  console.log("Для продолжения просто войдите в систему или станьте гостем.");
}

4. Значения Истины и Ложи (неявное преобразование)

JavaScript позволяет использовать другие типы данных, где требуются логические значения, и выполняются неявные преобразования. Эти значения будут трактоваться какtrueилиfalse：

1. Ложное значение (будет преобразовано в`false`ценить):

В условном суждении следующие шесть значений будут расцениваться какfalse：

false(само значение Боллинджера)
0(ноль)
""или''(пустая строка)
null
undefined
NaN (Not a Number)

2. Значение правдивости (будет преобразовано в`true`ценить):

**Все остальные значения**, кроме шести упомянутых выше значений Falsy, в том числе:

"0"(непустая строка)
"false"(непустая строка)
любое ненулевое число (например,1, -100)
пустой массив[]
пустой объект{}
функция

let myString = «Привет»;
пусть мойНомер = 0;

если (myString) {
  // myString — это «Hello», что является значением Truthy и будет выполнено
  console.log("Строка не пуста.");
}

если (мойномер) {
  // myNumber равен 0, что является значением Falsy и не будет выполнено.
  console.log("Число ненулевое.");
}

если ({}) {
  // Пустой объект {} является значением Truthy и будет выполнен
  console.log("Объект уже существует.");
}

Массив JavaScript

Массив JavaScript (Array) — это переменная, используемая для хранения нескольких значений. Каждое значение в массиве называется элементом, и каждый элемент имеет числовой индекс (Index), начиная с 0.

Создание массива и основные операции

// Создаем массив
let Fruits = ["Яблоко", "Банан", "Вишня", "Финика"];

//Доступ к элементам массива
console.log(фрукты[0]); // Вывод: Apple
console.log(fruits.length); // Вывод: 4

//Добавляем элементы в конец массива
Fruits.push("Бузина");
console.log(фрукты); // Вывод: ["Яблоко", "Банан", "Вишня", "Финик", "Бузина"]

//удаляем хвостовой элемент массива
пусть LastFruit = Fruits.pop();
console.log(lastFruit); // Выход: Бузина
console.log(фрукты); // Вывод: ["Яблоко", "Банан", "Вишня", "Дата"]

Используйте метод среза()

slice()Метод возвращает новый массив, содержащий выбранные элементы из исходного массива. Он не изменяет исходный массив.

грамматика:array.slice(start, end)

start(необязательно): начальный индекс для получения (включительно). Если не указано, начинается с индекса 0.
end(необязательно): Конечный индекс поиска (не включен). Если не указано, получить до конца массива.

пусть числа = [10, 20, 30, 40, 50, 60, 70];

// Начинаем с индекса 2 (30) и заканчиваем
пусть срез1 = Numbers.slice(2);
console.log(slice1); // Вывод: [30, 40, 50, 60, 70]

// Начиная с индекса 1 (20) и до индекса 4 (50)
пусть срез2 = Numbers.slice(1, 4);
console.log(slice2); // Вывод: [20, 30, 40]

// Используйте отрицательные индексы: -1 указывает на последний элемент, -3 указывает на третий-последний элемент (50)
пусть срез3 = Numbers.slice(-3, -1);
console.log(slice3); // Вывод: [50, 60]

//копируем весь массив
пусть copy = Numbers.slice();
console.log(копия); // Вывод: [10, 20, 30, 40, 50, 60, 70]

console.log(числа); // Исходный массив не был изменен

Как случайным образом получить 5 элементов из массива

Следующая функция предоставляет эффективный способ случайного выбора указанного количества элементов (например, 5) из массива. Этот метод гарантирует, что выбранные элементы не повторяются.

/**
 * Случайным образом выбрать указанное количество элементов из массива
 * @param {Array} исходный массив
 * @param {number} count Количество элементов, которые нужно выбрать (по умолчанию — 5)
 * @returns {Array} Новый массив, содержащий случайно выбранные элементы.
 */
функция getRandomElements(arr, count = 5) {
    // Если элементы массива меньше или равны требуемому числу, возвращаем копию массива
    если (объем. длина<= count) {
        return arr.slice();
    }

    // 建立一個原始陣列的副本，用於隨機選取
    let tempArray = arr.slice();
    let result = [];

    for (let i = 0; i < count; i++) {
        // 隨機產生一個索引
        let randomIndex = Math.floor(Math.random() * tempArray.length);

        // 將選中的元素加入結果陣列
        result.push(tempArray[randomIndex]);

        // 將選中的元素從 tempArray 中移除，確保不會重複選取
        tempArray.splice(randomIndex, 1);
    }

    return result;
}

let largeArray = [
    "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
    "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T"
];

let randomFive = getRandomElements(largeArray, 5);
console.log(randomFive); // 輸出範例: ["P", "A", "H", "R", "M"] (每次執行結果不同)

Проверка членов массива JavaScript

В разработке JavaScript существует несколько распространенных способов определить, существует ли значение в массиве. Какой метод выбрать, зависит от того, нужен ли вам только «результат логического значения» или вам нужно получить «индексную позицию» или «содержимое объекта» элемента.

1. Использование метода включает в себя

Это наиболее рекомендуемая стандартная практика после ES6, с наиболее четкой семантикой и прямым возвратом true или false.

const fruits = ['apple', 'banana', 'orange'];
const hasApple = fruits.includes('apple'); // true

Преимущества: синтаксис краток, и NaN можно правильно оценить.
Примечание. Используется конгруэнтное сравнение (===).

2. Используйте метод indexOf

Используйте в старых браузерах или когда вам нужно узнать положение элемента. Если он существует, верните значение индекса (начиная с 0), если нет, верните -1.

const tags = ['js', 'php', 'css'];
if (tags.indexOf('php') !== -1) {
    //Логика существования элемента
}

3. Используйте какой-нибудь метод для обработки сложных условий.

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

const users = [
    { id: 101, name: 'Alex' },
    { id: 102, name: 'Bob' }
];
const exists = users.some(user => user.id === 101); // true

4. Связанное расширенное использование

нуждаться	Предлагаемый метод	Пример постбэка
Найдите первого квалифицированного участника	find()	{ id: 101, имя: «Алекс» } или неопределенное
Найдите первый индекс, соответствующий критериям	findIndex()	0 или -1
Найдите всех подходящих участников	filter()	[соответствие 1, совпадение 2] или []

5. Рекомендации по оптимизации производительности

Если вам необходимо часто проверять наличие элементов в очень большом наборе данных, рекомендуется преобразовать массив в объект Set. Сложность запроса метода Set has составляет O(1), что намного быстрее, чем O(n) массива.

const HugeArray = [/* Большой объем данных */];
const mySet = новый набор (hugeArray);

если (mySet.has('targetValue')) {
    // быстрый удар
}

Добавить новый массив в массив JavaScript

Используйте метод конкат

Вы можете использоватьconcatМетод объединения двух массивов:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

Используйте оператор распространения

Использование оператора распространения также является распространенным способом:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

Использование метода push и оператора распространения

Если вы хотите добавить элементы второго массива в первый массив, вы можете объединитьpushИ оператор распространения:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

Получить имя выполняющейся в данный момент функции

Цель

Воляconsole.log('op_panel_htm()')Измените, чтобы динамически получать имя функции и выводить его, напримерconsole.log(get_curr_method_name())。

Написание функций

функция get_curr_method_name() {
  константный стек = новая ошибка().стек;
  constlines = stack.split("\n");

  // Строка 0 — это ошибка, строка 1 — get_curr_method_name, строка 2 — функция, которая его вызывает
  const callerLine = линии[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  ответный матч? match[1] : 'анонимный';
}

Примеры применения


TableOperator.prototype.op_panel_htm = function () {
  console.log(get_curr_method_name());
};

Вывод результатов

Если вы выполните следующее:


const t = new TableOperator();
t.op_panel_htm();

Это может быть выведено на консоль:

TableOperator.op_panel_htm

Фактический вывод зависит от формата стека браузера. Chrome/Edge обычно выводит полный путь к функции.

На что следует обратить внимание

Этот метод зависит отError().stack, формат разных браузеров немного отличается.
Он подходит для использования во время отладки и разработки. Не рекомендуется полагаться на этот метод для выполнения логики в формальной среде.

Расширенные предложения

Его можно инкапсулировать в специальную функцию отладки:


function debug_log(msg = '') {
  console.log(`[${get_curr_method_name()}] ${msg}`);
}

Как использовать:

debug_log("Инициализация завершена");

Результаты вывода следующие:

Инициализация [TableOperator.op_panel_htm] завершена

Управление объединением и классификацией функций JavaScript.

Цель

Когда проект JavaScript становится большим и имеет множество функций, следует использовать модульность и классификацию для улучшения удобства сопровождения и читаемости. Ниже объясняется, как эффективно управлять несколькими функциями, в том числе следует ли использоватьclass。

1. Используйте биннинг модулей ES6.

Сохраняйте связанные функции в разных файлах в соответствии с функциональной классификацией, например:

/utils/mathUtils.js → Функции, связанные с математическими операциями
/utils/domUtils.js → Функция работы с DOM
/modules/tableOperator.js → Классы или функции, связанные с операциями с таблицами

Каждый файл используетexport / importграмматика:


// mathUtils.js
export function add(a, b) {
  return a + b;
}


// main.js
import { add } from './utils/mathUtils.js';
console.log(add(2, 3));

2. Подобные функции относятся к одному и тому же модулю.

Более структурно было бы обернуть функции со связанной логикой в объект или класс, например:


// domUtils.js
export const DomUtils = {
  createElement(tag) {
    return document.createElement(tag);
  },
  removeElement(el) {
    el.parentNode.removeChild(el);
  }
};

Или используйте класс:


// tableOperator.js
export class TableOperator {
  constructor(tableId) {
    this.table = document.getElementById(tableId);
  }

  highlightRow(index) {
    // ...
  }

  sortByColumn(colIndex) {
    // ...
  }
}

3. Когда уместно использовать класс?

нуждатьсяСтатус пакета(например, элементы DOM, внутренние данные) функциональные модули
Будет создано несколько экземпляров (например, несколько таблиц, несколько компонентов).
Существует потребность в наследовании и расширении.

Если это просто функция инструмента (например, обработка строк, математические операции), рекомендуется использоватьexport functionилиexport const obj = { ... }Просто справьтесь.

4. Сопоставьте инструменты и рамки

Используется в разработкеVSCode + ESM + каталог структуры проекта
Официальные проекты могут быть скоординированыWebpack、ViteИнструменты для упаковки модов
Рекомендуется для крупных интерфейсных проектов.TypeScript + класс + модульностьуправлять

Примеры предложений по структуре


/src
  /utils
    stringUtils.js
    mathUtils.js
  /components
    tableOperator.js
    chartViewer.js
  main.js

Переменные-члены класса JavaScript и использование методов

базовая грамматика

в JavaScriptclassИспользует аналогично другим языкам ООП, включая конструкторы.constructor, переменные-члены и определения методов (функций).

пример

класс Человек {
  //Переменные-члены (публичные)
  имя;
  возраст;

  //Конструктор
  конструктор(имя, возраст) {
    это.имя = имя;
    this.age = возраст;
  }

  //Метод-член
  приветствие () {
    console.log(`Привет, меня зовут ${this.name} и в этом году мне ${this.age}`);
  }

  // Статический метод (нет необходимости создавать экземпляр)
  статический вид() {
    вернуть «человек»;
  }
}

Использование

const p = новый человек("Сяо Мин", 25);
п.приветствие(); // Вывод: Здравствуйте, я Сяо Мин, в этом году мне исполнилось 25 лет.
console.log(p.name); // Сяо Мин
console.log(Person.species()); // Человек

Тип переменной-члена

представители общественности:нравитьсяthis.name, доступ к которому возможен извне.
частный член(Начиная с #): можно использовать только внутри класса.

Частные переменные и методы (стандарт ES2022)

класс Счетчик {
  #счет = 0; // Частная переменная

  приращение() {
    это.#count++;
    console.log(this.#count);
  }

  #секрет() {
    console.log("Это частный метод");
  }

  раскрытьсекрет() {
    это.#секрет(); // Можно вызвать внутри
  }
}

Наследование и переопределение

класс Животное {
  говорить() {
    console.log("Издать звук");
  }
}

класс Dog расширяет Animal {
  говорить() {
    console.log("Гав-гав!");
  }
}

Примечания по этому поводу

в методе классаthisУкажите на этот экземпляр. Но если он используется в событиях или обратных вызовах, используйтеbind()или функция стрелки для обеспечения наведения.

класс Кнопка {
  конструктор() {
    this.label = "Нажмите";
    document.addEventListener("click", this.handleClick.bind(this));
  }

  handleClick() {
    console.log(`Вы нажали ${this.label}`);
  }
}

в заключение

Классы JavaScript обеспечивают инкапсуляцию, наследование, поддержку методов и атрибутов, как и другие языки. Они подходят для средних и крупных проектов, а также легко интегрируются с модулями. Если вам нужен более строгий набор текста и контроль, рассмотрите возможность использования TypeScript.

Классовое использование модулей JavaScript

иллюстрировать

Модули JavaScript (модули) предоставляют возможность инкапсулировать переменные и функции в файлы. Вы можете использоватьimport/exportМеханизм аналогиченclassРазделение труда и функции структурирования подходят для инструментальных функций или отдельных функциональных логических единиц.

Сравнение различий модулей и классов

Функция	class	module
Инкапсуляция данных и поведения	✅	✅(через экспортный пакет)
возможность создания экземпляров	✅	❌(Существует как синглтон)
Наследование и политип	✅	❌(Требуется ручное управление)
единственный функциональный компонент	Может	более подходящий

Пример модуля: использование инкапсуляции объектов


// file: mathUtils.js
export const MathUtils = {
  add(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  }
};


// file: main.js
import { MathUtils } from './mathUtils.js';

console.log(MathUtils.add(3, 4));       // 7
console.log(MathUtils.multiply(2, 5));  // 10

Пример модуля: использование инкапсуляции функций


// file: stringHelper.js
export function toUpper(str) {
  return str.toUpperCase();
}

export function truncate(str, len) {
  return str.length > len ? str.slice(0, len) + '…' : str;
}


// file: main.js
import { toUpper, truncate } from './stringHelper.js';

console.log(toUpper("hello"));          // HELLO
console.log(truncate("JavaScript", 5)); // JavaS…

Пример модуля: Моделирование одноэлементного объекта


// file: config.js
let config = {
  env: "dev",
  version: "1.0"
};

export function getConfig() {
  return config;
}

export function setEnv(env) {
  config.env = env;
}


// file: app.js
import { getConfig, setEnv } from './config.js';

console.log(getConfig()); // { env: "dev", version: "1.0" }
setEnv("prod");
console.log(getConfig()); // { env: "prod", version: "1.0" }

в заключение

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

Пусть функция JavaScript выполняется только один раз, а повторные вызовы должны ждать завершения предыдущего

Описание функции

Используйте служебную функцию runExclusive для обертывания любой функции, чтобы ее можно было выполнить только один раз одновременно. При повторном вызове он будет ждать завершения предыдущего выполнения (решение обещания), прежде чем продолжить.

Функция полезности


function runExclusive(fn) {
  let last = Promise.resolve();

  return function (...args) {
    last = last.then(() => fn(...args));
    return last;
  };
}

Примеры использования

асинхронная функция doTask(имя) {
  console.log(`Запустить ${name}`);
  дождитесь нового обещания (решить => setTimeout (решить, 2000));
  console.log(`Конец ${name}`);
}

const doTaskOnce = runExclusive(doTask);

// Вызов несколько раз одновременно
doTaskOnce("А");
doTaskOnce("Б");
doTaskOnce("С");

Вывод результатов


Start A
End A
Start B
End B
Start C
End C

Дополнительная информация

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

Сохранить таблицу HTML в локальный файл

Основной метод: использовать JavaScript для реализации загрузки.

Чтобы сохранить определенный элемент HTML на веб-странице (например, $\lt$table$\gt$) в виде локального файла $\text{.html}$, вам обычно необходимо использовать JavaScript для получения HTML-кода элемента, а затем запустить процесс сохранения через API загрузки браузера. Это клиентское решение.

Этапы реализации

1. Получите HTML-код целевой таблицы.

Используйте селектор $\text{document.getElementById}$ или $\text{document.querySelector}$, чтобы получить элемент $\lt$table$\gt$, который вы хотите сохранить, и получить его $\text{outerHTML}$.


var tableElement = document.getElementById('myTableId');
var tableHtml = tableElement.outerHTML;

2. Создайте строку, содержащую полную структуру HTML.

Одного кода $\lt$table$\gt$ недостаточно для формирования полного файла $\text{.html}$. Вам необходимо обернуть его в базовые теги $\lt$html$\gt$, $\lt$head$\gt$ и $\lt$body$\gt$, чтобы гарантировать, что архив открывается и корректно отображается в браузере. Вам также следует включить все необходимые теги $\lt$style$\gt$ или $\lt$link$\gt$, чтобы сохранить стиль таблицы (CSS).

var fullHtml = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Сохраненная таблица</title></head><body>' + tableHtml + '</body></html>';

3. Создайте объект Blob.

Объекты Blob (большие двоичные объекты) используются для хранения двоичных или подобных двоичным данным данных. Мы конвертируем строку, содержащую полный HTML-код, в $\text{Blob}$ типа $\text{text/html}$.


var blob = new Blob([fullHtml], { type: 'text/html' });

4. Создайте ссылку для скачивания и запустите загрузку.

Используйте $\text{URL.createObjectURL}$, чтобы создать локальный $\text{URL}$, указывающий на $\text{Blob}$, и присвойте его атрибуту $\text{href}$ элемента $\lt$a$\gt$, а также установите атрибут $\text{download}$, чтобы указать имя загруженного файла.

var a = document.createElement('a');
a.href = URL.createObjectURL(BLOB);
a.download = 'exported_table.html'; //Указываем имя скачанного файла
а.клик(); // Имитируем щелчок и вызываем диалоговое окно загрузки

// Освобождаем ресурсы
URL.revokeObjectURL(a.href);

Подумайте о стилях и сценариях

Если стили таблиц были добавлены динамически через внешний файл $\text{CSS}$ или $\text{JavaScript}$ на странице, простое сохранение $\text{outerHTML}$ может привести к потере этих стилей или функций. Чтобы решить эту проблему:

**Встроенные стили.** Убедитесь, что все важные стили $\text{CSS}$ преобразованы во встроенные стили (с помощью свойства $\text{element.style}$) или скопируйте необходимые теги $\lt$style$\gt$ в часть $\lt$head$\gt$ созданной вами строки $\text{fullHtml}$.
**Скрипты:** Сохраненный файл $\text{.html}$ не будет автоматически выполнять сценарии $\text{JavaScript}$ с исходной страницы. Если некоторые функции таблицы зависят от $\text{JavaScript}$, в сохраненном файле эти функции будут отключены.

Управление фазой JavaScript debug_log

Цель

Эмулировать C/С++#ifdef DEBUGМеханизм условной компиляции для достижения контролируемой производительности в JavaScriptdebug_log(), контролировать уровень вывода и переключение журнала в зависимости от стадии разработки (в разработке, тестирования, официальной версии).

Выполнение

1. Установите глобальный LOG_LEVEL.

// 0 = нет вывода, 1 = ошибка, 2 = предупреждение, 3 = сообщение, 4 = отладка
константный LOG_LEVEL = 3;

функция debug_log(msg, уровень = 3) {
  если (уровень<= LOG_LEVEL) {
    const name = get_curr_method_name();
    console.log(`[${name}] ${msg}`);
  }
}

2. Помогите получить текущее имя функции.


function get_curr_method_name() {
  const stack = new Error().stack;
  const lines = stack.split("\n");
  const callerLine = lines[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  return match ? match[1] : 'anonymous';
}

3. Примеры использования

функция initApp() {
  debug_log("Инициализация", 4); // Уровень отладки
  debug_log("Настройки успешно загружены", 3); // Сообщение
  debug_log("Значение настройки может быть слишком старым", 2); // Предупреждение
  debug_log("Загрузка не удалась", 1); // Ошибка
}

4. Корректировки этапа релиза

В разработке:LOG_LEVEL = 4(широко открыт)
Этап тестирования:LOG_LEVEL = 2(Отображаются только ошибки и предупреждения)
Официально запущено:LOG_LEVEL = 0(полная тишина)

5. Расширенный метод: удалите журналы на этапе упаковки.

При использовании с такими инструментами, как Webpack/Vite/ESBuild, можно использовать условные константы.process.env.NODE_ENVУдалить журналы:

if (process.env.NODE_ENV === 'разработка') {
  debug_log("Сообщения в среде разработки");
}

Его также можно использовать с плагинами Babel (например, Babel-plugin-transform-remove-console) для удаления всехconsole.*。

в заключение

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

Консоль браузера

Введение

Консоль браузера является частью инструментов разработчика и используется для:

Выполнить код JavaScript
Просмотр сообщений об ошибках и журналов
Манипулируйте DOM на лету
Отладка проблем с сайтом

---

Способ открытия

Windows / Linux:в соответствии сF12илиCtrl + Shift + I→ Нажмите на вкладку «Консоль».
macOS:в соответствии сCmd + Option + I

---

Основные функции

console.log("Сообщение"):Распечатать сообщение
$0: выберите выбранный в данный момент элемент на панели «Элементы».
document.querySelector():Выбрать элементы DOM
dir(obj): Список свойств объекта
copy(obj): Копировать переменные в буфер обмена.

---

Общие примеры

//Печать сообщения
console.log("Привет, консоль");

// Получаем элементы страницы и работаем
const btn = document.querySelector("кнопка");
btn.textContent = "Новая метка";
кнопка.клик();

//Просмотр объекта
console.dir(BTN);

---

Наденьте защиту

Если в Консоли появляется следующее сообщение, это означает, что Chrome запрещает прямую вставку многострочного кода из соображений безопасности:

Don’t paste code into the DevTools Console ... Please type ‘allow pasting’ below and press Enter

входитьallow pastingи нажмите Enter, чтобы снять ограничение.

---

Советы по консоли

clear():Очистить сообщения консоли.
inspect(element): перейти непосредственно на панель «Элементы», чтобы найти элемент.
$и$$:даquerySelectorиquerySelectorAllаббревиатура

---

использовать

Тестовые фрагменты JavaScript
Изменение стилей на лету
Наблюдайте за возвращаемыми данными API
Управление теневым DOM

Консоль Chrome DevTools запрещает публикацию

Объяснение причины

По соображениям безопасности и для предотвращения публикации опасного кода вредоносными веб-сайтами или другими лицами Chrome по умолчанию запрещает вставку многострочного кода непосредственно в консоль.

Появляется сообщение:

Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. 
This could allow attackers to steal your identity or take control of your computer. 
Please type ‘allow pasting’ below and press Enter to allow pasting.

---

Этапы решения

В нижнем ряду консолиВведите текст allow pasting(без кавычек)
нажиматьEnter
После этого вы можете вставить многострочный код обычным способом.

---

демонстрация

// 1. В консоли введите разрешение вставки и нажмите Enter.
разрешить вставку

// 2. Вставьте код JavaScript, который хотите выполнить.
const хост = document.querySelector('i18n-message[key="login.button.loginWithLine"]');
// ...(следующий код)

---

На что следует обратить внимание

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

AJAX

Что такое АЯКС

AJAX (асинхронный JavaScript и XML) — это технология, которая асинхронно взаимодействует с сервером на веб-странице, позволяя странице обновлять данные без перезагрузки. Обычно используется в динамических приложениях, таких как отправка форм, запрос данных и автоматическое заполнение.

Реализация AJAX с использованием XMLHttpRequest

<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
    }
};
xhr.open("GET", "data.php", true);
xhr.send();
</script>

Пример POST-запроса

<скрипт>
вар xhr = новый XMLHttpRequest();
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Тип контента", "application/x-www-form-urlencoded");
xhr.onreadystatechange = функция() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        alert("Ответ сервера: " + xhr.responseText);
    }
};
xhr.send("name=Сяо Мин&score=90");
</скрипт>

Обработка постбэков JSON

<скрипт>
вар xhr = новый XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = функция() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        вар json = JSON.parse(xhr.responseText);
        console.log("Имя: " + json.name);
    }
};
xhr.отправить();
</скрипт>

Упростите AJAX с помощью jQuery

$.ajax({
    URL: "data.php",
    метод: «ПОЛУЧИТЬ»,
    успех: функция (ответ) {
        $("#result").html(ответ);
    },
    ошибка: функция (xhr) {
        alert("Ошибка: " + xhr.status);
    }
});

Общие приложения

Мгновенные поисковые предложения
Данные не обновляются и не загружаются
Отправка фоновой формы
Обновление данных сервера

На что следует обратить внимание

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

XMLHttpRequest

Создать XMLHttpRequest

HTTP-запросы можно отправлять на сервер с помощью встроенного в JavaScript объекта XMLHttpRequest, который часто используется в приложениях AJAX:

var xmlhttp = new XMLHttpRequest();

Установить обработчик ответа

Используйте onreadystatechange для отслеживания изменений состояния и выполнения обратной передачи, когда ответ сервера завершен (readyState — 4) и успешен (статус — 200):

xmlhttp.onreadystatechange = функция() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("Содержимое ответа: " + xmlhttp.responseText);
    }
};

Отправить GET-запрос

xmlhttp.open("GET", "api/data.php", true);
xmlhttp.send();

Отправить POST-запрос

xmlhttp.open("POST", "api/save.php", true);
xmlhttp.setRequestHeader("Тип контента", "application/x-www-form-urlencoded");
xmlhttp.send("name=test&value=123");

Обработка ответов JSON

xmlhttp.onreadystatechange = функция() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        данные var = JSON.parse(xmlhttp.responseText);
        console.log("Состояние: " + data.status);
    }
};

Полный пример

<скрипт>
вар xmlhttp = новый XMLHttpRequest();
xmlhttp.onreadystatechange = функция() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        попробуй {
            вар json = JSON.parse(xmlhttp.responseText);
            console.log("Данные успешно получены:", json);
        } поймать (е) {
            console.error("Возвращённое содержимое не является допустимым JSON", xmlhttp.responseText);
        }
    }
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
</скрипт>

На что следует обратить внимание

Убедитесь, что сервер возвращает правильный формат (например, простой JSON).
Если возвращается сообщение об ошибке PHP, анализ JSON невозможен. Пожалуйста, используйте его на стороне PHP.error_reporting(0)Отключите вывод ошибок.
Для междоменных запросов серверу необходимо установить заголовок CORS.

Как обрабатывать возвращаемые сообщения XMLHttpRequest, содержащие сообщения об ошибках PHP

Описание проблемы

При использовании XMLHttpRequest JavaScript для получения данных сервера, если в программе PHP возникает ошибка, предупреждение или сообщение «Устарело», эти тексты будут смешаны с ожидаемым JSON в ответеText, в результате чего внешний интерфейс не сможет проанализировать JSON или даже сообщить об ошибке.

Пример ошибки

Вот фактический образец содержимого ответа, который вы получаете:

<br />
<b>Deprecated</b>: Facebook\FacebookApp implements the Serializable interface...
...
{ "status": "ok", "data": [...] }

причина

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

Решение 1. Отключите вывод ошибок в PHP

Добавьте следующую программу в начало вашего PHP-кода, чтобы предотвратить вывод сообщений об ошибках в браузер:

error_reporting(0);
ini_set('display_errors', 0);

Это не позволяет PHP выводить сообщения об ошибках или предупреждения.

Решение 2. Установите правильный ответ JSON

Убедитесь, что выходные данные представляют собой только JSON и что Content-Type установлен правильно:

<?php
error_reporting (0);
ini_set('display_errors', 0);

заголовок('Тип контента: приложение/json');

// Предположим, что это данные, которые нужно вернуть
$data = ["статус" => "ок", "значение" => 123];
эхо json_encode ($ данные);
Выход;
?>

Решение третье. Обновите пакет SDK.

Сообщение об ошибке указывает, что Facebook SDK использует интерфейс Serializable, который не рекомендуется для PHP 8.1 и более поздних версий. Пожалуйста, выполните следующую команду, чтобы обновить пакет:

composer update facebook/graph-sdk

Или проверьте требования к версии в композиторе.json, чтобы использовать версию, совместимую с PHP 8.1.

Средство (не рекомендуется)

Если бэкенд невозможно исправить, вы также можете попробовать отфильтровать не-JSON-части во фронтенде, но этот метод рискованный:

пусть ответ = xmlhttp.responseText;
пусть jsonStart = response.indexOf("{");
если (jsonStart >= 0) {
    пусть jsonStr = response.substring(jsonStart);
    пусть json = JSON.parse(jsonStr);
    //Используем json для обработки данных
}

Сводные предложения

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

Ссылка на переменные JavaScript в HTML

Вставьте текст напрямую (textContent/innerText)

<div id="msg"></div>

<скрипт>
  let name = «Сяо Мин»;
  document.getElementById("msg").textContent = name;
</скрипт>

Создайте HTML, используя строки шаблона (остерегайтесь XSS)

<div id="box"></div>

<скрипт>
  пусть цвет = «красный»;
  document.getElementById("box").innerHTML =
    `<p style="color:${color}">Цвет текста: ${color}</p>`;
</скрипт>

Установите атрибуты напрямую (href/src/value)

<a id="link">ссылка</a>
<input id="nameInput">

<скрипт>
  пусть URL = "https://example.com";
  let name = "Сяохуа";

  document.getElementById("ссылка").href = URL;
  document.getElementById("nameInput").value = name;
</скрипт>

Используйте setAttribute (можно устанавливать собственные или нестандартные атрибуты)

<img id="аватар" alt="аватар пользователя">

<скрипт>
  пусть источник изображения = "https://example.com/avatar.png";
  document.getElementById("avatar").setAttribute("src", источник изображения);
</скрипт>

Используйте атрибуты data-* (набор данных) для передачи данных.

<div id="card"></div>

<скрипт>
  пусть userID = 456;
  document.getElementById("card").dataset.userid = идентификатор пользователя; // Будет соответствовать data-userid="456"
</скрипт>

Установите свойства напрямую

<a id="myLink">Ссылка</a>
<input id="myInput">

<скрипт>
  пусть URL = "https://example.com";
  let name = «Сяо Мин»;

  document.getElementById("myLink").href = URL;
  document.getElementById("myInput").value = name;
</скрипт>

Используйте setAttribute

<img id="аватар">

<скрипт>
  пусть источник изображения = "https://example.com/avatar.png";
  document.getElementById("avatar").setAttribute("src", источник изображения);
</скрипт>

Использовать набор данных

<div id="card"></div>

<скрипт>
  пусть имя пользователя = 123;
  document.getElementById("card").dataset.userid = код пользователя; // Будет соответствовать data-userid="123"
</скрипт>

Используйте строки шаблона при создании элементов

<div id="container"></div>

<скрипт>
  let title = "динамический заголовок";
  document.getElementById("контейнер").innerHTML =
    `<h3 data-title="${title}">${title}</h3>`;
</скрипт>

Используйте JavaScript для создания дочерних элементов и добавления тегов и классов div.

пример

В следующем примере будет добавлен<div class="abc">Дочерние элементы:

// Предположим, что есть родительский элемент
const родительский = document.getElementById("myParent");

//Создаем элемент div
const child = document.createElement("div");

// Установить класс
child.className = "abc"; // или используйте classList.add("abc");

//Добавляем к родительскому элементу
родитель.appendChild(ребенок);

HTML-пример

<div id="myParent"></div>
<скрипт>
  const родительский = document.getElementById("myParent");
  const child = document.createElement("div");
  child.className = "abc";
  child.textContent = "Это новый DIV";
  родитель.appendChild(ребенок);
</скрипт>

Примечание

Чтобы добавить несколько классов одновременно, используйтеchild.classList.add("abc", "def")
Вы также можете добавитьid、style、datasetхарактеристики

результат

будет внутри#myParentПоявляется в:

<div class="abc">Это новый элемент DIV</div>

элементы выбора JavaScript

querySelectorAll()

querySelectorAll()Используйте синтаксис селектора CSS, чтобы выбрать все элементы, соответствующие критериям, и вернуть статическое значение.NodeList。

// Выбрать все <div> с категорией «предмет»
let items = document.querySelectorAll("div.item");

// Используйте forEach для перебора результатов
items.forEach(item => {
    item.style.color = "синий";
});

querySelector()

иquerySelectorAll()Аналогично, но вернет только «первый» элемент, соответствующий критериям. Если не найден, вернитеnull。

// Выбираем первый элемент с идентификатором "main-title"
let title = document.querySelector("#main-title");

// Выбираем первый <p> тег на странице
let firstPara = document.querySelector("p");

getElementById()

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

let header = document.getElementById("header-section");

getElementsByClassName()

Выберите элементы на основе названий категорий и верните «Live»HTMLCollection. Эта коллекция автоматически обновляется при изменении структуры DOM.

let button = document.getElementsByClassName("btn-submit");
// Примечание: вы не можете использовать forEach непосредственно в HTMLCollection, вам необходимо сначала преобразовать его в массив
Array.from(buttons).forEach(btn => console.log(btn));

getElementsByTagName()

Выбирайте элементы на основе имен тегов (например, div, p, span), а также возвращайте мгновенный результат.HTMLCollection。

let allLinks = document.getElementsByTagName("a");
console.log("На странице всего " + allLinks.length + " ссылок");

Таблица сравнения методов

метод	Тип постбэка	Тип параметра	производительность
querySelector	Одиночный элемент	CSS-селекторы	обычный
querySelectorAll	Список узлов (статический)	CSS-селекторы	обычный
getElementById	Одиночный элемент	Идентификатор строки	самый быстрый
getElementsByClassName	HTMLCollection (мгновенно)	строка категории	быстрый

Различия между NodeList и HTMLCollection

querySelectorAllвернулсяNodeListЯвляется статическим, что означает, что содержимое манифеста не изменится, даже если элемент позже будет удален из DOM. иgetElementsBy...Серия вернуласьHTMLCollectionОн динамичен и в любое время будет отражать последнее состояние DOM.

querySelectorВсе расширенный поиск

Селектор пересечений (и логический)

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

// Выбираем элементы, категория которых содержит как «btn», так и «primary».
let PrimaryButtons = document.querySelectorAll(".btn.primary");

// Выбираем <li> тег с классом «предмет»
пусть listItems = document.querySelectorAll("li.item");

Селектор объединения (или логика)

Если вы хотите выбрать все элементы, соответствующие условию А или условию Б, используйте «запятую»,Отдельные разные селекторы.

// Выбрать все <h1> и все <h2>
let headers = document.querySelectorAll("h1, h2");

// Выбираем элементы с категорией «активный» или элементы с категорией «выделенный»
let маркеры = document.querySelectorAll(".active, .highlight");

Селекторы атрибутов

Фильтрация по наличию или значению атрибута HTML. Это полезно при работе с формами или пользовательскими свойствами данных.

// Выбрать все <button> с атрибутом «отключено»
let DisableBtns = document.querySelectorAll("button[disabled]");

// Выбрать все <input> атрибут имени которого начинается с «пользователя» (используйте ^=)
let userInputs = document.querySelectorAll("input[name^='user']");

// Выбираем все элементы, атрибут типа данных которых точно равен «видео»
let videos = document.querySelectorAll("[data-type='video']");

Селектор ранга и родственного уровня

Используйте структурные связи между элементами для углубленного анализа.

// Селектор потомков: выбрать все <a> внутри #nav (независимо от уровня)
let navLinks = document.querySelectorAll("#nav a");

//Дочерний селектор: выберите элемент <div> непосредственно под .container (только первый слой)
let DirectDivs = document.querySelectorAll(".container > div");

// Селектор соседнего уровня: выбирает первый <p> сразу после <h1>
let firstParas = document.querySelectorAll("h1 + p");

Псевдоклассы

Это чрезвычайно полезно при работе со списками или фильтрами состояний.

// Выбираем все четные столбцы в таблице (2-й, 4-й, 6-й...)
letevenRows = document.querySelectorAll("tr:nth-child(even)");

// Выбираем все флажки, которые в данный момент отмечены
letcheckBoxes = document.querySelectorAll("input[type='checkbox']:checked");

// Выбрать все <section> которые не имеют категории «скрыто» (используйте :not)
letvisibleSections = document.querySelectorAll("section:not(.hidden)");

Примеры расширенных комбинаций

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

// Выбрать все <div> в контейнере с идентификатором «main», классом «card» и атрибутом «data-id»
let complexQuery = document.querySelectorAll("#main div.card[data-id]");

// Выбираем оба первых <li> и последний <li>
let endpoints = document.querySelectorAll("li:first-child, li:last-child");

JavaScript находит элементы и вставляет контент

Найдите целевой элемент

найтиcurrElemсначала после<footer>элементы, самый надежный способ — перебрать все<footer>элемент и использованиеNode.compareDocumentPosition()метод определения их относительногоcurrElemрасположение.

использоватьdocument.querySelectorAll('footer')Получить все элементы на странице<footer>элемент.
для каждого<footer>элемент, вызовcurrElem.compareDocumentPosition(footer). Если результирующая битовая маска содержит $4$(NODE_FOLLOWING), это означает, что<footer>в порядке файловcurrElemпосле.
Как только будет найден первый, соответствующий условиям,<footer>, чтобы остановить перемещение.

Вставить контент

найти цель<footer>элемент, вы можете использовать современный интерфейс DOMElement.before()Вставьте новый контент перед этим элементом.

targetFooter.before(contentToAdd);

ВотcontentToAddМожет быть строкой (которая будет преобразована в текстовый узел) или одним или несколькими узлами/элементами DOM.

Пример кода JavaScript

функция addContentBeforeNextFooter (currElem, contentToAdd) {
  // 1. Получить все элементы нижнего колонтитула в файле
  const allFooters = document.querySelectorAll('footer');

  пусть nextFooter = null;

  // 2. Проходим и находим первый нижний колонтитул после currElem
  for (const footer allFooters) {
    // Проверяем, следует ли нижний колонтитул за currElem (битовая маска 4)
    // 4: Узел аргумента следует за ссылочным узлом.
    if (currElem.compareDocumentPosition(нижний колонтитул) & 4) {
      следующийFooter = нижний колонтитул;
      перерыв; // Остановимся сразу после нахождения первого
    }
  }

  // 3. Если целевой нижний колонтитул найден, вставьте содержимое перед ним
  если (следующий нижний колонтитул) {
    nextFooter.before(contentToAdd);
    console.log('Содержимое было успешно вставлено перед первым нижним колонтитулом после currElem.');
    вернуть следующий нижний колонтитул;
  } еще {
    console.log('После currElem не найден элемент нижнего колонтитула.');
    вернуть ноль;
  }
}

// Пример: создание контента для вставки
const newDiv = document.createElement('div');
newDiv.textContent = 'Это недавно вставленный контент. ';
// Предположим, что currElem — это полученный вами элемент DOM
// const currElem = document.getElementById('some-id');
// addContentBeforeNextFooter(currElem, newDiv);

JavaScript находит первый тег до и после указанного элемента.

Назначение и логика функции

Эта обновленная функцияfindNearestFooterПозволяет указать направление ('before'или'after'), чтобы найти ближайшийcurrElemиз<footer>элемент.

**Определение направления:** ИспользуйтеNode.compareDocumentPosition()битовая маска метода определения<footer>находится вcurrElemДо или после.
**Ищу «после»** ('after'): Определить, содержит ли он бит $4$ (NODE_FOLLOWING）。
- потому чтоdocument.querySelectorAllУже отсортировано по порядку файлов, найден первый отвечающий условиям<footer>Это цель.
**Искать «до»** ('before'): Определить, содержит ли он бит $2$ (NODE_PRECEDING）。
- потому чтоdocument.querySelectorAllОн сортируется сверху вниз. Нам нужно пройти по списку в обратном направлении и найти первый, удовлетворяющий условиям.<footer>является самым близкимcurrElemВон тот.

Пример кода JavaScript

/**
 * Найдите первый <footer> элемент до или после currElem и вставьте содержимое до и после него.
 * @param {HTMLElement} currElem — элемент, используемый в качестве опорной точки.
 * @param {('before'|'after')} Direction — направление поиска («до» или «после»).
 * @param {HTMLElement|string} contentToAdd — содержимое (элемент или строка), которое необходимо вставить.
 * @returns {HTMLElement|null} — найден элемент нижнего колонтитула или значение NULL, если не найден.
 */
функция findNearestFooter (currElem, направление, contentToAdd) {
  const allFooters = document.querySelectorAll('footer');
  пусть ближайшийFooter = null;

  если (направление === 'после') {
    // Находим первый нижний колонтитул "после"
    for (const footer allFooters) {
      // 4 (NODE_FOLLOWING): нижний колонтитул после currElem
      if (currElem.compareDocumentPosition(нижний колонтитул) & 4) {
        ближайшийFooter = нижний колонтитул;
        перерыв; // Остановимся при поиске первого, потому что он ближайший
      }
    }
    
    //Вставляем контент (до того, как будет найден нижний колонтитул)
    если (ближайшийFooter) {
      ближайшийFooter.before(contentToAdd);
      console.log('Содержимое было вставлено перед первым колонтитулом после currElem.');
    }

  } else if (направление === 'до') {
    // Находим первый нижний колонтитул «до»
    // Вам нужно пройти назад от конца списка, чтобы найти нижний колонтитул, ближайший к currElem
    for (пусть я = allFooters.length - 1; я >= 0; я--) {
      const footer = allFooters[i];
      
      // 2 (NODE_PRECEDING): нижний колонтитул перед currElem
      if (currElem.compareDocumentPosition(нижний колонтитул) & 2) {
        ближайшийFooter = нижний колонтитул;
        перерыв; // Остановимся, когда будет найден первый (первый при обратном обходе)
      }
    }
    
    // Вставляем контент (после того, как найден нижний колонтитул)
    // Поскольку наше требование — найти нижний колонтитул «до», содержимое обычно вставляется после нижнего колонтитула.
    если (ближайшийFooter) {
      // Чтобы соответствовать вашему предыдущему запросу (вставить перед нижним колонтитулом), мы по-прежнему будем предполагать, что перед
      // Если требуется вставить "после" найденного футера, используйте ближайшийFooter.after(contentToAdd);
      ближайшийFooter.before(contentToAdd);
      console.log('Содержимое было вставлено перед первым нижним колонтитулом перед currElem.');
    }
  }

  если (!nearestFooter) {
    console.log(`В currElem не найден элемент нижнего колонтитула ${direction === 'before' ? 'before' : 'after'}.`);
  }
  
  вернуть ближайший нижний колонтитул;
}

// Пример: предположим, что currElem и contentToAdd определены
// const currElem = document.getElementById('some-reference');
// const newContent = document.createElement('p');
// newContent.textContent = 'Это вставленный контент';

// // Пример вызова: найти первый нижний колонтитул после currElem
// findNearestFooter(currElem, 'after', newContent.cloneNode(true));

// // Пример вызова: найти первый нижний колонтитул перед currElem
// findNearestFooter(currElem, 'before', newContent.cloneNode(true));

JavaScript обрабатывает коллекции NodeList

1. Получите первые 5 элементов

document.querySelectorAll()Возвращается **NodeList**. NodeList не является настоящим массивом JavaScript, но он имеетlengthатрибуты и числовые индексы, поэтому вы можете использоватьArray.from()или оператор распространения (Оператор распространения...), чтобы преобразовать его в массив, а затем использоватьArray.prototype.slice()Метод получения начального подмножества.

/**
 * Получите первые 5 элементов коллекции, возвращенной querySelectorAll.
 * @param {string} selector — строка селектора CSS.
 * @returns {Массив} — Массив, содержащий первые 5 элементов (если элементов меньше 5, возвращаются все элементы).
 */
функция getFirstFiveElements(селектор) {
  const nodeList = document.querySelectorAll(селектор);

  // 1. Преобразовать NodeList в массив
  const allElements = Array.from(nodeList);

  // 2. Используйте срез(0, 5), чтобы получить первые 5 элементов
  const firstFive = allElements.slice(0, 5);

  вернуть firstFive;
}

//Пример использования:
// const topFiveDivs = getFirstFiveElements('div');
// console.log("Первые 5 элементов:", topFiveDivs);

2. Получите 5 случайных элементов

Чтобы получить случайный элемент из коллекции, необходимо выполнить следующие действия:

Преобразовать NodeList в массив.
Перетасуйте массив или используйте случайную индексацию для выбора элементов.
Получите первые 5 элементов.

Обычно наиболее эффективный способ — случайным образом отсортировать массив и затем выбрать пятерку лучших.

/**
 * Случайным образом получить 5 элементов из коллекции, возвращаемой querySelectorAll.
 * @param {string} selector — строка селектора CSS.
 * @returns {Массив} — Массив, содержащий 5 случайных элементов (если элементов меньше 5, возвращаются все элементы).
 */
функция getRandomFiveElements (селектор) {
  const nodeList = document.querySelectorAll(селектор);

  // 1. Преобразовать NodeList в массив
  пусть allElements = Array.from(nodeList);

  // Если общее количество элементов меньше 5, возвращаем все элементы напрямую
  если (allElements.length<= 5) {
    return allElements;
  }
  
  // 2. 實作 Fisher-Yates (或稱 Knuth) 隨機排序法
  // 這是一種高效且公平的隨機排列方法。
  for (let i = allElements.length - 1; i >0; я--) {
    // Генерируем случайный индекс j между 0 и i
    const j = Math.floor(Math.random() * (i + 1));
    
    // Меняем местами allElements[i] и allElements[j]
    [allElements[i], allElements[j]] = [allElements[j], allElements[i]];
  }

  // 3. Получить первые 5 элементов случайно отсортированного массива
  const randomFive = allElements.slice(0, 5);

  вернуть случайную пятерку;
}

//Пример использования:
// const randomFiveImages = getRandomFiveElements('img');
// console.log("5 случайных элементов:", randomFiveImages);

JavaScript UI

Адаптивная веб-страница

Что такое адаптивный дизайн?

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

Ключевые технологии адаптивного дизайна

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

пример

Используйте медиа-запросы в CSS для настройки макета, например:

@media (max-width: 600px) { body { font-size: 14px; } }

Преимущества адаптивного дизайна

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

Механизм защиты и авторизации программы JavaScript UI

Вызовы и реальность

JavaScript — это интерфейсный язык программирования, код которого загружается в браузер пользователя и выполняется, что упрощает его просмотр или копирование. Хотя полностью предотвратить реверс-инжиниринг кода невозможно, можно принять различные меры для повышения интенсивности защиты и реализации механизма авторизации для пробных и официальных версий.

Основные способы защиты вашего кода

Обфускация кода
Используйте инструменты для преобразования исходного кода в нечитаемый формат.
```
npm install -g javascript-obfuscator
javascript-obfuscator input.js --output output.js
```
Пример запутанного кода:
```
var _0x1a2b=["\x68\x65\x6C\x6C\x6F"];console[_0x1a2b[0]]("Hello World!");
```
Сжатие кода (Минификация)
Используйте инструменты сжатия, чтобы удалить пробелы и комментарии, чтобы уменьшить читаемость кода, например, используяUglifyJS。
динамическая нагрузка
Храните важную логику на сервере и предоставляйте услуги через API вместо того, чтобы выполнять их непосредственно во внешнем интерфейсе.
```
fetch('https://example.com/api').then(response => response.json()).then(data => console.log(data));
```
Обнаружение браузера
Добавьте на страницу механизм обнаружения, чтобы предотвратить использование инструментов разработчика.
```
document.addEventListener('keydown', (event) => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});
```

Как внедрить пробную и официальную версии

Авторизационный контроль

Объедините логику пробной и рабочей среды с API, например проверку личности пользователя по кодам авторизации.

fetch('https://example.com/verify_license', {
    метод: 'POST',
    заголовки: { 'Content-Type': 'application/json' },
    тело: JSON.stringify({ LicenseKey: userLicenseKey })
}).then(response => response.json()).then(data => {
    если (data.valid) {
        console.log('Официальная версия активирована');
    } еще {
        console.log('Ограниченные функции пробной версии');
    }
});

Функциональные ограничения
Отключите определенные функции пробной версии, такие как доступность компонентов пользовательского интерфейса или доступ к данным.

Проверка пробного периода

Установите логику проверки пробного периода на основе даты первого использования пользователем.

const startDate = localStorage.getItem('startDate') || новая дата();
localStorage.setItem('startDate', startDate);
if (new Date() - new Date(startDate) > 14 * 24 * 60 * 60 * 1000) {
    console.log('Пробный период закончился');
} еще {
    console.log('во время пробного периода');
}

Практические соображения

Полностью предотвратить просмотр кода невозможно, но можно затруднить его взлом.
Используйте обфускацию, проверку API, серверную логику и другие комбинации для обеспечения максимальной защиты.
Регулярно обновляйте код и механизм авторизации, чтобы не использовать одну и ту же логику в течение длительного времени.

Обработка событий изменения положения прокрутки

Введение в событие изменения положения прокрутки

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

Основные шаги по реализации событий прокрутки

В JavaScript это можно сделать черезwindow.addEventListener('scroll', handler)Метод для прослушивания событий прокрутки. Срабатывает при прокруткеhandlerфункция для выполнения соответствующей обработки.

Пример: Отображение положения прокрутки

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

<скрипт>
    //Определяем обработчик событий прокрутки
    функция handleScroll() {
        const ScrollPosition = window.scrollY; // Получаем позицию вертикальной прокрутки
        document.getElementById("scrollPositionDisplay").textContent = "Текущая позиция прокрутки: " + ScrollPosition + " px";
    }

    //Добавляем прослушиватель событий прокрутки
    window.addEventListener('scroll', handleScroll);
</скрипт>

<div id="scrollPositionDisplay" style="position: фиксированный; внизу: 20 пикселей; слева: 20 пикселей; цвет фона: #eee; отступ: 10 пикселей;">
    Текущая позиция прокрутки: 0 пикселей
</div>

На что следует обратить внимание

Добавление слишком большого количества операций в событие прокрутки может повлиять на производительность, рекомендуется использоватьrequestAnimationFrameилиsetTimeoutВыполните регулирование, чтобы уменьшить частоту срабатывания событий.

в заключение

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

Пусть <pre> элемент начинается с новой строки, но не занимает всю строку

Решение 1. Используйте`width: max-content`

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

pre {
  display: inline-block;
  width: max-content;
}

Эффект:

Это текст.

Это блок кода.

Решение 2. Используйте`float: left`

Этот метод используетfloatПереместите элемент влево и начните его с новой строки.

pre {
  display: inline-block;
  float: left;
}

Эффект:

Это текст.

Это блок кода.

Решение 3. Используйте`::before`виртуальный элемент

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

pre {
  display: inline-block;
}
pre::before {
  content: '';
  display: block;
  clear: both;
}

Эффект:

Это текст.

Это блок кода.

Решение 4. Используйте`white-space: pre`

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

pre {
  display: inline-block;
  white-space: pre;
}

Эффект:

Это текст.

Это блок кода.

Имитация представления пользовательского интерфейса приложения Windows

Программный код

<!DOCTYPE html>
<html lang="en">
<голова>
  <мета-кодировка="UTF-8">
  <meta name="viewport" content="width=device-width, Initial-scale=1.0">
  <title>Моделирование пользовательского интерфейса приложений Windows</title>
  <стиль>
    тело {
      семейство шрифтов: «Segoe UI», Tahoma, Женева, Вердана, без засечек;
      маржа: 0;
      заполнение: 0;
      цвет фона: #f0f0f0;
    }

    .app-окно {
      ширина: 800 пикселей;
      высота: 500 пикселей;
      поле: 50 пикселей авто;
      фон: #ffffff;
      граница: 1 пиксель, сплошная #ccc;
      радиус границы: 8 пикселей;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      переполнение: скрыто;
      дисплей: гибкий;
      гибкое направление: столбец;
    }

    .title-бар {
      фон: #0078d7;
      цвет: #ffffff;
      отступ: 10 пикселей 15 пикселей;
      дисплей: гибкий;
      оправдание-содержание: пространство между;
      выровнять-элементы: по центру;
    }

    .title-bar h1 {
      размер шрифта: 16 пикселей;
      маржа: 0;
    }

    .title-bar .buttons {
      дисплей: гибкий;
      разрыв: 5 пикселей;
    }

    .title-bar .buttons кнопка {
      ширина: 20 пикселей;
      высота: 20 пикселей;
      фон: #ffffff;
      граница: нет;
      радиус границы: 50%;
      курсор: указатель;
    }

    .title-bar .buttons кнопка: наведите {
      фон: #e0e0e0;
    }

    .content {
      гибкий: 1;
      отступ: 15 пикселей;
      переполнение: авто;
    }

    .сайдбар {
      ширина: 200 пикселей;
      фон: #f3f3f3;
      правая граница: 1 пиксель сплошной #ddd;
      отображение: встроенный блок;
      вертикальное выравнивание: сверху;
    }

    .main-content {
      отображение: встроенный блок;
      ширина: расчет (100 % – 200 пикселей);
      вертикальное выравнивание: сверху;
    }

    .сайдбар ул {
      стиль списка: нет;
      маржа: 0;
      заполнение: 0;
    }

    .sidebar улли {
      отступ: 10 пикселей 15 пикселей;
      курсор: указатель;
      нижняя граница: 1 пиксель сплошной #ddd;
    }

    .sidebar ul li:hover {
      фон: #e9e9e9;
    }

    .main-content р {
      маржа: 0;
      заполнение: 0;
    }
  </стиль>
</голова>
<тело>
  <div class="app-window">
    <div class="title-bar">
      <h1>Мое приложение для Windows</h1>
      <div class="buttons">
        <button title="Свернуть"></button>
        <button title="Развернуть"></button>
        <button title="Закрыть" style="background: #e81123;"></button>
      </div>
    </div>
    <div class="content">
      <div class="sidebar">
        <ул>
          <li onclick="showContent('Home')">Home</li>
          <li onclick="showContent('Settings')">Настройки</li>
          <li onclick="showContent('О программе')">О программе</li>
        </ul>
      </div>
      <div class="main-content" id="mainContent">
        <p>Выберите элемент на боковой панели, чтобы просмотреть содержимое.</p>
      </div>
    </div>
  </div>

  <скрипт>
    функция showContent(раздел) {
      константное содержимое = {
        Домашняя страница: '<h2>Главная</h2><p>Добро пожаловать на домашнюю страницу.</p>',
        Настройки: '<h2>Настройки</h2><p>Настройте здесь настройки приложения.</p>',
        О программе: '<h2>О программе</h2><p>Это макет приложения для Windows, созданный с использованием HTML и JavaScript.</p>',
      };

      document.getElementById('mainContent').innerHTML = content[раздел] || '<p>Содержимое не найдено.</p>';
    }
  </скрипт>
</тело>
</html>

шаг

Сохраните код какindex.html。
Откройте файл, чтобы просмотреть эффект в браузере.
Нажмите элемент на боковой панели, чтобы переключить основное содержимое.

My Windows App

Select an item from the sidebar to view content.

Библиотеки проектирования пользовательского интерфейса JavaScript

React

React — популярная библиотека JavaScript, разработанная Facebook для создания динамичных и эффективных пользовательских интерфейсов. Его компонентный дизайн позволяет разработчикам быстро создавать и повторно использовать компоненты пользовательского интерфейса.

Vue.js

Vue.js — это легкая и простая в использовании среда, подходящая для разработки приложений малого и среднего размера. Простой API и интуитивно понятный дизайн позволяют быстро разрабатывать пользовательские интерфейсы.

Bootstrap

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

Material-UI

Material-UI — это платформа пользовательского интерфейса React, основанная на Google Material Design. Он содержит множество красивых компонентов и подходит для быстрого проектирования качественных интерфейсов.

Tailwind CSS

Tailwind — это практичная платформа CSS, которая позволяет быстро создавать индивидуальный пользовательский интерфейс при использовании в сочетании с JavaScript. Его атомарный дизайн дает разработчикам гибкий контроль над стилями.

Foundation

Foundation — это адаптивная интерфейсная среда, предоставляющая множество компонентов пользовательского интерфейса и сеточных систем, подходящих для быстрого создания современных веб-дизайнов.

Chakra UI

Chakra UI — это простая и настраиваемая среда пользовательского интерфейса React, предоставляющая интуитивно понятный API и разнообразные компоненты.

Quasar Framework

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

Реагировать на разработку

React — это декларативная библиотека JavaScript, разработанная Meta и предназначенная для создания пользовательских интерфейсов. Это значительно повышает эффективность разработки и удобство обслуживания приложений, управляемых базами данных, за счет разработки компонентов и технологии виртуального DOM.

Основные концепции разработки React

При разработке приложений на основе баз данных React часто комбинируется с современной цепочкой инструментов для обработки потока данных:

На основе компонентов: разложите пользовательский интерфейс на независимые и повторно используемые блоки кода, чтобы облегчить управление сложной логикой отображения данных.
Декларативный пользовательский интерфейс (декларативный): разработчикам нужно только описать, как выглядит интерфейс в разных состояниях данных, и React автоматически обработает базовые обновления DOM.
Система перехватчиков: легко обрабатывайте асинхронные операции, такие как сбор данных, разбиение на страницы и отправку формы, с помощью функций перехватчиков, таких как useState и useEffect.

Основной выбор IDE

Хотя для разработки React можно использовать любой текстовый редактор, для взаимодействия с подсказками полей базы данных и проверкой типов наиболее распространенными в отрасли являются следующие варианты:

Visual Studio Code (VS Code): Абсолютный мейнстрим на данный момент. Он имеет мощную экосистему расширений (например, ES7+ React Snippets, Prettier, Tailwind CSS IntelliSense) и отличную поддержку TypeScript, позволяющую просматривать типы баз данных непосредственно в коде.
WebStorm: бесплатная среда разработки, разработанная JetBrains. Он имеет самые мощные встроенные функции, обеспечивающие очень стабильную работу для рефакторинга кода React, навигации по сложным структурам проекта и интеграции Git.
Курсор: редактор, управляемый искусственным интеллектом, ставший популярным в последние годы. Основанный на ядре VS Code, он интегрирует LLM для помощи в написании логики запросов к базе данных и компонентов React, что может значительно сократить время написания повторяющегося кода.

Сравнительная таблица конфигураций среды разработки

Тип инструмента	Популярный выбор	основная ценность
Редактор кода (IDE)	VS Code, WebStorm	Эффективное написание кода и подсказки по типу
Инструменты управления пакетами	npm, pnpm, yarn	Управление React и зависимостями его экосистемы
Инструменты сборки	Vite, Turbopack	Чрезвычайно быстрое горячее обновление и производительность упаковки проектов.
отладчик	React DevTools	Мониторинг состояния компонентов и узких мест производительности в режиме реального времени

Пример представления базы данных React

Программный код

импортировать React, {useState, useEffect} из «реагировать»;

функция DatabaseView() {
  //Имитированные данные базы данных
  const [данные, setData] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  // Имитируем получение данных из базы данных
  useEffect(() => {
    const fetchData = асинхронный () => {
      константные макетные данные = [
        { id: 1, имя: «Джон Доу», адрес электронной почты: «[email protected]», возраст: 28 },
        { id: 2, имя: «Джейн Смит», адрес электронной почты: «[email protected]», возраст: 34 },
        { id: 3, имя: «Элис Браун», адрес электронной почты: «[email protected]», возраст: 25 },
        { id: 4, имя: «Боб Уайт», адрес электронной почты: «[email protected]», возраст: 40 },
      ];
      setData (mockData);
    };

    выборка данных();
  }, []);

  //Фильтрация данных
  const filteredData = data.filter(
    (предмет) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.email.toLowerCase().includes(searchTerm.toLowerCase())
  );

  возврат (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Просмотр базы данных</h1>
      <вход
        тип="текст"
        Placeholder="Поиск по имени или адресу электронной почты"
        значение = {searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        стиль={{
          маржаBottom: '20px',
          отступ: '10px',
          ширина: '300 пикселей',
          Размер шрифта: '16px',
        }}
      />
      <таблица
        стиль={{
          ширина: '100%',
          borderCollapse: 'свернуть',
          маржаTop: '10px',
        }}
      >
        <голова>
          <tr>
            <th style={{ border: '1px Solid #ddd', Padding: '10px' }}>ID</th>
            <th style={{ border: '1px Solid #ddd', Padding: '10px' }}>Name</th>
            <th style={{ border: '1px Solid #ddd', Padding: '10px' }}>Email</th>
            <th style={{ border: '1px Solid #ddd', Padding: '10px' }}>Age</th>
          </tr>
        </голова>
        <тело>
          {filteredData.map((item) => (
            <tr key={item.id}>
              <td style={{ border: '1px Solid #ddd', Padding: '10px' }}>
                {item.id}
              </тд>
              <td style={{ border: '1px Solid #ddd', Padding: '10px' }}>
                {item.name}
              </тд>
              <td style={{ border: '1px Solid #ddd', Padding: '10px' }}>
                {item.email}
              </тд>
              <td style={{ border: '1px Solid #ddd', Padding: '10px' }}>
                {item.age}
              </тд>
            </tr>
          ))}
        </tbody>
      </таблица>
    </div>
  );
}

экспортировать представление базы данных по умолчанию;

шаг

Создайте проект React, например, используяcreate-react-app。
Сохраните код какDatabaseView.js。
существоватьApp.jsИмпортируйте и используйте<DatabaseView />。
Запустите сервер разработки, чтобы просмотреть результаты.

React интегрирует бэкэнд PHP

1. Принцип работы: связь через API

React и PHP смешивают код не напрямую, а черезJSONформатировать данные для связи. React используетfetchилиaxiosОтправьте запрос, и PHP вернет результат после обработки.

2. Как написать бэкэнд PHP (например: api.php)

Серверный PHP-код больше не выводит HTML, а вместо этого выводит заголовки и данные JSON.

<?php
// Разрешить запросы между источниками (CORS)
header("Access-Control-Allow-Origin: *");
header("Тип контента: application/json; charset=UTF-8");

// Имитируем получение данных из базы данных
$stocks = ["AAPL", "TSLA", "NVDA", "GOOGL", "MSFT"];
эхо json_encode ($ акции);
?>

3. Как написать интерфейс React

В React мы обычно делаемuseEffectВызовите PHP API в хуке.

import { useEffect, useState } from 'react';

function StockList() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://your-server.com/api.php")
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return (
    <ul>
      {data.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

4. Общие комбинации технологий

тип	Рекомендуемый план	иллюстрировать
Традиционный PHP	Собственный PHP или CodeIgniter	Подходит для простого интерфейса API.
современная рамка	Laravel	Самый мощный PHP-фреймворк с полной встроенной поддержкой API.
Гибридное решение	Inertia.js	Laravel можно легко интегрировать с React без написания API.

5. Преимущества этой архитектуры

Фокус на разделении труда:Внешний интерфейс фокусируется на обработке интерфейса и состояния, а внутренний — на безопасности и базе данных.
Высокая гибкость:Если в будущем вы захотите сменить PHP на Python или Node.js, при условии, что формат API останется неизменным, часть React вообще не нужно будет модифицировать.
Преимущества производительности:Общайтесь с сервером только тогда, когда необходимы данные, что снижает нагрузку на сервер.

Напоминание о развертывании

В среде разработки, поскольку React обычно работает наlocalhost:5173, в то время как PHP работает наlocalhost:8000, вы столкнетесьCORS (совместное использование ресурсов между источниками)ошибка. Обязательно включите в начало PHPAccess-Control-Allow-Originзаголовок.

VueJS

Vue.js — это прогрессивная среда JavaScript для создания пользовательских интерфейсов. В отличие от других крупных фреймворков, Vue предназначен для применения слой за слоем снизу вверх. Основная библиотека фокусируется только на уровне представления, что упрощает начало работы и интеграцию с существующими проектами.

Декларативный рендеринг и компонентизация

Vue объединяет шаблоны HTML и объекты JavaScript, что позволяет разработчикам интуитивно управлять веб-контентом. В настоящее время основной рекомендацией является использование Vue 3.Composition API。

<!-- Шаблон Vue -->
<div id="app">
  <h1>{{ message }}</h1>
  <button @click="reverseMessage">Перевернуть текст</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<скрипт>
  const {createApp, ref} = Vue;

  создатьПриложение({
    настройка() {
      const message = ref("Привет, Vue!");
      constverseMessage = () => {
        message.value = message.value.split('').reverse().join('');
      };
      возврат {сообщение, обратное сообщение};
    }
  }).mount('#app');
</скрипт>

Часто используемые инструкции (Директивы)

Инструкция есть сv-Специальный атрибут префикса отвечает за привязку данных к поведению DOM.

инструкция	использовать	пример
v-bind (:)	Привязка атрибутов HTML	`:src="imageUrl"`
v-on (@)	Слушайте события	`@click="doSomething"`
v-if / v-else	Условный рендеринг	`v-if="isVisible"`
v-for	Отображение списка (аналогично использованию массива)	`v-for="item in items"`
v-model	Двусторонняя привязка данных	`v-model="inputText"`

Применение в сочетании с предыдущими знаниями

Вы можете легко интегрировать ранее упомянутоеslice()Или случайным образом выбирайте логику и манипулируйте компонентами с помощью концепции селектора.

<настройка сценария>
импортировать {ref} из 'vue';

const allStocks = ref(['AAPL', 'TSLA', 'GOOGL', 'MSFT', 'AMZN', 'NVDA', 'META']);
const selectedStocks = ref([]);

// В сочетании с логикой случайного выбора
const PickFive = () => {
  const shuffled = [...allStocks.value].sort(() => 0.5 - Math.random());
  selectedStocks.value = shuffled.slice(0, 5);
};
</скрипт>

<шаблон>
  <див>
    <button @click="pickFive"> Случайным образом выберите 5 акций</button>
    <ул>
      <li v-for="акции в выбранных акциях" :key="stock">{{ акции }}</li>
    </ul>
  </div>
</шаблон>

Почему стоит выбрать Vue?

Легкий и эффективный:Ядро небольшого размера и работает быстро.
Плоская кривая обучения:Если у вас есть базовая основа HTML/CSS/JS, вы можете быстро развиваться.
Полная экосистема:Официально предоставляет Router (маршрутизация) и Pinia (управление состоянием) для решения крупномасштабных задач разработки.

Web API

определение

Веб-API (интерфейс программирования веб-приложений) — это интерфейс на основе протокола HTTP, который позволяет обмениваться данными между различными системами и часто используется для связи между интерфейсом и сервером.

Общие форматы

JSON（JavaScript Object Notation）
XML（eXtensible Markup Language）

HTTP-метод

метод	использовать
GET	Получить информацию
POST	Добавить новую информацию
PUT	Обновить информацию
DELETE	Удалить данные

пример

Вот пример использования JavaScript для отправки запроса GET:

выборка('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', ошибка));

использовать

Фронтенд и бэкенд коммуникация
Системная интеграция (например: подключение к сторонним платформам)
Обмен данными между устройствами (например, Интернет, приложение)

преимущество

Стандартизированный формат связи
Кроссплатформенная поддержка
Многоразовый и расширяемый

Общие приложения

Google Maps API
OpenWeather API
LINE Messaging API

Запрос фонетической записи китайских иероглифов

Введите китайский иероглиф, и система отобразит фонетическое обозначение иероглифа:

Результаты фонетической записи

Еще не запрошено

В этом примере используется API Пиньинь для запроса Чжуинь. Если существует несколько вариантов произношения, будут отображены все результаты.

Google Cloud

Google Cloud Platform (GCP) — это платформа облачных вычислений, предоставляемая Google и построенная на внутренней инфраструктуре Google. Он предоставляет более 150 услуг, от вычислений и хранения до анализа больших данных и искусственного интеллекта, чтобы помочь предприятиям в цифровой трансформации и разработке приложений.

Классификация основных услуг

категория	Ключевые услуги	Основные функции
Вычислить	Compute Engine	Предоставляет настраиваемые виртуальные машины (ВМ).
Контейнеры	GKE / Cloud Run	Размещайте кластеры Kubernetes или выполняйте бессерверные контейнеры.
Хранилище	Cloud Storage	Объектное хранилище, в котором хранятся неструктурированные данные, такие как изображения и видео.
База данных	Cloud SQL / Spanner	Предоставляет MySQL, PostgreSQL или глобальную реляционную базу данных.
Анализ данных (Данные)	BigQuery	Бессерверное хранилище данных корпоративного уровня, поддерживающее крупномасштабные запросы SQL.
Искусственный интеллект (ИИ)	Vertex AI	Интегрированная платформа машинного обучения, включая инструменты разработки моделей Gemini.

Технические преимущества

Глобальная сетевая архитектура. Используйте частную глобальную оптоволоконную сеть Google, чтобы сократить задержку передачи данных.
Лидерство в области данных и искусственного интеллекта: компания занимает лидирующие позиции в области обработки больших данных (BigQuery) и платформы машинного обучения (TensorFlow).
Совместимость с открытым исходным кодом. Обеспечьте максимальную поддержку и обслуживание инструментов с открытым исходным кодом, таких как Kubernetes.
Устойчивое развитие: Стремление использовать свои глобальные центры обработки данных на 100% возобновляемой энергии.

Базовая структура управления

Организация ресурсов Google Cloud соответствует иерархической системе, облегчающей контроль разрешений и отслеживание затрат:

Организация: самый высокий уровень, обычно представляющий компанию.
Папки: используются для разделения отделов или сред (например, разработки, производства).
Проект. Все ресурсы (например, виртуальные машины и базы данных) должны принадлежать проекту и являются базовой единицей выставления счетов.
Метки: добавляйте пары «ключ-значение» к ресурсам, чтобы упростить распределение затрат и автоматическое управление.

Биллинг и квота

Google Cloud использует механизм оплаты по мере использования и предоставляет следующие преимущества:

Бесплатная пробная версия: новые пользователи обычно получают кредит в размере 300 долларов США (действительный в течение 90 дней).
Бессрочный бесплатный план: предоставляет фиксированную ежемесячную квоту для определенных сервисов (например, Compute Engine e2-micro, Cloud Functions).
Скидки за обязательное использование (CUD). Предлагайте большие скидки на ресурсы, которые, как ожидается, будут использоваться в долгосрочной перспективе.

Страница входа в Google ID

Что такое вход в Google ID?

Вход в Google ID — это метод аутентификации, основанный на протоколе OAuth 2.0, который позволяет пользователям входить на сторонние веб-сайты или приложения, используя свои учетные записи Google. Такой подход не только повышает удобство пользователя, но и повышает безопасность, поскольку пользователям не нужно запоминать дополнительные пароли.

Зачем выбирать Google ID для входа в систему?

Удобство:Пользователям нужно только войти в систему, используя свою существующую учетную запись Google, и не нужно создавать новую учетную запись.
Безопасность:Google предлагает надежную защиту, включая двухэтапную проверку и возможность восстановления учетной записи.
Единое управление:Пользователи могут управлять несколькими приложениями под одной учетной записью, уменьшая нагрузку на память паролей.

Как реализовать вход в Google ID на моей веб-странице?

Создайте проект Google Cloud:Перейти кGoogle Cloud Console, создайте новый проект.
Включите API входа в Google:В проекте включите API «Вход в Google» и сгенерируйте учетные данные OAuth 2.0.
Установить область авторизации:В настройках учетных данных добавьте авторизованный URI обратного вызова, который представляет собой адрес, на который пользователи будут перенаправлены после входа в систему.
Фронтальная реализация:Используйте библиотеку JavaScript, предоставленную Google, и создайте кнопку входа на своей веб-странице. Вот простой пример:


<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin_with" data-size="large" data-logo_alignment="left"></div>

5. Подтвердите личность пользователя:

Когда пользователь нажимает кнопку входа в систему, Google выполняет аутентификацию. После успешного входа в систему информация пользователя (например, адрес электронной почты, имя и т. д.) будет отправлена обратно в ваше приложение, и вы сможете выполнить последующую обработку на основе этой информации.

в заключение

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

Вставить видео с YouTube

Как встроить

Если вы хотите встроить видео YouTube, измените исходную ссылку для встраивания формата:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{vid}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

в{vid}— идентификатор видео YouTube.

пример

Например, ссылка на видеоhttps://www.youtube.com/watch?v=dQw4w9WgXcQ, то код для встраивания будет следующим:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

На что следует обратить внимание

Такой формат встраивания позволяет избежатьX-Frame-OptionsОграничьте, чтобы видео нормально отображалось на странице.

Встроить в результаты поиска YouTube

Обзор

Может использоваться непосредственно в HTML.<iframe>Вставлять видео с YouTube, Но YouTube этого не делаетПрямое встраивание iframe в «страницу результатов поиска» не поддерживается., Поскольку результаты поиска представляют собой интерактивный контент (включая функции входа в систему, рекомендации, отслеживания и т. д.), они будут заблокированы политикой YouTube встраивания.

---

Пример ошибки

Следующие попытки встроить результаты поиска завершатся неудачно или отобразят сообщение об ошибке:

<!-- ⚠️ Невозможно правильно отобразить -->
<iframe ширина="800" высота="600"
  src="https://www.youtube.com/results?search_query=cat+video">
</iframe>

Этот метод будет заблокирован браузером или YouTube и отобразит сообщение «Отклонено для отображения в iframe».

---

Правильный путь: через API данных YouTube.

Чтобы встроить эффект результатов поиска в веб-страницу, используйтеYouTube Data API v3Динамически запрашивайте видео, затем используйте JavaScript, чтобы самостоятельно отображать результаты и создавать<iframe>。

---

Пошаговая демонстрация

1. Подайте заявку на получение ключа API

Перейти кGoogle Cloud ConsoleВключите «YouTube Data API v3» и получите ключ API.

2. Пример HTML + JavaScript

<див>
  <input id="search" type="text" Placeholder="Ключевые слова для поиска">
  <button onclick="searchYouTube()">Поиск</button>
</div>

<div id="results" style="display:grid;grid-template-columns:repeat(auto-fill,300px);gap:1em;margin-top:1em;"></div>

<скрипт>
const API_KEY = "ВАШ_API_KEY";

функция поискаYouTube() {
  const q = document.getElementById("search").value;
  const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=6&q=${encodeURIComponent(q)}&key=${API_KEY}`;

  получить (URL-адрес)
    .then(r => r.json())
    .then(данные => {
      const контейнер = document.getElementById("результаты");
      контейнер.innerHTML = "";
      data.items.forEach(item => {
        const vid = item.id.videoId;
        const title = item.snippet.title;
        constframe = document.createElement("iframe");
        рамка.ширина = "300";
        кадр.высота = "170";
        Frame.src = `https://www.youtube.com/embed/${vid}`;
        Frame.allow = "акселерометр; автовоспроизведение; запись в буфер обмена; зашифрованный носитель; гироскоп; картинка в картинке";
        Frame.allowFullscreen = правда;

        const div = document.createElement("div");
        const caption = document.createElement("p");
        caption.textContent = заголовок;
        caption.style.fontSize = "14px";
        caption.style.fontWeight = "жирный";

        div.appendChild(кадр);
        div.appendChild(заголовок);
        контейнер.appendChild(div);
      });
    });
}
</скрипт>

---

Результат выполнения

Введите ключевое слово (например, «Путешествие в Тайвань») и нажмите «Поиск».
Ниже автоматически отображаются 6 видео с результатами поиска.
Каждое видео начинается с<iframe>встроенный, можно воспроизводить напрямую.

---

преимущество

Настраиваемый стиль и макет (например, отображение миниатюр, заголовков и кнопок воспроизведения).
Не ограничено iframe YouTube.
Может комбинироваться с другими функциями поиска или классификации.

---

предел

Требуется ключ Google API.
API имеет дневной лимит квоты.
Полную страницу поиска YouTube невозможно отобразить (только имитация).

---

Расширенные функции

Вы можете добавить кнопку «Воспроизвести» и настроить список воспроизведения под видео.
Доступныйiframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"Играть автоматически.
Возможен возврат согласно APIsnippet.thumbnailsПоказывать миниатюру вместо немедленного встраивания.

---

официальные документы

Node.js

Что такое Node.js

Node.js — это среда выполнения на стороне сервера, основанная на движке JavaScript Chrome V8, которая позволяет разработчикам писать серверные приложения с использованием JavaScript.

Основные особенности

Асинхронная и управляемая событиями архитектура, подходящая для высококонкурентных приложений.
Однопоточная модель снижает потребление ресурсов
Доступно большое количество модулей с открытым исходным кодом (npm).
Кроссплатформенная поддержка, может работать на Windows, macOS, Linux.

Сценарии применения

Приложение для живого чата
RESTful API-сервер
Потоковые сервисы (например, видео, музыка)
Поддержка серверной части одностраничного приложения (SPA)

Часто используемые модули

express:Легкая платформа веб-приложений
fs: Операции с файловой системой
http:Создать HTTP-сервер
path: Путь к файлу процесса

Пример кода

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Привет, Node.js!');
});

server.listen(3000, () => {
  console.log('Сервер запущен, прослушивает порт 3000');
});

Заключение

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

Установка NodeJS

Существует множество способов установки Node.js, но разработчикам настоятельно рекомендуется использовать инструменты управления версиями (например, nvm) вместо прямой загрузки официального установочного файла с веб-сайта. Это предотвратит будущие ошибки разрешений и облегчит переключение между версиями.

1. Установите с помощью nvm (рекомендуемый метод)

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

система Windows

Перейти кnvm-windowsскачатьnvm-setup.exeи установить.
Откройте терминал (PowerShell или CMD) и введите:

nvm install lts //Установить последнюю версию с долгосрочной поддержкой (LTS)
nvm use lts // Переключение и включение этой версии
node -v // Подтверждаем успешность установки

система MacOS/Linux

Откройте терминал и выполните официальный скрипт установки:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Перезапустите терминал и выполните:

nvm install --lts //Установить LTS-версию
node -v // Просмотр номера версии

2. Скачать с официального сайта (традиционный метод)

Если вам нужна только быстрая установка и вы не планируете часто менять версии, вы можете перейти кОфициальный сайт Node.js。

LTS (рекомендуется):Самый стабильный и подходящий для большинства разработчиков и производственных сред.
Current：Содержит новейшие функции, но может работать нестабильно.

3. Подтвердите элементы установки.

Установка Node.js также будет включать следующие основные компоненты:

Имя компонента	иллюстрировать
Среда выполнения Node.js	Ядро, позволяющее запускать JavaScript на стороне сервера.
npm (Node Package Manager)	Крупнейший в мире реестр программного обеспечения для загрузки пакетов (таких как Vue, React).
Corepack	Новые инструменты для управления менеджерами пакетов (например, Yarn, pnpm).

4. Тестовая среда

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

node -v // Отображение версии узла, например v20.11.0
npm -v // Отображение версии npm, например 10.2.4

Распространенные сообщения об ошибках

Если при выполнении в Windows вы получаете сообщение об ошибке «Поскольку выполнение сценария запрещено в вашей системе», откройте PowerShell от имени администратора и выполните:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

инструмент управления версиями nvm

nvm (Node Version Manager) — это инструмент управления версиями, разработанный специально для Node.js. Он позволяет устанавливать и переключать несколько разных версий Node.js на одном компьютере, что является важным инструментом для разработчиков, которым необходимо одновременно поддерживать несколько проектов, использующих разные версии Node.

Зачем нужен НВМ

При разработке интерфейсных проектов (таких как Vue, React) разные проекты могут зависеть от конкретных версий Node.js. Загрузив установочный файл напрямую с официального сайта, можно установить только одну версию, но nvm решает проблему конфликтов версий.

Общие команды

Ниже приведены инструкции nvm, часто используемые во время разработки:

// Просмотр всех установленных на данный момент версий
НВМЛ

// Просматриваем все версии Node.js, доступные для установки в облаке
NVM ls-удаленный

// Установите конкретную версию (например, v18.16.0)
установка НВМ 18.16.0

//Переходим на указанную версию
НВМ использует 18.16.0

// Проверяем версию, которая используется в данный момент
НВМток

//Устанавливаем версию по умолчанию (версию, которая автоматически используется при каждом включении терминала)
псевдоним nvm по умолчанию 18.16.0

процесс работы nvm

когда вы выполняетеnvm usenvm будет динамически изменять вашу системуPATHПеременные среды переключают адрес, указывающий на исполняемый файл Node, в папку соответствующей версии, тем самым достигается безболезненное переключение.

Меры предосторожности при установке

Операционная система	Рекомендуемые версии/инструменты	Примечание
macOS / Linux	nvm (nvm-sh)	Самая оригинальная и стабильная версия.
Windows	nvm-windows	Он разработан разной командой, но функции у него практически одинаковые. Для установки вам необходимо скачать .exe.

Маленькое напоминание

Установить в Windowsnvm-windowsРанее настоятельно рекомендуется удалить Node.js, который был изначально установлен на вашем компьютере, чтобы избежать конфликтов переменных среды, которые могут привести к сбою переключения.

NPM

Что такое НПМ

NPM (Node Package Manager) — это инструмент управления пакетами для Node.js, используемый для управления библиотеками и модулями кода JavaScript. Он позволяет разработчикам устанавливать, совместно использовать и контролировать версии различных пакетов, необходимых для их проектов.

Основные функции

Установка и удаление пакетов. Вы можете установить локальные или глобальные пакеты JavaScript.
Контроль версий: управляйте версиями каждого пакета для обеспечения стабильности проекта.
Выпуск комплекта: разработчики могут загружать свои собственные разработанные модули в реестр NPM, чтобы поделиться ими с другими.

Общие команды

npm init: Инициализируйте новый проект и создайтеpackage.jsonфайл.
npm install:Установитьpackage.jsonВсе зависимые пакеты, перечисленные в .
npm install [имя пакета]: установить указанный пакет.
npm удалить [имя пакета]: удалить указанный пакет.
npm update: обновить установленные пакеты.

package.json

package.jsonЭто основной файл проекта, в котором записано имя проекта, версия, описание, зависимые пакеты и другая информация. Это основа пакета управления NPM.

Обычное использование

Управление зависимостями интерфейсных фреймворков, таких как React и Vue.
Интеграция модулей для серверных проектов Node.js.
Инструмент сборки (например, Webpack, Babel) для управления пакетами.

НПМ и пряжа

NPM — самый ранний и наиболее широко используемый инструмент управления пакетами JavaScript, но появились более поздние альтернативы, такие как Yarn, обеспечивающие более высокую скорость установки и параллельную обработку. Оба могут использоваться в большинстве проектов Node.js.

Инструмент для создания внешнего интерфейса Vite

Vite (по-французски «быстрый») — это новое поколение инструментов разработки интерфейса, предназначенное для обеспечения чрезвычайно быстрой разработки. В основном он состоит из двух частей: сервера разработки (на основе собственных ES-модулей) и набора инструкций по сборке (упакованного с помощью Rollup).

Почему стоит выбрать Вите

До появления Vite основным инструментом был Webpack, но по мере того, как проект рос, скорость компиляции становилась очень медленной. Vite решает эту проблему:

Чрезвычайно быстрый запуск:Запуск сервера разработки происходит практически мгновенно, поскольку не требует предварительной упаковки всего проекта.
Мгновенные горячие обновления (HMR):Независимо от размера проекта повторный рендеринг после изменения кода по-прежнему выполняется быстро.
Встроенная поддержка:Поддержка по умолчанию для препроцессоров TypeScript, JSX, CSS (таких как Sass) и собственных модулей ES.

Быстро создавайте проекты

Вы можете быстро создать проект Vue, React, Svelte или чистый JavaScript с помощью одной строки команды.

// Используйте npm для создания проекта
npm create vite@latest my-vue-app

//Переходим в папку и устанавливаем пакет
cd мое-vue-приложение
установка npm

//Запускаем среду разработки
НПМ Rundev

Вите инструкцию по выполнению

в проектеpackage.json, вы увидите следующие часто используемые скрипты:

инструкция	использовать	иллюстрировать
npm run dev	Запустить сервер разработки	Используется во время локальной разработки и поддерживает обновления в реальном времени.
npm run build	Упаковка проекта	Создавайте высокооптимизированные статические файлы (помещайте их в папку dist).
npm run preview	Предварительный просмотр результатов упаковки	Смоделируйте рабочее состояние после локального развертывания.

Файл конфигурации Vite (vite.config.js)

Конфигурация Vite очень интуитивно понятна и обычно используется для добавления плагинов (плагинов) или настройки прокси-сервера (прокси).

импортировать { defineConfig } из 'vite'
импортировать vue из @vue/plugin-vue

экспортировать default defineConfig({
  плагины: [vue()],
  сервер: {
    порт: 3000, // Изменяем номер порта сервера разработки
    open: true // Автоматически открывать браузер при запуске
  }
})

По сравнению с традиционными инструментами

Webpack：Подобно полнофункциональному «крупномасштабному обрабатывающему заводу», все детали должны быть обработаны перед началом работы. Он медленнее, но чрезвычайно функционален.
Vite：Как и «Modern Express», он динамически загружает все необходимые вам части, очень быстро и в соответствии с современными стандартами браузера.

Electron

Что такое электрон

Electron — это платформа с открытым исходным кодом, которая позволяет разработчикам создавать кроссплатформенные настольные приложения с использованием HTML, CSS и JavaScript. Он сочетает в себе Chromium и Node.js, чтобы предоставить веб-технологиям доступ к собственным системным ресурсам.

Основные особенности

Кроссплатформенная поддержка: Windows, macOS, Linux.
Одновременное использование интерфейса с API Node.js
Создание настольных приложений с использованием веб-технологий
Активное сообщество и обширная поддержка пакетов

Применимые сценарии

Программа чата (например, Slack)
Редактор программ (например, Visual Studio Code)
Настольное веб-приложение
Кроссплатформенные системные инструменты

Установка и инициализация

npm install --save-dev electron

Самый простой пример

// main.js
const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

Домашняя страница HTML

<!DOCTYPE html>
<html>
  <тело>
    <h1>Привет, Электрон! </h1>
  </тело>
</html>

Запустить приложение

npx electron .

Предложения по развитию

Разделите основной процесс и процесс рендеринга
Используйте IPC для связи между основной программой и интерфейсной страницей.
Упаковочные инструменты, такие какelectron-builderМожет использоваться для создания установочных файлов.

TypeScript

TypeScript — это расширенная версия JavaScript, разработанная Microsoft. Он добавляет «систему типов» в JavaScript и в конечном итоге будет скомпилирован в чистый JavaScript для выполнения в браузере. Это решает проблему, заключающуюся в том, что JavaScript, как слабо типизированный язык, сложно поддерживать и он подвержен ошибкам в больших проектах.

Зачем использовать TypeScript

Предотвращение ошибок:Компилятор может обнаружить опечатки или несоответствия типов еще до выполнения кода.
Автозаполнение:Мощные определения типов позволяют IDE (таким как VS Code) предоставлять чрезвычайно точные подсказки по коду.
Легко провести рефакторинг:При изменении структуры переменной или функции везде, где это происходит, отображается предупреждение.

тег основного типа

Добавив после переменной: typeобъявить тип.

let name: string = "Близнецы";
пусть возраст: число = 18;
пусть isStudent: boolean = true;

//тип массива
let stocks: string[] = ["AAPL", "TSLA", "NVDA"];

// Параметры функции и типы возвращаемых значений
функция add(a: число, b: число): число {
    вернуть а + б;
}

Интерфейс и пользовательские типы

Это одна из самых мощных функций TypeScript, используемая для определения структуры (формы) объектов.

Пользователь интерфейса {
    идентификатор: номер;
    имя пользователя: строка;
    электронная почта?: строка; // Знак вопроса указывает на необязательный атрибут
}

const newUser: Пользователь = {
    идентификатор: 1,
    имя пользователя: «Алекс»
};

Комбинация TypeScript и Vite

Современные среды разработки, такие как Vite, по умолчанию поддерживают TypeScript. Выберите при создании проектаvue-tsилиreact-ts, Vite автоматически обработаетtsconfig.jsonконфигурация.

// Используйте Vite для создания проекта TS
npm create vite@latest my-ts-app -- --template vue-ts

В сочетании с предыдущими концепциями JavaScript

Переписывание ранее упомянутой функции случайного выбора в версию TypeScript сделает ее более безопасной:

// Общий <T> позволяет этой функции обрабатывать массивы любого типа
function getRandomElements<T>(arr: T[], count: Number = 5): T[] {
    если (объем. длина<= count) return [...arr];
    
    const tempArray = [...arr];
    const result: T[] = [];
    
    for (let i = 0; i < count; i++) {
        const randomIndex = Math.floor(Math.random() * tempArray.length);
        result.push(tempArray.splice(randomIndex, 1)[0]);
    }
    return result;
}

const randomStocks = getRandomElements<string>(["AAPL", "TSLA", "GOOGL"], 2);

Процесс компиляции TypeScript

Файлы TypeScript (.ts) не могут быть выполнены непосредственно в браузере, и их жизненный цикл выглядит следующим образом:

этап	действие	инструмент
период написания	Определите типы и напишите код .ts	VS Code + TS Engine
время компиляции	Проверьте наличие ошибок типа и удалите теги типа.	tsc / Vite / esbuild
Срок исполнения	Запускайте чистые файлы .js в браузере	Browser Engine

Расширения браузера

основное определение

Расширение браузера — это небольшое приложение, используемое для расширения функций браузера, обычно написанное на HTML, CSS и JavaScript. Он может изменять содержимое веб-страницы, добавлять кнопки на панель инструментов, взаимодействовать с фоновыми службами и улучшать взаимодействие с пользователем.

Обычное использование

Изменение содержимого веб-страницы:Такие как блокировщики рекламы, инструменты перевода.
Функции панели инструментов:Щелкните значок, чтобы выполнить определенные операции, например сделать снимки экрана и сделать заметки.
Запуск в фоновом режиме:Постоянно отслеживайте события, такие как автоматическая синхронизация и напоминания.
Взаимодействуйте с сайтом:Управляйте браузером или читайте указанные данные сайта через API.

Основные файлы

manifest.json: Опишите имя расширенной функции, версию, разрешения и вход.
popup.html: интерфейс, отображаемый после щелчка по значку на панели инструментов.
background.js: фоновый резидентный скрипт, используемый для обработки событий и логики.
content.js: Скрипты, внедренные в веб-страницы, могут напрямую манипулировать DOM.

Поддерживаемые браузеры

Google Chrome：Используя Манифест V3, черезchrome://extensions/нагрузка.
Microsoft Edge：Совместим с Chrome и может быть установлен или загружен напрямую.
Firefox：Использует API WebExtensions и имеет структуру, аналогичную Chrome.
Safari：Требует разработки Xcode и поддерживает некоторые API WebExtensions.

процесс разработки

Создайте папку и поместите ее тудаmanifest.jsonи связанные файлы.
Перейдите на страницу расширений браузера и включите «Режим разработчика».
Нажмите «Загрузить неупакованный проект» и выберите папку.
Протестируйте функциональность и при необходимости откорректируйте код.

На что следует обратить внимание

Будьте осторожны при запросе разрешений, чтобы избежать чрезмерного доступа к пользовательским данным.
Хотя разные браузеры поддерживают API WebExtensions, детали могут незначительно отличаться.
Если он будет опубликован публично, он должен быть указан в списке в соответствии со спецификациями каждого магазина браузера.

Пример расширения Chrome

Создать файловую структуру

my-extension/
 ├─ manifest.json
 ├─ popup.html
 ├─ popup.js
 └─ icon.png

manifest.json

{
  «manifest_version»: 3,
  "name": "Привет, расширение",
  "версия": "1.0",
  "description": "Пример простого расширения Chrome",
  "действие": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  },
  "разрешения": []
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <style>
      body { width:200px; font-family:sans-serif; text-align:center; }
      button { margin-top:10px; padding:5px 10px; }
    </style>
  </head>
  <body>
    <h3>Hello from Chrome Extension</h3>
    <button id="btn">Click me</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.getElementById("btn").addEventListener("click", () => {
  alert("Кнопка нажата!");
});

icon.png

Поместите значок PNG (рекомендуемый размер 128x128) на панель инструментов.

Загрузить расширение

включатьchrome://extensions/
Откройте верхний правый уголРежим разработчика
НажмитеЗагрузить распакованный проект, выберите только что созданную папку
Вы можете увидеть значок на панели инструментов, и после щелчка по нему появится всплывающее окно.

Инструменты разработки расширений Chrome

основной язык разработки

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

HTML (язык разметки гипертекста): используется для определения пользовательского интерфейса (UI) расширенных функций, таких как всплывающие окна (Popup), страница параметров (страница параметров) и другие структуры.
CSS (каскадные таблицы стилей): используются для украшения и макетирования элементов пользовательского интерфейса.
JavaScript (JS): это основной логический язык с расширенной функциональностью. Все поведение, включая сценарии содержимого, сценарии Service Worker/фоновые сценарии и взаимодействия с пользовательским интерфейсом, должно быть написано на JavaScript (или его надмножестве TypeScript).

Расширенные языковые параметры: TypeScript.

TypeScript (TS): Хотя в конечном итоге выполняется JavaScript, настоятельно рекомендуется использовать TypeScript. TS обеспечивает статическую проверку типов, которая может значительно улучшить удобство сопровождения программного кода и уменьшить количество ошибок во время выполнения для больших или сложных проектов расширений. Большинство современных фреймворков изначально поддерживают TypeScript.

Интерфейсные платформы и библиотеки (необязательно)

Для создания более сложных и реактивных пользовательских интерфейсов (особенно всплывающих окон и страниц параметров) можно использовать общие интерфейсные платформы. Однако обратите внимание, что обычно не рекомендуется использовать тяжеловесные платформы в фоновых службах, которые расширяют функциональность.

React/Vue/Svelte/SolidJS: используется для создания интерфейсов пользовательского интерфейса, таких как всплывающие окна (popup.html) и страницы параметров (options.html), обеспечивая возможности компонентизации и управления состоянием.
JQuery: Если вам нужны только простые манипуляции с DOM и анимация, JQuery по-прежнему остается легким и быстрым выбором, но теперь все больше разработчиков склонны использовать собственный JavaScript или более современные платформы.

Современные инструменты и пакеты разработки (рекомендуется)

Чтобы упростить процесс разработки, обеспечить упаковку кода, горячую перезагрузку (Hot Reloading) и кроссбраузерную совместимость, тенденцией является использование современных инструментов разработки.

Инструменты/Наборы	использовать	Преимущества
Vite / Webpack	Бандлер	Упакуйте несколько файлов кода, стилей и ресурсов в формат, читаемый браузером, чтобы оптимизировать размер кода. Vite очень популярен благодаря быстрой замене модулей в горячем режиме (HMR).
WXT / Plasmo	Специальная платформа с расширенными функциями	Платформа, специально разработанная для разработки расширений, может автоматически генерировать файлы манифеста, настраивать TypeScript, горячую перезагрузку и поддерживать кроссбраузерность (Chrome, Firefox, Edge и т. д.), что значительно упрощает процесс разработки.
pnpm / npm / yarn	Инструменты управления пакетами	Управляйте сторонними библиотеками и инструментами JavaScript, от которых зависит ваш проект.

Официальные инструменты и инструменты отладки

Это важный инструмент для разработки всех расширений Chrome.

Инструменты разработчика Chrome (DevTools): это основной инструмент отладки. Вы можете проверять сценарии контента, отлаживать сервис-воркеры, отслеживать сетевые запросы и проверять DOM и CSS во всплывающих окнах или страницах параметров.
Manifest V3: последняя спецификация с расширенными функциональными возможностями, заменяющая старый Manifest V2. Все новые расширения должны соответствовать спецификации V3, в частности, есть существенные изменения в фоновых сценариях (с использованием сервис-воркеров) и ограничениях удаленного кода.

PHP

Информационный сайт PHP

Руководство по PHP

php.ini

Введение

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

Расположение

Окна: обычно расположены вC:\php\php.iniИли в каталоге установки.
Linux: обычно встречается в/etc/php/номер версии/apache2/php.iniили/etc/php/version/cli/php.ini。
Доступныйphp --iniЗапросите файл конфигурации, используемый CLI.

используемые приоритеты php.ini

При запуске PHP будет искать файлы конфигурации в следующем порядке и будет загружен первый найденный:

Если вы используете-cЕсли параметр указан, путь будет загружен первым.php.ini。
переменные окружающей средыPHPRCуказанный каталог.
Каталог установки по умолчанию при компиляции PHP (доступенphp --iniилиphpinfo()запрос).
В некоторых операционных системах вы также можете искать/etc/php.iniилиC:\Windows。

Общие настройки

; Установить часовой пояс
date.timezone = Азия/Тайбэй

; показать ошибку
display_errors = Вкл.
error_reporting = E_ALL

; Размер файла загрузки
upload_max_filesize = 20M
post_max_size = 25M

; Ограничение памяти
предел_памяти = 256 МБ

; Максимальное время выполнения (секунды)
max_execution_time = 30

Загрузить настройки

Исправлятьphp.iniПосле этого вам необходимо перезапустить Apache, Nginx или PHP-FPM, чтобы изменения вступили в силу.
доступныйphpinfo()Проверьте загруженный в данный моментphp.iniЗначения пути и параметров.

На что следует обратить внимание

Различные среды выполнения (Apache, CLI, Nginx) могут использовать разныеphp.ini。
Может быть создан.user.iniили.htaccessПерезапишите некоторые настройки.
Измените настройки, связанные с выводом ошибок. Рекомендуется включать его в среде разработки и отключать в официальной среде.

Логическое значение PHP

Логическое значение — это самый простой тип данных в PHP. Он может представлять только два состояния: **истина** или **ложь**. Логические значения часто используются для процессов управления (например.if/elseУсловное суждение) и логические операции.

Основное использование

Вы можете использовать ключевые словаtrueилиfalseопределить логическую переменную. Эти ключевые слова не чувствительны к регистру (например,TRUE、Trueилиtrueодинаковы), но обычно рекомендуется использовать строчные буквы.trueиfalseдля соблюдения стандартной практики.

$is_active = правда;
$is_logged_out = ЛОЖЬ; // Хотя можно использовать прописные буквы, использовать их не рекомендуется.

//Условное суждение
если ($is_active) {
    echo "<p>Пользователь в данный момент активен.</p>";
} еще {
    echo "<p>Пользователь в настоящее время неактивен.</p>";
}

Преобразование логического значения (приведение типов)

Когда PHP ожидает логическое значение, но получает другой тип данных (например, вifусловие), PHP автоматически преобразует (или приводит тип) значение к логическому значению.

Следующие значения считаются ложными (называемыми ложными значениями):

Стоимость Боллинджераfalseсам.
целое число0(ноль).
число с плавающей запятой0.0(ноль).
пустая строка""или''。
Нить"0"(строка, содержащая однозначный ноль).
пустой массивarray()или[]。
специальный типNULL。
Объект SimpleXML без дочерних узлов (редко).

Все остальные значения, включая любое ненулевое число, любую непустую строку (даже"false"или" "[включая пробелы]), будет рассматриваться как **true (истина)** (называемое значением Truthy).

Пример преобразования типов

$а = 0;
$b = "Привет";
$с = "";
$д = [1, 2];
$ е = ноль;

echo "<h3>Пример ложного значения</h3>";
if (!$a) { // $a (0) преобразуется в false
    echo "<p>$a (целое число 0) рассматривается как FALSE.</p>";
}
if (!$c) { // $c (пустая строка) преобразуется в false
    echo "<p>$c (пустая строка) рассматривается как FALSE.</p>";
}
if (!$e) { // $e (NULL) преобразуется в false
    echo "<p>NULL рассматривается как FALSE.</p>";
}

echo "<h3>Пример истинного значения</h3>";
if ($b) { // $b ("Привет") преобразуется в true
    echo "<p>$b (непустая строка) рассматривается как TRUE.</p>";
}
if ($d) { // $d (непустой массив) преобразуется в true
    echo "<p>Непустые массивы рассматриваются как TRUE.</p>";
}

Приведение к логическому значению

Вы также можете использовать(bool)илиboolval()Функция явно преобразует переменную в логическое значение, что полезно при отладке или когда требуется строгая проверка типов.

$ф = "0"; // строка с нулевым номером
$г = 100; // положительное целое число

$f_bool = (логическое значение)$f;
$g_bool = boolval($g);

echo "<p>Строка '0' преобразуется в: ";
var_dump($f_bool); // Вывод: bool(false)
эхо "</p>";

echo "<p>Целое число 100 преобразуется в: ";
var_dump($g_bool); // Вывод: bool(true)
эхо "</p>";

Операторы сравнения PHP

В PHP операторы сравнения используются для сравнения двух значений (числ или строк). По результату сравнения будет возвращеноtrueилиfalse. Понимание разницы между «свободным сравнением» и «строгим сравнением» является ключом к предотвращению ошибок в программе.

1. Список часто используемых операторов сравнения

оператор	имя	пример	Условия, которые приводят к истинному
`==`	равный (свободный)	`$a == $b`	Значения равны (сравнение типов будет автоматически преобразовано)
`===`	Конгруэнтный (строгий)	`$a === $b`	Значения равны и типы тоже одинаковы
`!=` / `<>`	не равен	`$a != $b`	Ценности не равны
`!==`	Не конгруэнтно	`$a !== $b`	Значения не равны или типы не совпадают
`>`	больше, чем	`$a > $b`	$a больше, чем $b
`<`	меньше, чем	`$a < $b`	$a меньше $b
`>=`	Больше или равно	`$a >= $b`	$a больше или равна $b
`<=`	меньше или равно	`$a <= $b`	$a меньше или равна $b
`<=>`	оператор космического корабля	`$a <=> $b`	Возвращает -1, 0 или 1 (PHP 7+)

2. Углубленный анализ: разница между == и ===

Это наиболее распространенная область путаницы в разработке PHP. PHP — слабо типизированный язык.==Попытается преобразовать переменные разных типов в один и тот же тип, прежде чем сравнивать их, и===Никакое преобразование не производится вообще.

свободное сравнение (==)

Это верно, пока «значения» после преобразования равны:

$а = 100; // целое число (целое)
$б = "100"; // строка (строка)

если ($а == $b) {
    эхо «Равно»; // Это будет выполнено, поскольку PHP преобразует строки в числовые сравнения
}

Строгое сравнение (===)

«Значение» должно быть точно таким же, как «тип данных»:

$а = 100;
$б = "100";

если ($а === $b) {
    эхо «Равно»;
} еще {
    эхо «не равно»; // это будет выполнено, поскольку int не равно строке
}

3. Особые случаи: тернарный оператор и оператор слияния.

Сокращенный синтаксис делает ваш код чище при работе с логикой сравнения:

Тернарный оператор (Тернарный): $result = ($a > $b) ? «Большой»: «Большой»;
Нулевое объединение: $name = $input_name ?? «Посетитель»;(Предоставляет значение по умолчанию, если переменная не существует или имеет значение NULL).

Совет по безопасности:При выполнении аутентификации, проверке разрешений или оценке возвращаемого значения API обязательно используйте===. Например, проверьтеstrpos()Возвращаемое значение0(должность) иfalse(не найден) в==будут считаться одинаковыми, что приведет к логическим ошибкам.

PHP-массив

В PHP массив — это очень полезный составной тип данных, который может хранить несколько значений в одной переменной. Массив PHP на самом деле представляет собой упорядоченную карту. Карта — это тип, который связывает Значения с Ключами.

Особенности PHP-массивов

Смешанные клавиши:Ключи массива могут быть целыми числами (Индекс, индекс) или строками (Ключ, имя ключа).
Смешанные значения:Значениями в массиве могут быть любые типы данных PHP, включая другие массивы (образующие многомерные массивы).
Динамический размер:Размер массива является динамическим и вам не нужно заранее объявлять его емкость.

тип массива

Массивы PHP можно условно разделить на три общие формы в зависимости от типа их ключей:

1. Индексированные массивы

Используйте последовательные целые числа в качестве ключей. Если вы не укажете ключ при построении массива, PHP начнет с0Начните автоматически назначать целочисленные индексы.

//Создаем индексированный массив
$fruits = array("яблоко", "банан", "апельсин");
// Или используйте сокращенный синтаксис (после PHP 5.4)
$colors = ["красный", "зеленый", "синий"];

//Доступ к элементам
эхо $fruits[0]; // Вывод: яблоки
эхо $colors[2]; // Вывод: синий

2. Ассоциативные массивы

Используйте строки в качестве ключей (имен ключей). Это позволяет использовать осмысленные имена для доступа к значениям в массиве.

//Создаем ассоциативный массив
$человек = массив(
    "имя" => "Сяо Мин",
    «возраст» => 25,
    "город" => "Тайбэй"
);

// Или используйте сокращенный синтаксис
$баллы = [
    «Математика» => 90,
    «Английский» => 85
];

//Доступ к элементам
эхо $person["имя"]; // Вывод: Сяо Мин
echo $scores["Английский"]; // Вывод: 85

3. Многомерные массивы

Значения в массиве, в свою очередь, являются другим массивом. Обычно это используется для хранения табличных или иерархических данных.

$студенты = [
    [
        "имя" => "Алиса",
        "баллы" => ["Математика" => 95, "Наука" => 88]
    ],
    [
        "имя" => "Боб",
        "баллы" => ["Математика" => 78, "Наука" => 92]
    ]
];

//Доступ к элементам (доступ к результатам Боба по естествознанию)
echo $students[1]["баллы"]["Наука"]; // Вывод: 92

Общие функции работы с массивами

PHP предоставляет сотни встроенных функций для работы с массивами. Вот некоторые из наиболее часто используемых:

count($array): подсчитывает количество элементов в массиве.
print_r($array): отображает структуру и значения массива в удобочитаемом формате (обычно используется для отладки).
array_push($array, $value1, ...): Переместить (добавить) один или несколько элементов в конец массива.
array_pop($array): Извлекает (удаляет и возвращает) последний элемент массива.
array_keys($array): Возвращает новый массив, состоящий из всех имен ключей в массиве.
array_values($array): Возвращает новый массив, состоящий из всех значений массива.
in_array($needle, $haystack): проверить, существует ли определенное значение в массиве.
array_key_exists($key, $array): проверить, существует ли в массиве определенный ключ.

Итерация массива (цикл)

Обычно используетсяforeachПеребрать все элементы массива:

$staff = ["Менеджер" => "Чжан Сан", "Инженер" => "Ли Си", "Дизайнер" => "Ван Ву"];

// Обход ассоциативного массива (получение ключей и значений)
foreach ($staff as $title => $name) {
    эхо $title. ": " . $имя. "<br>";
}

// Обход индексированного массива (только получение значений)
$items = ["А", "Б", "С"];
foreach ($items как $item) {
    эхо $элемент. "<br>";
}

Сравнение строк PHP игнорирует регистр

strcasecmp()

Доступно на PHPstrcasecmp()Выполните сравнение строк без учета регистра. Если возвращаемое значение равно 0, это означает, что две строки равны.

<?php
$str1 = "Привет";
$str2 = "Привет";

if (strcasecmp($str1, $str2) === 0) {
    echo "Строки равны (без учета регистра)";
} еще {
    echo "Строки не равны";
}
?>

str_ireplace()

Чтобы обрабатывать сравнения или замены, игнорирующие регистр, вы можете использоватьstr_ireplace()。

<?php
$text = "Привет, мир";
$result = str_ireplace("привет", "Привет", $text);
эхо $результат; // Вывод «Привет, мир»
?>

preg_match() с модификатором i

При использовании сравнения регулярных выражений вы можете добавить после шаблонаiигнорировать регистр.

<?php
if (preg_match("/hello/i", "HELLo PHP")) {
    echo «Сравнение успешно»;
}
?>

Обработка строки пути PHP

При обработке строк пути к файлу в PHP рукописное разделение строк (например, использованиеexplode), поскольку разные операционные системы (Windows использует\, для Linux/) обрабатываются по-разному. PHP имеет несколько мощных встроенных функций для безопасного дизассемблирования путей.

1. pathinfo() — самый универсальный инструмент

Это моя наиболее рекомендуемая функция. Он может разобрать путь на: имя каталога, полное имя файла, расширение файла и имя файла без расширения.

$path = "/var/www/html/assets/img/logo.png";
$информация = информация о пути ($путь);

echo $info['имя_каталога']; // /var/www/html/assets/img
echo $info['basename']; // логотип.png
echo $info['расширение']; // png
echo $info['имя файла']; // логотип (поддерживается PHP 5.2+)

2. basename() и dirname() — быстрое получение частичных путей.

basename：Получите часть пути «имя файла».
dirname：Получите часть пути «каталог».

$path = "C:\projects\web\index.php";

базовое имя эха ($ путь); // индекс.php
echo basename($path, ".php"); // индекс (удалить указанное расширение файла)
эхо имя_каталога ($ путь); // C:\проекты\веб

3. realpath() — Получить абсолютный путь (путь к объекту)

Он разрешит все символы относительного пути (например,../или./) и возвращает истинный абсолютный путь в операционной системе. Если файл не существует, он будет возвращенfalse。

echo Realpath("../../config.php");
//Вывод аналогичен: /var/www/config.php

---

== Сценарии обработки общего пути

Сценарий А: коррекция межплатформенного пути

Чтобы гарантировать отсутствие ошибок при разработке Windows и развертывании Linux, рекомендуется единообразно преобразовывать обратную косую черту в прямую:

$path = "C:\User\Admin\Desktop\test.txt";
$safe_path = str_replace('\\', '/', $path);
// Результат: C:/User/Admin/Desktop/test.txt

Сценарий Б. Объедините пути (чтобы избежать дополнительных косых черт).

Ручное сращивание$dir . '/' . $fileсклонен к появлению//Ошибка двойной косой черты. Можно использоватьDIRECTORY_SEPARATOR(системный разделитель) илиrtrim：

$dir = "/var/www/html/";
$file = "index.php";

//Универсальный метод сплайсинга
$full_path = rtrim($dir, '/\\') . DIRECTORY_SYSTEM_SEPARATOR . $файл;

Сценарий C. Проверьте, является ли расширение файла законным.

$allowed = ['jpg', 'png', 'gif'];
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

если (in_array($ext, $allowed)) {
    echo "Правильный формат";
}

---

== Сводная сравнительная таблица

функция	Пример ввода:`/data/web/test.php`	Возврат результатов
pathinfo()	`pathinfo($p)`	Возвращает ассоциативный массив (Array), содержащий всю информацию.
basename()	`basename($p)`	`test.php`(Чистое имя файла)
dirname()	`dirname($p)`	`/data/web`(Оглавление)
realpath()	`realpath("./test.php")`	`/absolute/path/to/test.php`(реальный путь)

== Получить каталог верхнего уровня по пути (имя корневого каталога)

Чтобы получить точное имя каталога верхнего уровня из строки пути (например,var), наиболее надежный метод — сначала преобразовать путьнормализация, а затем используйтеexplode()Разобрать строку. Поскольку путь обычно начинается с косой черты, первый элемент дизассемблированного массива часто оказывается пустым, что требует специальной обработки.

Способ 1. Используйте взрыв для разборки (самый интуитивно понятный).

Это наиболее распространенный способ, черезltrim()Перед разделением удалите косую черту и убедитесь, что первая позиция в массиве соответствует нужному имени.

$path = "/var/www/html/assets/img/logo.png";

// 1. Сначала удалите крайнюю левую косую черту, чтобы избежать появления пустого первого элемента, созданного при взрыве
// 2. Разбиваем на массивы по слешам
$parts = взрыв('/', ltrim($path, '/'));

// 3. Получаем первый элемент массива
$rootDir = $parts[0];

эхо $rootDir; // Вывод: вар

Метод 2: универсальная обработка на всех платформах (наиболее надежный)

Если ваш путь может исходить из Windows или Linux, рекомендуется сначала унифицировать формат косой черты и отфильтровать повторяющиеся косые черты.

$path = "/var/www/html/assets/img/logo.png";

// Равномерно преобразуем косую черту и отфильтровываем пустые элементы
$parts = array_values(array_filter(explode('/', $path)));

$rootDir = $parts[0] ?? '';
эхо $rootDir; // Вывод: вар

Способ 3. Получите веб-корень для «текущей среды выполнения».

Если вы не хотите обрабатывать «конкретные строки», но хотите знать имя корневой папки веб-сервера, вы можете использовать$_SERVER：

// Предположим, что DOCUMENT_ROOT — это /var/www/html.
$rootParts = взрыв('/', ltrim($_SERVER['DOCUMENT_ROOT'], '/'));
эхо $rootParts[0]; // Вывод: вар

---

== Таблица логического сравнения процессов

Цель	Соответствующий код	Пример результатов
каталог верхнего уровня	`explode('/', ltrim($path, '/'))[0]`	`var`
Предыдущий каталог	`basename(dirname($path))`	`img`
Полный путь к каталогу	`dirname($path)`	`/var/www/html/assets/img`

Советы

При работе с путями обязательно обратите внимание, есть ли косая черта в начале пути."/var"После разделения станет["", "var"],и"var"После разделения станет["var"]. использоватьltrim($path, '/')Это гарантирует, что результат будет согласованным независимо от того, есть ли в начале косая черта.

PHP включает приоритет пути

Приоритет	иллюстрировать
1.	Указанный абсолютный или относительный путь: напрямую укажите путь к файлу, и PHP сначала выполнит поиск файла по этому пути.
2	Текущий каталог исполняемого файла: если полный путь не указан, PHP сначала будет искать файл в каталоге, где находится исполняемый файл.
3	Параметр include_path: если файл не может быть найден в каталоге выполнения, PHP проверит`php.ini`установить в`include_path`путь.
4	Файл не существует. Если файл не найден ни по одному из указанных выше путей, будет сгенерировано предупреждение (`Warning`) и вернуться`false`。

PHP получает имя текущей страницы

Используйте $_SERVER['PHP_SELF']

может пройти через$_SERVER['PHP_SELF']Получите путь к файлу текущего выполнения, а затем используйтеbasenameПолучить имя файла:

<?php
$current_page = basename($_SERVER['PHP_SELF']);
echo "Имя текущей страницы:" . $ текущая_страница;
?>

Используйте $_SERVER['REQUEST_URI']

через$_SERVER['REQUEST_URI']Получите полный путь URL-адреса, а затем используйтеparse_urlиbasenameИмя файла разбора:

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$current_page = базовое имя ($url_path);
echo "Имя текущей страницы:" . $ текущая_страница;
?>

Различать имена файлов и дополнительные параметры

Если URL содержит параметры запроса, их можно обрабатывать отдельно:

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$query_string = parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY);
$current_page = базовое имя ($url_path);

echo "Имя файла:" . $ текущая_страница . "<br>";
echo "Параметры запроса:" .$query_string;
?>

Примеры применения

Предположим, текущий URL-адресhttps://example.com/page.php?id=123：

Текущее имя страницы: page.php
Имя файла: page.php
Параметры запроса: id=123

PHP получает текущую страницу и страницу входа

В PHP, когдаmain.phpиспользоватьincludeпредставлятьsubpage.phpВ это время два файла фактически «объединяются и выполняются». Чтобы получить «основной путь программы» и «введенный путь к файлу» соответственно, вам необходимо использовать разные суперглобальные переменные и константы.

1. Получите путь к «текущему файлу» (subpage.php).

Независимо от того, кто импортировал файл, используйте магическую константу__FILE__Всегда указывает на путь к «файлу, в котором находится этот код».

//Запись в subpage.php
$thisFilePath = __FILE__;
echo "Текущий путь к файлу: " . $thisFilePath;
//Вывод аналогичен: /var/www/html/fullpath/subpage.php

2. Получите путь к «основной программе» (main.php).

когда тыsubpage.phpЧтобы выяснить, кто был исходной точкой входа, есть несколько способов:

Метод А: Используйте$_SERVER['SCRIPT_FILENAME'](самый точный)
Эта переменная будет хранить абсолютный путь, по которому изначально был выполнен скрипт.
```
$mainPath = $_SERVER['SCRIPT_FILENAME'];
```
Метод Б: Используйтеget_included_files()(расширенное отслеживание)
Это вернет массив, проиндексированный0Это исходный файл записи.
```
$allFiles = get_included_files();
$mainPath = $allFiles[0];
```

3. Пример интеграции кода

Пожалуйста, поместите следующий код в свойsubpage.phpСредний тест:

<?php
// 1. Путь к самому файлу, который вводится
$sub_page_path = str_replace('\\', '/', __FILE__);

// 2. Путь к основному исполняемому файлу
$main_page_path = str_replace('\\', '/', $_SERVER['SCRIPT_FILENAME']);

echo "Путь к подстранице: " . $sub_page_path. "<br>";
echo "Путь к главной странице: " . $main_page_path. "<br>";
?>

Советы: str_replace('\\', '/', ...)Он предназначен для унификации форматов путей Windows (обратная косая черта) и Linux (косая черта), что очень удобно при кроссплатформенной разработке.

---

== Расширение: получить URL-путь

Если вы имеете в виду не путь к жесткому диску сервера (полный путь), а URL-путь в браузере, вам следует использовать:

Цель	грамматика	иллюстрировать
URL-путь	`$_SERVER['REQUEST_URI']`	Получить как`/project/main.php?id=1`Фрагмент URL.
виртуальный путь сценария	`$_SERVER['PHP_SELF']`	Получите путь к основной программе на веб-странице (без параметров).

Передача переменных ссылок на файлы PHP

1. Разъяснение`include`суть

В PHP используйтеincludeилиrequire, вы можете думать об этом какНепосредственно «скопируйте и вставьте» импортированный в файл код в текущий файл.. Таким образом, оба будут использовать одну и ту же среду выполнения (область).

2. Часто задаваемые вопросы: Нужно ли это?`global`？

тебе решатьрасположение переменной вызова：

Случай 1: используется глобально (глобальное значение не требуется).
если тыmain.phpОпределите переменные и поместите их вlibrary.phpСамый внешний уровень использует его напрямую, без какого-либо дополнительного объявления.
```
// основной.php
$var1 = "Яблоко";
включить «library.php»;

// библиотека.php
эхо $var1; // Вывод: Apple
```
Случай 2: Доступ внутри функции (требуется глобальный доступ)
Если переменная определена в глобальной области видимости, ноlibrary.phpвнутриФункцияЧтобы получить к нему доступ, вы должны его объявить.
```
// library.php
function printVar() {
    global $var1; 
    echo $var1;
}
        
```

3. Исправление:`include_once`непонимание передаваемых параметров

Особое внимание:PHPinclude_once Не поддерживаетсяПередайте второй аргумент (например, массив). Его единственным параметром является строка пути к файлу.

Неправильное использование (❌)	Правильное использование ( ✅)
`include_once('lib.php', ['v1' => $v1]);`	`$v1 = "Data"; include_once 'lib.php';`
PHP сообщит об ошибке, поскольку количество параметров не совпадает.	Переменные автоматически перейдут в импортированный файл.

---

== Рекомендуемые лучшие практики

Во избежание конфликтов имен переменных (загрязнения пространства имен) рекомендуется отказаться от метода записи «напрямую зависит от глобальных переменных» и использовать вместо него следующие два метода:

Метод A: передача параметров функции (наиболее гибкий)

Воляlibrary.phpБудучи чистым набором инструментов, в нем пишутся только функции, а переменные передаются через параметры.

// библиотека.php
<?php
функция ProcessStock($name) {
    возврат «Обработка запасов: » . $имя;
}
?>

// основной.php
<?php
include_once 'library.php';
echoprocessStock("TSLA"); // Передача переменных явно
?>

Метод Б: Использование категорий и статических методов (самый профессиональный)

Это более распространено в современной разработке PHP (например, в концепциях Laravel) и позволяет эффективно организовать код.

// library.php
class StockTool {
    public static function handle($var) {
        return "Result: " . $var;
    }
}

// main.php
include_once 'library.php';
echo StockTool::handle($var1);

Основной вывод

1. не хочусуществоватьincludeПередача параметров в операторе недопустима.
2. Старайтесь избегать global, использоватьпараметры функцииPass, чтобы код было легче отлаживать и поддерживать.

Проверка настройки переменной PHP

В PHP есть три основные основные функции для проверки того, была ли установлена (определена) переменная:isset()、empty()иarray_key_exists(). Их логика работы немного отличается, и выбор неправильной логики может привести к логическим дырам.

1. isset() — наиболее часто используемая проверка

используется для определения переменныхБыло ли это объявленоиЕго ценность неNULL。

$var = "Близнецы";
если (isset($var)) {
    echo "Переменная установлена и не равна NULL";
}

Уведомление:Если переменная установлена в$var = null;，isset($var)отправлю обратноfalse。

2. пустой() — проверьте, является ли это «пустым значением».

Используется для определения того, является ли переменнаяне существует, или его значение эквивалентноfalse. это эквивалентно!isset($var) || $var == false。

Следующие значения будутempty()рассматривается какtrue：

""(пустая строка)
0(целое число 0)
0.0(число с плавающей запятой 0)
"0"(Строка 0)
null
false
[](пустой массив)

3. Предложения по сценариям практического применения.

грамматика	Проверить цель	Подходит для сцены
`isset($var)`	Существует ли переменная и не равна ли она NULL	Проверьте необязательные поля, чтобы убедиться, что переменные определены.
`empty($var)`	Имеет ли переменная содержимое?	Проверка формы (убедитесь, что сообщение не пустое и количество не равно 0).
`is_null($var)`	Является ли переменная точно NULL	Когда вам просто нужно знать, было ли для переменной намеренно установлено значение null.

---

== для включения случая

Если вы находитесь вmain.phpПередать переменные вlibrary.php, рекомендуетсяlibrary.phpВыполните внутренние проверки на наличие ошибок:

Метод записи А: используйте isset для предотвращения ошибок

// библиотека.php
если (isset($var1)) {
    echo "Полученная переменная:" . $вар1;
} еще {
    echo "Внимание: переменная var1 еще не определена.";
}

Метод записи B: использовать оператор объединения Null (PHP 7+) — рекомендуется.

Это более краткий способ написания. Если переменная не установлена, ей присваивается значение по умолчанию.

// Если $var1 не установлен, $data равно «значению по умолчанию»
$данные = $var1 ?? 'Значение по умолчанию';

Метод записи C: проверка параметров GET/POST

Если вы передаете значение из внешнего интерфейса, метод проверки будет следующим:

if (isset($_GET['var1'])) {
    $v1 = $_GET['var1'];
}

Советы:На этапе разработки рекомендуется добавитьerror_reporting(E_ALL);, так что если вы получите доступ к неопределенной переменной, PHP напрямую выдастNotice: Undefined variableИмейте в виду.

PHP debug_backtrace()

использовать

debug_backtrace()Это функция, используемая PHP для получения текущего стека выполнения (пути вызова). Его часто используют для отладки и записи источников звонков.

Основное использование


$trace = debug_backtrace();
print_r($trace);

Описание структуры возврата

debug_backtrace()Будет возвращен массив, упорядоченный в порядке вызова:

[0]:Текущий файл (текущая функция или включенный файл)
[1]: источник, из которого он вызывается (файл или функция верхнего уровня)
[2]、[3]...: вызов более высокого уровня

Общие поля

file:Путь к файлу
line:Номер строки программы
function：Имя вызываемой функции
class: Название категории (если есть)
args: передать параметры

Пример: получить путь к файлу предыдущего слоя.

функция showCaller() {
    $trace = debug_backtrace();
    echo 'От: ' . $trace[1]['файл'] . ' Нет. ' . $trace[1]['строка'] . ' линия';
}

включить «subpageA.php»; // Вызов showCaller() внутри subpageA.php

Пример: Ситуации многоуровневого включения

main.php include subA.php
subA.php include subB.php
subB.phpиспользовать:

$trace = debug_backtrace();
echo 'Текущий файл:' . $trace[0]['файл'] . "\п";
echo 'Предыдущий уровень:' . $trace[1]['файл'] . "\п"; // субA.php
echo 'Домашняя страница:' . $trace[2]['файл'] . "\п"; // основной.php

краткое содержание

debug_backtrace()Это наиболее практичный способ просмотра источника вызовов включения/функций.
Подходит для отладки, записи, проверки разрешений и других нужд.

PHP error_log

использовать

error_log()Функция, используемая PHP для регистрации ошибок или пользовательских сообщений. Он часто используется для отладки, отслеживания хода выполнения программы и записи исключений, не влияя на вывод на экран.

Основное использование

<?php
error_log("Это тестовое сообщение");
?>

Запись содержимого переменной

<?php
$data = ["a" => 1, "b" => 2];
error_log(print_r($data, true));
?>

Укажите файл для записи

Используйте третий параметр для записи журнала в указанный файл.

<?php
error_log("Записать собственный файл", 3, "D:/logs/php_debug.log");
?>

Запись уровня ошибки

Используйте его с уровнем ошибки, чтобы легко определить источник.

<?php
error_log("[INFO] программа начинает выполнение");
error_log("Параметр [WARN] пуст");
error_log("[ОШИБКА] Не удалось подключиться к базе данных");
?>

Расположение журнала ошибок

Фактическое положение письма определяется выражениемphp.iniконтроль:

log_errors = On
error_log = "D:/logs/php_errors.log"

Если не установленоerror_log, по умолчанию будет:

Linux: запись в журнал ошибок веб-сервера
Windows: запись в журнал ошибок системы или Apache.

Обработка исключений

<?php
попробуй {
    throw new Exception("Произошло исключение");
} catch (Исключение $e) {
    error_log($e->getMessage());
}
?>

Обычное использование

Нет вывода на экран при отладке (во избежание нарушения обратной передачи JSON/API)
Записывайте действия пользователя или состояние системы
Источник ошибки отслеживания формальной среды

На что следует обратить внимание

Убедитесь, что каталог журналов имеет разрешения на запись.
Избегайте записи конфиденциальной информации (пароли, токены)
Официальная среда рекомендует закрытьdisplay_errors, просто используйтеerror_log

Журнал ошибок PHP, китайская обработка

Когда вы используете error_log() в PHP для записи строк, содержащих китайские символы, файл журнала часто отображается в шестнадцатеричной кодировке, например, в формате \xe6\xb2\x92. Обычно это не ошибка программирования, а результат того, что сервер (Apache/Nginx) заставляет экранировать символы, отличные от ASCII, по соображениям безопасности или совместимости.

Решение 1. Используйте собственную функцию журнала (наиболее рекомендуется)

Это самый простой и эффективный способ сделать это. Непосредственно манипулируя файлами, можно обойти серверный механизм фильтрации error_log().

функция write_utf8_log($message) {$log_file = DIR. '/debug.log'; $timestamp = date('Г-м-д ч: я: с'); // Используйте режим FILE_APPEND для записи необработанных байтов file_put_contents($log_file, "[$timestamp] $message" . PHP_EOL, FILE_APPEND | LOCK_EX); }

// Пример вызова $title = $_GET["title"]; write_utf8_log("Содержимое заголовка: " . $title);

Решение 2. Принудительно использовать неэкранированную кодировку Unicode.

Если вы хотите сохранить настройку пути error_log(), вы можете использовать json_encode с параметром JSON_UNESCAPED_UNICODE. Это заставит PHP выводить данные в формате UTF-8, но в некоторых серверных средах его все равно можно будет экранировать дважды.

 $title = $_GET["title"]; error_log('title: ' . json_encode($title, JSON_UNESCAPED_UNICODE));

Решение 3. Измените конфигурацию журнала сервера.

Если вы используете Apache 2.4+, вы можете попробовать изменить ErrorLogFormat, чтобы настроить поведение вывода журнала.

1. Определите формат файла конфигурации Apache (например, httpd.conf):

 ErrorLogFormat "[%t] [%l] [pid %P] %F: %E: [client %a] %M"

2. Убедитесь, что язык операционной системы поддерживает UTF-8. Измените /etc/apache2/envvars в Ubuntu:

 export LANG=en_US.UTF-8 export LC_ALL=en_US.UTF-8

Решение 4. Методы декодирования для временного просмотра

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

Терминальное мгновенное декодирование:Используйте хвост с командой sed, чтобы преобразовать \x в формат, читаемый bash.
Реле Base64:Сначала выполните base64_encode($title) в PHP, а затем запишите, а затем вручную декодируйте при просмотре, чтобы гарантировать, что данные не будут повреждены из-за экранирования.

Итоговое сравнение

метод	преимущество	недостаток
Пользовательский журнал (file_put_contents)	100% отображение на китайском языке, разрешение не требуется.	Требуется ручное управление размером файла и разрешениями.
JSON_UNESCAPED_UNICODE	Минимальные изменения кода	Все еще зависит от глобальной конфигурации сервера
Изменить конфигурацию Apache	Устраните все проблемы с системным журналом, выявив первопричину.	Требуются права администратора, перезапустите службу

Анализ имен и значений строк запроса URL-адресов

Получить строку запроса

В PHP вы можете использоватьparse_url()сочетание функцийPHP_URL_QUERYКонстанта для получения части строки запроса из полного URL-адреса. Например:

$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY); // Результат: "name=John&age=30&lang=php"

Разобрать строку запроса на пары ключ-значение

использоватьparse_str()Функция анализирует строку запроса в ассоциативный массив, где каждый набор имен и значений автоматически декодируется и преобразуется в элементы массива:

parse_str($query, $params);

в это время$paramsСодержание:

[
  "name" => "John",
  "age" => "30",
  "lang" => "php"
]

Полный пример

<?php
$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);

foreach ($params as $key => $value) {
    echo "$key = $value\n";
}
?>

Результат выполнения

name = John
age = 30
lang = php

На что следует обратить внимание

parse_url()Будет получена только часть запроса, а содержимое не будет анализироваться.
parse_str()Может обрабатывать кодировку URL, например.%20будут преобразованы в пробелы.
Использование второго аргумента для получения массива результатов позволяет избежать записи переменной в глобальное пространство имен.
Поддерживает такие форматы массивов, какtags[]=php&tags[]=htmlбудет преобразован в массив.

PHP получает содержимое определенного тега

Способ 1: используйте JavaScript

Используйте JavaScript<h1>контент, а затем отправить его на PHP:

<!DOCTYPE html>
<html lang="zh-Hant">
<голова>
<мета-кодировка="UTF-8">
<title>Получить контент H1</title>
<скрипт>
    функция sendH1Content() {
        вар h1Content = document.querySelector('h1').innerText;
        вар xhr = новый XMLHttpRequest();
        xhr.open('POST', 'process.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('h1Content=' + encodeURIComponent(h1Content));
    }

    window.onload = sendH1Content;
</скрипт>
</голова>
<тело>
<h1>Это заголовок страницы</h1>
</тело>
</html>

Сторонняя обработка PHP

существоватьprocess.phpПолучайте и обрабатывайте контент H1 в:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$h1Content = $_POST['h1Content'] ?? '';
// Обработка $h1Content, например сохранение его в базе данных или выполнение других операций
echo "Получено содержимое H1: " . htmlspecialchars($h1Content);
}
?>

Способ 2. Используйте анализ на стороне сервера.

Если HTML-файл статический, вы можете использовать PHP для чтения файла и его анализа:

<?php
$htmlContent = file_get_contents('путь/к/вашему/файлу.html');

preg_match('/<h1>(.*?)<\/h1>/', $htmlContent, $matches);
$h1Content = $matches[1] ?? '';

// обрабатываем $h1Content
echo "Содержимое H1: " . htmlspecialchars($h1Content);
?>

Подвести итог

Самый распространенный способ — использовать JavaScript для получения контента на стороне клиента и последующей отправки его в PHP для обработки через AJAX. Синтаксический анализ на стороне сервера обычно используется для статического содержимого и не рекомендуется для динамически генерируемых страниц.

Получите содержимое последнего тега на главной странице.

иллюстрировать

Сам PHP не может «напрямую» прочитать выходной HTML, поэтому вabc.phpНесколько из них были напечатаны<h2>, затем включитеsubpage.phpКогда , содержимое не может быть получено из выходного HTML. Правильный способ — ─ ** передать содержимое последнего тега <h2> в subpage.php** (переменную) из abc.php перед включением, и она будет использоваться subpage.php.

Способ 1. Передача переменных (самый лучший и наиболее часто используемый).

<!-- abc.php -->
<h2>AAA</h2>
<h2>BBB</h2>
<h2>lasth2</h2>

<?php
$last_h2 = "lasth2";
include "subpage.php";
?>

<!-- subpage.php -->
<?php
echo "Последний H2 на главной странице: " . $last_h2;
?>

Способ 2. Используйте выходной буфер для захвата выходного HTML (расширенный).

Этот метод «сначала перехватит весь вывод abc.php», проанализирует h2 внутри, а затем включит subpage.php.

<!-- abc.php -->
<?php
ob_start(); // Начинаем буферизацию
?>

<h2>ААА</h2>
<h2>BBB</h2>
<h2>last2</h2>

<?php
$html = ob_get_clean(); // Получаем весь вывод и очищаем буфер

preg_match_all('/<h2>(.*?)<\\/h2>/i', $html, $matches);
$last_h2 = end($matches[1]); //Содержимое последнего h2

включить «subpage.php»;

//Наконец распечатываем исходный HTML
эхо $html;
?>

Способ 3. Поместите все h2 в массив и укажите последний перед включением.

<!-- abc.php -->
<?php
$h2_list = ["AAA", "BBB", "lasth2"];
?>

<h2>AAA</h2>
<h2>BBB</h2>
<h2>lasth2</h2>

<?php
$last_h2 = end($h2_list);
include "subpage.php";
?>

в заключение

PHP не может получить содержимое тега непосредственно из выходного HTML, поэтому:

лучший способ: перед включением передать «содержимое последнего h2» в subpage.php как переменную.
Если вам действительно нужно получить HTML из вывода → используйтеob_start()+ Разбор регулярных выражений

PHP urlencode()

urlencode()Функция используется для URL-кодирования (процентного кодирования) строки. При передаче данных в качестве параметров URL-адреса это обязательный шаг, обеспечивающий правильную передачу и анализ всех специальных символов.

Определение и использование функции

string urlencode(string $string): string

Эта функция преобразует данную строку в безопасный для URL-адресов формат. Он заменяет все небуквенно-цифровые символы, кроме знака минус (-), итоговая строка (_), период (.) и тильда (~) снаружи.

Замененные специальные символы будут заменены знаками процентов (%), за которым следует двузначное шестнадцатеричное представление значения ASCII символа (например, пробел $\rightarrow$%20）。

Зачем необходимо кодирование URL?

Конфликты особых персонажей:Некоторые символы в URL-адресе (например,?、&、=、/) имеет особое значение. Если эти символы включены в параметры, браузер или сервер могут неправильно понять структуру URL-адреса.
Передача символов, отличных от ASCII:Символы, отличные от ASCII, такие как китайский, японский, корейский и т. д., должны быть закодированы в безопасные для URL-адреса байтовые последовательности, прежде чем их можно будет передать в URL-адресе.urlencode()Эти символы закодированы в формате UTF-8.
Обработка пространства: urlencode()преобразует пробелы в знаки плюс (+) или%20(Хотяurlencode()То, что производится,+, но в параметрах URL оба представления представляют собой пробелы).

Пример PHP-кода

Пример 1. Специальные символы и китайская кодировка.

$data = "PHP Array со скидкой 100 долларов и 50 %";
$encoded_data = urlencode($data);

echo "<h3>Специальные символы и примеры китайского языка</h3>";
echo "<p>Исходная строка: " . htmlspecialchars($данные) . "</p>";
echo "<p>Результат кодирования: " . htmlspecialchars($encoded_data) . "</p>";

// Результаты вывода аналогичны: PHP+array и +%24100+%26+50%25+offer
// (Китайский массив будет закодирован как %E9%99%A3%E5%88%97 и т. д.)

Пример 2. Создание полного URL-адреса запроса API

Предположим, вам нужно изменить строку запросаq_strНадежно добавляется к URL-адресу API.

$api_base = "http://api.example.com/search";
$search_query = "Советы по мобильной фотографии (2025 г.)";

// Обеспечиваем безопасность строки запроса
$encoded_query = urlencode($search_query);

//Создаем конечный URL
$final_url = $api_base. "?q_str=" . $ закодированный_запрос;

echo "<h3>Пример создания URL</h3>";
echo "<p>Строка запроса: " . htmlspecialchars($search_query) . "</p>";
echo "<p>Конечный URL: " . htmlspecialchars($final_url) . "</p>";

// Конечный URL аналогичен: http://api.example.com/search?q_str=%E6%89%8B%E6%A9%9F%E6%94%9D%E5%BD%B1%E6%8A%80%E5%B7%A7+%282025+%E5%B9%B4%29

Сравнение с rawurlencode()

PHP имеет еще одну похожую функциюrawurlencode(), основная разница между ними заключается в обработке пробелов:

urlencode(): Преобразовать пробелы в знаки плюс (+). Обычно это используется для кодирования значения **параметра GET** (например,?key=valueвvalueчасть).
rawurlencode(): Преобразовать пробелы в%20. Это согласуется сRFC 3986Более строгое определение, обычно используемое для кодирования **сегментов пути** (сегментов пути) URL-адреса или когда вам нужны точные%20скорее, чем+час.

Пример сравнения пространственной обработки

$space_test = "Это тест";

echo "<h3>urlencode() vs rawurlencode()</h3>";
echo "<p>urlencode(): " . urlencode($space_test) . "</p>"; // Вывод: Это+есть+тест
echo "<p>rawurlencode(): " . rawurlencode($space_test) . "</p>"; // Вывод: этот %20is%20a%20test

Буферизация вывода PHP

Введение

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

Часто используемые функции

ob_start(): Включить буферизацию вывода.
ob_get_contents(): Получить текущий буферизованный контент.
ob_end_clean(): Завершить буферизацию и очистить без вывода.
ob_end_flush(): Завершить буферизацию и вывести содержимое.
ob_get_clean(): получить содержимое и завершить буферизацию.

Пример: изменение выходного содержимого

<?php
ob_start(); // Начинаем буферизацию вывода

echo «Привет, мир!»;

$content = ob_get_clean(); // Получаем и очищаем содержимое буфера
эхо strtoupper($content); // Вывод измененного содержимого: HELLO WORLD!
?>

Пример. Вставьте единый стиль перед выводом всего содержимого.

<?php
ob_start();
Register_shutdown_function (функция () {
    $html = ob_get_clean();
    echo "<div class='container'>" . $html. "</div>";
});
?>

<h1>Название контента</h1>
<p>Это абзац содержания. </p>

использовать

Автоматически обрабатывать общий вывод HTML (например, сжатие, перенос стилей)
Предотвращайте, чтобы сообщения об ошибках мешали выводу JSON или XML.
Обработать или временно сохранить выходные данные, прежде чем решить, выводить ли их позже.
Объедините вывод и сжатие, чтобы уменьшить размер веб-страницы.

На что следует обратить внимание

При буферизации заголовок() можно вызвать после echo, поскольку вывод еще не выводится.
Избегайте использования нескольких буферов открытия и закрытия, иначе это приведет к путанице.
Если буфер не закончился, это может привести к задержкам вывода.

PHP-библиотека, которая автоматически отображает изображения справа от каждого блока h2.

Описание функции

Эта библиотека PHP перехватит весь выводимый контент страницы и автоматически найдет каждый<h2>Заголовок и блок под ним, а справа добавьте соответствующее изображение. Файлы изображений именуются по порядку.h2-1.jpg、h2-2.jpg... и так далее, его необходимо заранее поместить в назначенную папку с файлом изображения.

Как использовать

Ссылка на следующую программу в начале вашей страницы PHP (например, saveh2-image-right.php）：

<?php
ob_start();

function add_images_next_to_h2($html) {
    $pattern = '/(<h2.*?>.*?<\/h2>)(.*?)(?=<h2|\z)/is';
    $index = 1;
    return preg_replace_callback($pattern, function($matches) use (&$index) {
        $h2 = $matches[1];
        $body = $matches[2];
        $imgPath = "/images/h2-$index.jpg";
        $imgFile = $_SERVER['DOCUMENT_ROOT'] . $imgPath;

        if (file_exists($imgFile)) {
            $output = "<div style='display: flex; align-items: flex-start; gap: 20px; margin-bottom: 1.5em;'>";
            $output .= "<div style='flex: 1;'>" . $h2 . $body . "</div>";
            $output .= "<img src='$imgPath' style='max-width: 200px; height: auto; border: 1px solid #ccc;'>";
            $output .= "</div>";
        } else {
            $output = $h2 . $body;
        }

        $index++;
        return $output;
    }, $html);
}

register_shutdown_function(function() {
    $html = ob_get_clean();
    echo add_images_next_to_h2($html);
});
?>

Подготовка чертежа

Назовите соответствующие файлы изображений по порядку и сохраните их в корневом каталоге веб-сайта./images/папка, например:

/images/h2-1.jpg
/images/h2-2.jpg
/images/h2-3.jpg

Пример использования

<?php включает "h2-image-right.php"; ?>

<h2>Заголовок первого абзаца</h2>
<p>Это содержание первого абзаца. </p>

<h2>Заголовок второго абзаца</h2>
<p>Это содержание второго абзаца. </p>

На что следует обратить внимание

Порядок фотографий соответствует<h2>Пожалуйста, назовите их соответственно в порядке их появления.
Этот метод оборачивает<h2> ~ Содержание нижеЭто гибкий блок, подходящий для страниц с чистым контентом.
Если это противоречит использованию других выходных буферов, пожалуйста, не повторяйте это.ob_start()。

Проверьте, исходит ли источник трафика от ботов поисковых систем.

1. Используйте логи сервера

Проверка журналов сервера — важный способ выявления ботов поисковых систем. Вот несколько примеров User-Agent для роботов поисковых систем:

Googlebot: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Bingbot: Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)
Baidu Spider: Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)

2. Используйте файл robots.txt.

Проверьте сайтrobots.txtФайл, который позволяет узнать, каким роботам поисковых систем разрешен или запрещен доступ к определенным частям вашего веб-сайта. Например:

User-agent: * 
Disallow: /private/

3. Определите IP-адрес

Боты поисковых систем обычно имеют IP-адреса из определенного диапазона. Вы можете сравнить, попадает ли IP-адрес посетителя в эти диапазоны. Например:

Диапазон IP-адресов робота Googlebot
Диапазон IP-адресов Bingbot

Инструменты можно использовать для проверки того, действительно ли IP-адрес посетителя получен из поисковой системы.

4. Используйте внутренний код для принятия решений

Ниже приведен пример использования PHP на стороне сервера для проверки User-Agent:

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'Googlebot') !== false) {
    echo «Это трафик Googlebot»;
} еще {
    echo «Это не трафик поисковых роботов»;
}
?>

5. Инструменты мониторинга и анализа

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

Хэш-значение URL-адреса

1. Определение

Хэш-значение URL-адреса относится к части URL-адреса после символа «#», также известной как идентификатор фрагмента (идентификатор фрагмента). Обычно он используется для определения местоположения или состояния на странице.

2. Цель

Перейдите к определенному месту на веб-странице, например к привязке.
Представляет состояние приложения, например маршрут для одностраничного приложения (SPA).
Используется для хранения состояния пользовательского интерфейса, например условий фильтра или положения прокрутки.

3. Пример

Вот несколько распространенных примеров хеша URL-адреса:

Якорная навигация:https://example.com/page#section1
Маршрут СПА:https://example.com/app#/dashboard
Сохранение статуса:https://example.com/search#filter=active

4. Принцип работы

Когда браузер встречает хэш-значение в URL-адресе, он не отправляет эту часть данных на сервер.
Хэш-значения обрабатываются клиентом (обычно JavaScript) и используются для запуска определенной логики или действий.
В HTML хеш можно использовать для поискаid。

5. Меры предосторожности

Хэш не влияет на HTTP-запросы, поэтому его можно изменять динамически без перезагрузки страницы.
В SPA приложениям необходимо вручную анализировать и обрабатывать значения Hash для реализации функций маршрутизации.
Избегайте слишком сложного проектирования хэш-значений и сохраняйте структуру простой и понятной.

Получить хэш-значение URL-адреса

Пример JavaScript

<скрипт>
  // Получаем хеш-значение URL-адреса
  const hashValue = window.location.hash.substring(1);

  //Отображение хеш-значения
  console.log("Хеш-значение:", hashValue);
</скрипт>

Пример PHP

<?php
// Фейковый URL
$url = "http://example.com/page#section2";

// Используйте parse_url для анализа хеш-значений
$parsedUrl = parse_url($url);
$hash = isset($parsedUrl['фрагмент']) ? $parsedUrl['фрагмент']: ноль;

// Выходное хэш-значение
если ($хеш) {
    echo "Значение хеша: " . htmlspecialchars($hash, ENT_QUOTES, 'UTF-8');
} еще {
    echo "В URL-адресе нет хеша.";
}
?>

На что следует обратить внимание

JavaScript может напрямую получить значение хеш-функции текущей страницы, используяwindow.location.hash。
Сервер не может напрямую получить хэш URL-адреса, и его необходимо отправить на сервер через JavaScript.

Ссылка на определенный тег без использования идентификатора

Метод 1: Используйте`name`свойство

Несмотря на то, что он используется реже, можноnameДобавить атрибут<a>тег и поместите его перед целевым тегом.

<a name="специфический-заголовок1"></a>
<h3>Целевой заголовок 1</h3>

<a href="#specific-heading1">Ссылка на конкретный заголовок</a>

Эффект:

Название цели 2

Ссылка на конкретный заголовок

Метод 2: Используйте`data-attribute`С помощью JavaScript

Устанавливая пользовательские свойства, такие какdata-anchorи используйте JavaScript для обработки поведения перехода.

<h3 data-anchor="heading-1">Целевой заголовок 3</h3>

<a href="#" onclick="jumpToHeading('heading-1')">Ссылка на конкретный заголовок</a>

<скрипт>
  функция jumpToHeading(якорь) {
    const target = document.querySelector(`[data-anchor="${anchor}"]`);
    если (цель) {
      target.scrollIntoView({ поведение: 'smooth' });
    }
  }
</скрипт>

Эффект:

Название гола 4

Ссылка на конкретный заголовок

Способ 3: Используйте`h2`текстовый контент с помощью JavaScript

по поискуh2текстовое содержимое для таргетинга, используя JavaScript для динамического таргетинга на цель.

<h3>Целевой заголовок 5</h3>

<a href="#" onclick="jumpToText('Target Title')">Ссылка на конкретный заголовок</a>

<скрипт>
  функция jumpToText(текст) {
    const target = Array.from(document.querySelectorAll('h2')).find(el => el.textContent === text);
    если (цель) {
      target.scrollIntoView({ поведение: 'smooth' });
    }
  }
</скрипт>

Эффект:

Название гола 6

Ссылка на конкретный заголовок – целевой заголовок 6.

cURL

использовать

cURL — это библиотека, используемая в PHP для отправки HTTP-запросов. Он поддерживает GET, POST, PUT, DELETE и другие методы и часто используется для доступа к данным API.

Основные шаги

инициализация:curl_init()
Опции настройки:curl_setopt()
Выполнить запрос:curl_exec()
Закройте соединение:curl_close()

ПОЛУЧИТЬ пример

<?php
$url = "https://api.example.com/data";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

POST-пример

<?php
$url = "https://api.example.com/post";
$data = ['name' => 'Test', 'email' => '[email protected]'];
$ch = curl_init($url);
Curl_setopt ($ ch, CURLOPT_POST, правда);
Curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
Curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, правда);
$response = curl_exec($ch);
локон_закрыть ($ ч);
эхо $ответ;
?>

Плюс заголовки с JSON

<?php
$url = "https://api.example.com/json";
$data = json_encode(['id' => 123]);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json',
  'Content-Length: ' . strlen($data)
]);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

Общие варианты

CURLOPT_URL: Установить целевой URL
CURLOPT_RETURNTRANSFER: возвращать ли результат (не выводить напрямую)
CURLOPT_POSTFIELDS:Отправленная информация
CURLOPT_HTTPHEADER: Пользовательские заголовки HTTP.

Обработка ошибок

<?php
если (curl_errno ($ ch)) {
  эхо 'Ошибка:'. Curl_error ($ ч);
}
?>

PHP проверить сетевой порт

В PHP проверьте, прослушивается ли определенный сетевой порт (Порт), обычно чтобы убедиться, что локальная или удаленная служба работает и принимает соединения. Самый распространенный метод — использовать функции, связанные с сокетами, чтобы попытаться установить TCP-соединение.

Используйте функцию fsockopen() (рекомендуется для удаленной проверки).

fsockopen()Функция используется для открытия сетевого подключения или соединения сокета домена Unix. Если соединение успешное, это означает, что порт прослушивается; если соединение не установлено, это обычно означает, что порт не открыт или заблокирован брандмауэром.

Пример PHP-кода

/**
 * Проверьте, прослушивается ли порт на указанном IP/имени хоста
 *
 * @param string $host Имя хоста или IP-адрес для проверки.
 * @param int $port Номер порта, который необходимо проверить.
 * @param int $timeout Таймаут соединения (секунды)
 * @return bool Если соединение успешное, верните true; в противном случае верните ложь
 */
function is_port_listening(string $host, int $port, int $timeout = 2): bool {
    // Устанавливаем соединение Socket. Символ @ используется для подавления сообщений об ошибках соединения.
    $connection = @fsockopen($host, $port, $errno, $errstr, $timeout);

    если (is_resource($connection)) {
        // Если $connection является типом ресурса, это означает, что соединение успешно
        fclose($соединение); //Закрываем соединение сразу после успеха
        вернуть истину;
    } еще {
        // Соединение не удалось. Возможно, порт не открыт или служба не запущена.
        // Необязательно: вы можете напечатать здесь $errstr и $errno для отладки
        // echo "Соединение не удалось: $errstr ($errno)<br>";
        вернуть ложь;
    }
}

// --- Тестовый пример ---
$remote_host = 'www.google.com';
$remote_port = 80; // Проверяем HTTP-порт Google

$local_host = '127.0.0.1';
$local_web_port = 80; // Проверяем порт локального веб-сервера
$ незанятый_порт = 65432; // Предположим, что этот порт не используется

echo "<h3>Результаты проверки мониторинга портов</h3>";

// Проверяем удаленный сервис
если (is_port_listening($remote_host, $remote_port)) {
    echo "<p>{$remote_host}: {$remote_port} прослушивает (соединение успешно).</p>";
} еще {
    echo "<p>{$remote_host}:{$remote_port} не открыт или соединение не установлено.</p>";
}

// Проверка локального веб-сервера (если ваш веб-сервер работает на порту 80)
если (is_port_listening($local_host, $local_web_port)) {
    echo "<p>{$local_host}:{$local_web_port} прослушивает (веб-сервер работает).</p>";
} еще {
    echo "<p>{$local_host}:{$local_web_port} не слушает.</p>";
}

// Проверяем наличие незанятого порта
if (is_port_listening($local_host, $unoccupied_port)) {
    echo "<p>{$local_host}: {$unoccupied_port} прослушивает.</p>";
} еще {
    echo "<p>{$local_host}:{$unoccupied_port} не прослушивается (ожидаемый результат).</p>";
}

Использование библиотеки Socket (управление нижнего уровня)

Если вам нужны операции Socket более низкого уровня (например, параметры настройки, неблокирующий режим и т. д.), вы можете использовать библиотеку функций Socket PHP (необходимо включитьphp_socketsрасширение).

функция is_port_listening_socket(строка $host, int $port): bool {
    // Создаем сокет TCP/IP
    $socket = @socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

    если ($socket === ложь) {
        // echo "Ошибка создания сокета: " . сокет_strerror(socket_last_error()) . "<br>";
        вернуть ложь;
    }

    //Попробуем подключиться
    // Socket_connect() попытается установить соединение на указанном хосте и порту
    $result = @socket_connect($socket, $host, $port);

    сокет_закрыть ($ сокет);

    return ($result!== false);
}

Примечания и ограничения

Таймаут соединения (Таймаут):Обязательно установите разумную$timeoutзначение (например, 2–5 секунд). Без этого параметра ваш скрипт может блокироваться на долгое время, когда целевой хост недоступен.
Брандмауэр:Если вы проверите удаленный порт, даже если служба запущена, если брандмауэр целевого сервера блокирует ваше соединение,fsockopen()Это все равно потерпит неудачу.
`allow_url_fopen`： fsockopen()Функции обычно не включаются в файлы конфигурации PHP.allow_url_fopenОграничение команды, поскольку она работает непосредственно с сетевыми сокетами.
Проверка локального порта:Чтобы проверить, прослушивает ли собственный сервис, вы обычно$hostустановлен на127.0.0.1илиlocalhost。

PHP получает результаты веб-API

В PHP, чтобы получить результаты веб-API и проанализировать JSON, вы обычно используетеfile_get_contents()или библиотеку cURL для отправки HTTP-запросов, а затем используйтеjson_decode()Функция для анализа возвращаемой строки JSON.

Используйте file_get_contents() для получения результатов API.

Для простого запроса GET:file_get_contents()это быстрый метод. Но если API требует определенных HTTP-заголовков или более сложных запросов, больше подойдет cURL.

Пример PHP-кода (GET-запрос)

$api_url = 'https://jsonplaceholder.typicode.com/posts/1'; // Пример URL-адреса API

// Получаем содержимое, возвращаемое API (строка формата JSON)
$json_data = @file_get_contents($api_url);

если ($json_data === ЛОЖЬ) {
    echo «Невозможно получить данные API или не удалось выполнить запрос API.»;
} еще {
    // Разбираем строку JSON в массив или объект PHP
    // Для второго параметра установлено значение true, и он будет преобразован в ассоциативный массив.
    // Установите значение false (по умолчанию) для анализа объекта.
    $data = json_decode($json_data, true);

    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        echo "Ошибка анализа JSON:" .json_last_error_msg();
    } еще {
        echo "<h3>API возвращает данные (связанный массив)</h3>";
        //Пример: доступ к определенным полям данных
        echo "<p>title (заголовок): " . htmlspecialchars($data['title']) . "</p>";
        echo "<p>Содержимое (тело): " . htmlspecialchars($data['body']) . "</p>";

        // Выводим полную структуру для проверки
        echo "<h4>Полная структура данных (print_r)</h4>";
        эхо "<pre>";
        print_r ($ данные);
        эхо "</pre>";
    }
}

Используйте cURL для получения результатов API (подходит для сложных запросов)

cURL обеспечивает больше контроля, например настройку методов запроса (POST, PUT, DELETE), заголовков, таймаутов и т. д.

Пример кода PHP (запрос cURL GET)

$api_url = 'https://jsonplaceholder.typicode.com/posts/2';

//Инициализируем сеанс cURL
$ch = Curl_init();

//Устанавливаем параметры cURL
Curl_setopt ($ ch, CURLOPT_URL, $ api_url);
Curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, правда); // Возвращаем результат в виде строки вместо того, чтобы выводить его напрямую

//Выполняем сеанс cURL и получаем результаты
$json_data = curl_exec($ch);

// Проверяем, произошла ли ошибка
если (curl_errno($ch)) {
    echo «Ошибка cURL:». Curl_error ($ ч);
    $данные = ноль;
} еще {
    // Анализ JSON
    $data = json_decode($json_data, true);
    
    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        echo "Ошибка анализа JSON:" .json_last_error_msg();
    }
}

// Закрываем сессию cURL
локон_закрыть ($ ч);

если ($ данные !== ноль) {
    echo "<h3>API возвращает данные (пример cURL)</h3>";
    echo "<p>title (заголовок): " . htmlspecialchars($data['title']) . "</p>";
    echo "<p>Идентификатор пользователя (userId): " . htmlspecialchars($data['userId']) . "</p>";
}

Функция анализа JSON: json_decode()

json_decode($json_string, $associative)

$json_string: строка формата JSON для анализа.
$associative: Значение Боллинджера. если дляtrue, затем верните связанный массив; еслиfalse(по умолчанию), объект возвращается.

Асинхронное выполнение PHP exec()

PHPexec()функция иshell_exec()、system()Аналогичным образом, это, по сути, синхронная блокировка, то есть сценарий PHP будет ждать завершения внешней команды, прежде чем продолжить. Чтобы выполнять внешние команды без блокировки основной программы PHP (реализуя «асинхронное» или «фоновое выполнение»), мы должны полагаться на особенности самой оболочки для разделения команд.

Основной принцип реализации асинхронного exec()

Ключом к достижению неблокирующего выполнения является передачаexec()Добавьте специальный синтаксис Shell в командную строку:

**Символ фонового выполнения&:** Это основной символ для перевода команд в фоновое выполнение.
**Перенаправление вывода> /dev/null 2>&1:** Это ключ к предотвращению блокировки PHP. Он перенаправляет стандартный вывод (STDOUT) и стандартный вывод ошибок (STDERR) на пустое устройство./dev/null. Без перенаправления, даже если использовать&символ, некоторые версии PHP все еще могут ожидать закрытия потока ввода-вывода, вызывая ложную блокировку.
**Процесс отсоединенияnohup(Необязательно, но рекомендуется): ** В системах Linux/Unix используйтеnohupЭто гарантирует, что процесс продолжит работу после завершения работы веб-сервера, например, когда HTTP-запрос завершается или пользователь закрывает браузер.

Пример кода PHP (Linux/Unix-подобные системы)

Пример 1. Базовое асинхронное выполнение

Этот пример подходит для кратковременных фоновых задач, которые не нужно запускать после завершения HTTP-запроса.

$command_to_run = 'php /path/to/my_long_task.php arg1 arg2';

// Объединяем неблокирующие команды
// 1. Сама команда
// 2. Направляем STDOUT в /dev/null
// 3. Направляем STDERR (2) в STDOUT (&1)
// 4. Используйте символ &, чтобы сдвинуть фон
$async_command = $command_to_run. ' > /dev/null 2>&1 &';

$выход = [];
$return_var = 0;

//Выполняем неблокирующие команды
exec($async_command, $output, $return_var);

echo "<h3>Результат асинхронного выполнения (exec)</h3>";
echo "<p>Команда отправлена на фоновое выполнение.</p>";
echo "<p>PHP-скрипты продолжат выполнение немедленно и не будут ждать завершения внешних скриптов.</p>";
echo "<p>Выходной массив (\$output), возвращаемый exec(), будет почти пуст.</p>";

Пример 2. Используйте nohup для разделения процессов (рекомендуется для длительных задач)

В этом примере используетсяnohupЧтобы гарантировать, что фоновая задача полностью отделена от родительского процесса веб-сервера PHP, задача будет продолжать выполняться, даже если веб-сервер выключен.

$command_to_run = '/usr/bin/python3 /path/to/process_data.py';
$log_file = '/var/log/my_app/task_log.log'; // Специальный файл журнала

// Убедитесь, что параметры команды правильно экранированы, чтобы предотвратить атаки с внедрением оболочки
$safe_command = escapeshellcmd($command_to_run);

// Прямой вывод и вывод ошибок в файл журнала вместо /dev/null
$detached_command = 'nohup'. $безопасная_команда. ' >> ' . escapeshellarg($log_file) . ' 2>&1 &';

exec($detached_command);

echo "<h3>Используйте nohup, чтобы отсоединить процесс</h3>";
echo "<p>Команда была запущена с использованием nohup и направила вывод в файл журнала.</p>";
echo "<p>Задача будет продолжать выполняться в фоновом режиме до завершения.</p>";

Соображения безопасности: экранирование команд и параметров

Безопасность является наиболее важным фактором при выполнении внешних команд. **Никогда** не передавайте несанкционированный или экранированный пользовательский ввод вexec()или другие исполняемые функции оболочки. PHP предоставляет две функции для помощи в обработке:

escapeshellcmd($command): экранируйте **всю командную строку**, чтобы злоумышленники не могли вставить несколько команд.
escapeshellarg($arg):Escape **один параметр**, чтобы гарантировать, что параметр обрабатывается как одна строка.

$user_input = "тест; rm -rf /"; // Потенциально вредоносный ввод

// Ошибка: небезопасная практика
// exec('my_script.sh' . $user_input);

// Правильно: безопасный подход
$safe_input = escapeshellarg($user_input);
$safe_command = 'my_script.sh'. $safe_input;
//Результат выполнения: my_script.sh 'test; rm -rf /' (рассматривается как один параметр)

PHP вызывает Python

концепция

PHP может выполнять программы Python с помощью системных команд и получать выходные данные. Обычно используемые методы включают в себя:

exec()
shell_exec()
passthru()
proc_open()(Передовой)

Основное использование: Shell_exec

<?php
$cmd = "python3 myscript.py 123";
$output = shell_exec($cmd);
echo $output;
?>

Передать параметры

<?php
$arg1 = 100;
$arg2 = "hello";

$cmd = "python3 script.py " . escapeshellarg($arg1) . " " . escapeshellarg($arg2);
$result = shell_exec($cmd);

echo $result;
?>

Пример Python

#script.py
импортсистем
а = sys.argv[1]
б = sys.argv[2]
print(f"Входные параметры: {a}, {b}")

Получить многострочный вывод Python: exec

<?php
exec("python3 test.py", $output_lines, $status);

echo "<pre>";
print_r($output_lines);
echo "</pre>";
?>

Дополнительно: используйте proc_open для управления стандартным вводом/выводом.

<?php
$дескриптор = [
    0 => ["труба", "р"],
    1 => ["труба", "ш"],
    2 => ["труба", "ш"]
];

$process = proc_open("python3calc.py", $descriptor, $pipes);

если (is_resource($process)) {
    fwrite($pipes[0], "50\n");
    fclose($pipes[0]);

    $output =stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    $error =stream_get_contents($pipes[2]);
    fclose($pipes[2]);

    proc_close($процесс);

    echo "Вывод: $output<br>";
    echo "Ошибка: $error<br>";
}
?>

На что следует обратить внимание

PHP должен иметь возможность найти python3, и можно установить абсолютный путь, например:/usr/bin/python3илиC:\\Python39\\python.exe
использоватьescapeshellarg()Запретить внедрение команд
В системах Windows обратите внимание на добавление двойных кавычек в путь.
Если требуются длительные операции, рекомендуется использовать очередь или фоновое выполнение (например, systemd/supervisor)

предположение

Если вам нужно:

PHP вызывает Python для выполнения расчетов AI/ML
Двусторонняя связь (PHP ↔ Python)
Резидентная программа Python для запросов PHP

Рассмотрите Flask API или FastAPI, чтобы PHP мог вызывать Python через HTTP (наиболее стабильный подход).

PHP-GTK

Введение

PHP-GTK — это расширение PHP, которое позволяет разработчикам использовать PHP для создания настольных приложений (GUI). Он основан на библиотеке графических инструментов GTK+ и расширяет возможности PHP от простого серверного языка веб-интерфейса до разработки настольных приложений.

особенность

Используйте PHP для написания кроссплатформенных настольных приложений.
Поддерживает компоненты графического интерфейса, такие как кнопки, текстовые поля, раскрывающиеся меню, таблицы и т. д.
Может комбинироваться с существующими библиотеками функций PHP, такими как доступ к базе данных, обработка строк и сетевые функции.
Кроссплатформенность, поддержка Windows, Linux (среда GTK+).

Способ установки

Windows: загрузите двоичный пакет PHP-GTK, разархивируйте его и используйте.
Linux: вам необходимо установить GTK+, а затем скомпилировать PHP-GTK из исходного кода.
Проверьте установку: выполнитеphp -mПодтвердить загрузкуphp-gtkМоды.

Пример программы

<?php
если (!class_exists('gtk')) {
    die("PHP-GTK не установлен\n");
}

$window = новый GtkWindow();
$window->set_title("Пример PHP-GTK");
$window->set_size_request(300, 200);
$window->connect_simple('destroy', array('Gtk', 'main_quit'));

$button = new GtkButton("Нажмите на меня");
$button->connect_simple('нажал', function() {
    echo "Кнопка нажата!\n";
});

$window->add($button);
$window->show_all();

Gtk::main();
?>

предел

PHP-GTK уже много лет не обновляется и в настоящее время не требует особого обслуживания.
Не подходит для больших или высокопроизводительных настольных приложений.
Поддерживается только GTK+ 2, но не GTK+ 3 или 4.

Применимые ситуации

Изучите графический интерфейс и программирование, управляемое событиями.
Простые настольные инструменты, такие как гаджеты управления базами данных.
Хотите быстро разрабатывать настольные приложения с использованием синтаксиса PHP.

Альтернативы разработке графического интерфейса PHP

текущая ситуация

PHP-GTK не обновлялся в течение многих лет, не требует особого обслуживания и поддерживает только старую версию GTK+, что делает его непригодным для разработки современных настольных приложений. Если вы хотите разработать графический интерфейс рабочего стола на PHP, рекомендуется рассмотреть следующие альтернативы.

альтернативы

Electron + PHPиспользоватьElectron(На основе Chromium и Node.js) Создайте графический интерфейс рабочего стола, и серверная часть по-прежнему сможет вызывать программы PHP. Это позволяет создавать красивые кроссплатформенные приложения с использованием HTML/CSS/JavaScript и взаимодействовать с PHP через API.
NW.jsПодобно Electron, настольные приложения разрабатываются с использованием веб-технологий и могут сочетаться с PHP в качестве серверных вычислений.
PHP + веб-браузер (локальное веб-приложение)Запустите встроенный сервер PHP на рабочем столе (php -S localhost:8000), Затем с помощью браузера откройте страницу, и она будет выглядеть как настольное приложение. С помощью PWA (Progressive Web App) его также можно установить в виде значка на рабочем столе.
GUI Framework для других языковЕсли целью является настольное приложение, а не сам PHP, рассмотрите:
- Python + PyQt / Tkinter / Kivy
- Java + JavaFX / Swing
- C# + WinForms / WPF / .NET MAUI
Они более стабильны и постоянно поддерживаются, чем PHP-GTK.

предположение

Если вы настаиваете на использовании PHP, лучшим решением будетElectron/NW.js + PHP, Интерфейс построен с использованием веб-технологий, а серверная часть продолжает использовать PHP, что делает его кроссплатформенным и современным.
Если принимаются другие языки, вместо них рекомендуется использовать Python или C#, что обеспечит лучшую поддержку в области разработки настольных компьютеров.

одностраничное приложение

Одностраничное приложение (SPA) — это веб-приложение или модель веб-сайта, которое взаимодействует с пользователями путем динамического переписывания текущей страницы вместо загрузки с сервера целиком новой страницы. Такой подход позволяет избежать перерывов между переключениями страниц и приближает взаимодействие с пользователем к настольному приложению.

Различия между SPA и традиционными многостраничными приложениями (MPA)

В традиционной модели при каждом нажатии ссылки с сервера запрашивается новый HTML-файл; в SPA необходимые HTML, CSS и JavaScript загружаются только при первой загрузке, а последующий обмен данными осуществляется через AJAX или Fetch API.

характеристика	SPA (одностраничное приложение)	MPA (многостраничное приложение)
Загрузка страницы	Загружать только один раз, частично обновлено	Перезагружайте всю страницу при каждой операции
Пользовательский опыт	Гладкая, без ощущения прыжка	Очевидный белый экран и ощущение ожидания
Нагрузка на сервер	Нижний (передаёт только данные JSON)	Выше (HTML должен отображаться каждый раз)
SEO-оптимизация	Более сложный и требует дополнительной обработки	Легко и естественно для поисковых систем

Основные компоненты SPA

Внешняя маршрутизация (Маршрутизация):Хотя существует только один файл HTML, JavaScript используется для отслеживания изменений URL-адресов (Hash или History API) и динамического отображения соответствующих компонентов.
Государственное управление:Обменивайтесь данными (например, статусом входа пользователя, содержимым корзины покупок) между различными компонентами.
Динамический рендеринг:Используйте такие платформы, как Vue, React или Angular, чтобы мгновенно обновлять структуру DOM в зависимости от изменений данных.

Простой пример логики маршрутизации SPA

Это не зависит от платформы и использует только собственный JavaScript для имитации логики переключения содержимого SPA:

<!-- index.html -->
<навигация>
  <a href="#home" onclick="route()">Домашняя страница</a>
  <a href="#trading" onclick="route()">Торговые графики</a>
</навиг>

<div id="content">
  <!-- Сюда будет добавлен динамический контент -->
</div>

<скрипт>
  константные маршруты = {
    "#home": "<h2>С возвращением</h2><p>Это ваша панель управления.</p>",
    "#trading": "<h2>Котировки в реальном времени</h2><div id='tv-container'>Загрузка графика...</div>"
  };

  функция маршрут() {
    константный хеш = window.location.hash || "#дом";
    const contentDiv = document.querySelector("#content");
    contentDiv.innerHTML = маршруты [хэш];

    // Если вы переключитесь на торговую страницу, вы можете инициализировать предыдущий виджет TradingView здесь
    if (хэш === "#trading") {
      // initTradingView();
    }
  }

  // Отслеживание изменений URL
  window.addEventListener("hashchange", маршрут);
  // начальная загрузка
  маршрут();
</скрипт>

Преимущества и недостатки СПА

преимущество:Высокая скорость, уменьшенное потребление полосы пропускания и отдельная разработка внешнего и внутреннего интерфейса (внутренняя часть должна предоставлять только API).
недостаток:Начальное время загрузки велико (первая загрузка), и SEO необходимо компенсировать с помощью SSR (серверный рендеринг) или технологии предварительного рендеринга.

платформа одностраничных приложений

При разработке одностраничного приложения (SPA) выбор подходящего фреймворка может значительно повысить эффективность разработки и удобство сопровождения кода. На текущем рынке доминируют три основные платформы, среди которых появляется много многообещающих.

React

Разработанная и поддерживаемая Meta (Facebook), в настоящее время это наиболее используемая библиотека функций пользовательского интерфейса в мире. Он представляет Virtual DOM (Virtual DOM) и синтаксис JSX, подчеркивая компонентизацию и односторонний поток данных.

преимущество:Экосистема чрезвычайно велика, ресурсы сообщества обильны, а спрос на рынке труда огромен.
Часто используемые комбинации:React Router (маршрутизация), TanStack Query (сбор данных), Zustand/Redux (управление состоянием).

Vue.js

Разработанный Ю Юйси, он известен своей «прогрессивной» структурой. Его кривая обучения относительно щадящая, и официальный поставщик предоставляет очень полную цепочку инструментов, которая очень подходит для проектов, ориентированных на эффективность разработки.

преимущество:Высокая привязка файлов, двусторонняя привязка данных и интуитивно понятный синтаксис.
Часто используемые комбинации:Vue Router (маршрутизация), Pinia (управление состоянием), Vite (инструмент построения).

Angular

Полная структура, поддерживаемая Google и написанная на TypeScript. Он предоставляет решение «Семейное ведро», включающее все необходимые функции, такие как маршрутизация, проверка форм и HTTP-клиенты.

преимущество:Строгая архитектура подходит для крупномасштабных проектов уровня предприятия и имеет встроенную систему внедрения зависимостей (DI).
Часто используемые комбинации:RxJS (реактивное программирование).

Новые и легкие решения

В дополнение к трем вышеупомянутым основным платформам в последние годы появилось множество альтернатив оптимизации производительности:

Имя кадра	Функции
Svelte	Никакого виртуального DOM, программный код преобразуется в эффективный собственный JS на этапе компиляции.
SolidJS	Похож на синтаксис React, но с максимальной производительностью.
Preact	Облегченная версия React, размером всего около 3 КБ и обладающая высокой совместимостью.

Как выбрать?

При выборе фреймворка обычно рекомендуется учитывать следующие критерии:

Размер проекта:Angular или React предпочтительнее для крупных корпоративных проектов; Vue или Svelte рекомендуются для небольших и средних проектов или быстрого прототипирования.
Опыт команды:Если команда знакома с шаблонами HTML, начать работу с Vue будет проще; если вы предпочитаете строгую типизацию и архитектуру, Angular — хороший выбор.
Ремонтопригодность:Сообщества React и Vue сильны, поэтому в будущем будет удобнее обращаться за поддержкой к сторонним пакетам.

Решения одностраничных приложений для Python

В экосистеме Python решения для разработки SPA (одностраничных приложений) в основном делятся на две категории: одна использует Python в качестве внутреннего API, а другая использует специальную структуру, которая позволяет разработчикам автоматически генерировать интерфейсный интерфейс с функциями SPA, просто написав код Python.

1. Наука о данных и быстрое прототипирование (UI-as-code)

Эти платформы являются наиболее популярными, поскольку они не требуют от разработчиков знаний HTML/CSS/JS для мгновенной разработки интерактивных одностраничных веб-страниц.

Streamlit：Текущий мейнстрим в науке о данных. Он выполняет сценарий сверху вниз, и любые изменения параметров вызывают локальные обновления. Подходит для быстрого создания информационных панелей данных.
Gradio：Специально разработан для отображения моделей машинного обучения. Интерфейс имеет высокую степень компонентизации и особенно хорошо справляется с взаимодействием между изображением, голосовым вводом и выводом модели.
Dash (by Plotly)：На основе Flask и React. Dash — самый мощный инструмент для приложений с данными корпоративного уровня, которым требуются индивидуально настраиваемые и сложные диаграммы.

2. Полноценное веб-приложение (Modern Full-stack).

Этот тип фреймворка пытается бросить вызов традиционной модели React/Vue + FastAPI и сделать полноценную разработку более унифицированной.

Имя кадра	Функции	Техническая архитектура
Рефлекс (ранее известный как Pinecone)	Написан на чистом Python и скомпилирован в приложение React.	Python + Next.js / Tailwind
NiceGUI	Чрезвычайно простой синтаксис, подходящий для управления оборудованием, гаджетами или простыми веб-страницами.	Python + Vue / Quasar
Flet	Платформа Python, основанная на Flutter, которую можно публиковать одновременно как веб-SPA и настольное приложение.	Python + Flutter

3. Традиционное решение серверного API (разделенная архитектура)

Это наиболее стандартная модель разработки коммерческого программного обеспечения. Python отвечает только за логику и данные, а интерфейс остается на усмотрение профессиональной среды JavaScript.

// Диаграмма архитектуры
Бэкэнд (Python): FastAPI/Django Ninja/Flask
Транспортный протокол: RESTful API или WebSocket.
Интерфейс (JavaScript): Vue.js/React/Svelte (отвечает за рендеринг SPA)

4. Решение HTMX (минималистичный опыт SPA)

Это очень популярная тенденция последних лет. HTMX позволяет традиционным веб-фреймворкам Python (таким как Django или Flask) достигать эффекта частичного обновления страницы AJAX без написания сложного JavaScript.

# Пример Django + HTMX (кнопка частичного обновления)
# После нажатия будет заменена только область #result, а веб-страница не обновится.
<button hx-post="/get-data/" hx-target="#result">
    Нажмите меня, чтобы получить данные
</кнопка>
<div id="result">Ожидание...</div>

Выберите предложения

Если вы специалист по данным:выбиратьStreamlitилиGradio。
Если вы хотите разрабатывать красивые веб-страницы на чистом Python:выбиратьReflex。
Если вы стремитесь к максимальной производительности и кроссплатформенности:выбиратьFlet。
Если вы хотите обновить свой традиционный веб-сайт самым простым способом:выбиратьHTMX。

Решения для одностраничной веб-разработки за пределами JavaScript и Python

1. Современное решение для улучшения HTML (HTMX/Alpine.js).

Основная концепция этого типа решения — «возврат к HTML». Они утверждают, что нет необходимости писать сложные JavaScript-фреймворки для достижения динамических эффектов SPA.

HTMX：Отправляйте запросы AJAX напрямую через атрибуты HTML и заменяйте частичный контент. Он позволяет бэкэндам (независимо от языка) напрямую возвращать фрагменты HTML вместо JSON.
Alpine.js：Известен как «Tailwind CSS для Интернета». Пишите простую логику непосредственно в HTML-тегах, что идеально подходит для статических страниц, не требующих минимального взаимодействия.

2. Решение WebAssembly (Wasm)

WebAssembly позволяет разработчикам писать логику на стороне браузера, используя высокопроизводительные языки, такие как C++, Rust или Go, нарушая монополию JavaScript.

язык	основная рама	особенность
C# / .NET	Blazor WebAssembly	Разрешить .NET-разработчикам писать интерфейсные части на C# вместо JS.
Rust	Yew / Leptos	Экстремальная производительность исполнения и строгая типобезопасность.
Go	Hugo / TinyGo	Компиляция происходит чрезвычайно быстро и подходит для выполнения логически сложных операций.

3. Генерация статического сайта (SSG)

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

Astro：Современные представители SSG принимают «архитектуру архипелага» и загружают JS только в тех частях, которые требуют взаимодействия.
Eleventy (11ty)：Минималистичный и гибкий, он поддерживает несколько языков шаблонов.

4. Кроссплатформенное решение пользовательского интерфейса (Flutter для Интернета)

Решение, запущенное Google, использует язык Dart. Он не использует стандартный путь рендеринга HTML/CSS, а рисует весь интерфейс через Canvas.

// Пример логики флаттера
недействительный основной () {
  runApp(const MyApp());
}
// Интерфейс полностью нарисован с помощью Canvas, который подходит для трансплантации приложений с высокой визуальной согласованностью.

5. Низкий код/без кода

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

Appsmith / Budibase：Быстро создавайте серверную часть управления, перетаскивая компоненты и подключаясь к базе данных.
Webflow：Предоставляет дизайнерам визуальный интерфейс для непосредственного создания высококачественных веб-страниц.

Сводка сравнения решений

план	Применимые ситуации	Технический порог
HTMX	Обновление традиционных веб-сайтов с ощущением интерактивности	Низкий (требуется только серверный язык)
WebAssembly	Обработка изображений, сложные операции, игры	Высокий (требуется основа языка компиляции)
Astro (SSG)	Блог, документы, официальный сайт	середина
Flutter for Web	Приложение публикуется одновременно на веб-странице	Средний (требуется Дарт)

Самоинкапсулируемое веб-приложение

Основное введение

Традиционные веб-архитектуры, такие как PHP + JavaScript, обычно используются при развертывании на стороне сервера, но не могут эффективно предотвратить доступ или копирование исходного кода, поэтому они не подходят для коммерческого лицензирования и развертывания в ненадежных средах. Для решения этой проблемы возникла архитектура «Самостоятельное веб-приложение». Он компилирует внутреннюю логику в нечитаемый исполняемый файл и имеет встроенные возможности службы HTTP, позволяя интерфейсной части по-прежнему взаимодействовать с HTML/JS, в то время как серверная часть может реализовывать шифрование, безопасность, контроль авторизации и другие требования.

преимущество

Серверная программа может быть инкапсулирована в нечитаемый исполняемый файл (двоичный) для защиты исходного кода.
Система управления лицензиями может быть интегрирована для предотвращения несанкционированного использования.
Может быть развернут на разных платформах как локальная служба или настольное приложение.
Интерфейс по-прежнему разрабатывается с использованием стандартных веб-технологий с низкими затратами на обучение.

недостаток

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

Применимые ситуации

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

Сравнительная таблица технологий (отсортированная по доле рынка/коэффициенту использования)

имя	Использовать язык	Поддерживать ли управление лицензиями	Поддерживает ли он C#?	Может создавать двоичные файлы	подходит для цели	Уровень использования/доля рынка
Electron	JavaScript + Node.js	Может использоваться с системой проверки	нет	Да (приложение для ПК)	Кроссплатформенное настольное веб-приложение	очень высокий
Node.js + pkg	JavaScript	Может использоваться с JWT/проверкой ключа.	нет	да	Инкапсуляция приложений веб-API	высокий
ASP.NET Core + Kestrel	C#	Встроенная поддержка	да	Да (.exe/.dll)	Корпоративный веб-API/инструменты	высокий
Go HTTP Server	Go	Встроенный или индивидуальный	нет	да	Высокопроизводительный веб-сервер	высокий
Blazor WebAssembly + ASP.NET	C#	Поддержка проверки авторизации	да	да	Интеграция SPA + веб-API	От среднего до высокого
Gradio	Python	Может использоваться третьими лицами	нет	Можно (PyInstaller)	ML/AI Web UI	середина
Streamlit	Python	Может использоваться третьими лицами	нет	Можно (PyInstaller)	Веб-интерфейс визуализации данных	середина
Tauri	Rust + JS	Поддержка пользовательской проверки	нет	да	Сверхлегкое настольное приложение	середина
Mongoose / Civetweb	C / C++	Встроенная логика проверки	Да (с CLI)	да	Встроенный веб-сервер	середина

Примечание

Рейтинг доли рынка оценивается на основе использования GitHub, уровня внедрения предприятия и активности сообщества разработчиков.
Рекомендовано пользователями C#: ASP.NET Core и Blazor — лучший выбор, а также собственный веб-сервер Kestrel.
Если интерфейсная часть завершена, вышеуказанные инструменты можно использовать для упаковки внутренней службы в двоичный формат и добавления механизма авторизации.

ASP.NET Core

Введение

ASP.NET Core — это кроссплатформенная высокопроизводительная платформа веб-приложений с открытым исходным кодом, разработанная Microsoft и поддерживающая Windows, Linux и macOS. Он является частью платформы .NET и предназначен для современных веб-API, веб-приложений и микросервисов. По сравнению с традиционным ASP.NET версия Core более легкая, модульная и может быть скомпилирована в независимый исполняемый файл (.exe), что очень подходит для самоинкапсулируемой архитектуры веб-приложений.

особенность

Кроссплатформенная поддержка (Windows/Linux/macOS)
Высокая производительность, низкое использование памяти
Может быть скомпилирован в отдельный исполняемый файл (автономный .exe/.dll).
Встроенный веб-сервер (Kestrel), можно развернуть независимо.
Может интегрировать Razor Pages, Blazor, MVC, gRPC и другие архитектуры.
Поддерживает механизм промежуточного программного обеспечения для облегчения расширения функций.
Хорошая безопасность, поддерживает HTTPS, JWT, OAuth и другие методы аутентификации.

Преимущества самоинкапсулирующихся веб-приложений

Может быть выполнен напрямую с помощью веб-сервера Kestrel без IIS.
Серверная часть может быть упакована как .exe или .dll, и ее нелегко декомпилировать.
Может иметь встроенный механизм авторизации (например, серийный номер, проверка авторизации)
Используйте с интерфейсом HTML/JS или Blazor для быстрого создания веб-интерфейса.
Удобен для контроля версий, автоматического обновления и отслеживания ошибок.

Распространенные модели упаковки

задняя часть:Используйте веб-API ASP.NET Core для компиляции в автономный исполняемый файл.
внешний интерфейс:Доступно в HTML/JS или платформе Blazor, встроено в проект или хранится снаружи.
развертывать:Создайте одну папку (включая исполняемые файлы и статические файлы) для локального выполнения клиентом.

Метод интеграции управления авторизацией

Используйте JWT с механизмом серийного номера/токена.
Аппаратная привязка (привязка MAC, CPU ID, UUID и т. д.)
Подключитесь к серверу лицензий для проверки авторизации.
Локальный файл авторизации (зашифрованная информация авторизации)

Создать исполняемый файл (автономная сборка)

dotnet publish -c Release -r win-x64 --self-contained true -p:PublishSingleFile=true

Эта команда может скомпилировать приложение ASP.NET Core в автономный исполняемый файл (например, MyApp.exe), который можно запустить непосредственно в целевой системе без установки .NET Runtime.

Подходит для сценариев применения

Веб-инструменты, которые необходимо развернуть на клиенте или упаковать в настольные приложения.
Системы коммерческого программного обеспечения требуют контроля авторизации и защиты исходного кода.
Внутренние корпоративные приложения, позволяющие избежать зависимости от IIS или облачного развертывания.

ASP.NET Core против .NET MAUI + Blazor

позиция

ASP.NET Core: Кроссплатформенная серверная среда разработки для создания веб-приложений и API.
.NET MAUI + Blazor: объединение кроссплатформенных собственных приложений .NET MAUI с технологией веб-интерфейса Blazor, позволяющее разработчикам повторно использовать компоненты веб-интерфейса на настольных или мобильных устройствах.

Платформа поддержки

ASP.NET Core: развертывается на серверах в Windows, Linux и macOS, обеспечивая доступ через браузеры или API.
.NET MAUI + Blazor: Может выполняться на Android, iOS, Windows, macOS, а компоненты Blazor встроены в приложения MAUI.

режим разработки

ASP.NET Core: Внутренняя логика + Razor Pages/MVC/Blazor Server/Blazor WASM.
.NET MAUI + Blazor: Собственная платформа приложений (MAUI) + встраивание пользовательского интерфейса Blazor с помощью элементов управления BlazorWebView.

Рендеринг пользовательского интерфейса

ASP.NET Core: пользовательский интерфейс зависит от браузера и отображается с использованием HTML, CSS и JS.
.NET MAUI + Blazor: пользовательский интерфейс отображается в собственном приложении, а часть Blazor отображает компоненты Razor через встроенный WebView.

Применимые сценарии

ASP.NET Core:Создавайте облачные сервисы, внутренние корпоративные системы, веб-приложения и API.
.NET MAUI + Blazor: если у вас уже есть компонент Blazor или веб-интерфейс и вы хотите быстро перенести его на настольные и мобильные устройства на разных платформах.

Интеграция

ASP.NET Core можно использовать в качестве серверной части .NET MAUI + Blazor для предоставления данных и API.
Если у вас уже есть веб-проект Blazor, вы можете практически безболезненно переместить его в приложение MAUI и повторно использовать большой объем кода.

Подвести итог

ASP.NET Core ориентирован на серверную часть и веб-архитектуру и подходит для разработки облака и API.
.NET MAUI + Blazor ориентирован на кроссплатформенные приложения на стороне пользователя и особенно подходит для команд, у которых уже есть стек интерфейсных технологий Blazor.
Когда они объединены, может быть достигнуто комплексное решение «внутренняя служба + внешнее кроссплатформенное приложение».

Часто используемые IDE для разработки ASP.NET Core

Visual Studio

Разработанная Microsoft, это оптимальная среда разработки для разработки ASP.NET Core.
Поддерживает только Windows (некоторые функции доступны только для Windows)
Поддерживает все функции разработки .NET, такие как Razor, Blazor, Web API, EF Core и т. д.
Доступны инструменты графического дизайна, расширенной отладки, модульного тестирования, NuGet и публикации.
Может интегрировать Azure, Docker, Git и другие службы разработки.
Рекомендуемая версия:Visual Studio 2022 и более поздние версии
Выбор версии:
- Community(Бесплатно, подходит для отдельных лиц и небольших команд разработчиков)
- Professional / Enterprise(Платная поддержка и функции корпоративного уровня)

Visual Studio Code

Кроссплатформенность (Windows, Linux, macOS)
Легкий редактор, вам необходимо самостоятельно установить комплект расширений C# (предоставляется OmniSharp).
Поддерживает разработку ASP.NET Core, такую как Razor, Blazor, Web API, EF Core и т. д.
Необходимо вручную настроить launch.json и Tasks.json для отладки и компиляции.
Подходит разработчикам для настройки среды разработки и цепочки инструментов.
Бесплатный и с открытым исходным кодом

JetBrains Rider

Разработан JetBrains, кроссплатформенный (Windows, Linux, macOS)
Поддерживает ASP.NET Core, Blazor, Razor, Web API, EF Core и т. д.
Интегрированный инструмент анализа ReSharper, мощные функции IntelliSense и реконструкции.
Поддержка Docker, Git, цепочки инструментов CI/CD.
Плата взимается, но стоимость ниже, чем у Visual Studio Enterprise.

Сводная сравнительная таблица

IDE	Платформа поддержки	особенность	Это бесплатно?	Подходит для объектов
Visual Studio	Windows	Полный функционал, лучшая официальная поддержка	Бесплатно для сообщества (взимаются другие сборы)	Корпоративные и полноценные разработчики
Visual Studio Code	Windows / Linux / macOS	Легкий и легко масштабируемый	бесплатно	Кроссплатформенные разработчики, студенты
JetBrains Rider	Windows / Linux / macOS	Интеграция ReSharper, кроссплатформенность	Требуется плата	Продвинутые разработчики и кроссплатформенные команды

Создайте проект ASP.NET Core в VS Code.

Подготовка

Установить.NET SDK: Перейти кОфициальная страница загрузки .NET, скачайте и установите последнюю версию.
УстановитьVisual Studio Code。
Установить в VS CodeКомплект расширений C#(предоставлено Microsoft).

Создать проект

Откройте встроенный терминал VS Code (сочетание клавиш:Ctrl + `)。
Введите следующие команды, чтобы создать проект ASP.NET Core:
```
dotnet new webapp -o MyAspNetApp
```
- webapp: Создавайте веб-приложения ASP.NET Core с помощью Razor Pages.
- -o MyAspNetApp:Укажите имя папки проекта.
Введите папку проекта:
```
cd MyAspNetApp
```

Реализация проекта

Введите в терминале:
```
dotnet run
```
По умолчанию он будет вhttps://localhost:5001илиhttp://localhost:5000осуществлять.

Откройте проект в VS Code.

выбиратьФайл → Открыть папку, загрузите вновь созданныйMyAspNetApp。
При установке необходимых пакетов NuGet используйте:
```
dotnet добавить имя пакета
```

Распространенные типы проектов

dotnet new webapp → Razor Pages Web App
dotnet new mvc→ Архитектура MVC
dotnet new webapi→ Проект веб-API

Отладка VS Code Настройки проекта ASP.NET Core

Создать профиль отладки

Откройте папку проекта в VS Code.
в соответствии сCtrl + Shift + P, введите и выберитеDebug: Open launch.json。
выбирать.NET Coreсреда будет сгенерирована автоматически.vscode/launch.json。

Пример запуска.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyAspNetApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    }
  ]
}

Создание настроек сборки

VS Code также будет.vscodeГенерация папокtasks.json。

Если нет, вы можете добавить новую строительную работу:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyAspNetApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

Выполнение и отладка

в соответствии сF5Или выберите на панели «Выполнение и отладка» слева..NET Core Launch (web)。
VS Code автоматически создаст и запустит проект ASP.NET Core и откроет его в браузере.https://localhost:5001。
Точки останова можно устанавливать в программах на C# для отладки в реальном времени.

Отладка VS Code Настройки проекта веб-API ASP.NET Core

Создание проекта веб-API

Введите в терминале:

dotnet new webapi -o MyWebApiApp
cd MyWebApiApp
code .

Это создаст проект веб-API и откроет его в VS Code.

Настройка launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web API)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyWebApiApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    }
  ]
}

Установить задачи.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyWebApiApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

Выполнение и тестирование API

в соответствии сF5Или выберите на панели «Выполнение и отладка».NET Core Launch (web API)。
После запуска сервер будетhttps://localhost:5001илиhttp://localhost:5000。
доступныйSwagger UI(Проект по умолчанию) Проверьте API в браузере.
Вы также можете протестировать API с помощью Postman или плагина REST Client для VS Code.

Создайте файл тестового примера клиента REST.

Установите расширение клиента REST.

Найдите магазин расширений VS Code.REST Client。
Готов к использованию после установки.httpили.restAPI тестирования архива.

Добавить файл test.http

### Тест GET API
ПОЛУЧИТЬ https://localhost:5001/weatherforecast
Принять: приложение/json

###

### Пример тестового POST API
ПОСТ https://localhost:5001/api/sample
Тип контента: приложение/json

{
  «идентификатор»: 1,
  "name": "Тестовые данные"
}

Использование

Создать в корневом каталоге проектаtest.http。
Открыв архив, над каждым запросом вы увидитеSend Requestкнопка.
Нажмите, чтобы отправить запрос API непосредственно в VS Code и просмотреть ответ.

Kestrel

Введение

Пустельга этоASP.NET CoreВстроенный кроссплатформенный веб-сервер, разработанный Microsoft. Он отличается высокой производительностью и легкостью, поддерживает HTTP/1.1 и HTTP/2 и является сервером по умолчанию для приложений ASP.NET Core. Использование Kestrel позволяет разработчикам напрямую обертывать веб-приложения каксамоупаковывающийся исполняемый файлвы можете запускать и предоставлять службы HTTP локально, не полагаясь на внешние серверы, такие как IIS, Apache или Nginx.

особенность

Кроссплатформенная поддержка (Windows, Linux, macOS)
Встроенная поддержка HTTPS, HTTP/2, WebSocket и других протоколов.
Высокая производительность, подходит для встроенных или самоупаковываемых приложений.
Внутренняя служба или автономный сервер, который может действовать как обратный прокси-сервер.
Может быть выполнен напрямую без установки дополнительного серверного программного обеспечения.

Kestrel и самоинкапсулированные веб-приложения

Кестрел доступен какСобственный поставщик HTTP API, используется с интерфейсным интерфейсом
Подходит для использования с ASP.NET Core для компиляции всего приложения в независимый исполняемый файл (.exe).
Логику авторизации и проверки можно интегрировать в качестве основы безопасности веб-приложений.
проницаемыйUseUrlsУстановите локальный порт и путь службы.

Простой пример кода

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        builder.WebHost.UseKestrel()
                       .UseUrls("http://localhost:5000");

        var app = builder.Build();

        app.MapGet("/", () => "Hello from Kestrel!");
        app.Run();
    }
}

Метод развертывания

использоватьdotnet publishУпакуйте приложение с помощью Kestrel в один исполняемый файл.
Внешний веб-сервер не требуется и может быть запущен непосредственно на целевом компьютере.
Может быть упакован и развернут с помощью интерфейсов, таких как Blazor или HTML/JS.

Отличия от IIS/Nginx

проект	Kestrel	IIS / Nginx
Будь то встроенный	Да (встроено в ASP.NET Core)	Нет (необходимо устанавливать отдельно)
Платформа поддержки	Windows / Linux / macOS	Зависит от сервера
Вам нужны права администратора?	нет	Зависит от платформы и настроек
Подходит ли он для самоинкапсуляции?	очень подходит	Не подходит
Производительность	высокий	Высокий (но настройка сложнее)

Применимые ситуации

Приложения, которые необходимо упаковать как собственные веб-приложения.
Хотите развертывать на разных платформах, не полагаясь на внешние серверы
Коммерческие приложения, которым необходимо интегрировать проверку лицензии и API.

ASP.NET Core упаковывается и развертывается вместе с интерфейсом (HTML/JavaScript).

Введение

ASP.NET Core поддерживает интеграцию внешних ресурсов (HTML, CSS, JavaScript, SPA и т. д.) и внутренних служб API в одно приложение и развертывание его в качестве независимого исполнительного блока (автономное приложение) для достижения целей простого развертывания, защиты исходного кода и контроля лицензий.

Распространенные методы внешней интеграции

Статические файлы:Вставьте HTML/CSS/JS.wwwroot/Папка для ASP.NET Core, которая будет служить статическими ресурсами.
SPA разделение фронтенда и бэкенда (React/Vue/Angular):После создания внешнего проекта (созданного с использованием таких инструментов, как Webpack/Vite) в статические ресурсы, скопируйте его вwwwroot/。
Razor Pages / Blazor Server：Используйте платформу пользовательского интерфейса, предоставляемую ASP.NET Core, для непосредственного написания страниц (не чистый HTML/JS, а тесно интегрированный с внешней логикой).

Пример шагов развертывания

Создайте проект ASP.NET Core (дополнительный веб-API + статический веб-сайт или Blazor).
Поместите результаты сборки внешнего интерфейса вwwwroot,Например:
- Vue：npm run buildпозжеdist/Скопировать вwwwroot/
- React：npm run buildпозжеbuild/Скопировать вwwwroot/
подтверждатьProgram.csСлужба статических файлов включена в:
```
app.UseStaticFiles();
```
Установите универсальный маршрут для поддержки SPA (если Vue/React):
```
app.MapFallbackToFile("index.html");
    
```
Разверните приложение, используя:
- Создать исполняемый файл (автономный):
  dotnet publish -c Release -r win-x64 --self-contained
- Создать файл образа Docker (можно развернуть на разных платформах)
- Развертывание на IIS, Nginx, Kestrel или облачных платформах (Azure, AWS, GCP)

преимущество

Интегрированное развертывание клиентской и серверной частей для упрощения процесса обслуживания.
Может быть упакован в один исполняемый файл для облегчения распространения и защиты исходного кода.
Поддержка контроля лицензий и автономного развертывания.
Интегрируйте экосистему .NET и поддержите EF Core, идентификацию, проверку безопасности и т. д.

недостаток

Если вы используете Razor/Blazor, существует порог обучения для тех, кто не знаком с .NET.
Интерфейс необходимо скомпилировать и интегрировать, а процесс разработки сложен.
Увеличенный размер после упаковки (особенно в автономном режиме)

ASP.NET Core MVC

Что такое ASP.NET Core MVC

ASP.NET Core MVC — это кроссплатформенная среда веб-приложений, выпущенная Microsoft. Он основан на шаблоне проектирования Модель-Представление-Контроллер (модель-представление-контроллер) и обеспечивает структурированный и модульный способ разработки динамических веб-сайтов и веб-API.

Основные особенности

Разделение ответственности: модель отвечает за данные и логику, представление — за представление пользовательского интерфейса, а контроллер — за обработку запросов.
Поддерживает систему маршрутизации и может гибко определять правила URL.
Встроенная поддержка строго типизированного представления для простой привязки к модели.
Поддерживает внедрение зависимостей (Dependency Injection) для облегчения тестирования и расширения.
Может использоваться для создания RESTful API и динамических веб-страниц.
Кроссплатформенная поддержка Windows, Linux, macOS.

базовая структура

Model: представляет структуру данных и бизнес-логику.
View: Создание пользовательского интерфейса HTML с использованием синтаксиса Razor.
Controller: Обрабатывать запросы пользователей и возвращать представления или данные.

Простой пример

// Модель
Продукт общественного класса
{
    общественный ИНТ Id {получить; набор; }
    общедоступная строка Имя {get; набор; }
    общественная десятичная цена {get; набор; }
}

//Контроллер
общедоступный класс ProductsController: Контроллер
{
    публичный индекс IActionResult()
    {
        var продукты = новый список<Продукт>
        {
            новый продукт { Id = 1, Name = "ноутбук", Price = 29999 },
            новый товар { Id = 2, Name = «Мышь», Price = 499 },
            новый продукт { Id = 3, Name = «Клавиатура», Price = 899 }
        };

        возврат просмотра(продукты);
    }
}

// Просмотр (Index.cshtml)
@Model List<Product>

<table border="1" cellpadding="6" cellpacing="0">
    <голова>
        <tr>
            <th>Номер</th>
            <th>Имя</th>
            <th>Цена</th>
        </tr>
    </голова>
    <тело>
        @foreach (элемент var в модели)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</таблица>

Таблица отображения ASP.NET Core

Пример кода

<!-- Product.cs – Модель данных -->
Продукт общественного класса
{
    общественный ИНТ Id {получить; набор; }
    общедоступная строка Имя {get; набор; }
    общественная десятичная цена {get; набор; }
}

<!-- ProductsController.cs — Контроллер (ASP.NET Core MVC) -->
общедоступный класс ProductsController: Контроллер
{
    публичный индекс IActionResult()
    {
        var продукты = новый список<Продукт>
        {
            новый продукт { Id = 1, Name = "ноутбук", Price = 29999 },
            новый товар { Id = 2, Name = "Мышь", Price = 499 },
            новый продукт { Id = 3, Name = «Клавиатура», Price = 899 }
        };

        возврат просмотра(продукты);
    }
}

<!-- Views/Products/Index.cshtml — страница просмотра Razor -->
@Model List<Product>

<table border="1" cellpadding="6" cellpacing="0">
    <голова>
        <tr>
            <th>Номер</th>
            <th>Имя</th>
            <th>Цена</th>
        </tr>
    </голова>
    <тело>
        @foreach (элемент var в модели)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</таблица>

Razor

Что такое бритва

Razor — это язык разметки, разработанный Microsoft для ASP.NET Core, который позволяет разработчикам встраивать код C# в HTML-страницы. Он сочетает в себе стандартные HTML и C#, что делает динамическое создание веб-страниц простым и интуитивно понятным.

особенность

Краткий синтаксис, легко писать и читать
Поддержка рендеринга на стороне сервера
Тесная интеграция с ASP.NET Core MVC или Razor Pages.
Вы можете напрямую использовать функции языка C#, такие как условное суждение, циклы, вызовы функций и т. д.
Высокая производительность после компиляции, подходит для разработки крупных и средних веб-приложений.

Сценарии использования

Страница просмотра ASP.NET Core MVC
Динамические страницы для Razor Pages
Веб-приложения, сочетающие статический и динамический контент

пример

@страница
@model ИндексМодель

<h1>Добро пожаловать на страницу Razor</h1>

<p>Сегодняшняя дата: @DateTime.Now.ToString("гггг-ММ-дд")</p>

@if(Model.Items != null && Model.Items.Any())
{
    <ул>
    @foreach (элемент var в Model.Items)
    {
        <li>@item</li>
    }
    </ul>
}
еще
{
    <p>Данные не отображаются</p>
}

Причины и решения NullReferenceException в Razor @foreach

Постановка задачи

Использование в Razor View:

@foreach(var item in Model)
{
    <div>@item</div>
}

Если возникает следующая ошибка:

System.NullReferenceException: Object reference not set to an instance of an object.

выражатьModelдляnull, что приводит к невозможности зацикливания.

Распространенные причины

Контроллер не передает модель в представление.
Переданный объект модели имеет значение null.
Модель не имеет типа IEnumerable или List.

Решение

Убедитесь, что вы передаете правильную модель в контроллер, например:

public IActionResult Index()
{
    var data = new List<string> { "A", "B", "C" };
    return View(data);
}

Объявите тип модели над файлом Razor View:

@model IEnumerable<string>

Проверьте, имеет ли модель значение NULL, а затем выполните цикл:

@if (Модель!= ноль)
{
    foreach (элемент var в модели)
    {
        <div>@item</div>
    }
}
еще
{
    <div>Нет данных</div>
}

предположение

Лучшая практикаУбедитесь, что модель должна иметь значение в контроллере.(даже пустую коллекцию), чтобы избежать обработки нулевых ситуаций просмотра. Например:

return View(data ?? new List<string>());

У MVC есть два правильных способа использования контроллера.

Основные понятия

В ASP.NET Core MVC проект может иметь несколько контроллеров, каждый из которых отвечает за разные функции или области. Например:

HomeController— Обработка главной и статических страниц
ProductController— Заниматься управлением продуктом

Создайте несколько контроллеров

Каждый контроллер должен наследоватьControllerкатегории и хранится вControllersпапка.

// Хоумконтроллер.cs
общедоступный класс HomeController: Контроллер
{
    публичный индекс IActionResult()
    {
        вернуть просмотр();
    }
}

//Продуктконтроллер.cs
открытый класс ProductController: Контроллер
{
    общедоступный список IActionResult()
    {
        var Products = новый список<string> { "Компьютер", "Мобильный телефон", "Планшет" };
        возврат просмотра(продукты);
    }
}

Соответствующие взгляды

Представление MVC по умолчанию создаст папки на основе имени контроллера, например:

Views/Home/Index.cshtml
Views/Product/List.cshtml

Вызов действий разных контроллеров в представлении

Можно использоватьasp-controllerиasp-actionПомощники тегов:

<a asp-controller="Home" asp-action="Index">Вернуться на домашнюю страницу</a>
<a asp-controller="Продукт" asp-action="List">Список продуктов</a>

Настройки маршрутизации

существоватьProgram.csилиStartup.cs, маршрут по умолчанию обычно следующий:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Это означает, что если URL-адрес/, будет автоматически направлятьHomeController.Index(). Если URL-адрес/Product/List, оно будет выполненоProductController.List()。

в заключение

Вы можете иметь несколько контроллеров одновременно в MVC, если:

Каждый контроллер наследуетController
существоватьViewsСоздайте соответствующие папки и файлы в
черезasp-controllerиasp-actionПравильный вызов
Убедитесь, что настройки маршрутизации верны

Как использовать несколько контроллеров для одного и того же представления

ключевые понятия

Razor View сам по себе связывает только одноModel(или составную модель представления), но может отображать или ссылаться на данные/действия от нескольких контроллеров на одной странице.
Распространенные подходы: объединить данные в единую ViewModel, Partial View/ViewComponent или вызвать другие контроллеры через AJAX.

Способ 1. Объедините данные в ViewModel в контроллере (рекомендуется).

// Модели/ViewModels.cs
публичный класс HomePageViewModel {
    общедоступный IEnumerable<Product> Продукты {получить; набор; }
    общедоступный IEnumerable<Order> RecentOrders {получить; набор; }
}

// Хоумконтроллер.cs
общественный индекс IActionResult () {
    вар vm = новая HomePageViewModel {
        Продукты = ProductService.GetTopProducts(),
        RecentOrders = orderService.GetRecentOrders()
    };
    вернуть просмотр (ВМ);
}

// Просмотры/Home/Index.cshtml
@model

<h2>Продукт</h2>
@foreach(var p в Model.Products){ <div>@p.Name</div> }

<h2>Последние заказы</h2>
@foreach(var o in Model.RecentOrders){ <div>@o.Id</div> }

Метод 2: частичное представление (каждый контроллер предоставляет данные, а затем родительский контроллер объединяет или вызывает частичное)

// Просмотры/Продукт/_ProductList.cshtml (частично)
@model IEnumerable<Product>
@foreach(var p в модели){ <div>@p.Name</div> }

// Views/Home/Index.cshtml (родительское представление)
@model
<див>
  @Html.Partial("_ProductList", Model.Products)
</дел>

Способ третий: ViewComponent (эквивалент небольшого многоразового контроллера + представления).

// Компоненты/ProductListViewComponent.cs
общественный класс ProductListViewComponent: ViewComponent {
    частный только для чтения IProductService _svc;
    общественный ProductListViewComponent (IProductService SVC) {_svc = SVC; }
    public IViewComponentResult Invoke (число чисел) {
        вар продукты = _svc.GetTopProducts(count);
        возврат просмотра(продукты); // Представления/Общие/Компоненты/ProductList/Default.cshtml
    }
}

// Используется в Razor
@await Component.InvokeAsync("ProductList", new { count = 5 })

Метод 4. Интерфейсный AJAX предоставляет API от разных контроллеров (подходит для динамической загрузки).

<!-- Views/Home/Index.cshtml -->
<div id="product-area">Загрузка...</div>

<скрипт>
выборка('/api/product/top5')
  .then(r => r.json())
  .then(данные => {
    document.getElementById('product-area').innerHTML =
      data.map(p => `${p.name}`).join('');
  });
</script>

Способ 5. Поместите несколько ссылок на разные контроллеры в представлении (самая простая навигация).

<a asp-controller="Продукт" asp-action="List">Список продуктов</a>
<a asp-controller="Заказ" asp-action="История">История заказов</a>

Выберите предложения

Если вам нужно одновременно отобразить несколько источников данных на одной странице: используйте синтез.ViewModelилиViewComponent(более модульный).
Чтобы повторно использовать или отображать блоки по отдельности: используйтеPartial ViewилиViewComponent。
Если вам нужна асинхронная загрузка или загрузка по требованию: используйте AJAX для получения данных из API разных контроллеров.
Избегайте прямого вызова других действий контроллера в View для получения данных (уровень контроллера/службы должен отвечать за получение данных), чтобы обеспечить разделение обязанностей и возможность тестирования.

старая веб-технология

Java Applet

Основные понятия

Java-апплет — это небольшое приложение, написанное на языке Java, которое можно запустить через веб-браузер и встроить в HTML-страницу. Впервые он был широко использован в 1990-х годах для создания интерактивных веб-страниц, таких как анимация, игры и визуализация диаграмм.

Метод исполнения

Апплет должен выполняться в браузере, поддерживающем плагин Java, через<applet>или<object>Теги встроены в HTML, загружаются и выполняются пользовательской JVM (виртуальной машиной Java).

ограничения безопасности

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

Ситуация поддержки и текущая ситуация

Google Chrome: поддержка NPAPI полностью удалена с 2015 года, и Java-апплеты больше не поддерживаются.
Mozilla Firefox: официально прекращена поддержка плагинов NPAPI в 2017 году.
Microsoft Edge: Java-апплеты не поддерживаются с момента запуска.
Safari: поддержка выполнения Java-апплетов полностью удалена, начиная с macOS Catalina.

Официальная политика Oracle

Oracle объявила об удалении Applet API начиная с Java 9 и полностью отменит Applet в Java 11. Java Web Start, еще одна технология выполнения настольных компьютеров, также не обслуживается.

альтернативы

JavaFX：Предоставляет более современную структуру графического пользовательского интерфейса и возможности веб-интеграции, но не имеет встроенной поддержки браузера.
HTML5 + JavaScript：Становление основной альтернативной технологией, поддерживающей кроссплатформенность и более высокую интерактивность.
WebAssembly：Другие языки можно скомпилировать в формат, исполняемый браузером, что делает их потенциальным выбором для высокопроизводительных вычислений.

Подвести итог

Java-апплеты вступили в фазу ликвидации, и современные тенденции веб-разработки имеют тенденцию использовать технологии открытых стандартов, такие как HTML5, JavaScript и WebAssembly. Разработчикам следует избегать использования апплетов и переносить существующие приложения на современные технологические платформы.

Пример Java-апплета

Ниже приведен пример Java-апплета, отображающего простое сообщение:

HTML-код

<!DOCTYPE html>
<html lang="zh-Hant">
<голова>
<мета-кодировка="UTF-8">
<title>Пример Java-апплета</title>
</голова>
<тело>
<h1>Пример Java-апплета</h1>
<applet code="HelloWorldApplet.class" width="300" height="300>
    <param name="message" value="Привет, мир! ">
    Ваш браузер не поддерживает Java-апплеты.
</апплет>
</тело>
</html>

Код Java-апплета

import java.applet.Applet;
import java.awt.Graphics;

public class HelloWorldApplet extends Applet {
String message;

public void init() {
    message = getParameter("message");
}

public void paint(Graphics g) {
    g.drawString(message, 20, 20);
}
}

Скомпилируйте и выполните

1. Сохраните код Java какHelloWorldApplet.javaи выполните его в командной строкеjavac HelloWorldApplet.javaскомпилировать.

2. Убедитесь, что созданный.classФайл находится в том же каталоге, что и файл HTML.

3. Используйте среду, поддерживающую Java-апплеты, для выполнения HTML-файла.

На что следует обратить внимание

Поскольку большинство современных браузеров больше не поддерживают апплеты Java, рекомендуется рассмотреть возможность использования других технологий (таких как JavaFX или веб-приложения) для достижения аналогичной функциональности.

PHP v: 7.4.10

email: [email protected]

T:0000

資訊與搜尋 | 回dev首頁
email: Yan Sa [email protected] Line: 阿央

電話: 02-27566655 ,03-5924828

阿央
泱泱科技
捷昱科技泱泱企業

веб-разработка

использование компьютера

разработка программного обеспечения

веб-сервер

интернет-маркетинг

мультимедийная разработка

Информационный сайт о развитии

Услуги по разработке сайтов

Индивидуальный дизайн сайта

Адаптивная веб-разработка

Создание платформы электронной коммерции

Разработка бэкэнд-системы

Услуги по оптимизации сайта

Обслуживание и обновления сайта

Техническая поддержка и консультации

HTML

инфраструктура

Общие категории тегов

Заявка на недвижимость

Семантические теги

Связь с CSS и JavaScript

HTML-имя цвета

основной цвет

Серая серия

Розовый и красный

синий и зеленый

Оранжевый, желтый и коричневый цвета

JavaScript

Особенности JavaScript

1. Динамически типизированный язык

2. Объектно-ориентированная поддержка

3. Функции — это объекты (функции высокого порядка).

4. Поддержка асинхронных операций.

5. Обширные кроссплатформенные приложения.

Логическое значение JavaScript

Концепция ценностей Боллинджера

1. Прямое присвоение и сравнение

2. Используйте (If/Else) в условном суждении.

3. Логические операторы

4. Значения Истины и Ложи (неявное преобразование)

1. Ложное значение (будет преобразовано вfalseценить):

2. Значение правдивости (будет преобразовано вtrueценить):

Массив JavaScript

Создание массива и основные операции

Используйте метод среза()

Как случайным образом получить 5 элементов из массива

Проверка членов массива JavaScript

1. Использование метода включает в себя

2. Используйте метод indexOf

3. Используйте какой-нибудь метод для обработки сложных условий.

4. Связанное расширенное использование

5. Рекомендации по оптимизации производительности

Добавить новый массив в массив JavaScript

Используйте метод конкат

Используйте оператор распространения

Использование метода push и оператора распространения

Получить имя выполняющейся в данный момент функции

Цель

Написание функций

Примеры применения

Вывод результатов

На что следует обратить внимание

Расширенные предложения

Управление объединением и классификацией функций JavaScript.

Цель

Рекомендуемые практики

1. Используйте биннинг модулей ES6.

2. Подобные функции относятся к одному и тому же модулю.

3. Когда уместно использовать класс?

4. Сопоставьте инструменты и рамки

Примеры предложений по структуре

Переменные-члены класса JavaScript и использование методов

базовая грамматика

пример

Использование

Тип переменной-члена

Частные переменные и методы (стандарт ES2022)

Наследование и переопределение

Примечания по этому поводу

в заключение

1. Ложное значение (будет преобразовано в`false`ценить):

2. Значение правдивости (будет преобразовано в`true`ценить):