Webentwicklung

Website mit Entwicklungsinformationen

Website-Entwicklungsdienste

Wir bieten:

Maßgeschneidertes Website-Design

Stellen Sie Ihr eigenes Website-Design bereit, um sicherzustellen, dass es Ihrem Markenimage und Ihren Geschäftsanforderungen entspricht und das Benutzererlebnis und die Attraktivität verbessert.

Responsive Webentwicklung

Erstellen Sie eine Website, die sich an mehrere Geräte anpasst, egal ob Desktop, Tablet oder Mobiltelefon, um das beste Seherlebnis zu bieten.

Aufbau einer E-Commerce-Plattform

Unterstützt vollständige E-Commerce-Funktionen, einschließlich Produktanzeige, Warenkorbsystem, Online-Zahlungsintegration usw., und hilft Ihnen so, einfach online zu verkaufen.

Entwicklung von Backend-Systemen

Richten Sie ein stabiles und effizientes Back-End-System ein, einschließlich Datenbankverwaltung, API-Integration und Serverkonfiguration, um den reibungslosen Betrieb der Website zu unterstützen.

Website-Optimierungsdienste

Führen Sie eine Geschwindigkeitsoptimierung und SEO-Optimierung für die Website durch, verbessern Sie die Website-Leistung und das Suchmaschinen-Ranking und ziehen Sie mehr Traffic an.

Wartung und Updates der Website

Bieten Sie regelmäßige Website-Wartungs- und Inhaltsaktualisierungsdienste an, um die Sicherheit der Website und die neuesten Informationen zu gewährleisten.

Technischer Support und Beratung

Wir leisten jederzeit technischen Support, lösen Probleme und bieten professionelle Beratung, um Ihnen bei der Verbesserung der Betriebseffizienz Ihrer Website zu helfen.

Webseite: Planung und Gestaltung von Webseiten; Design und Produktion von Webseitenpräsentationen

Web-Bewerbungssystem: Verschiedene Bewerbungssysteme wie Online-Rankings, Karriere- und Lebensmanagement-Helfer, intelligente Helfer zum Sprachenlernen usw.

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

HTML

HTML (Hypertext Markup Language) ist die grundlegende Standardsprache zum Erstellen von Webseiten. Es ist für die Definition der Struktur und des Inhalts von Webseiten verantwortlich und kombiniert Text, Bilder, Links und andere Multimedia-Inhalte über verschiedene Tags.

Infrastruktur

Ein Standard-HTML-Element besteht aus einem Start-Tag, Inhalts- und End-Tags. Zum Beispiel:<p>Dies ist ein Text</p>. Tags können verschachtelt werden, um eine hierarchische DOM-Baumstruktur zu bilden.

Allgemeine Tag-Kategorien

Textbeschriftung:h1 bis h6 stehen für Überschriften, p für Absätze und br für Zeilenumbrüche.
Listen-Tags:ul ist eine ungeordnete Liste, ol ist eine geordnete Liste und li ist ein Listenelement.
Links und Bilder:Das a-Tag wird zum Erstellen von Hyperlinks und das img-Tag zum Einbetten von Bildern verwendet.
Behälteretikett:div und span werden zur Layout- und Stilkontrolle verwendet.

Immobilienantrag

Tags können Attribute enthalten, um zusätzliche Informationen bereitzustellen. Zu den allgemeinen Eigenschaften gehören:

Eigenschaftsname	Gebrauchsanweisung
href	Definiert die Ziel-URL des Links.
src	Definieren Sie den Quellpfad von Bildern oder Medien.
alt	Alternativer Text, wenn das Bild nicht angezeigt werden kann.
class / id	Wird für die CSS-Stilauswahl oder JavaScript-Vorgänge verwendet.

Semantische Tags

Modernes HTML legt Wert auf Semantik und verwendet Tags wie Kopfzeile, Fußzeile, Artikel, Navigation usw. Dies hilft nicht nur bei der Suchmaschinenoptimierung (SEO), sondern verbessert auch die Lesbarkeit und Zugänglichkeit Ihrer Webseiten.

Beziehung zu CSS und JavaScript

HTML ist für die Inhaltsstruktur verantwortlich, CSS für das visuelle Design und JavaScript für das interaktive Verhalten. Die Kombination der drei kann eine moderne und vollständige Webanwendung ergeben.

HTML-Farbname

Nachfolgend sind die von HTML unterstützten Standard-Webfarbnamen aufgeführt. Diese Namen können direkt in CSS- oder HTML-Attributen verwendet werden und der Browser analysiert sie automatisch in die entsprechenden numerischen Werte.

Grundfarbe

Farbvorschau	Englischer Name	Hex-Code
	Black	#000000
	White	#FFFFFF
	Red	#FF0000
	Blue	#0000FF
	Yellow	#FFFF00
	Lime	#00FF00
	Cyan / Aqua	#00FFFF
	Magenta / Fuchsia	#FF00FF

Graue Serie

Vorschau	Name	Code
	LightGray	#D3D3D3
	Silver	#C0C0C0
	DarkGray	#A9A9A9
	Gray	#808080
	DimGray	#696969
	SlateGray	#708090

Rosa und Rot

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

blau und grün

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

Orange, gelbe und braune Farben

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

JavaScript

Funktionen von JavaScript

JavaScript ist eine effiziente, flexible und dynamische Skriptsprache, die häufig in der Front-End- und Back-End-Entwicklung verwendet wird. Im Folgenden sind die Hauptfunktionen von JavaScript aufgeführt:

1. Dynamisch typisierte Sprache

JavaScript ist eine dynamisch typisierte Sprache und Variablen müssen bei der Deklaration keine Datentypen angeben. Dies bedeutet, dass sich der Typ der Variablen während der Programmausführung dynamisch ändern kann.

sei Wert = 10; // Auf numerischen Typ initialisiert
value = "Hallo"; // kann in den String-Typ geändert werden

2. Objektorientierte Unterstützung

JavaScript unterstützt die Objektorientierung und -verwendungprototypische VererbungMöglichkeit, die Vererbung und Wiederverwendung von Objekten zu realisieren. Dadurch kann JavaScript Objekte flexibler definieren und bearbeiten.


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

3. Funktionen sind Objekte (Funktionen höherer Ordnung)

In JavaScript sind Funktionen auch Objekte, die als Parameter übergeben, zurückgegeben oder Variablen zugewiesen werden können. Diese Funktion unterstützt viele funktionale Programmiermuster.

Funktion Greet(Name) {
return „Hallo,“ + Name;
}
let sayHello = grüßen;
console.log(sayHello("Alice")); // Funktionen können als Variablen verwendet werden

4. Unterstützung des asynchronen Betriebs

JavaScript unterstützt nativ asynchrone Vorgänge, insbesondere durchPromiseUndasync/awaitMacht den Umgang mit asynchronem Verhalten intuitiver. Dies ist nützlich für die Verarbeitung asynchroner Vorgänge wie Netzwerkanforderungen und Zeitereignisse.


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

5. Umfangreiche plattformübergreifende Anwendungen

JavaScript wurde ursprünglich für die Front-End-Entwicklung in Webbrowsern verwendet, wird heute jedoch häufig in der Back-End-Entwicklung (wie Node.js), Desktop-Anwendungen, mobilen Anwendungen und sogar IoT-Geräten verwendet.

Die Flexibilität und Vielfalt von JavaScript machen es zu einer der Kerntechnologien der modernen Webentwicklung und bieten leistungsstarke Unterstützung in verschiedenen Anwendungsfeldern.

JavaScript-Boolescher Wert

Das Konzept der Bollinger-Werte

In JavaScript ist Boolean ein grundlegender Datentyp mit nur zwei möglichen Zuständen oder Werten:

true: Stellt Wahrheit dar, ja, Öffnung oder Erfolg.
false: Stellt „falsch“, „nein“, „geschlossen“ oder „fehlgeschlagen“ dar.

Der boolesche Wert ist die Grundlage für alle logischen Urteile und Prozesssteuerungen, wie zif...elseAnweisungen und Schleifen.

1. Direkte Zuordnung und Vergleich

Sie können Variablen direkt boolesche Werte zuweisen oder Vergleichsoperatoren verwenden, um boolesche Werte zu erzeugen.

let isLogged = true;
sei isGuest = false;

// Der Vergleichsoperator gibt den booleschen Wert zurück
sei isGreater = (10 > 5); // wahr
sei isEqual = (5 === '5'); // false (da die Datentypen unterschiedlich sind)

2. Verwenden Sie (If/Else) in der bedingten Beurteilung

Dies ist die häufigste Verwendung von Bollinger-Werten.ifDie Anweisung prüft, ob das Ergebnis des Ausdrucks innerhalb der Klammern stehttrueund entscheidet dann, ob der Codeblock ausgeführt werden soll.

sei Alter = 20;

if (Alter >= 18) {
  console.log("Ich bin erwachsen und kann wählen.");
} sonst {
  console.log("Minderjährig.");
}

let userValid = checkUserStatus(); // Gehe davon aus, dass die Rückgabe wahr oder falsch ist

if (userValid) {
  // wenn userValid wahr ist
  displayDashboard();
} sonst {
  // wenn userValid false ist
  showLoginError();
}

3. Logische Operatoren

Logische Operatoren werden zum Kombinieren oder Invertieren boolescher Werte verwendet. Es gibt drei Haupttypen:

!(NOT): logische Negation, Invertierung des booleschen Werts.
&&(AND): Logisches UND, nur wenn beide Seiten es sindtrueErst dann wird die Nachricht zurückgegebentrue。
||(OR): Logisches ODER, solange eine Seite vorhanden isttrueEinfach zurückschickentrue。

let isLoggedIn = true;
let hasPermission = false;

// ! (NICHT)
let isNotLoggedIn = !isLoggedIn; // falsch

// && (UND)
if (isLoggedIn && hasPermission) {
  console.log("Der Benutzer ist angemeldet und hat die Berechtigung.");
}

// || (ODER)
if (isLoggedIn || isGuest) {
  console.log("Melden Sie sich einfach an oder seien Sie Gast, um fortzufahren.");
}

4. Wahre und falsche Werte (implizite Konvertierung)

JavaScript ermöglicht die Verwendung anderer Datentypen, bei denen boolesche Werte erforderlich sind und implizite Konvertierungen durchgeführt werden. Diese Werte werden behandelt alstrueoderfalse：

1. Falscher Wert (wird konvertiert in`false`Wert):

Bei der bedingten Beurteilung werden die folgenden sechs Werte berücksichtigtfalse：

false(der Bollinger-Wert selbst)
0(Zahl Null)
""oder''(leerer String)
null
undefined
NaN (Not a Number)

2. Wahrheitswert (wird umgerechnet in`true`Wert):

**Alle anderen Werte** mit Ausnahme der sechs oben genannten Falsy-Werte, einschließlich:

"0"(nicht leere Zeichenfolge)
"false"(nicht leere Zeichenfolge)
jede Zahl ungleich Null (z.B.1, -100)
leeres Array[]
leeres Objekt{}
Funktion

let myString = "Hallo";
let myNumber = 0;

if (myString) {
  // myString ist „Hello“, was ein wahrer Wert ist und ausgeführt wird
  console.log("String ist nicht leer.");
}

if (myNumber) {
  // myNumber ist 0, was ein falscher Wert ist und nicht ausgeführt wird.
  console.log("Die Zahl ist ungleich Null.");
}

if ({}) {
  // Das leere Objekt {} ist der Truthy-Wert und wird ausgeführt
  console.log("Objekt existiert bereits.");
}

JavaScript-Array

Ein JavaScript-Array (Array) ist eine Variable, die zum Speichern mehrerer Werte verwendet wird. Jeder Wert im Array wird als Element bezeichnet und jedes Element verfügt über einen numerischen Index (Index), beginnend bei 0.

Array-Erstellung und grundlegende Operationen

// Array erstellen
let Fruits = ["Apfel", "Banane", "Kirsche", "Dattel"];

//Auf Array-Elemente zugreifen
console.log(fruits[0]); // Ausgabe: Apple
console.log(fruits.length); // Ausgabe: 4

//Elemente am Ende des Arrays hinzufügen
Früchte.push("Holunder");
console.log(Früchte); // Ausgabe: ["Apple", "Banana", "Cherry", "Date", "Holunder"]

//Entferne das Endelement des Arrays
let lastFruit = Fruits.pop();
console.log(lastFruit); // Ausgabe: Holunder
console.log(Früchte); // Ausgabe: ["Apple", "Banana", "Cherry", "Date"]

Verwenden Sie die Methode „slice()“.

slice()Die Methode gibt ein neues Array zurück, das die ausgewählten Elemente aus dem ursprünglichen Array enthält. Das ursprüngliche Array wird dadurch nicht verändert.

Grammatik:array.slice(start, end)

start(optional): Der abzurufende Startindex (einschließlich). Wenn nicht angegeben, beginnt es bei Index 0.
end(optional): Endindex des Abrufs (nicht enthalten). Wenn nicht angegeben, wird bis zum Ende des Arrays abgerufen.

seien Zahlen = [10, 20, 30, 40, 50, 60, 70];

// Beginnen Sie bei Index 2 (30) und enden Sie bei
let Slice1 = Numbers.Slice(2);
console.log(slice1); // Ausgabe: [30, 40, 50, 60, 70]

// Beginnend bei Index 1 (20) und vor Index 4 (50)
let Slice2 = Zahlen.Slice(1, 4);
console.log(slice2); // Ausgabe: [20, 30, 40]

// Negative Indizes verwenden: -1 zeigt auf das letzte Element, -3 zeigt auf das drittletzte Element (50)
let Slice3 = Zahlen.Slice(-3, -1);
console.log(slice3); // Ausgabe: [50, 60]

//Das gesamte Array kopieren
let copy = zahlen.slice();
console.log(kopieren); // Ausgabe: [10, 20, 30, 40, 50, 60, 70]

console.log(Zahlen); // Das ursprüngliche Array wurde nicht geändert

So erhalten Sie zufällig 5 Elemente aus einem Array

Die folgende Funktion bietet eine effiziente Möglichkeit, eine bestimmte Anzahl von Elementen (z. B. 5) zufällig aus einem Array auszuwählen. Diese Methode stellt sicher, dass die ausgewählten Elemente nicht wiederholt werden.

/**
 * Wählen Sie zufällig eine bestimmte Anzahl von Elementen aus dem Array aus
 * @param {Array} arr ursprüngliches Array
 * @param {number} count Die Anzahl der auszuwählenden Elemente (Standard ist 5)
 * @returns {Array} Ein neues Array mit zufällig ausgewählten Elementen
 */
Funktion getRandomElements(arr, count = 5) {
    // Wenn die Array-Elemente kleiner oder gleich der erforderlichen Anzahl sind, eine Kopie des Arrays zurückgeben
    if (arr. Länge<= 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"] (每次執行結果不同)

Überprüfung der JavaScript-Array-Mitglieder

In der JavaScript-Entwicklung gibt es mehrere gängige Methoden, um festzustellen, ob ein Wert in einem Array vorhanden ist. Welche Methode Sie wählen, hängt davon ab, ob Sie nur das „Boolesche Wertergebnis“ benötigen oder ob Sie die „Indexposition“ oder den „Objektinhalt“ des Mitglieds benötigen.

1. Die Verwendung umfasst die Methode

Dies ist nach ES6 die am meisten empfohlene Standardpraxis mit der klarsten Semantik und der direkten Rückgabe von „true“ oder „false“.

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

Vorteile: Die Syntax ist prägnant und NaN kann korrekt beurteilt werden.
Hinweis: Es wird ein kongruenter Vergleich (===) verwendet.

2. Verwenden Sie die indexOf-Methode

Verwenden Sie diese Funktion in älteren Browsern oder wenn Sie die Position eines Elements kennen müssen. Wenn vorhanden, geben Sie den Indexwert zurück (beginnend bei 0). Wenn nicht, geben Sie -1 zurück.

const-Tags = ['js', 'php', 'css'];
if (tags.indexOf('php') !== -1) {
    //Die Logik der Elementexistenz
}

3. Verwenden Sie eine Methode, um mit komplexen Bedingungen umzugehen

Verwenden Sie „some“, wenn es sich bei den Array-Mitgliedern um Objekte handelt oder Sie eine Prüfung anhand einer bestimmten Logik und nicht anhand exakter Werte durchführen müssen. Solange ein Mitglied die Bedingung erfüllt, wird true zurückgegeben.

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

4. Verwandte erweiterte Nutzung

brauchen	Vorgeschlagene Methode	Postback-Beispiel
Finden Sie das erste qualifizierte Mitglied	find()	{ id: 101, name: 'Alex' } oder undefiniert
Suchen Sie den ersten Index, der die Kriterien erfüllt	findIndex()	0 oder -1
Finden Sie alle berechtigten Mitglieder	filter()	[Match 1, Match 2] oder []

5. Vorschläge zur Leistungsoptimierung

Wenn Sie die Existenz von Mitgliedern in einem sehr großen Datensatz häufig überprüfen müssen, empfiehlt es sich, das Array in ein Set-Objekt umzuwandeln. Die Komplexität der Methodenabfrage von Set beträgt O(1), was viel schneller ist als die von Arrays O(n).

const riesigArray = [/* Eine große Datenmenge */];
const mySet = new Set(hugeArray);

if (mySet.has('targetValue')) {
    // schneller Schlag
}

Neues Array zum JavaScript-Array hinzufügen

Verwenden Sie die Concat-Methode

Sie können verwendenconcatMethode zum Zusammenführen zweier Arrays:

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

Verwenden Sie den Spread-Operator

Die Verwendung des Spread-Operators ist ebenfalls eine gängige Methode:

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

Verwendung der Push-Methode und des Spread-Operators

Wenn Sie die Elemente des zweiten Arrays zum ersten Array hinzufügen möchten, können Sie diese kombinierenpushUnd Spread-Operator:

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

Rufen Sie den Namen der aktuell ausgeführten Funktion ab

Zweck

Willeconsole.log('op_panel_htm()')Ändern Sie, um beispielsweise den Funktionsnamen dynamisch abzurufen und auszugebenconsole.log(get_curr_method_name())。

Funktionsschreiben

Funktion get_curr_method_name() {
  const stack = new Error().stack;
  constlines = stack.split("\n");

  // Zeile 0 ist Fehler, Zeile 1 ist get_curr_method_name, Zeile 2 ist die Funktion, die es aufruft
  const callerLine = Zeilen[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  Rückspiel? match[1]: 'anonymous';
}

Anwendungsbeispiele


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

Ergebnisse ausgeben

Wenn Sie es so ausführen:


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

Dies kann auf der Konsole ausgegeben werden:

TableOperator.op_panel_htm

Die tatsächliche Ausgabe hängt vom Browser-Stack-Format ab. Chrome/Edge gibt im Allgemeinen den vollständigen Pfad der Funktion aus.

Dinge zu beachten

Diese Methode hängt davon abError().stack, das Format verschiedener Browser unterscheidet sich geringfügig.
Es eignet sich für den Einsatz beim Debuggen und Entwickeln. Es wird nicht empfohlen, sich auf diese Methode zu verlassen, um Logik in einer formalen Umgebung auszuführen.

Erweiterte Vorschläge

Es kann in eine benutzerdefinierte Debugging-Funktion gekapselt werden:


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

Anwendung:

debug_log("Initialisierung abgeschlossen");

Die Ausgabeergebnisse lauten wie folgt:

[TableOperator.op_panel_htm] Initialisierung abgeschlossen

Binning- und Klassifizierungsmanagement von JavaScript-Funktionen

Zweck

Wenn ein JavaScript-Projekt groß wird und über viele Funktionen verfügt, sollten Modularisierung und Klassifizierung verwendet werden, um die Wartbarkeit und Lesbarkeit zu verbessern. Im Folgenden wird erläutert, wie Sie mehrere Funktionen effektiv verwalten, einschließlich der Verwendungclass。

Empfohlene Praktiken

1. Verwenden Sie ES6-Modul-Binning

Speichern Sie verwandte Funktionen entsprechend der Funktionsklassifizierung in verschiedenen Dateien, zum Beispiel:

/utils/mathUtils.js → Funktionen im Zusammenhang mit mathematischen Operationen
/utils/domUtils.js → DOM-Operationsfunktion
/modules/tableOperator.js → Tabellenoperationsbezogene Klassen oder Funktionen

Jede Datei verwendetexport / importGrammatik:


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


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

2. Ähnliche Funktionen werden in dasselbe Modul eingeteilt

Es ist struktureller, Funktionen mit zugehöriger Logik in ein Objekt oder eine Klasse einzubinden, zum Beispiel:


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

Oder verwenden Sie die Klasse:


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

  highlightRow(index) {
    // ...
  }

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

3. Wann ist es angebracht, Unterricht zu nutzen?

brauchenPaketstatus(wie DOM-Elemente, interne Daten) Funktionsmodule
Es werden mehrere Instanzen erstellt (z. B. mehrere Tabellen, mehrere Komponenten).
Es besteht Bedarf an Vererbung und Erweiterung

Wenn es sich nur um eine Werkzeugfunktion handelt (z. B. Zeichenfolgenverarbeitung, mathematische Operationen), wird die Verwendung empfohlenexport functionoderexport const obj = { ... }Einfach verwalten.

4. Passen Sie Tools und Frameworks an

Wird in der Entwicklung verwendetVSCode + ESM + Projektstrukturverzeichnis
Formelle Projekte können koordiniert werdenWebpack、ViteMod-Paketierungstools
Empfohlen für große Frontend-ProjekteTypeScript + Klasse + Modularisierungverwalten

Beispielhafte Strukturvorschläge


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

Variablen und Methodenverwendung von JavaScript-Klassenmitgliedern

Grundgrammatik

in JavaScriptclassVerwendet ähnliche Funktionen wie andere OOP-Sprachen, einschließlich Konstruktorenconstructor, Mitgliedsvariablen und Methoden-(Funktions-)Definitionen.

Beispiel

Klasse Person {
  //Mitgliedsvariablen (öffentlich)
  Name;
  Alter;

  //Konstrukteur
  Konstruktor(Name, Alter) {
    this.name = Name;
    this.age = Alter;
  }

  //Member-Methode
  grüße() {
    console.log(`Hallo, ich bin ${this.name} und ich bin dieses Jahr ${this.age}`);
  }

  // Statische Methode (keine Instanziierung erforderlich)
  statische Spezies() {
    Rückkehr „Mensch“;
  }
}

Verwendung

const p = new Person("Xiao Ming", 25);
p.greet(); // Ausgabe: Hallo, ich bin Xiao Ming, dieses Jahr 25 Jahre alt
console.log(p.name); // Xiao Ming
console.log(Person.species()); // Menschlich

Mitgliedsvariablentyp

öffentliche Mitglieder:wiethis.name, kann von extern zugegriffen werden.
Privatmitglied(Beginnt mit #): Kann nur innerhalb der Klasse verwendet werden.

Private Variablen und Methoden (ES2022-Standard)

Klassenzähler {
  #count = 0; // Private Variable

  inkrement() {
    this.#count++;
    console.log(this.#count);
  }

  #secret() {
    console.log("Dies ist eine private Methode");
  }

  revealSecret() {
    this.#secret(); // Kann intern aufgerufen werden
  }
}

Vererbung und Überschreibung

Klasse Tier {
  speak() {
    console.log("Mach einen Ton");
  }
}

Klasse Hund erweitert Tier {
  speak() {
    console.log("Woof, woof!");
  }
}

Hinweise dazu

in der KlassenmethodethisZeigen Sie auf diese Instanz. Bei Verwendung in Veranstaltungen oder Rückrufen verwenden Sie bittebind()oder Pfeilfunktion, um die Ausrichtung sicherzustellen.

Klassenschaltfläche {
  Konstruktor() {
    this.label = "Klicken";
    document.addEventListener("click", this.handleClick.bind(this));
  }

  handleClick() {
    console.log(`Sie haben ${this.label} gedrückt`);
  }
}

abschließend

JavaScript-Klassen bieten Kapselung, Vererbung, Methoden- und Attributunterstützung ähnlich wie andere Sprachen. Sie eignen sich für mittlere bis große Projekte und lassen sich zudem einfach mit Modulen integrieren. Wenn Sie eine strengere Eingabe und Kontrolle benötigen, sollten Sie die Verwendung von TypeScript in Betracht ziehen.

Klassenähnliche Verwendung von JavaScript-Modulen

veranschaulichen

JavaScript-Module (Module) bieten eine Möglichkeit, Variablen und Funktionen in Dateien zu kapseln. Sie können verwendenimport/exportDer Mechanismus ist ähnlichclassArbeitsteilung und Strukturierungsfunktionen eignen sich für Werkzeugfunktionen oder einzelne funktionale Logikeinheiten.

Vergleich von Modul- und Klassenunterschieden

Funktion	class	module
Kapselung von Daten und Verhalten	✅	✅(über Exportpaket)
instanziierbar	✅	❌(existiert als Singleton)
Vererbung und Polytyp	✅	❌(Erfordert manuelle Verwaltung)
einzelne funktionale Komponente	Kann	besser geeignet

Modulbeispiel: Verwendung der Objektkapselung


// 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

Modulbeispiel: Funktionskapselung verwenden


// 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…

Modulbeispiel: Simulation eines Singleton-Objekts


// 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" }

abschließend

Module eignen sich zur Kapselung von Werkzeugfunktionen, Konstanten und Einstellungen uswclassAnders ist das ModulEs wird beim Laden automatisch ausgeführt und ist in der gesamten Domäne eindeutig., sehr gut geeignet für logische Klassifizierung und übersichtliche Programmstruktur. Verwenden Sie diese Option, wenn Sie Objektinstanzen benötigen, die mehrfach erstellt werden können, oder eine objektgesteuerte VererbungclassPassender.

Lassen Sie die JavaScript-Funktion nur einmal ausführen, und wiederholte Aufrufe müssen auf den vorherigen Abschluss warten

Funktionsbeschreibung

Verwenden Sie die Dienstprogrammfunktion „runExclusive“, um jede Funktion so zu umschließen, dass sie nur einmal gleichzeitig ausgeführt werden kann. Wenn es erneut aufgerufen wird, wartet es, bis die vorherige Ausführung abgeschlossen ist (Promise-Auflösung), bevor es fortfährt.

Utility-Funktion


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

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

Anwendungsbeispiele

asynchrone Funktion doTask(name) {
  console.log(`Start ${name}`);
  warte auf neues Versprechen(resolve => setTimeout(resolve, 2000));
  console.log(`End ${name}`);
}

const doTaskOnce = runExclusive(doTask);

// Mehrmals gleichzeitig anrufen
doTaskOnce("A");
doTaskOnce("B");
doTaskOnce("C");

Ergebnisse ausgeben


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

Weitere Informationen

Dies ist die Implementierung der „Sequenzausführung“, um sicherzustellen, dass es jeweils nur eine Ausführungsperson gibt.
Wenn Sie es in „Der zweite Aufruf bricht den vorherigen ab“ oder „Nur beim letzten Mal ausführen“ ändern müssen, können Sie die Entprell- oder Drosselungstechnologie verwenden.

Speichern Sie die HTML-Tabelle in einer lokalen Datei

Kernmethode: Verwenden Sie JavaScript, um das Herunterladen zu implementieren

Um ein bestimmtes HTML-Element auf einer Webseite (z. B. $\lt$table$\gt$) als lokale $\text{.html}$-Datei zu speichern, müssen Sie normalerweise JavaScript verwenden, um den HTML-Code des Elements abzurufen, und dann den Speichervorgang über die Download-API des Browsers auslösen. Dies ist eine clientseitige Lösung.

Umsetzungsschritte

1. Holen Sie sich den HTML-Code der Zieltabelle

Verwenden Sie den Selektor $\text{document.getElementById}$ oder $\text{document.querySelector}$, um das $\lt$table$\gt$-Element abzurufen, das Sie speichern möchten, und dessen $\text{outerHTML}$ abzurufen.


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

2. Erstellen Sie einen String, der die vollständige HTML-Struktur enthält

Der $\lt$table$\gt$-Code allein reicht nicht aus, um eine vollständige $\text{.html}$-Datei zu erstellen. Sie müssen es in die grundlegenden Tags $\lt$html$\gt$, $\lt$head$\gt$ und $\lt$body$\gt$ einschließen, um sicherzustellen, dass das Archiv geöffnet und korrekt im Browser angezeigt wird. Sie sollten auch alle erforderlichen $\lt$style$\gt$-Tags oder $\lt$link$\gt$-Tags einschließen, um den Stil (CSS) der Tabelle beizubehalten.

var fullHtml = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Gespeicherte Tabelle</title></head><body>' + tableHtml + '</body></html>';

3. Erstellen Sie ein Blob-Objekt

Blob-Objekte (Binary Large Object) werden zum Speichern binärer oder binärähnlicher Daten verwendet. Wir konvertieren einen String, der vollständigen HTML-Code enthält, in einen $\text{Blob}$ vom Typ $\text{text/html}$.


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

4. Erstellen Sie einen Download-Link und lösen Sie den Download aus

Verwenden Sie $\text{URL.createObjectURL}$, um eine lokale $\text{URL}$ zu erstellen, die auf $\text{Blob}$ verweist, weisen Sie diese dem Attribut $\text{href}$ eines $\lt$a$\gt$-Elements zu und legen Sie das Attribut $\text{download}$ fest, um den Namen der heruntergeladenen Datei anzugeben.

var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'exported_table.html'; //Geben Sie den Namen der heruntergeladenen Datei an
a.click(); // Klick simulieren und Download-Dialogfeld auslösen

// Ressourcen freigeben
URL.revokeObjectURL(a.href);

Denken Sie über Stile und Skripte nach

Wenn Ihre Tabellenstile dynamisch über eine externe $\text{CSS}$-Datei oder $\text{JavaScript}$ auf der Seite hinzugefügt wurden, können diese Stile oder Funktionen durch einfaches Speichern von $\text{outerHTML}$ verloren gehen. Um dieses Problem zu lösen:

**Inline-Stile:** Stellen Sie sicher, dass alle wichtigen $\text{CSS}$-Stile in Inline-Stile konvertiert werden (mithilfe der Eigenschaft $\text{element.style}$) oder kopieren Sie die erforderlichen $\lt$style$\gt$-Tags in den $\lt$head$\gt$-Teil der von Ihnen erstellten $\text{fullHtml}$-Zeichenfolge.
**Skripte:** Die gespeicherte $\text{.html}$-Datei führt nicht automatisch irgendwelche $\text{JavaScript}$-Skripte von der Originalseite aus. Wenn einige Funktionen der Tabelle von $\text{JavaScript}$ abhängen, werden diese Funktionen in der gespeicherten Datei deaktiviert.

JavaScript-Debug_log-Phasensteuerung

Zweck

Emulieren Sie C/C++#ifdef DEBUGBedingter Kompilierungsmechanismus zur Erzielung der Steuerbarkeit in JavaScriptdebug_log(), Steuern Sie den Ausgabepegel und wechseln Sie das Protokoll entsprechend der Entwicklungsphase (in Entwicklung, Test, offizielle Version).

Durchführung

1. Legen Sie den globalen LOG_LEVEL fest

// 0 = keine Ausgabe, 1 = Fehler, 2 = Warnung, 3 = Meldung, 4 = Debug
const LOG_LEVEL = 3;

Funktion debug_log(msg, level = 3) {
  wenn (Ebene<= LOG_LEVEL) {
    const name = get_curr_method_name();
    console.log(`[${name}] ${msg}`);
  }
}

2. Helfen Sie dabei, den aktuellen Funktionsnamen zu erhalten


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. Anwendungsbeispiele

Funktion initApp() {
  debug_log("Initializing", 4); // Debug-Level
  debug_log("Einstellungen erfolgreich geladen", 3); // Nachricht
  debug_log("Der Einstellungswert ist möglicherweise zu alt", 2); // Warnung
  debug_log("Laden fehlgeschlagen", 1); // Fehler
}

4. Anpassungen der Release-Stufe

In Entwicklung:LOG_LEVEL = 4(weit geöffnet)
Testphase:LOG_LEVEL = 2(Es werden nur Fehler und Warnungen angezeigt)
Offiziell gestartet:LOG_LEVEL = 0(völlige Stille)

5. Erweiterte Methode: Protokolle während der Verpackungsphase entfernen

Bei Verwendung mit Tools wie Webpack/Vite/ESBuild können bedingte Konstanten verwendet werdenprocess.env.NODE_ENVProtokolle entfernen:

if (process.env.NODE_ENV === 'development') {
  debug_log("Nachrichten in der Entwicklungsumgebung");
}

Es kann auch mit Babel-Plug-Ins (z. B. babel-plugin-transform-remove-console) verwendet werden, um alle zu entfernenconsole.*。

abschließend

Obwohl JavaScript nicht über eine bedingte Kompilierung verfügt, kann es durch Variablensteuerung und Verpackungsoptimierungsstrategien eine Debugging-Ebene und einen Release-Kontrollmechanismus ähnlich wie C++ erreichen, um sicherzustellen, dass die Informationen während der Entwicklungsphase vollständig sind und die offizielle Version sauber und rauschfrei ist.

Browserkonsole

Einführung

Die Browserkonsole ist Teil der Entwicklertools und wird verwendet für:

Führen Sie JavaScript-Code aus
Fehlermeldungen und Protokolle anzeigen
Manipulieren Sie DOM im Handumdrehen
Debuggen von Website-Problemen

---

Öffnungsmethode

Windows / Linux:entsprechendF12oderCtrl + Shift + I→ Klicken Sie auf die Registerkarte „Konsole“.
macOS:entsprechendCmd + Option + I

---

Grundfunktionen

console.log("Nachricht"):Nachricht drucken
$0: Wählen Sie das aktuell ausgewählte Element im Elementebedienfeld aus
document.querySelector():Wählen Sie DOM-Elemente aus
dir(obj): Objekteigenschaften auflisten
copy(obj): Variablen in die Zwischenablage kopieren

---

Häufige Beispiele

//Nachricht drucken
console.log("Hallo Konsole");

// Seitenelemente abrufen und ausführen
const btn = document.querySelector("button");
btn.textContent = "Neues Label";
btn.click();

//Objekt anzeigen
console.dir(btn);

---

Schutz anlegen

Wenn die folgende Meldung in der Konsole angezeigt wird, bedeutet dies, dass Chrome aus Sicherheitsgründen das direkte Einfügen von mehrzeiligem Code verbietet:

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

eingebenallow pastingund drücken Sie die Eingabetaste, um die Einschränkung aufzuheben.

---

Konsolentipps

clear():Konsolenmeldungen löschen
inspect(element): Springen Sie direkt zum Bedienfeld „Elemente“, um das Element zu finden
$Und$$:JaquerySelectorUndquerySelectorAllAbkürzung

---

verwenden

Testen Sie JavaScript-Snippets
Ändern Sie Stile im Handumdrehen
Beobachten Sie die API-Rückgabedaten
Manipulation des Schatten-DOM

Die Chrome DevTools-Konsole verbietet das Posten

Erklärung des Grundes

Aus Sicherheitsgründen und um zu verhindern, dass böswillige Websites oder andere dazu verleitet werden, gefährlichen Code zu veröffentlichen, verbietet Chrome standardmäßig das direkte Einfügen von mehrzeiligem Code in die Konsole.

Es erscheint die Meldung:

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.

---

Lösungsschritte

In der unteren Reihe der KonsoleGeben Sie Text ein allow pasting(ohne Anführungszeichen)
drückenEnter
Danach können Sie den mehrzeiligen Code normal einfügen

---

Demonstration

// 1. Geben Sie in der Konsole „Einfügen zulassen“ ein und drücken Sie die Eingabetaste
Einfügen zulassen

// 2. Fügen Sie den JavaScript-Code ein, den Sie ausführen möchten
const host = document.querySelector('i18n-message[key="login.button.loginWithLine"]');
// ...(folgender Code)

---

Dinge zu beachten

Erlauben Sie das Einfügen nur, wenn Sie der Quelle des Codes vollkommen vertrauen
Vermeiden Sie das Einfügen von unbekanntem oder unbekanntem Code, um die Sicherheit zu gewährleisten
Dies ist der Sicherheitsmechanismus von Chrome, um Social-Engineering-Angriffe zu verhindern

AJAX

Was ist AJAX?

AJAX (Asynchronous JavaScript and XML) ist eine Technologie, die asynchron mit dem Server auf einer Webseite kommuniziert und es der Seite ermöglicht, Daten ohne Neuladen zu aktualisieren. Wird häufig in dynamischen Anwendungen wie Formularübermittlung, Datenabfrage und automatischer Vervollständigung verwendet.

Implementierung von AJAX mit 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>

Beispiel für eine POST-Anfrage

<script>
var xhr = new XMLHttpRequest();
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        alarm("Server-Antwort: " + xhr.responseText);
    }
};
xhr.send("name=Xiao Ming&score=90");
</script>

Umgang mit JSON-Postbacks

<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log("Name: " + json.name);
    }
};
xhr.send();
</script>

Vereinfachen Sie AJAX mit jQuery

$.ajax({
    URL: „data.php“,
    Methode: „GET“,
    Erfolg: Funktion(Antwort) {
        $("#result").html(response);
    },
    Fehler: Funktion(xhr) {
        alarm("Fehler: " + xhr.status);
    }
});

Häufige Anwendungen

Sofortige Suchvorschläge
Die Daten werden nicht aktualisiert und geladen
Hintergrundformularübermittlung
Aktualisierung der Serverdaten

Dinge zu beachten

AJAX-Anfragen müssen vom Server verarbeitet werden und das Frontend kann lokale Dateien nicht direkt lesen.
Für domänenübergreifende Anfragen muss das Backend CORS zulassen.
Der Ladeeffekt kann während des Datenanforderungsprozesses hinzugefügt werden, um das Benutzererlebnis zu verbessern.

XMLHttpRequest

Erstellen Sie XMLHttpRequest

HTTP-Anfragen können mithilfe des in JavaScript integrierten „XMLHttpRequest“-Objekts an den Server gesendet werden, das häufig in AJAX-Anwendungen verwendet wird:

var xmlhttp = new XMLHttpRequest();

Antworthandler festlegen

Verwenden Sie „onreadystatechange“, um Statusänderungen zu überwachen und eine Postback-Verarbeitung durchzuführen, wenn die Serverantwort abgeschlossen (readyState ist 4) und erfolgreich (Status ist 200) ist:

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("Antwortinhalt: " + xmlhttp.responseText);
    }
};

Senden Sie eine GET-Anfrage

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

Senden Sie eine POST-Anfrage

xmlhttp.open("POST", "api/save.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=test&value=123");

Umgang mit JSON-Antworten

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText);
        console.log("Status: " + data.status);
    }
};

Vollständiges Beispiel

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        versuche es mit {
            var json = JSON.parse(xmlhttp.responseText);
            console.log("Daten erfolgreich empfangen:", json);
        } fangen (e) {
            console.error("Der zurückgegebene Inhalt ist kein gültiges JSON", xmlhttp.responseText);
        }
    }
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
</script>

Dinge zu beachten

Bitte stellen Sie sicher, dass der Server das richtige Format zurückgibt (z. B. einfaches JSON).
Wenn eine PHP-Fehlermeldung zurückgegeben wird, kann der JSON nicht geparst werden. Bitte verwenden Sie es auf der PHP-Seite.error_reporting(0)Fehlerausgabe ausschalten.
Für domänenübergreifende Anforderungen muss der Server den CORS-Header festlegen.

Umgang mit XMLHttpRequest-Rückmeldungen, die PHP-Fehlermeldungen enthalten

Problembeschreibung

Wenn Sie XMLHttpRequest von JavaScript zum Abrufen von Serverdaten verwenden und im PHP-Programm ein Fehler, eine Warnung oder eine veraltete Meldung auftritt, werden diese Texte mit dem erwarteten JSON im Antworttext gemischt, was dazu führt, dass das Frontend den JSON nicht analysieren oder gar keinen Fehler melden kann.

Fehlerbeispiel

Hier ist der tatsächliche ResponseText-Beispielinhalt, den Sie erhalten:

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

Grund

Dies liegt daran, dass bei der Ausführung von PHP Fehlermeldungen (z. B. Warnung, Hinweis, veraltet) generiert werden. Diese Nachrichten werden mit der normalen Ausgabe zusammengeführt, wodurch der vom Frontend empfangene Inhalt nicht mehr im reinen JSON-Format vorliegt.

Lösung 1: Fehlerausgabe in PHP deaktivieren

Fügen Sie am Anfang Ihres PHP-Codes das folgende Programm hinzu, um zu verhindern, dass Fehlermeldungen an den Browser ausgegeben werden:

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

Dadurch wird verhindert, dass PHP Fehler- oder Warnmeldungen ausgibt.

Lösung 2: Legen Sie die richtige JSON-Antwort fest

Stellen Sie sicher, dass die Ausgabe nur JSON ist und dass der Inhaltstyp richtig eingestellt ist:

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

header('Content-Type: application/json');

// Angenommen, dies sind die zurückzugebenden Daten
$data = ["status" => "ok", "value" => 123];
echo json_encode($data);
Ausfahrt;
?>

Lösung drei: Aktualisieren Sie das SDK-Paket

Die Fehlermeldung weist darauf hin, dass das Facebook SDK die Serializable-Schnittstelle verwendet, die für PHP 8.1 und höher nicht empfohlen wird. Bitte führen Sie den folgenden Befehl aus, um das Paket zu aktualisieren:

composer update facebook/graph-sdk

Oder überprüfen Sie die Versionsanforderungen in Composer.json, um eine PHP 8.1-kompatible Version zu verwenden.

Abhilfe (nicht empfohlen)

Wenn das Backend nicht korrigiert werden kann, können Sie auch versuchen, die Nicht-JSON-Teile im Frontend herauszufiltern, aber diese Methode ist riskant:

let Response = xmlhttp.responseText;
let jsonStart = Response.indexOf("{");
if (jsonStart >= 0) {
    let jsonStr = Response.substring(jsonStart);
    let json = JSON.parse(jsonStr);
    //Verwenden Sie JSON, um Daten zu verarbeiten
}

Zusammenfassende Vorschläge

Bitte priorisieren Sie das Löschen der Fehlerausgabe von der PHP-Seite, um sicherzustellen, dass das Rückgabeformat rein ist.
Vermeiden Sie die Ausgabe von Fehlermeldungen an Benutzer in einer Produktionsumgebung.
Es wird empfohlen, Fehler im Fehlerprotokoll zu speichern, anstatt sie direkt anzuzeigen.

Referenzieren Sie JavaScript-Variablen in HTML

Text direkt einfügen (textContent/innerText)

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

<script>
  let name = „Xiao Ming“;
  document.getElementById("msg").textContent = name;
</script>

Erstellen Sie HTML mithilfe von Vorlagenzeichenfolgen (Vorsicht vor XSS)

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

<script>
  let color = "red";
  document.getElementById("box").innerHTML =
    `<p style="color:${color}">Textfarbe: ${color}</p>`;
</script>

Attribute direkt festlegen (href/src/value)

<a id="link">link</a>
<input id="nameInput">

<script>
  let URL = "https://example.com";
  let name = „Xiaohua“;

  document.getElementById("link").href = URL;
  document.getElementById("nameInput").value = name;
</script>

SetAttribute verwenden (kann benutzerdefinierte oder nicht standardmäßige Attribute festlegen)

<img id="avatar" alt="Benutzeravatar">

<script>
  let image source = "https://example.com/avatar.png";
  document.getElementById("avatar").setAttribute("src", Bildquelle);
</script>

Verwenden Sie data-*-Attribute (Datensatz), um Daten zu übergeben

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

<script>
  let userID = 456;
  document.getElementById("card").dataset.userid = Benutzer-ID; // Entspricht data-userid="456"
</script>

Eigenschaften direkt festlegen

<a id="myLink">Link</a>
<input id="myInput">

<script>
  let URL = "https://example.com";
  let name = „Xiao Ming“;

  document.getElementById("myLink").href = URL;
  document.getElementById("myInput").value = name;
</script>

Verwenden Sie setAttribute

<img id="avatar">

<script>
  let image source = "https://example.com/avatar.png";
  document.getElementById("avatar").setAttribute("src", Bildquelle);
</script>

Datensatz verwenden

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

<script>
  let Benutzername = 123;
  document.getElementById("card").dataset.userid = Benutzercode; // Entspricht data-userid="123"
</script>

Verwenden Sie beim Erstellen von Elementen Vorlagenzeichenfolgen

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

<script>
  let title = "dynamischer Titel";
  document.getElementById("container").innerHTML =
    `<h3 data-title="${title}">${title}</h3>`;
</script>

Verwenden Sie JavaScript, um untergeordnete Elemente zu erstellen und div-Tags und -Klassen hinzuzufügen

Beispiel

Im folgenden Beispiel wird a hinzugefügt<div class="abc">Untergeordnete Elemente von:

// Angenommen, es gibt ein übergeordnetes Element
const parent = document.getElementById("myParent");

//Div-Element erstellen
const child = document.createElement("div");

// Klasse festlegen
child.className = "abc"; // oder verwenden Sie classList.add("abc");

//Zum übergeordneten Element hinzufügen
parent.appendChild(child);

HTML-Beispiel

<div id="myParent"></div>
<script>
  const parent = document.getElementById("myParent");
  const child = document.createElement("div");
  child.className = "abc";
  child.textContent = „Dies ist ein neues DIV“;
  parent.appendChild(child);
</script>

Bemerkung

Um mehrere Klassen gleichzeitig hinzuzufügen, verwenden Siechild.classList.add("abc", "def")
Sie können auch hinzufügenid、style、datasetEigenschaften

Ergebnis

wird drin sein#myParentErscheint in:

<div class="abc">Dies ist ein neues DIV</div>

JavaScript-Elemente auswählen

querySelectorAll()

querySelectorAll()Verwenden Sie die CSS-Selektorsyntax, um alle Elemente auszuwählen, die den Kriterien entsprechen, und ein statisches Ergebnis zurückzugebenNodeList。

// Alles auswählen <div> mit Kategorie „Artikel“
let items = document.querySelectorAll("div.item");

// Verwenden Sie forEach, um die Ergebnisse zu durchlaufen
items.forEach(item => {
    item.style.color = "blau";
});

querySelector()

UndquerySelectorAll()Ähnlich, aber es wird nur das „erste“ Element zurückgegeben, das die Kriterien erfüllt. Wenn nicht gefunden, zurückschickennull。

// Das erste Element mit der ID „main-title“ auswählen
let title = document.querySelector("#main-title");

// Wählen Sie das erste <p> Tag auf der Seite
let firstPara = document.querySelector("p");

getElementById()

Dies ist die schnellste und direkteste Methode zur Auswahl eines einzelnen Elements anhand seiner eindeutigen ID.

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

getElementsByClassName()

Wählen Sie Elemente basierend auf Kategorienamen aus und geben Sie ein „Live“ zurück.HTMLCollection. Diese Sammlung wird automatisch aktualisiert, wenn sich die DOM-Struktur ändert.

let Buttons = document.getElementsByClassName("btn-submit");
// Hinweis: Sie können forEach nicht direkt in HTMLCollection verwenden. Sie müssen es zuerst in ein Array konvertieren
Array.from(buttons).forEach(btn => console.log(btn));

getElementsByTagName()

Wählen Sie Elemente basierend auf Tag-Namen aus (z. B. div, p, span) und geben Sie auch einen Zeitpunkt zurückHTMLCollection。

let allLinks = document.getElementsByTagName("a");
console.log("Die Seite hat insgesamt " + allLinks.length + " Links");

Methodenvergleichstabelle

Verfahren	Postback-Typ	Parametertyp	Leistung
querySelector	Einzelnes Element	CSS-Selektoren	normal
querySelectorAll	NodeList (statisch)	CSS-Selektoren	normal
getElementById	Einzelnes Element	ID-Zeichenfolge	am schnellsten
getElementsByClassName	HTMLCollection (sofort)	Kategoriezeichenfolge	schnell

Unterschiede zwischen NodeList und HTMLCollection

querySelectorAllzurückgegebenNodeListIst statisch, was bedeutet, dass sich der Inhalt des Manifests nicht ändert, selbst wenn ein Element später aus dem DOM entfernt wird. UndgetElementsBy...Serie zurückgegebenHTMLCollectionEs ist dynamisch und spiegelt jederzeit den aktuellen Status des DOM wider.

querySelectorAll erweiterte Suche

Kreuzungsselektor (und logisch)

Wenn Sie Elemente auswählen möchten, die mehrere Bedingungen gleichzeitig erfüllen, platzieren Sie die Selektoren einfach nahe beieinander, ohne Leerzeichen dazwischen zu lassen.

// Elemente auswählen, deren Kategorie sowohl „btn“ als auch „primär“ enthält
let PrimaryButtons = document.querySelectorAll(".btn.primary");

// Wählen Sie <li> Tag mit der Klasse „item“
let listItems = document.querySelectorAll("li.item");

Union-Selektor (oder Logik)

Wenn Sie alle Elemente auswählen möchten, die Bedingung A oder Bedingung B erfüllen, verwenden Sie „Komma“.,Trennen Sie verschiedene Selektoren.

// Alles auswählen <h1> und alle <h2>
let headers = document.querySelectorAll("h1, h2");

// Elemente mit der Kategorie „aktiv“ oder Elemente mit der Kategorie „hervorheben“ auswählen
let markers = document.querySelectorAll(".active, .highlight");

Attributselektoren

Filtern Sie basierend auf dem Vorhandensein oder Wert eines HTML-Attributs. Dies ist nützlich, wenn Sie mit Formularen oder benutzerdefinierten Dateneigenschaften arbeiten.

// Alles auswählen <button> mit dem Attribut „deaktiviert“.
letdisabledBtns = document.querySelectorAll("button[disabled]");

// Alles auswählen <input> dessen Namensattribut mit „user“ beginnt (verwenden Sie ^=)
let userInputs = document.querySelectorAll("input[name^='user']");

// Alle Elemente auswählen, deren Datentypattribut genau „video“ entspricht
let videos = document.querySelectorAll("[data-type='video']");

Rang- und Geschwisterselektor

Nutzen Sie strukturelle Beziehungen zwischen Elementen für eine detaillierte Prüfung.

// Nachkommenselektor: Alle auswählen <a> innerhalb von #nav (unabhängig vom Level)
let navLinks = document.querySelectorAll("#nav a");

//Untergeordneter Selektor: Wählen Sie <div> direkt unter .container (nur erste Ebene)
let directDivs = document.querySelectorAll(".container > div");

// Selektor für benachbarte Geschwister: wählt das erste <p> unmittelbar nach <h1>
let firstParas = document.querySelectorAll("h1 + p");

Pseudoklassen

Dies ist äußerst leistungsstark, wenn Sie mit Listen oder Statusfiltern arbeiten.

// Alle Spalten mit gerader Nummer in der Tabelle auswählen (2., 4., 6. ...)
let evenRows = document.querySelectorAll("tr:nth-child(even)");

// Alle Kontrollkästchen auswählen, die derzeit aktiviert sind
let reviewedBoxes = document.querySelectorAll("input[type='checkbox']:checked");

// Alles auswählen <Abschnitt> die nicht über die Kategorie „versteckt“ verfügen (verwenden Sie :not)
let visualSections = document.querySelectorAll("section:not(.hidden)");

Erweiterte Kombinationsbeispiele

Sie können alle oben genannten Regeln kombinieren, um komplexe Abfragebedingungen zu erstellen.

// Alles auswählen <div> im Container mit der ID „main“, der Klasse „card“ und dem Attribut „data-id“.
let complexQuery = document.querySelectorAll("#main div.card[data-id]");

// Wählen Sie sowohl die ersten <li> und das letzte <li>
let endpoints = document.querySelectorAll("li:first-child, li:last-child");

JavaScript findet Elemente und fügt Inhalte ein

Finden Sie das Zielelement

zu findencurrElemzuerst nach<footer>Elemente, der zuverlässigste Weg ist die Iteration über alle<footer>Element und VerwendungNode.compareDocumentPosition()Methode zur Bestimmung ihrer VerwandtencurrElemStandort.

verwendendocument.querySelectorAll('footer')Holen Sie sich alle Elemente auf der Seite<footer>Element.
für jeden<footer>Element, AnrufcurrElem.compareDocumentPosition(footer). Wenn die resultierende Bitmaske $4$( enthältNODE_FOLLOWING), es bedeutet, dass die<footer>in DateireihenfolgecurrElemnach.
Sobald der erste gefunden wird, der die Bedingungen erfüllt<footer>, um die Traversierung zu stoppen.

Inhalte einfügen

Ziel finden<footer>Element können Sie die moderne DOM-Schnittstelle nutzenElement.before()Fügen Sie vor diesem Element neuen Inhalt ein.

targetFooter.before(contentToAdd);

Hier istcontentToAddKann eine Zeichenfolge (die in einen Textknoten konvertiert wird) oder ein oder mehrere DOM-Knoten/Elemente sein.

Beispiel für einen JavaScript-Code

Funktion addContentBeforeNextFooter(currElem, contentToAdd) {
  // 1. Alle Fußzeilenelemente in der Datei abrufen
  const allFooters = document.querySelectorAll('footer');

  let nextFooter = null;

  // 2. Durchlaufen und die erste Fußzeile nach currElem finden
  for (const footer of allFooters) {
    // Prüfen, ob die Fußzeile currElem folgt (Bitmaske 4)
    // 4: Der Argumentknoten folgt dem Referenzknoten.
    if (currElem.compareDocumentPosition(footer) & 4) {
      nextFooter = Fußzeile;
      brechen; // Stoppen Sie sofort, nachdem Sie den ersten gefunden haben
    }
  }

  // 3. Wenn die Zielfußzeile gefunden wird, fügen Sie den Inhalt davor ein
  if (nextFooter) {
    nextFooter.before(contentToAdd);
    console.log('Inhalt wurde erfolgreich vor der ersten Fußzeile nach currElem eingefügt.');
    return nextFooter;
  } sonst {
    console.log('Kein Fußzeilenelement nach currElem gefunden.');
    null zurückgeben;
  }
}

// Beispiel: Einzufügenden Inhalt erstellen
const newDiv = document.createElement('div');
newDiv.textContent = 'Dies ist der neu eingefügte Inhalt. ';
// Angenommen, currElem ist ein DOM-Element, das Sie erhalten haben
// const currElem = document.getElementById('some-id');
// addContentBeforeNextFooter(currElem, newDiv);

JavaScript findet das erste Tag vor und nach dem angegebenen Element

Funktionszweck und Logik

Diese aktualisierte FunktionfindNearestFooterErmöglicht die Angabe einer Richtung ('before'oder'after'), um den nächstgelegenen zu findencurrElemvon<footer>Element.

**Richtungsbeurteilung:** VerwendungNode.compareDocumentPosition()Bitmaske der zu bestimmenden Methode<footer>ist drincurrElemVorher oder nachher.
**Auf der Suche nach „nachher“** ('after'): Bestimmen Sie, ob es das Bit $4$ enthält (NODE_FOLLOWING）。
- Weildocument.querySelectorAllBereits in Dateireihenfolge sortiert, die erste gefundene Datei, die die Bedingungen erfüllt<footer>Das ist das Ziel.
**Suche nach „vorher“** ('before'): Bestimmen Sie, ob es das Bit $2$ enthält (NODE_PRECEDING）。
- Weildocument.querySelectorAllEs wird von oben nach unten sortiert. Wir müssen die Liste in umgekehrter Richtung durchlaufen und die erste finden, die die Bedingungen erfüllt.<footer>ist am nächstencurrElemDas hier.

Beispiel für einen JavaScript-Code

/**
 * Suchen Sie die erste <Fußzeile> Element vor oder nach currElem einfügen und Inhalte davor und danach einfügen.
 * @param {HTMLElement} currElem – Das als Referenzpunkt verwendete Element.
 * @param {('before'|'after')} Richtung – Die Richtung, nach der gesucht werden soll ('vor' oder 'nach').
 * @param {HTMLElement|string} contentToAdd – der einzufügende Inhalt (Element oder String).
 * @returns {HTMLElement|null} – Das gefundene Fußzeilenelement oder null, wenn es nicht gefunden wird.
 */
Funktion findNearestFooter(currElem, Direction, contentToAdd) {
  const allFooters = document.querySelectorAll('footer');
  let nearestFooter = null;

  if (direction === 'after') {
    // Finde die erste Fußzeile „danach“
    for (const footer of allFooters) {
      // 4 (NODE_FOLLOWING): Fußzeile nach currElem
      if (currElem.compareDocumentPosition(footer) & 4) {
        nextFooter = Fußzeile;
        brechen; // Stoppen, wenn das erste gefunden wird, da es am nächsten ist
      }
    }
    
    //Inhalt einfügen (vor der gefundenen Fußzeile)
    if (nearestFooter) {
      nextFooter.before(contentToAdd);
      console.log('Inhalt wurde vor der ersten Fußzeile nach currElem eingefügt.');
    }

  } else if (direction === 'before') {
    // Finde die erste Fußzeile „vor“
    // Sie müssen vom Ende der Liste rückwärts gehen, um die Fußzeile zu finden, die currElem am nächsten liegt
    for (let i = allFooters.length - 1; i >= 0; i--) {
      const footer = allFooters[i];
      
      // 2 (NODE_PRECEDING): Fußzeile vor currElem
      if (currElem.compareDocumentPosition(footer) & 2) {
        nextFooter = Fußzeile;
        brechen; // Stoppen, wenn der erste gefunden wird (der erste im umgekehrten Durchlauf)
      }
    }
    
    // Inhalt einfügen (nach gefundener Fußzeile)
    // Da unsere Anforderung darin besteht, die „Vorher“-Fußzeile zu finden, wird der Inhalt normalerweise nach der Fußzeile eingefügt.
    if (nearestFooter) {
      // Um mit Ihrer vorherigen Anfrage übereinzustimmen (vor der Fußzeile einfügen), gehen wir weiterhin davon aus, dass dies vorher der Fall ist
      // Wenn es erforderlich ist, „nach“ der gefundenen Fußzeile einzufügen, verwenden Sie nextFooter.after(contentToAdd);
      nextFooter.before(contentToAdd);
      console.log('Inhalt wurde vor der ersten Fußzeile vor currElem eingefügt.');
    }
  }

  if (!nearestFooter) {
    console.log(`Kein Fußzeilenelement in currElem ${direction === 'before' ? 'before' : 'after'} gefunden.`);
  }
  
  return nextFooter;
}

// Beispiel: Angenommen, currElem und contentToAdd sind definiert
// const currElem = document.getElementById('some-reference');
// const newContent = document.createElement('p');
// newContent.textContent = 'Dies ist der eingefügte Inhalt';

// // Aufrufbeispiel: Finden Sie die erste Fußzeile nach currElem
// findNearestFooter(currElem, 'after', newContent.cloneNode(true));

// // Aufrufbeispiel: Finden Sie die erste Fußzeile vor currElem
// findNearestFooter(currElem, 'before', newContent.cloneNode(true));

JavaScript verarbeitet NodeList-Sammlungen

1. Holen Sie sich die ersten 5 Elemente

document.querySelectorAll()Was zurückgegeben wird, ist eine **NodeList**. NodeList ist kein echtes JavaScript-Array, aber es ist solengthAttribute und numerische Indizes, damit Sie sie verwenden könnenArray.from()oder Spread-Operator (Spread-Operator...), um es in ein Array zu konvertieren und dann zu verwendenArray.prototype.slice()Methode zum Abrufen der anfänglichen Teilmenge.

/**
 * Rufen Sie die ersten 5 Elemente in der von querySelectorAll zurückgegebenen Sammlung ab.
 * @param {string}-Selektor – CSS-Selektorzeichenfolge.
 * @returns {Array} – Array mit den ersten 5 Elementen (wenn weniger als 5 Elemente vorhanden sind, werden alle Elemente zurückgegeben).
 */
Funktion getFirstFiveElements(selector) {
  const nodeList = document.querySelectorAll(selector);

  // 1. NodeList in Array konvertieren
  const allElements = Array.from(nodeList);

  // 2. Verwenden Sie Slice(0, 5), um die ersten 5 Elemente zu erhalten
  const firstFive = allElements.slice(0, 5);

  return firstFive;
}

//Beispielverwendung:
// const topFiveDivs = getFirstFiveElements('div');
// console.log("Erste 5 Elemente:", topFiveDivs);

2. Holen Sie sich 5 zufällige Elemente

Um ein zufälliges Element aus einer Sammlung zu erhalten, müssen Sie die folgenden Schritte ausführen:

Konvertieren Sie NodeList in ein Array.
Mischen Sie das Array oder verwenden Sie eine zufällige Indizierung, um Elemente auszuwählen.
Holen Sie sich die ersten 5 Elemente.

Der effizienteste Weg besteht normalerweise darin, das Array nach dem Zufallsprinzip zu sortieren und dann die ersten fünf auszuwählen.

/**
 * Erhalten Sie zufällig 5 Elemente aus der von querySelectorAll zurückgegebenen Sammlung.
 * @param {string} Selektor – CSS-Selektorzeichenfolge.
 * @returns {Array} – Array mit 5 zufälligen Elementen (wenn weniger als 5 Elemente vorhanden sind, werden alle Elemente zurückgegeben).
 */
Funktion getRandomFiveElements(selector) {
  const nodeList = document.querySelectorAll(selector);

  // 1. NodeList in Array konvertieren
  let allElements = Array.from(nodeList);

  // Wenn die Gesamtzahl der Elemente weniger als 5 beträgt, alle Elemente direkt zurückgeben
  if (allElements. Länge<= 5) {
    return allElements;
  }
  
  // 2. 實作 Fisher-Yates (或稱 Knuth) 隨機排序法
  // 這是一種高效且公平的隨機排列方法。
  for (let i = allElements.length - 1; i >0; ich--) {
    // Erzeuge einen Zufallsindex j zwischen 0 und i
    const j = Math.floor(Math.random() * (i + 1));
    
    // allElements[i] und allElements[j] tauschen
    [allElements[i], allElements[j]] = [allElements[j], allElements[i]];
  }

  // 3. Holen Sie sich die ersten 5 Elemente des zufällig sortierten Arrays
  const randomFive = allElements.slice(0, 5);

  return randomFive;
}

//Beispielverwendung:
// const randomFiveImages = getRandomFiveElements('img');
// console.log("Zufällige 5 Elemente:", randomFiveImages);

JavaScript UI

Responsive Webseite

Was ist responsives Design?

Responsive Webdesign ist eine Website-Designmethode, die es ermöglicht, die Website an die Bildschirmgrößen und Auflösungen verschiedener Geräte anzupassen. Das bedeutet, dass sich der Inhalt der Website automatisch anpasst, um das beste Erlebnis zu bieten, egal ob Sie sie auf einem Mobiltelefon, Tablet oder Desktop-Computer nutzen.

Schlüsseltechnologien des responsiven Designs

Der Schlüssel zu responsivem Design sind flexible Layouts, skalierbare Bilder und CSS-Medienabfragen. Diese Technologien ermöglichen es einer Website, die Größe und Anordnung von Elementen basierend auf der Breite des Geräts automatisch zu ändern.

Beispiel

Verwenden Sie Medienabfragen in CSS, um das Layout anzupassen, zum Beispiel:

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

Vorteile von responsivem Design

Responsive Design kann das Benutzererlebnis verbessern, Entwicklungskosten senken und SEO-Effekte steigern. Responsive Webseiten sind einfacher zu pflegen, da nicht für jedes Gerät eine andere Version entworfen werden muss.

Schutz- und Autorisierungsmechanismus für JavaScript-UI-Programme

Herausforderungen und Realitäten

JavaScript ist eine Front-End-Programmiersprache, deren Code in den Browser des Benutzers heruntergeladen und ausgeführt wird, sodass er einfach angezeigt oder kopiert werden kann. Obwohl es unmöglich ist, das Reverse Engineering des Codes vollständig zu verhindern, können verschiedene Maßnahmen ergriffen werden, um die Schutzintensität zu erhöhen und einen Autorisierungsmechanismus für Test- und offizielle Versionen zu implementieren.

Die wichtigsten Möglichkeiten zum Schutz Ihres Codes

Code-Verschleierung

Verwenden Sie Tools, um Quellcode in ein unlesbares Format zu konvertieren.

npm install -g javascript-obfuscator
javascript-obfuscator input.js --output output.js

Beispiel für einen verschleierten Code:

var _0x1a2b=["\x68\x65\x6C\x6C\x6F"];console[_0x1a2b[0]]("Hello World!");

Codekomprimierung (Minifizierung)
Verwenden Sie Komprimierungstools, um Leerzeichen und Kommentare zu entfernen, um die Lesbarkeit des Codes zu verringern, z. B. mitUglifyJS。
dynamische Belastung
Speichern Sie wichtige Logik auf dem Server und stellen Sie Dienste über APIs bereit, anstatt sie direkt am Frontend auszuführen.
```
fetch('https://example.com/api').then(response => response.json()).then(data => console.log(data));
```

Browsererkennung

Fügen Sie der Seite einen Erkennungsmechanismus hinzu, um die Verwendung von Entwicklertools zu verhindern.

document.addEventListener('keydown', (event) => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});

So implementieren Sie Testversionen und offizielle Versionen

Berechtigungsbasierte Steuerung

Kombinieren Sie Test- und Produktionslogik mit der API, z. B. die Überprüfung der Benutzeridentität anhand von Autorisierungscodes.

fetch('https://example.com/verify_license', {
    Methode: 'POST',
    Header: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ LicenseKey: userLicenseKey })
}).then(response => Response.json()).then(data => {
    if (data.valid) {
        console.log('Offizielle Version aktiviert');
    } sonst {
        console.log('Eingeschränkte Funktionen der Testversion');
    }
});

Funktionelle Einschränkungen
Deaktivieren Sie bestimmte Funktionen in der Testversion, z. B. die Verfügbarkeit von UI-Komponenten oder den Datenzugriff.

Überprüfung des Testzeitraums

Legen Sie die Prüflogik für den Testzeitraum basierend auf dem Erstnutzungsdatum des Benutzers fest.

const startDate = localStorage.getItem('startDate') || neues Datum();
localStorage.setItem('startDate', startDate);
if (new Date() - new Date(startDate) > 14 * 24 * 60 * 60 * 1000) {
    console.log('Testzeitraum ist beendet');
} sonst {
    console.log('während der Testphase');
}

Praktische Überlegungen

Es ist unmöglich, die Anzeige des Codes vollständig zu verhindern, aber es ist möglich, das Knacken zu erschweren.
Nutzen Sie Verschleierung, API-Verifizierung, serverseitige Logik und andere Kombinationen, um maximalen Schutz zu bieten.
Aktualisieren Sie den Code und den Autorisierungsmechanismus regelmäßig, um zu vermeiden, dass dieselbe Logik über einen längeren Zeitraum verwendet wird.

Behandeln Sie Ereignisse zur Änderung der Bildlaufposition

Einführung in das Scroll-Positionsänderungsereignis

Auf Webseiten können durch die Überwachung von Änderungen der Bildlaufposition viele dynamische Effekte erzielt werden, z. B. die Anzeige einer Schaltfläche „Zurück zum Anfang“, einer schwebenden Navigationsleiste usw. Das Abhören solcher Ereignisse kann mithilfe von JavaScript einfach implementiert werden.

Grundlegende Schritte zum Implementieren von Scroll-Ereignissen

In JavaScript kann dies über erfolgenwindow.addEventListener('scroll', handler)Methode zum Lauschen auf Scroll-Ereignisse. Wird beim Scrollen ausgelösthandlerFunktion, um die entsprechende Verarbeitung durchzuführen.

Beispiel: Scrollposition anzeigen

Im folgenden Beispiel wird die vertikale Position des aktuellen Seitenlaufs angezeigt und am unteren Rand der Seite angezeigt.

<script>
    //Scroll-Ereignishandler definieren
    Funktion handleScroll() {
        const scrollPosition = window.scrollY; // Ermittelt die vertikale Bildlaufposition
        document.getElementById("scrollPositionDisplay").textContent = "Aktuelle Scrollposition: " + scrollPosition + " px";
    }

    // Scroll-Ereignis-Listener hinzufügen
    window.addEventListener('scroll', handleScroll);
</script>

<div id="scrollPositionDisplay" style="position: behoben; unten: 20px; links: 20px; Hintergrundfarbe: #eee; Polsterung: 10px;">
    Aktuelle Scrollposition: 0 px
</div>

Dinge zu beachten

Das Hinzufügen zu vieler Vorgänge im Scroll-Ereignis kann sich auf die Leistung auswirken. Die Verwendung wird empfohlenrequestAnimationFrameodersetTimeoutFühren Sie eine Drosselung durch, um die Häufigkeit von Ereignisauslösern zu reduzieren.

abschließend

Ereignisse, die auf Änderungen der Bildlaufposition warten, können für verschiedene dynamische Effekte verwendet werden, um die Interaktivität von Webseiten zu verbessern. Durch einfaches JavaScript können Scroll-Ereignisse überwacht werden, um die Benutzererfahrung zu verbessern.

Lassen Sie das <pre> Das Element beginnt in einer neuen Zeile, nimmt jedoch nicht die gesamte Zeile ein

Lösung 1: Verwenden`width: max-content`

Dieser Ansatz ermöglicht es, die Breite des Elements automatisch an den Inhalt anzupassen, während es in einer neuen Zeile bleibt.

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

Wirkung:

Das ist ein Text.

Dies ist ein Codeblock.

Lösung 2: Verwenden`float: left`

Diese Methode verwendetfloatLassen Sie das Element nach links gleiten und beginnen Sie es in einer neuen Zeile.

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

Wirkung:

Das ist ein Text.

Dies ist ein Codeblock.

Lösung 3: Verwenden`::before`virtuelles Element

Verwenden Sie virtuelle Elemente, um das Umbrechen von Elementen zu erzwingen und gleichzeitig die adaptive Breite beizubehalten.

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

Wirkung:

Das ist ein Text.

Dies ist ein Codeblock.

Lösung 4: Verwenden`white-space: pre`

verwendenwhite-spaceSteuern Sie das Zeilenumbruchverhalten, damit sich die Blockbreiten natürlich an den Inhalt anpassen.

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

Wirkung:

Das ist ein Text.

Dies ist ein Codeblock.

Simulieren Sie die UI-Ansicht einer Windows-App

Programmcode

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simulation der Windows-App-Benutzeroberfläche</title>
  <Stil>
    Körper {
      Schriftfamilie: „Segoe UI“, Tahoma, Geneva, Verdana, serifenlos;
      Rand: 0;
      Polsterung: 0;
      Hintergrundfarbe: #f0f0f0;
    }

    .app-window {
      Breite: 800px;
      Höhe: 500px;
      Rand: 50 Pixel automatisch;
      Hintergrund: #ffffff;
      Rand: 1px fest #ccc;
      Randradius: 8px;
      Box-Shadow: 0 4px 10px rgba(0, 0, 0, 0,2);
      Überlauf: versteckt;
      Anzeige: Flex;
      Flexrichtung: Spalte;
    }

    .title-bar {
      Hintergrund: #0078d7;
      Farbe: #ffffff;
      Polsterung: 10px 15px;
      Anzeige: Flex;
      justify-content: Leerzeichen dazwischen;
      align-items: center;
    }

    .title-bar h1 {
      Schriftgröße: 16px;
      Rand: 0;
    }

    .title-bar .buttons {
      Anzeige: Flex;
      Lücke: 5px;
    }

    .title-bar .buttons button {
      Breite: 20px;
      Höhe: 20px;
      Hintergrund: #ffffff;
      Grenze: keine;
      Randradius: 50 %;
      Cursor: Zeiger;
    }

    .title-bar .buttons button:hover {
      Hintergrund: #e0e0e0;
    }

    .content {
      Flex: 1;
      Polsterung: 15px;
      Überlauf: automatisch;
    }

    .sidebar {
      Breite: 200px;
      Hintergrund: #f3f3f3;
      border-right: 1px solid #ddd;
      Anzeige: Inline-Block;
      vertikal ausrichten: oben;
    }

    .main-content {
      Anzeige: Inline-Block;
      Breite: calc(100% - 200px);
      vertikal ausrichten: oben;
    }

    .sidebar ul {
      Listenstil: keiner;
      Rand: 0;
      Polsterung: 0;
    }

    .sidebar ulli {
      Polsterung: 10px 15px;
      Cursor: Zeiger;
      border-bottom: 1px solid #ddd;
    }

    .sidebar ul li:hover {
      Hintergrund: #e9e9e9;
    }

    .main-content p {
      Rand: 0;
      Polsterung: 0;
    }
  </style>
</head>
<Körper>
  <div class="app-window">
    <div class="title-bar">
      <h1>Meine Windows-App</h1>
      <div class="buttons">
        <button title="Minimieren"></button>
        <button title="Maximieren"></button>
        <button title="Schließen" style="hintergrund: #e81123;"></button>
      </div>
    </div>
    <div class="content">
      <div class="sidebar">
        <ul>
          <li onclick="showContent('Home')">Home</li>
          <li onclick="showContent('Settings')">Einstellungen</li>
          <li onclick="showContent('About')">About</li>
        </ul>
      </div>
      <div class="main-content" id="mainContent">
        <p>Wählen Sie ein Element aus der Seitenleiste aus, um den Inhalt anzuzeigen.</p>
      </div>
    </div>
  </div>

  <script>
    Funktion showContent(Abschnitt) {
      const content = {
        Home: '<h2>Home</h2><p>Willkommen auf der Homepage.</p>',
        Einstellungen: '<h2>Einstellungen</h2><p>Passen Sie hier Ihre Anwendungseinstellungen an.</p>',
        Über: '<h2>Über</h2><p>Dies ist eine simulierte Windows-App, die mit HTML und JavaScript erstellt wurde.</p>',
      };

      document.getElementById('mainContent').innerHTML = content[Abschnitt] || '<p>Inhalt nicht gefunden.</p>';
    }
  </script>
</body>
</html>

Schritt

Speichern Sie den Code unterindex.html。
Öffnen Sie die Datei, um den Effekt in einem Browser anzuzeigen.
Klicken Sie auf ein Element in der Seitenleiste, um den Hauptinhalt zu wechseln.

My Windows App

Select an item from the sidebar to view content.

JavaScript-UI-Designbibliotheken

React

React ist eine beliebte JavaScript-Bibliothek, die von Facebook zum Erstellen dynamischer und effizienter Benutzeroberflächen entwickelt wurde. Sein komponentenbasiertes Design ermöglicht es Entwicklern, UI-Komponenten schnell zu erstellen und wiederzuverwenden.

Vue.js

Vue.js ist ein leichtes und benutzerfreundliches Framework, das sich für die Entwicklung kleiner bis mittlerer Anwendungen eignet. Die einfache API und das intuitive Design ermöglichen die schnelle Gestaltung von Benutzeroberflächen.

Bootstrap

Bootstrap ist ein Front-End-Framework, das eine Vielzahl vorgefertigter UI-Komponenten und Layout-Tools bereitstellt, um schnell responsive Websites zu erstellen.

Material-UI

Material-UI ist ein React-UI-Framework, das auf Google Material Design basiert. Es enthält viele schöne Komponenten und eignet sich für die schnelle Gestaltung hochwertiger Schnittstellen.

Tailwind CSS

Tailwind ist ein praktisches CSS-Framework, das in Verbindung mit JavaScript schnell eine individuelle Benutzeroberfläche erstellen kann. Sein atomares Design gibt Entwicklern eine flexible Kontrolle über Stile.

Foundation

Foundation ist ein responsives Front-End-Framework, das eine Vielzahl von UI-Komponenten und Grid-Systemen bereitstellt, die sich für die schnelle Erstellung moderner Webdesigns eignen.

Chakra UI

Chakra UI ist ein einfaches und anpassbares React UI-Framework, das eine intuitive API und verschiedene Komponenten bietet.

Quasar Framework

Quasar ist ein auf Vue.js basierendes UI-Framework, mit dem schnell reaktionsfähige und plattformübergreifende Anwendungen erstellt werden können.

Reagieren Sie auf die Entwicklung

React ist eine von Meta entwickelte deklarative JavaScript-Bibliothek, die sich auf die Erstellung von Benutzeroberflächen konzentriert. Es verbessert die Entwicklungseffizienz und Wartbarkeit datenbankgesteuerter Anwendungen durch Komponentenentwicklung und virtuelle DOM-Technologie erheblich.

React-Entwicklungskernkonzepte

Bei der Entwicklung datenbankbasierter Anwendungen wird React häufig mit einer modernen Toolkette zur Abwicklung des Datenflusses kombiniert:

Komponentenbasiert: Zerlegen Sie die Benutzeroberfläche in unabhängige und wiederverwendbare Codeblöcke, um die Verwaltung komplexer Datenanzeigelogik zu erleichtern.
Deklarative Benutzeroberfläche (deklarativ): Entwickler müssen lediglich beschreiben, wie die Schnittstelle in verschiedenen Datenzuständen aussieht, und React verarbeitet automatisch die zugrunde liegenden DOM-Updates.
Hooks-System: Einfache Handhabung asynchroner Vorgänge wie Datenerfassung, Paging und Formularübermittlung über Hook-Funktionen wie useState und useEffect.

Mainstream-IDE-Auswahl

Obwohl für die React-Entwicklung jeder beliebige Nur-Text-Editor verwendet werden kann, um mit Datenbankfeldhinweisen und Typprüfungen zusammenzuarbeiten, sind die folgenden in der Branche die gängigsten Optionen:

Visual Studio Code (VS Code): Der absolute Mainstream im Moment. Es verfügt über ein leistungsstarkes Erweiterungsökosystem (z. B. ES7+ React Snippets, Prettier, Tailwind CSS IntelliSense) und bietet eine hervorragende Unterstützung für TypeScript, sodass Sie Datenbanktypen direkt im Code in der Vorschau anzeigen können.
WebStorm: Kostenlose IDE, entwickelt von JetBrains. Es verfügt über die leistungsstärksten integrierten Funktionen und bietet eine sehr stabile Erfahrung beim Refactoring von React-Code, beim Navigieren in komplexen Projektstrukturen und bei der Integration von Git.
Cursor: Ein KI-gesteuerter Editor, der in den letzten Jahren populär geworden ist. Basierend auf dem Kern von VS Code integriert es LLM, um das Schreiben von Datenbankabfragelogik und React-Komponenten zu unterstützen, was die Schreibzeit von sich wiederholendem Code erheblich verkürzen kann.

Empfohlene Erweiterungen und Einstellungen

Um den Entwicklungsprozess von React- und Datenbankanwendungen zu optimieren, wird empfohlen, die folgenden Tools in der IDE zu installieren:

ESLint: Codequalitätsstandards durchsetzen und Logikfehler reduzieren.
Prisma/Drizzle-Erweiterung: Wenn das Backend diese ORMs verwendet, kann es Syntaxhervorhebung und automatische Vervollständigung der Datentabellenstruktur bereitstellen.
React Developer Tools: Browser-Erweiterung zum Debuggen von Status- und Eigenschaftsänderungen von React-Komponenten.

Vergleichstabelle zur Konfiguration der Entwicklungsumgebung

Werkzeugtyp	Beliebte Optionen	Kernwert
Code-Editor (IDE)	VS Code, WebStorm	Effizientes Code-Schreiben und Typhinweise
Paketverwaltungstools	npm, pnpm, yarn	Verwalten Sie React und seine Ökosystemabhängigkeiten
Werkzeuge erstellen	Vite, Turbopack	Extrem schnelle Hot-Update- und Projektpaketierungsleistung
Debugger	React DevTools	Echtzeitüberwachung des Komponentenstatus und Leistungsengpässen

Beispiel für eine React-Datenbankansicht

Programmcode

import React, { useState, useEffect } from 'react';

Funktion DatabaseView() {
  //Simulierte Datenbankdaten
  const [data, setData] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  // Simulieren Sie das Abrufen von Daten aus der Datenbank
  useEffect(() => {
    const fetchData = async () => {
      const mockData = [
        { id: 1, name: 'John Doe', email: '[email protected]', age: 28 },
        { id: 2, name: 'Jane Smith', email: '[email protected]', age: 34 },
        { id: 3, name: 'Alice Brown', email: '[email protected]', age: 25 },
        { id: 4, name: 'Bob White', email: '[email protected]', age: 40 },
      ];
      setData(mockData);
    };

    fetchData();
  }, []);

  //Daten filtern
  const filteredData = data.filter(
    (Artikel) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.email.toLowerCase().includes(searchTerm.toLowerCase())
  );

  zurück (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Datenbankansicht</h1>
      <Eingabe
        type="text"
        placeholder="Suche nach Name oder E-Mail"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        Stil={{
          marginBottom: '20px',
          Polsterung: '10px',
          Breite: '300px',
          Schriftgröße: '16px',
        }}
      />
      <Tabelle
        Stil={{
          Breite: '100%',
          borderCollapse: 'collapse',
          marginTop: '10px',
        }}
      >
        <thead>
          <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>
        </thead>
        <tbody>
          {filteredData.map((item) => (
            <tr key={item.id}>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.id}
              </td>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.name}
              </td>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.email}
              </td>
              <td style={{ border: '1px solid #ddd', padding: '10px' }}>
                {item.age}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Standard-Datenbankansicht exportieren;

Schritt

Erstellen Sie ein React-Projekt, zum Beispiel mitcreate-react-app。
Speichern Sie den Code unterDatabaseView.js。
existierenApp.jsImportieren und verwenden<DatabaseView />。
Starten Sie den Entwicklungsserver, um die Ergebnisse anzuzeigen.

React integriert PHP-Backend

1. Funktionsprinzip: API-Kommunikation

React und PHP vermischen Code nicht direkt, sondern durchJSONDaten für die Kommunikation formatieren. React-AnwendungenfetchoderaxiosSenden Sie eine Anfrage und PHP gibt das Ergebnis nach der Verarbeitung zurück.

2. Wie schreibe ich ein PHP-Backend (zum Beispiel: api.php)

Der Backend-PHP-Code gibt kein HTML mehr aus, sondern stattdessen JSON-Header und -Daten.

<?php
// Cross-Origin-Anfragen zulassen (CORS)
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

// Simulieren Sie das Abrufen von Daten aus der Datenbank
$stocks = ["AAPL", "TSLA", "NVDA", "GOOGL", "MSFT"];
echo json_encode($stocks);
?>

3. Wie schreibe ich das React-Frontend?

In React tun wir das normalerweiseuseEffectRufen Sie im Hook die PHP-API auf.

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. Gängige Technologiekombinationen

Typ	Empfohlener Plan	veranschaulichen
Traditionelles PHP	Natives PHP oder CodeIgniter	Geeignet für einfache API-Schnittstelle.
moderner Rahmen	Laravel	Das leistungsstärkste PHP-Framework mit vollständiger integrierter API-Unterstützung.
Hybridlösung	Inertia.js	Laravel kann nahtlos in React integriert werden, ohne eine API zu schreiben.

5. Vorteile dieser Architektur

Fokus auf Arbeitsteilung:Das Front-End konzentriert sich auf die Handhabung der Schnittstelle und des Status, und das Back-End konzentriert sich auf Sicherheit und Datenbank.
Hohe Flexibilität:Wenn Sie PHP in Zukunft auf Python oder Node.js umstellen möchten, muss die React-Seite überhaupt nicht geändert werden, solange das API-Format unverändert bleibt.
Leistungsvorteile:Kommunizieren Sie nur dann mit dem Server, wenn Daten benötigt werden, wodurch die Serverlast reduziert wird.

Bereitstellungserinnerung

In einer Entwicklungsumgebung, da React normalerweise darauf läuftlocalhost:5173, während PHP weiterläuftlocalhost:8000, werden Sie begegnenCORS (Cross-Origin Resource Sharing)Fehler. Stellen Sie sicher, dass PHP oben eingefügt wirdAccess-Control-Allow-OriginKopfzeile.

VueJS

Vue.js ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks ist Vue so konzipiert, dass es Schicht für Schicht von unten nach oben aufgetragen werden kann. Die Kernbibliothek konzentriert sich nur auf die Ansichtsebene, was den Einstieg und die Integration in bestehende Projekte sehr einfach macht.

Deklaratives Rendering und Komponentisierung

Vue kombiniert HTML-Vorlagen und JavaScript-Objekte, um Entwicklern eine intuitive Verwaltung von Webinhalten zu ermöglichen. Derzeit lautet die allgemeine Empfehlung, Vue 3 zu verwenden.Composition API。

<!-- Vue-Vorlage -->
<div id="app">
  <h1>{{ message }}</h1>
  <button @click="reverseMessage">Text umkehren</button>
</div>

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

  createApp({
    setup() {
      const message = ref("Hallo Vue!");
      const reverseMessage = () => {
        message.value = message.value.split('').reverse().join('');
      };
      return { message, reverseMessage };
    }
  }).mount('#app');
</script>

Häufig verwendete Anweisungen (Richtlinien)

Die Anleitung liegt beiv-Das spezielle Attribut des Präfixes ist für die Bindung von Daten an das DOM-Verhalten verantwortlich.

Anweisung	verwenden	Beispiel
v-bind (:)	Binden Sie HTML-Attribute	`:src="imageUrl"`
v-on (@)	Hören Sie auf Ereignisse	`@click="doSomething"`
v-if / v-else	Bedingtes Rendern	`v-if="isVisible"`
v-for	Listenrendering (ähnlich der Array-Nutzung)	`v-for="item in items"`
v-model	Zwei-Wege-Datenbindung	`v-model="inputText"`

Bewerbung in Kombination mit Vorkenntnissen

Sie können die zuvor genannten problemlos integrierenslice()Oder wählen Sie zufällig Logik aus und manipulieren Sie Komponenten über das Selektorkonzept.

<Skript-Setup>
import { ref } aus 'vue';

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

// Kombiniert mit Zufallsauswahllogik
const pickFive = () => {
  const shuffled = [...allStocks.value].sort(() => 0.5 - Math.random());
  selectedStocks.value = shuffled.slice(0, 5);
};
</script>

<Vorlage>
  <div>
    <button @click="pickFive">Wählen Sie zufällig 5 Aktien aus</button>
    <ul>
      <li v-for="stock in selectedStocks" :key="stock">{{ stock }}</li>
    </ul>
  </div>
</template>

Warum Vue wählen?

Leicht und effizient:Der Kern ist klein und läuft schnell.
Flache Lernkurve:Solange Sie über grundlegende HTML/CSS/JS-Grundlagen verfügen, können Sie schnell entwickeln.
Komplettes Ökosystem:Stellt offiziell Router (Routing) und Pinia (Statusverwaltung) bereit, um umfangreiche Entwicklungsanforderungen zu lösen.

Web API

Definition

Web API (Web Application Programming Interface) ist eine auf dem HTTP-Protokoll basierende Schnittstelle, die den Datenaustausch zwischen verschiedenen Systemen ermöglicht und häufig für die Kommunikation zwischen Frontend und Backend verwendet wird.

Gängige Formate

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

HTTP-Methode

Verfahren	verwenden
GET	Informieren Sie sich
POST	Neue Informationen hinzufügen
PUT	Informationen aktualisieren
DELETE	Daten löschen

Beispiel

Hier ist ein Beispiel für die Verwendung von JavaScript zum Senden einer GET-Anfrage:

fetch('https://api.example.com/data')
  .then(response => Response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

verwenden

Front-End- und Back-End-Kommunikation
Systemintegration (zum Beispiel: Anbindung an Drittplattformen)
Geräteübergreifender Datenaustausch (z. B. Web, App)

Vorteil

Standardisiertes Kommunikationsformat
Plattformübergreifende Unterstützung
Wiederverwendbar und erweiterbar

Häufige Anwendungen

Google Maps API
OpenWeather API
LINE Messaging API

Fragen Sie die phonetische Notation chinesischer Schriftzeichen ab

Bitte geben Sie ein chinesisches Zeichen ein und das System zeigt die phonetische Schreibweise des Zeichens an:

Ergebnisse der phonetischen Notation

Noch nicht abgefragt

In diesem Beispiel wird die Pinyin-API verwendet, um Zhuyin abzufragen. Bei mehreren Aussprachen werden alle Ergebnisse angezeigt.

Google Cloud

Die Google Cloud Platform (GCP) ist eine von Google bereitgestellte Cloud-Computing-Dienstplattform, die auf der internen Infrastruktur von Google aufbaut. Es bietet mehr als 150 Dienstleistungen an, die von Computer und Speicherung bis hin zu Big-Data-Analyse und künstlicher Intelligenz reichen, um Unternehmen bei der digitalen Transformation und Anwendungsentwicklung zu unterstützen.

Klassifizierung der Kerndienste

Kategorie	Schlüsseldienste	Hauptfunktionen
Berechnen	Compute Engine	Bietet anpassbare virtuelle Maschinen (VMs).
Container	GKE / Cloud Run	Hosten Sie Kubernetes-Cluster oder führen Sie serverlose Container aus.
Lagerung	Cloud Storage	Objektspeicher, der unstrukturierte Daten wie Bilder und Videos speichert.
Datenbank	Cloud SQL / Spanner	Bietet MySQL, PostgreSQL oder eine globale relationale Datenbank.
Datenanalyse (Daten)	BigQuery	Serverloses Data Warehousing auf Unternehmensebene, das umfangreiche SQL-Abfragen unterstützt.
Künstliche Intelligenz (KI)	Vertex AI	Integrierte Plattform für maschinelles Lernen, einschließlich Gemini-Modellentwicklungstools.

Technische Vorteile

Globale Netzwerkarchitektur: Nutzen Sie das private globale Glasfasernetzwerk von Google, um die Latenz bei der Datenübertragung zu reduzieren.
Führend in den Bereichen Daten und KI: Es hat einen branchenführenden Status in der Big-Data-Verarbeitung (BigQuery) und dem Framework für maschinelles Lernen (TensorFlow).
Open-Source-Kompatibilität: Bieten Sie die nativste Unterstützung und Wartung für Open-Source-Tools wie Kubernetes.
Nachhaltigkeit: Wir verpflichten uns, unsere globalen Rechenzentren zu 100 % mit erneuerbarer Energie zu betreiben.

Grundlegende Managementstruktur

Die Ressourcenorganisation von Google Cloud folgt einem hierarchischen System, um die Berechtigungskontrolle und Kostenverfolgung zu erleichtern:

Organisation: Die höchste Ebene, die normalerweise ein Unternehmen vertritt.
Ordner: Werden zur Unterscheidung von Abteilungen oder Umgebungen (z. B. Entwicklung, Produktion) verwendet.
Projekt: Alle Ressourcen (wie VMs und Datenbanken) müssen zum Projekt gehören und sind die Grundeinheit der Abrechnung.
Beschriftungen: Fügen Sie Schlüssel-Wert-Paare zu Ressourcen hinzu, um die Kostenzuordnung und automatisierte Verwaltung zu erleichtern.

Abrechnung und Quote

Google Cloud nutzt einen „Pay-as-you-go“-Mechanismus und bietet die folgenden Vorteile:

Kostenlose Testversion: Neue Benutzer erhalten normalerweise ein Guthaben von 300 $ (gültig für 90 Tage).
Für immer kostenloser Plan: Bietet ein festes monatliches Kontingent für bestimmte Dienste (z. B. Compute Engine e2-micro, Cloud Functions).
Committed Use Discounts (CUDs): Bieten Sie hohe Rabatte auf Ressourcen, die voraussichtlich langfristig genutzt werden.

Anmeldeseite für die Google-ID

Was ist die Google-ID-Anmeldung?

Die Google-ID-Anmeldung ist eine Authentifizierungsmethode, die auf dem OAuth 2.0-Protokoll basiert und es Benutzern ermöglicht, sich mit ihren Google-Konten bei Websites oder Anwendungen Dritter anzumelden. Dieser Ansatz verbessert nicht nur den Benutzerkomfort, sondern erhöht auch die Sicherheit, da sich Benutzer keine zusätzlichen Passwörter merken müssen.

Warum sollten Sie sich für die Anmeldung mit einer Google-ID anmelden?

Bequemlichkeit:Nutzer müssen sich lediglich mit ihrem bestehenden Google-Konto anmelden und müssen kein neues Konto erstellen.
Sicherheit:Google bietet starke Sicherheit, einschließlich Optionen zur Bestätigung in zwei Schritten und zur Kontowiederherstellung.
Einheitliche Verwaltung:Benutzer können mehrere Anwendungen unter einem Konto verwalten und so den Passwortspeicher entlasten.

Wie implementieren Sie die Google-ID-Anmeldung auf meiner eigenen Webseite?

Erstellen Sie ein Google Cloud-Projekt:Gehe zuGoogle Cloud Console, erstellen Sie ein neues Projekt.
Aktivieren Sie die Google-Login-API:Aktivieren Sie im Projekt die API „Google Login“ und generieren Sie OAuth 2.0-Anmeldeinformationen.
Berechtigungsbereich festlegen:Fügen Sie in den Anmeldeinformationseinstellungen den autorisierten Rückruf-URI hinzu. Dabei handelt es sich um die Adresse, an die Benutzer nach der Anmeldung weitergeleitet werden.
Frontend-Implementierung:Nutzen Sie die von Google bereitgestellte JavaScript-Bibliothek und erstellen Sie eine Anmeldeschaltfläche auf Ihrer Webseite. Hier ist ein einfaches Beispiel:


<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. Überprüfen Sie die Benutzeridentität:

Wenn der Nutzer auf die Anmeldeschaltfläche klickt, führt Google eine Authentifizierung durch. Nach erfolgreicher Anmeldung werden die Daten des Nutzers (wie E-Mail, Name etc.) an Ihre Bewerbung zurückgesendet und Sie können auf Basis dieser Daten eine weitere Bearbeitung durchführen.

abschließend

Die Anmeldung mit einer Google-ID bietet Benutzern eine einfache und sichere Möglichkeit, sich anzumelden, und verringert den Aufwand bei der Verwaltung mehrerer Konten. Durch die Integration des Anmeldesystems von Google können Entwickler das Benutzererlebnis verbessern und mehr Benutzer für ihre Website oder Anwendung gewinnen.

YouTube-Video einbetten

Wie man einbettet

Wenn Sie ein YouTube-Video einbetten möchten, ändern Sie bitte den Originallink in das Einbettungsformat:

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

In{vid}ist die ID des YouTube-Videos.

Beispiel

Zum Beispiel ist der Videolinkhttps://www.youtube.com/watch?v=dQw4w9WgXcQ, dann lautet der Einbettungscode wie folgt:

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

Dinge zu beachten

Ein solches Einbettungsformat vermeidetX-Frame-OptionsBegrenzen Sie, damit das Video normal auf der Seite angezeigt werden kann.

In YouTube-Suchergebnisse einbetten

Überblick

Kann direkt in HTML verwendet werden<iframe>YouTube-Videos einbetten, Aber YouTube nichtDie direkte Einbettung von Iframes in die „Suchergebnisseite“ wird nicht unterstützt, Da es sich bei den Suchergebnissen um interaktive Inhalte handelt (einschließlich Anmelde-, Empfehlungs-, Nachverfolgungsfunktionen usw.), werden sie durch die Einbettungsrichtlinie von YouTube blockiert.

---

Fehlerbeispiel

Die folgenden Versuche, Suchergebnisse einzubetten, schlagen fehl oder zeigen eine Fehlermeldung an:

<!-- ⚠️ Kann nicht richtig angezeigt werden -->
<iframe width="800" height="600"
  src="https://www.youtube.com/results?search_query=cat+video">
</iframe>

Diese Methode wird vom Browser oder von YouTube blockiert und zeigt „Anzeige im IFrame abgelehnt“ an.

---

Der richtige Weg: über die YouTube Data API

Um einen Suchergebniseffekt in eine Webseite einzubetten, verwenden SieYouTube Data API v3Fragen Sie Videos dynamisch ab und verwenden Sie dann JavaScript, um die Ergebnisse selbst anzuzeigen und zu erstellen<iframe>。

---

Schritt-für-Schritt-Demonstration

1. Beantragen Sie einen API-Schlüssel

Gehe zuGoogle Cloud ConsoleAktivieren Sie „YouTube Data API v3“ und erhalten Sie den API-Schlüssel.

2. HTML + JavaScript-Beispiel

<div>
  <input id="search" type="text" placeholder="Suchschlüsselwörter">
  <button onclick="searchYouTube()">Suchen</button>
</div>

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

<script>
const API_KEY = "YOUR_API_KEY";

Funktion searchYouTube() {
  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}`;

  abrufen(URL)
    .then(r => r.json())
    .then(data => {
      const container = document.getElementById("results");
      container.innerHTML = "";
      data.items.forEach(item => {
        const vid = item.id.videoId;
        const title = item.snippet.title;
        const frame = document.createElement("iframe");
        frame.width = "300";
        frame.height = "170";
        frame.src = `https://www.youtube.com/embed/${vid}`;
        frame.allow = "Beschleunigungsmesser; automatische Wiedergabe; Schreiben in die Zwischenablage; verschlüsselte Medien; Gyroskop; Bild-in-Bild";
        frame.allowFullscreen = true;

        const div = document.createElement("div");
        const caption = document.createElement("p");
        caption.textContent = Titel;
        caption.style.fontSize = "14px";
        caption.style.fontWeight = "bold";

        div.appendChild(frame);
        div.appendChild(caption);
        container.appendChild(div);
      });
    });
}
</script>

---

Ausführungsergebnis

Geben Sie ein Schlüsselwort ein (z. B. „Taiwan Travel“) und klicken Sie auf „Suchen“.
Unten werden automatisch 6 Suchergebnisvideos angezeigt.
Jedes Video beginnt mit<iframe>eingebettet, kann direkt abgespielt werden.

---

Vorteil

Anpassbarer Stil und Layout (z. B. Anzeige von Miniaturansichten, Titeln und Wiedergabeschaltflächen).
Keine Einschränkung durch YouTube-Iframes.
Kombinierbar mit anderen Such- oder Klassifizierungsfunktionen.

---

Limit

Erfordert einen Google-API-Schlüssel.
Die API verfügt über ein tägliches Kontingentlimit.
Die vollständige YouTube-Suchseite kann nicht angezeigt (nur simuliert) werden.

---

Erweiterte Funktionen

Sie können eine „Play“-Schaltfläche hinzufügen und die Playlist unter dem Video anpassen.
Verfügbariframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"Automatisch spielen.
Kann gemäß API zurückgegeben werdensnippet.thumbnailsMiniaturansicht anzeigen statt sofort einbetten.

---

offizielle Dokumente

Node.js

Was ist Node.js?

Node.js ist eine serverseitige Ausführungsumgebung, die auf der JavaScript-Engine Chrome V8 basiert und es Entwicklern ermöglicht, Back-End-Anwendungen mit JavaScript zu schreiben.

Hauptmerkmale

Asynchrone und ereignisgesteuerte Architektur, geeignet für hochgradig gleichzeitige Anwendungen
Das Single-Thread-Modell reduziert den Ressourcenverbrauch
Eine große Anzahl von Open-Source-Modulen ist verfügbar (npm)
Plattformübergreifende Unterstützung, kann unter Windows, macOS, Linux ausgeführt werden

Anwendungsszenarien

Live-Chat-Anwendung
RESTful API-Server
Streaming-Dienste (z. B. Videos, Musik)
Backend-Unterstützung für Single Page Application (SPA).

Häufig verwendete Module

express：Leichtes Webanwendungs-Framework
fs: Dateisystemoperationen
http:HTTP-Server erstellen
path: Pfad der Prozessdatei

Beispielcode

const http = require('http');

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

server.listen(3000, () => {
  console.log('Server wurde gestartet, überwacht Port 3000');
});

Abschluss

Node.js bietet Front-End-Entwicklern eine einheitliche Back-End-Entwicklungsumgebung, verbessert die Entwicklungseffizienz und eignet sich für die Erstellung moderner Netzwerkanwendungen.

NodeJS-Installation

Es gibt viele Möglichkeiten, Node.js zu installieren. Entwicklern wird jedoch dringend empfohlen, Versionsverwaltungstools (z. B. NVM) zu verwenden, anstatt die Installationsdatei der offiziellen Website direkt herunterzuladen. Dies verhindert zukünftige Berechtigungsfehler und erleichtert den Wechsel zwischen Versionen.

1. Installation mit NVM (empfohlene Methode)

Dies ist der flexibelste Ansatz und eignet sich für Computerumgebungen, die eine langfristige Entwicklung erfordern.

Windows-System

Gehe zunvm-windowsherunterladennvm-setup.exeund installieren.
Öffnen Sie ein Terminal (PowerShell oder CMD) und geben Sie Folgendes ein:

nvm install lts //Installieren Sie die neueste Langzeit-Support-Version (LTS)
nvm use lts // Diese Version wechseln und aktivieren
node -v // Bestätigen Sie, dass die Installation erfolgreich ist

macOS/Linux-System

Öffnen Sie das Terminal und führen Sie das offizielle Installationsskript aus:

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

Starten Sie das Terminal neu und führen Sie Folgendes aus:

nvm install --lts // LTS-Version installieren
node -v // Versionsnummer anzeigen

2. Von der offiziellen Website herunterladen (traditionelle Methode)

Wenn Sie nur eine schnelle Installation benötigen und nicht vorhaben, die Versionen häufig zu ändern, können Sie zu gehenOffizielle Website von Node.js。

LTS (empfohlen):Am stabilsten und für die meisten Entwickler und Produktionsumgebungen geeignet.
Current：Enthält die neuesten Funktionen, ist jedoch möglicherweise instabil.

3. Bestätigen Sie die Installationselemente

Die Installation von Node.js umfasst außerdem die folgenden Kernkomponenten:

Komponentenname	veranschaulichen
Node.js-Ausführungsumgebung	Der Kern, der die Ausführung von JavaScript auf der Serverseite ermöglicht.
npm (Node Package Manager)	Die weltweit größte Software-Registrierung zum Herunterladen von Paketen (wie Vue, React).
Corepack	Neue Tools zur Verwaltung von Paketmanagern (z. B. Yarn, pnpm).

4. Testumgebung

Nachdem die Installation abgeschlossen ist, können Sie den folgenden Befehl eingeben, um zu bestätigen, dass alle Tools bereit sind:

node -v // Knotenversion anzeigen, z. B. v20.11.0
npm -v // NPM-Version anzeigen, z. B. 10.2.4

Häufige Fehlermeldungen

Wenn Sie bei der Ausführung unter Windows die Fehlermeldung „Da die Skriptausführung auf Ihrem System verboten ist“ erhalten, öffnen Sie PowerShell bitte als Administrator und führen Sie Folgendes aus:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

NVM-Versionsverwaltungstool

nvm (Node Version Manager) ist ein Versionsverwaltungstool, das speziell für Node.js entwickelt wurde. Es ermöglicht Ihnen, mehrere verschiedene Versionen von Node.js auf demselben Computer zu installieren und zu wechseln. Dies ist ein unverzichtbares Tool für Entwickler, die mehrere Projekte gleichzeitig mit unterschiedlichen Node-Versionen verwalten müssen.

Warum NVM benötigt wird

Bei der Entwicklung von Front-End-Projekten (wie Vue, React) können unterschiedliche Projekte von bestimmten Node.js-Versionen abhängen. Durch das direkte Herunterladen der Installationsdatei von der offiziellen Website kann nur eine einzelne Version installiert werden, NVM löst jedoch das Problem von Versionskonflikten.

Allgemeine Befehle

Die folgenden NVM-Anweisungen werden während der Entwicklung häufig verwendet:

// Alle derzeit installierten Versionen anzeigen
nvmls

// Alle für die Installation in der Cloud verfügbaren Node.js-Versionen anzeigen
nvm ls-remote

// Eine bestimmte Version installieren (z. B. v18.16.0)
NVM-Installation 18.16.0

//Zur angegebenen Version wechseln
NVM verwendet 18.16.0

// Überprüfen Sie die aktuell verwendete Version
NVM-Strom

//Legen Sie die Standardversion fest (die Version, die jedes Mal automatisch verwendet wird, wenn das Terminal eingeschaltet wird)
NVM-Alias-Standard 18.16.0

NVM-Betriebsprozess

wenn Sie ausführennvm usenvm ändert Ihr System dynamischPATHUmgebungsvariablen schalten die Adresse, die auf die ausführbare Node-Datei verweist, auf den entsprechenden Versionsordner um und ermöglichen so einen problemlosen Wechsel.

Vorsichtsmaßnahmen bei der Installation

Betriebssystem	Empfohlene Versionen/Tools	Bemerkung
macOS / Linux	nvm (nvm-sh)	Die originellste und stabilste Version.
Windows	nvm-windows	Es wurde nicht vom selben Team entwickelt, aber seine Funktionen sind nahezu gleich. Zur Installation müssen Sie die EXE-Datei herunterladen.

Kleine Erinnerung

Unter Windows installierennvm-windowsVorher wird dringend empfohlen, Node.js zu deinstallieren, das ursprünglich auf Ihrem Computer installiert war, um Umgebungsvariablenkonflikte zu vermeiden, die zu Umschaltfehlern führen können.

NPM

Was ist NPM?

NPM (Node Package Manager) ist ein Paketverwaltungstool für Node.js, das zur Verwaltung von Bibliotheken und Modulen von JavaScript-Code verwendet wird. Es ermöglicht Entwicklern, die verschiedenen für ihre Projekte erforderlichen Pakete zu installieren, zu teilen und zu versionieren.

Grundfunktionen

Pakete installieren und deinstallieren: Sie können lokale oder globale JavaScript-Pakete installieren.
Versionskontrolle: Verwalten Sie Versionen jedes Pakets, um die Projektstabilität sicherzustellen.
Kit-Veröffentlichung: Entwickler können ihre selbst entwickelten Module in die NPM-Registrierung hochladen, um sie mit anderen zu teilen.

Allgemeine Befehle

npm init: Ein neues Projekt initialisieren und erstellenpackage.jsonDatei.
npm install:Installierenpackage.jsonAlle in aufgeführten abhängigen Pakete.
npm install [Paketname]: Installieren Sie das angegebene Paket.
npm uninstall [Paketname]: Das angegebene Paket entfernen.
npm update: Installierte Pakete aktualisieren.

package.json

package.jsonEs handelt sich um die Kerndatei des Projekts, in der der Projektname, die Version, die Beschreibung, abhängige Pakete und andere Informationen aufgezeichnet werden. Es ist die Basis der NPM-Management-Suite.

Häufige Verwendungen

Abhängigkeitsmanagement von Front-End-Frameworks wie React und Vue.
Modulintegration für Backend-Node.js-Projekte.
Build-Tool (z. B. Webpack, Babel) zur Paketverwaltung.

NPM und Garn

NPM ist das früheste und am weitesten verbreitete JavaScript-Paketverwaltungstool. Später sind jedoch Alternativen wie Yarn aufgetaucht, die eine schnellere Installationsgeschwindigkeit und parallele Verarbeitung bieten. Beide können in den meisten Node.js-Projekten verwendet werden.

Vite-Frontend-Konstruktionstool

Vite (französisch für „schnell“) ist eine neue Generation von Front-End-Konstruktionstools, die eine extrem schnelle Entwicklungserfahrung ermöglichen sollen. Es besteht im Wesentlichen aus zwei Teilen: einem Entwicklungsserver (basierend auf nativen ES-Modulen) und einer Reihe von Build-Anweisungen (gepackt mit Rollup).

Warum Vite wählen?

Bevor Vite erschien, war Webpack das Mainstream-Tool, aber als das Projekt größer wurde, wurde die Kompilierungsgeschwindigkeit sehr langsam. Vite löst dieses Problem:

Extrem schneller Start:Der Start des Entwicklungsservers erfolgt nahezu augenblicklich, da nicht zuerst das gesamte Projekt gepackt werden muss.
Sofortige Hot-Updates (HMR):Unabhängig von der Größe des Projekts ist das erneute Rendern nach der Änderung des Codes immer noch schnell.
Native Unterstützung:Standardunterstützung für TypeScript, JSX, CSS-Präprozessoren (wie Sass) und native ES-Module.

Erstellen Sie schnell Projekte

Mit nur einer Befehlszeile können Sie schnell wählen, ob Sie ein Vue-, React-, Svelte- oder reines JavaScript-Projekt erstellen möchten.

// Verwenden Sie npm, um ein Projekt zu erstellen
npm erstellt vite@latest my-vue-app

//Gehen Sie in den Ordner und installieren Sie das Paket
cd my-vue-app
npm installieren

//Starten Sie die Entwicklungsumgebung
npm rundev

Vite-Ausführungsanweisungen

im Projektpackage.json, sehen Sie die folgenden häufig verwendeten Skripte:

Anweisung	verwenden	veranschaulichen
npm run dev	Starten Sie den Entwicklungsserver	Wird während der lokalen Entwicklung verwendet und unterstützt Echtzeit-Updates.
npm run build	Projektverpackung	Erstellen Sie hochoptimierte statische Dateien (im Ordner „dist“).
npm run preview	Vorschau der Verpackungsergebnisse	Simulieren Sie den Betriebsstatus nach der lokalen Bereitstellung.

Vite-Konfigurationsdatei (vite.config.js)

Die Konfiguration von Vite ist sehr intuitiv und wird normalerweise zum Hinzufügen von Plug-Ins (Plugins) oder zum Einrichten eines Server-Proxys (Proxy) verwendet.

importiere { defineConfig } aus 'vite'
vue aus „@vue/plugin-vue“ importieren

Standard exportieren defineConfig({
  Plugins: [vue()],
  Server: {
    port: 3000, // Ändern Sie die Portnummer des Entwicklungsservers
    open: true // Browser beim Start automatisch öffnen
  }
})

Im Vergleich zu herkömmlichen Werkzeugen

Webpack：Wie bei einer voll funktionsfähigen „Großverarbeitungsfabrik“ müssen alle Teile vor Inbetriebnahme bearbeitet werden. Es ist langsamer, aber äußerst funktional.
Vite：Wie „Modern Express“ lädt es dynamisch alle benötigten Teile, extrem schnell und im Einklang mit modernen Browserstandards.

Electron

Was ist Elektron?

Electron ist ein Open-Source-Framework, das es Entwicklern ermöglicht, plattformübergreifende Desktop-Anwendungen mit HTML, CSS und JavaScript zu erstellen. Es kombiniert Chromium und Node.js, um Webtechnologien den Zugriff auf native Systemressourcen zu ermöglichen.

Hauptmerkmale

Plattformübergreifende Unterstützung: Windows, macOS, Linux
Gleichzeitiges Verwenden des Frontends mit der Node.js-API
Erstellen Sie Desktop-Anwendungen mithilfe von Webtechnologien
Aktive Community und umfangreiche Paketunterstützung

Anwendbare Szenarien

Chat-Programm (z. B. Slack)
Programmeditor (z. B. Visual Studio Code)
Desktop-Web-App
Plattformübergreifende Systemtools

Installation und Initialisierung

npm install --save-dev electron

Einfachstes Beispiel

// 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-Homepage

<!DOCTYPE html>
<html>
  <Körper>
    <h1>Hallo Electron! </h1>
  </body>
</html>

Anwendung starten

npx electron .

Entwicklungsvorschläge

Trennen Sie den Hauptprozess und den Rendering-Prozess
Verwenden Sie IPC, um zwischen dem Hauptprogramm und der Front-End-Seite zu kommunizieren
Verpackungswerkzeuge wie zelectron-builderKann zum Generieren von Installationsdateien verwendet werden

TypeScript

TypeScript ist eine von Microsoft entwickelte Obermenge von JavaScript. Es fügt JavaScript ein „Typsystem“ hinzu und wird schließlich zur Ausführung im Browser in reines JavaScript kompiliert. Es löst das Problem, dass JavaScript als schwach typisierte Sprache schwer zu warten und in großen Projekten fehleranfällig ist.

Warum TypeScript verwenden?

Fehlervermeidung:Der Compiler kann Tippfehler oder Typkonflikte erkennen, bevor der Code ausgeführt wird.
Automatische Vervollständigung:Leistungsstarke Typdefinitionen ermöglichen es IDEs (wie VS Code), äußerst präzise Codehinweise bereitzustellen.
Einfach umzugestalten:Wenn eine Variablen- oder Funktionsstruktur geändert wird, wird an allen betroffenen Stellen eine Warnung angezeigt.

Basistyp-Tag

Durch Hinzufügen nach der Variablen: typeum den Typ zu deklarieren.

let name: string = "Gemini";
lass Alter: Zahl = 18;
let isStudent: boolean = true;

//Array-Typ
let stocks: string[] = ["AAPL", "TSLA", "NVDA"];

// Funktionsparameter und Rückgabewerttypen
Funktion add(a: Zahl, b: Zahl): Zahl {
    gib a + b zurück;
}

Schnittstelle und benutzerdefinierte Typen

Dies ist eine der leistungsstärksten Funktionen von TypeScript und wird zum Definieren der Struktur (Form) von Objekten verwendet.

Schnittstelle Benutzer {
    ID: Nummer;
    Benutzername: Zeichenfolge;
    E-Mail?: string; // Fragezeichen zeigt optionales Attribut an
}

const newUser: Benutzer = {
    ID: 1,
    Benutzername: „Alex“
};

Die Kombination aus TypeScript und Vite

Moderne Entwicklungsumgebungen wie Vite unterstützen standardmäßig TypeScript. Wählen Sie diese Option aus, wenn Sie ein Projekt erstellenvue-tsoderreact-ts, Vite wird automatisch damit umgehentsconfig.jsonKonfiguration.

// Verwenden Sie Vite, um ein TS-Projekt zu erstellen
npm create vite@latest my-ts-app -- --template vue-ts

Kombiniert mit früheren JavaScript-Konzepten

Das Umschreiben der zuvor erwähnten Zufallsauswahlfunktion in eine TypeScript-Version macht es sicherer:

// Generisch <T> Ermöglicht dieser Funktion die Verarbeitung von Arrays jeglichen Typs
function getRandomElements<T>(arr: T[], count: number = 5): T[] {
    if (arr. Länge<= 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-Kompilierungsprozess

TypeScript-Dateien (.ts) können nicht direkt im Browser ausgeführt werden und ihr Lebenszyklus ist wie folgt:

Bühne	Aktion	Werkzeug
Schreibzeitraum	Definieren Sie Typen und schreiben Sie .ts-Code	VS Code + TS Engine
Kompilierzeit	Suchen Sie nach Typfehlern und entfernen Sie Typ-Tags	tsc / Vite / esbuild
Ausführungszeitraum	Führen Sie reine .js-Dateien im Browser aus	Browser Engine

Browsererweiterungen

Grunddefinition

Browser Extension ist eine kleine Anwendung zur Erweiterung von Browserfunktionen, die normalerweise in HTML, CSS und JavaScript geschrieben ist. Es kann Webseiteninhalte ändern, Symbolleistenschaltflächen hinzufügen, mit Hintergrunddiensten interagieren und die Benutzererfahrung verbessern.

Häufige Verwendungen

Änderung des Webseiteninhalts:Wie Werbeblocker, Übersetzungstools.
Funktionen der Symbolleiste:Klicken Sie auf das Symbol, um bestimmte Vorgänge auszuführen, z. B. das Erstellen von Screenshots und das Erstellen von Notizen.
Läuft im Hintergrund:Überwachen Sie kontinuierlich Ereignisse wie automatische Synchronisierung und Erinnerungen.
Interagieren Sie mit der Website:Steuern Sie den Browser oder lesen Sie bestimmte Website-Daten über die API.

Hauptdateien

manifest.json: Beschreiben Sie den Namen, die Version, die Berechtigungen und den Zugang der erweiterten Funktion.
popup.html: Die Schnittstelle, die nach dem Klicken auf das Symbolleistensymbol angezeigt wird.
background.js: Residentes Hintergrundskript, das zum Verarbeiten von Ereignissen und Logik verwendet wird.
content.js: In Webseiten eingefügte Skripte können das DOM direkt manipulieren.

Unterstützte Browser

Google Chrome：Verwenden von Manifest V3 überchrome://extensions/laden.
Microsoft Edge：Kompatibel mit Chrome und kann direkt installiert oder geladen werden.
Firefox：Verwendet die WebExtensions-API und hat eine ähnliche Struktur wie Chrome.
Safari：Erfordert Xcode-Entwicklung und unterstützt einige WebExtensions-APIs.

Entwicklungsprozess

Erstellen Sie einen Ordner und legen Sie ihn abmanifest.jsonund zugehörige Dateien.
Gehen Sie zur Seite mit den Browsererweiterungen und aktivieren Sie den „Entwicklermodus“.
Klicken Sie auf „Ungepacktes Projekt laden“ und wählen Sie den Ordner aus.
Testen Sie die Funktionalität und passen Sie den Code gegebenenfalls an.

Dinge zu beachten

Seien Sie beim Anfordern von Berechtigungen vorsichtig, um einen übermäßigen Zugriff auf Benutzerdaten zu vermeiden.
Obwohl verschiedene Browser die WebExtensions-API unterstützen, können die Details leicht variieren.
Wenn es öffentlich veröffentlicht werden soll, muss es gemäß den Spezifikationen jedes Browser-Stores aufgeführt werden.

Beispiele für Chrome-Erweiterungen

Erstellen Sie eine Dateistruktur

my-extension/
 ├─ manifest.json
 ├─ popup.html
 ├─ popup.js
 └─ icon.png

manifest.json

{
  „manifest_version“: 3,
  „name“: „Hallo Erweiterung“,
  „Version“: „1.0“,
  „description“: „Ein einfaches Chrome-Erweiterungsbeispiel“,
  „Aktion“: {
    „default_popup“: „popup.html“,
    "default_icon": {
      „16“: „icon.png“,
      „48“: „icon.png“,
      „128“: „icon.png“
    }
  },
  "Berechtigungen": []
}

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", () => {
  alarm("Schaltfläche angeklickt!");
});

icon.png

Platzieren Sie ein PNG-Symbol (empfohlene Größe 128 x 128), damit die Symbolleiste angezeigt wird.

Erweiterung laden

einschaltenchrome://extensions/
Öffnen Sie die obere rechte EckeEntwicklermodus
KlickenEntpacktes Projekt laden, wählen Sie den Ordner aus, den Sie gerade erstellt haben
Sie können das Symbol in der Symbolleiste sehen und nach dem Klicken erscheint ein Popup-Fenster.

Entwicklungstools für Chrome-Erweiterungen

Kernentwicklungssprache

Chrome-Erweiterungen basieren auf Standard-Webtechnologien, sodass ihre Kernsprache vollständig mit der Webentwicklung übereinstimmt, die eine wesentliche Grundlage darstellt.

HTML (HyperText Markup Language): Wird zum Definieren der Benutzeroberfläche (UI) erweiterter Funktionen wie Popup-Fenster (Popup), Optionsseite (Options Page) und anderer Strukturen verwendet.
CSS (Cascading Style Sheets): Wird zum Verschönern und Layouten von UI-Elementen verwendet.
JavaScript (JS): Dies ist die Kernlogiksprache für erweiterte Funktionalität. Sämtliches Verhalten, einschließlich Inhaltsskripts, Service-Worker-/Hintergrundskripts und UI-Interaktionen, muss in JavaScript (oder seinem Obersatz TypeScript) geschrieben werden.

Erweiterte Sprachoptionen: TypeScript

TypeScript (TS): Obwohl letztendlich JavaScript ausgeführt wird, wird TypeScript dringend empfohlen. TS bietet eine statische Typprüfung, die die Wartbarkeit des Programmcodes erheblich verbessern und Laufzeitfehler bei großen oder komplexen Erweiterungsprojekten reduzieren kann. Die meisten modernen Frameworks unterstützen TypeScript nativ.

Frontend-Frameworks und Bibliotheken (optional)

Um komplexere und reaktivere Benutzeroberflächen (insbesondere Popups und Optionsseiten) zu erstellen, können gängige Frontend-Frameworks verwendet werden. Beachten Sie jedoch, dass es im Allgemeinen nicht empfohlen wird, schwergewichtige Frameworks in Hintergrund-Service-Workern zu verwenden, die die Funktionalität erweitern.

React / Vue / Svelte / SolidJS: Wird zum Erstellen von UI-Schnittstellen wie Popup-Fenstern (popup.html) und Optionsseiten (options.html) verwendet und bietet Komponentenisierungs- und Statusverwaltungsfunktionen.
JQuery: Wenn Sie nur einfache DOM-Manipulation und -Animation benötigen, ist JQuery immer noch eine einfache und schnelle Wahl, aber jetzt tendieren immer mehr Entwickler dazu, natives JavaScript oder modernere Frameworks zu verwenden.

Moderne Entwicklungstools und -suiten (empfohlen)

Um den Entwicklungsprozess zu vereinfachen, Code-Paketierung zu handhaben, Hot-Reloading (Hot-Reloading) und Cross-Browser-Kompatibilität zu gewährleisten, liegt der Einsatz moderner Entwicklungstools im Trend.

Werkzeuge/Kits	verwenden	Vorteile
Vite / Webpack	Bundler	Packen Sie mehrere Codedateien, Stile und Ressourcen in ein browserlesbares Format, um die Codegröße zu optimieren. Vite ist für seinen schnellen Hot-Module-Replacement (HMR) sehr beliebt.
WXT / Plasmo	Spezielles Framework für erweiterte Funktionen	Als Framework, das speziell für die Entwicklung von Erweiterungen entwickelt wurde, kann es automatisch die Generierung von Manifestdateien, die TypeScript-Konfiguration, das Hot-Reloading und die browserübergreifende Unterstützung (Chrome, Firefox, Edge usw.) verarbeiten, was die Entwicklungserfahrung erheblich vereinfacht.
pnpm / npm / yarn	Paketverwaltungstools	Verwalten Sie JavaScript-Bibliotheken und -Tools von Drittanbietern, von denen Ihr Projekt abhängt.

Offizielle und Debugging-Tools

Dies ist ein unverzichtbares Tool für die gesamte Entwicklung von Chrome-Erweiterungen.

Chrome Developer Tools (DevTools): Dies ist das primäre Debugging-Tool. Sie können Inhaltsskripte überprüfen, Servicemitarbeiter debuggen, Netzwerkanforderungen überwachen und DOM und CSS in Popups oder Optionsseiten überprüfen.
Manifest V3: Die neueste erweiterte Funktionsspezifikation, die das alte Manifest V2 ersetzt. Alle neuen Erweiterungen müssen der V3-Spezifikation entsprechen, insbesondere gibt es erhebliche Änderungen bei der Hintergrundskripterstellung (unter Verwendung von Servicemitarbeitern) und den Einschränkungen für Remotecode.

PHP

PHP-Informationswebsite

PHP-Handbuch

php.ini

Einführung

php.iniEs ist die Hauptkonfigurationsdatei von PHP und beeinflusst den Ausführungsmodus und die Funktionen von PHP. Durch Ändern dieser Datei können Sie die Fehlerausgabe, Speichergrenzen, Upload-Größe, Zeitzone und mehr anpassen.

Standort

Windows: befindet sich normalerweise inC:\php\php.iniOder im Installationsverzeichnis.
Linux: Häufig zu finden in/etc/php/version number/apache2/php.inioder/etc/php/version/cli/php.ini。
Verfügbarphp --iniFragen Sie die von der CLI verwendete Konfigurationsdatei ab.

Verwendete php.ini-Prioritäten

Wenn PHP startet, sucht es in der folgenden Reihenfolge nach Konfigurationsdateien und die erste gefundene wird geladen:

Bei Verwendung-cWenn der Parameter angegeben ist, wird zuerst der Pfad geladen.php.ini。
UmgebungsvariablenPHPRCdas angegebene Verzeichnis.
Das Standardinstallationsverzeichnis, wenn PHP kompiliert wird (verfügbarphp --inioderphpinfo()Abfrage).
In einigen Betriebssystemen suchen Sie möglicherweise auch nach/etc/php.inioderC:\Windows。

Allgemeine Einstellungen

; Zeitzone einstellen
date.timezone = Asien/Taipeh

; Fehler anzeigen
display_errors = Ein
error_reporting = E_ALL

; Dateigröße hochladen
upload_max_filesize = 20 MB
post_max_size = 25M

; Speicherlimit
Memory_limit = 256 MB

; Maximale Ausführungszeit (Sekunden)
max_execution_time = 30

Einstellungen laden

Überarbeitenphp.iniAnschließend müssen Sie Apache, Nginx oder PHP-FPM neu starten, damit es wirksam wird.
verfügbarphpinfo()Überprüfen Sie die aktuell geladene Dateiphp.iniPfad- und Parameterwerte.

Dinge zu beachten

Verschiedene Ausführungsumgebungen (Apache, CLI, Nginx) können unterschiedliche verwendenphp.ini。
Kann erstellt werden.user.inioder.htaccessEinige Einstellungen überschreiben.
Ändern Sie die Einstellungen für die Fehlerausgabe. Es wird empfohlen, es in der Entwicklungsumgebung einzuschalten und in der offiziellen Umgebung auszuschalten.

PHP-Boolescher Wert

Der boolesche Wert ist der einfachste Datentyp in PHP. Es kann nur zwei Zustände darstellen: **wahr** oder **falsch**. Boolesche Werte werden häufig für Steuerungsprozesse verwendet (z. B.if/elseBedingtes Urteil) und logische Operationen.

Grundlegende Verwendung

Sie können Schlüsselwörter verwendentrueoderfalseum eine boolesche Variable zu definieren. Bei diesen Schlüsselwörtern wird die Groß-/Kleinschreibung nicht beachtet (z. B.TRUE、Trueodertruesind gleich), es wird jedoch generell empfohlen, Kleinbuchstaben zu verwendentrueUndfalseum der üblichen Praxis zu entsprechen.

$is_active = true;
$is_logged_out = FALSE; // Großbuchstaben sind zwar möglich, werden aber nicht empfohlen.

//Bedingtes Urteil
if ($is_active) {
    echo "<p>Der Benutzer ist derzeit aktiv.</p>";
} sonst {
    echo "<p>Der Benutzer ist derzeit inaktiv.</p>";
}

Boolesche Wertkonvertierung (Casting)

Wenn PHP einen booleschen Wert erwartet, aber einen anderen Datentyp erhält (z. B. inifBedingung), konvertiert PHP den Wert automatisch in einen booleschen Wert (oder wandelt diesen um).

Die folgenden Werte gelten als falsch (sogenannte Falschwerte):

Bollinger-Wertfalseselbst.
ganze Zahl0(null).
Gleitkommazahl0.0(null).
leere Zeichenfolge""oder''。
Zeichenfolge"0"(eine Zeichenfolge, die die einstellige Null enthält).
leeres Arrayarray()oder[]。
besonderer TypNULL。
Ein SimpleXML-Objekt ohne untergeordnete Knoten (ungewöhnlich).

Alle anderen Werte, einschließlich aller Zahlen ungleich Null, aller nicht leeren Zeichenfolgen (gerade)."false"oder" "[einschließlich Leerzeichen]), wird als **wahr (wahr)** behandelt (genannt Wahrheitswert).

Beispiel für die Typkonvertierung

$a = 0;
$b = "Hallo";
$c = "";
$d = [1, 2];
$e = null;

echo "<h3>Beispiel für einen falschen Wert</h3>";
if (!$a) { // $a (0) wird in false konvertiert
    echo "<p>$a (Ganzzahl 0) wird als FALSCH behandelt.</p>";
}
if (!$c) { // $c (leerer String) wird in false konvertiert
    echo "<p>$c (leerer String) wird als FALSE behandelt.</p>";
}
if (!$e) { // $e (NULL) wird in false konvertiert
    echo "<p>NULL wird als FALSE behandelt.</p>";
}

echo "<h3>Beispiel für einen wahren Wert</h3>";
if ($b) { // $b ("Hallo") wird in true konvertiert
    echo "<p>$b (nicht leere Zeichenfolge) wird als TRUE behandelt.</p>";
}
if ($d) { // $d (nicht leeres Array) wird in true konvertiert
    echo "<p>Nicht leere Arrays werden als TRUE behandelt.</p>";
}

In booleschen Wert umwandeln

Sie können auch verwenden(bool)oderboolval()Die Funktion konvertiert die Variable explizit in einen booleschen Wert, was beim Debuggen oder wenn eine strenge Typprüfung erforderlich ist, nützlich ist.

$f = "0"; // String mit der Nummer Null
$g = 100; // positive ganze Zahl

$f_bool = (bool)$f;
$g_bool = boolval($g);

echo "<p>Die Zeichenfolge '0' wird konvertiert in: ";
var_dump($f_bool); // Ausgabe: bool(false)
echo "</p>";

echo "<p>Die Ganzzahl 100 wird konvertiert in: ";
var_dump($g_bool); // Ausgabe: bool(true)
echo "</p>";

PHP-Vergleichsoperatoren

In PHP werden Vergleichsoperatoren verwendet, um zwei Werte (Zahlen oder Strings) zu vergleichen. Entsprechend dem Vergleichsergebnis wird es zurückgegebentrueoderfalse. Das Verständnis des Unterschieds zwischen „losem Vergleich“ und „strengem Vergleich“ ist der Schlüssel zur Vermeidung von Programmfehlern.

1. Liste häufig verwendeter Vergleichsoperatoren

Operator	Name	Beispiel	Bedingungen, die wahr sind
`==`	gleich (lose)	`$a == $b`	Werte sind gleich (Typvergleich wird automatisch konvertiert)
`===`	Kongruent (streng)	`$a === $b`	Die Werte sind gleich und auch die Typen sind gleich
`!=` / `<>`	nicht gleich	`$a != $b`	Werte sind nicht gleich
`!==`	Nicht deckungsgleich	`$a !== $b`	Werte sind nicht gleich oder Typen sind nicht gleich
`>`	größer als	`$a > $b`	$a ist größer als $b
`<`	weniger als	`$a < $b`	$a ist kleiner als $b
`>=`	Größer oder gleich	`$a >= $b`	$a ist größer oder gleich $b
`<=`	kleiner oder gleich	`$a <= $b`	$a ist kleiner oder gleich $b
`<=>`	Raumschiffbetreiber	`$a <=> $b`	Gibt -1, 0 oder 1 zurück (PHP 7+)

2. Eingehende Analyse: der Unterschied zwischen == und ===

Dies ist der häufigste Bereich der Verwirrung in der PHP-Entwicklung. PHP ist eine schwach typisierte Sprache.==Ich werde versuchen, Variablen unterschiedlichen Typs in denselben Typ umzuwandeln, bevor ich sie vergleiche, und===Es findet überhaupt keine Konvertierung statt.

loser Vergleich (==)

Dies gilt, solange die „Werte“ nach der Konvertierung gleich sind:

$a = 100; // Ganzzahl (int)
$b = "100"; // string (string)

if ($a == $b) {
    echo „Gleich“; // Dies wird ausgeführt, da PHP Zeichenfolgen in numerische Vergleiche umwandelt
}

Strenger Vergleich (===)

Der „Wert“ muss genau mit dem „Datentyp“ übereinstimmen:

$a = 100;
$b = "100";

if ($a === $b) {
    echo „Gleich“;
} sonst {
    echo „ungleich“; // Dies wird ausgeführt, da int nicht gleich string ist
}

3. Sonderfälle: Ternärer Operator und Zusammenführungsoperator

Die Abkürzungssyntax macht Ihren Code sauberer, wenn es um Vergleichslogik geht:

Ternärer Operator (Ternär): $result = ($a > $b) ? „A Big“ : „B Big“;
Null-Zusammenführung: $name = $input_name ?? "Gast";(Stellt einen Standardwert bereit, wenn die Variable nicht existiert oder null ist).

Sicherheitshinweis:Achten Sie bei der Durchführung von Authentifizierung, Berechtigungsprüfungen oder der Beurteilung des API-Rückgabewerts darauf, Folgendes zu verwenden:===. Zum Beispiel überprüfenstrpos()Der Rückgabewert von0(Position) undfalse(nicht gefunden) in==werden als gleich behandelt, was zu logischen Fehlern führt.

PHP-Array

In PHP ist ein Array ein sehr nützlicher zusammengesetzter Datentyp, der mehrere Werte in einer einzigen Variablen speichern kann. Das Array von PHP ist eigentlich eine geordnete Karte. Eine Karte ist ein Typ, der Werte mit Schlüsseln verknüpft.

Funktionen von PHP-Arrays

Gemischte Schlüssel:Die Schlüssel des Arrays können ganze Zahlen (Index, Index) oder Zeichenfolgen (Schlüssel, Schlüsselname) sein.
Gemischte Werte:Die Werte im Array können ein beliebiger PHP-Datentyp sein, einschließlich anderer Arrays (die mehrdimensionale Arrays bilden).
Dynamische Größe:Die Größe des Arrays ist dynamisch und Sie müssen seine Kapazität nicht im Voraus angeben.

Array-Typ

PHP-Arrays können basierend auf der Art ihrer Schlüssel grob in drei gängige Formen unterteilt werden:

1. Indizierte Arrays

Verwenden Sie aufeinanderfolgende ganze Zahlen als Schlüssel. Wenn Sie beim Erstellen des Arrays keinen Schlüssel angeben, beginnt PHP mit0Beginnen Sie mit der automatischen Zuweisung ganzzahliger Indizes.

//Erstelle ein indiziertes Array
$fruits = array("apple", "banana", "orange");
// Oder Kurzschriftsyntax verwenden (nach PHP 5.4)
$colors = ["rot", "grün", "blau"];

//Auf Elemente zugreifen
echo $fruits[0]; // Ausgabe: Äpfel
echo $colors[2]; // Ausgabe: blau

2. Assoziative Arrays

Verwenden Sie Zeichenfolgen als Schlüssel (Schlüsselnamen). Dadurch können Sie aussagekräftige Namen verwenden, um auf die Werte im Array zuzugreifen.

//Erstelle ein assoziatives Array
$person = array(
    „name“ => „Xiao Ming“,
    "Alter" => 25,
    „Stadt“ => „Taipeh“
);

// Oder verwenden Sie eine Kurzform-Syntax
$scores = [
    „Mathe“ => 90,
    "Englisch" => 85
];

//Auf Elemente zugreifen
echo $person["name"]; // Ausgabe: Xiao Ming
echo $scores["Englisch"]; // Ausgabe: 85

3. Mehrdimensionale Arrays

Die Werte im Array sind wiederum ein weiteres Array. Dies wird normalerweise zum Speichern tabellarischer oder hierarchischer Daten verwendet.

$students = [
    [
        „Name“ => „Alice“,
        „scores“ => [„Mathe“ => 95, „Naturwissenschaften“ => 88]
    ],
    [
        „Name“ => „Bob“,
        „scores“ => [„Mathe“ => 78, „Wissenschaft“ => 92]
    ]
];

//Zugriff auf Elemente (Zugriff auf Bobs Wissenschaftsergebnisse)
echo $students[1]["scores"]["Science"]; // Ausgabe: 92

Allgemeine Array-Operationsfunktionen

PHP bietet Hunderte integrierter Funktionen für die Arbeit mit Arrays. Hier sind einige der am häufigsten verwendeten:

count($array): Zählt die Anzahl der Elemente im Array.
print_r($array): Zeigt die Struktur und Werte eines Arrays in einem für Menschen lesbaren Format an (wird normalerweise zum Debuggen verwendet).
array_push($array, $value1, ...): Ein oder mehrere Elemente an das Ende des Arrays verschieben (hinzufügen).
array_pop($array): Entfernt das letzte Element im Array (entfernt es und gibt es zurück).
array_keys($array): Gibt ein neues Array zurück, das aus allen Schlüsselnamen im Array besteht.
array_values($array): Gibt ein neues Array zurück, das aus allen Werten im Array besteht.
in_array($needle, $haystack): Überprüfen Sie, ob ein bestimmter Wert im Array vorhanden ist.
array_key_exists($key, $array): Überprüfen Sie, ob ein bestimmter Schlüssel im Array vorhanden ist.

Array-Iteration (Looping)

Häufig verwendetforeachDurchlaufen Sie alle Elemente im Array:

$staff = ["Manager" => "Zhang San", "Ingenieur" => "Li Si", "Designer" => "Wang Wu"];

// Das assoziative Array durchlaufen (Schlüssel und Werte abrufen)
foreach ($staff as $title => $name) {
    echo $title . ": " . $name . "<br>";
}

// Das indizierte Array durchlaufen (nur Werte abrufen)
$items = ["A", "B", "C"];
foreach ($items als $item) {
    echo $item . "<br>";
}

Der PHP-String-Vergleich ignoriert die Groß-/Kleinschreibung

strcasecmp()

Verfügbar in PHPstrcasecmp()Führen Sie Zeichenfolgenvergleiche ohne Berücksichtigung der Groß- und Kleinschreibung durch. Wenn der zurückgegebene Wert 0 ist, bedeutet dies, dass die beiden Zeichenfolgen gleich sind.

<?php
$str1 = "Hallo";
$str2 = "Hallo";

if (strcasecmp($str1, $str2) === 0) {
    echo „Strings sind gleich (Groß-/Kleinschreibung wird ignoriert)“;
} sonst {
    echo „Strings sind nicht gleich“;
}
?>

str_ireplace()

Um Vergleiche oder Ersetzungen durchzuführen, bei denen die Groß-/Kleinschreibung ignoriert wird, können Sie verwendenstr_ireplace()。

<?php
$text = "Hallo Welt";
$result = str_ireplace("hello", "Hi", $text);
echo $result; // Ausgabe „Hi World“
?>

preg_match() mit i-Modifikator

Wenn Sie den Vergleich mit regulären Ausdrücken verwenden, können Sie nach dem Muster hinzufügeniGroß-/Kleinschreibung ignorieren.

<?php
if (preg_match("/hello/i", "HeLLo PHP")) {
    echo „Vergleich erfolgreich“;
}
?>

Verarbeitung von PHP-Pfadzeichenfolgen

Bei der Verarbeitung von Dateipfad-Strings in PHP ist das handschriftliche String-Slicing (z. B. usingexplode), da unterschiedliche Betriebssysteme (Windows verwendet\, für Linux/) werden unterschiedlich gehandhabt. PHP verfügt über mehrere leistungsstarke integrierte Funktionen zum sicheren Zerlegen von Pfaden.

1. pathinfo() – das vielseitigste Tool

Dies ist meine am meisten empfohlene Funktion. Der Pfad kann in Folgendes zerlegt werden: Verzeichnisname, vollständiger Dateiname, Dateierweiterung und Dateiname ohne Erweiterung.

$path = "/var/www/html/assets/img/logo.png";
$info = pathinfo($path);

echo $info['dirname']; // /var/www/html/assets/img
echo $info['basename']; // logo.png
echo $info['extension']; // png
echo $info['Dateiname']; // Logo (PHP 5.2+ unterstützt)

2. basename() und dirname() – erhalten Sie schnell Teilpfade

basename：Rufen Sie den Teil „Dateiname“ des Pfads ab.
dirname：Rufen Sie den „Verzeichnis“-Teil des Pfads ab.

$path = "C:\projects\web\index.php";

echo Basisname($path); // index.php
echo basename($path, ".php"); // index (die angegebene Dateierweiterung entfernen)
echo dirname($path); // C:\Projekte\web

3. realpath() – Den absoluten Pfad (Entitätspfad) abrufen

Es werden alle relativen Pfadsymbole aufgelöst (z. B../oder./) und gibt den wahren absoluten Pfad auf dem Betriebssystem zurück. Wenn die Datei nicht existiert, wird sie zurückgegebenfalse。

echo realpath("../../config.php");
//Ausgabe ähnlich: /var/www/config.php

---

== Häufige Pfadverarbeitungsszenarien

Szenario A: Plattformübergreifende Pfadkorrektur

Um sicherzustellen, dass bei der Windows-Entwicklung und Linux-Bereitstellung keine Fehler auftreten, empfiehlt es sich, Backslashes einheitlich in Forwardslashes umzuwandeln:

$path = "C:\Benutzer\Admin\Desktop\test.txt";
$safe_path = str_replace('\\', '/', $path);
// Ergebnis: C:/User/Admin/Desktop/test.txt

Szenario B: Pfade zusammenführen (um zusätzliche Schrägstriche zu verhindern)

Manuelles Spleißen$dir . '/' . $fileneigen dazu, zu erscheinen//Doppelter Schrägstrichfehler. Kann verwendet werdenDIRECTORY_SEPARATOR(Systemtrennzeichen) oderrtrim：

$dir = "/var/www/html/";
$file = "index.php";

//Universelle Spleißmethode
$full_path = rtrim($dir, '/\\') . DIRECTORY_SYSTEM_SEPARATOR . $datei;

Szenario C: Überprüfen Sie, ob die Dateierweiterung zulässig ist

$allowed = ['jpg', 'png', 'gif'];
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

if (in_array($ext, $allowed)) {
    echo „Richtiges Format“;
}

---

== Zusammenfassende Vergleichstabelle

Funktion	Eingabebeispiel:`/data/web/test.php`	Ergebnisse zurückgeben
pathinfo()	`pathinfo($p)`	Gibt ein assoziatives Array (Array) zurück, das alle Informationen enthält
basename()	`basename($p)`	`test.php`(Reiner Dateiname)
dirname()	`dirname($p)`	`/data/web`(Inhaltsverzeichnis)
realpath()	`realpath("./test.php")`	`/absolute/path/to/test.php`(echter Weg)

== Rufen Sie das Verzeichnis der obersten Ebene des Pfads ab (Name des Stammverzeichnisses).

Um den genauen Verzeichnisnamen der obersten Ebene aus einer Pfadzeichenfolge zu erhalten (z. B.var), besteht die robusteste Methode darin, zuerst den Pfad zu konvertierenNormalisierung, und dann verwendenexplode()Zerlegen Sie die Zeichenfolge. Da der Pfad normalerweise mit einem Schrägstrich beginnt, ist das erste Element des zerlegten Arrays häufig leer, was eine besondere Behandlung erfordert.

Methode 1: Verwenden Sie Explodieren zum Zerlegen (am intuitivsten)

Dies ist der gebräuchlichste Wegltrim()Entfernen Sie vor dem Teilen den führenden Schrägstrich und stellen Sie sicher, dass die erste Position im Array den gewünschten Namen hat.

$path = "/var/www/html/assets/img/logo.png";

// 1. Entfernen Sie zuerst den Schrägstrich ganz links, um das leere erste Element zu vermeiden, das durch Explodieren erzeugt wird
// 2. Aufteilen in Arrays nach Schrägstrichen
$parts = explosion('/', ltrim($path, '/'));

// 3. Holen Sie sich das erste Element des Arrays
$rootDir = $parts[0];

echo $rootDir; // Ausgabe: var

Methode 2: Universelle Verarbeitung über Plattformen hinweg (die robusteste)

Wenn Ihr Pfad möglicherweise von Windows oder Linux stammt, wird empfohlen, zunächst das Schrägstrichformat zu vereinheitlichen und doppelte Schrägstriche herauszufiltern.

$path = "/var/www/html/assets/img/logo.png";

//Konvertiert gleichmäßig in Schrägstriche und filtert leere Elemente heraus
$parts = array_values(array_filter(explode('/', $path)));

$rootDir = $parts[0] ?? '';
echo $rootDir; // Ausgabe: var

Methode 3: Web Root für die „aktuelle Ausführungsumgebung“ abrufen

Wenn Sie keine „spezifischen Zeichenfolgen“ verarbeiten möchten, sondern den Namen des Stammordners des Webservers wissen möchten, können Sie Folgendes verwenden$_SERVER：

// Angenommen, DOCUMENT_ROOT ist /var/www/html
$rootParts = explosion('/', ltrim($_SERVER['DOCUMENT_ROOT'], '/'));
echo $rootParts[0]; // Ausgabe: var

---

== Logische Vergleichstabelle verarbeiten

Ziel	Entsprechender Code	Beispiel für Ergebnisse
Verzeichnis der obersten Ebene	`explode('/', ltrim($path, '/'))[0]`	`var`
Vorheriges Verzeichnis	`basename(dirname($path))`	`img`
Vollständiger Verzeichnispfad	`dirname($path)`	`/var/www/html/assets/img`

Tipps

Achten Sie beim Arbeiten mit Pfaden unbedingt darauf, ob am Anfang des Pfades ein Schrägstrich steht."/var"Nach der Aufteilung wird es["", "var"],Und"var"Nach der Aufteilung wird es["var"]. verwendenltrim($path, '/')Dadurch wird sichergestellt, dass das Ergebnis konsistent ist, unabhängig davon, ob am Anfang ein Schrägstrich steht.

PHP beinhaltet Pfadpriorität

Priorität	veranschaulichen
1.	Angegebener absoluter Pfad oder relativer Pfad: Geben Sie direkt den Pfad der Datei an, und PHP sucht zunächst unter diesem Pfad nach der Datei.
2	Das aktuelle Verzeichnis der ausführbaren Datei: Wenn der vollständige Pfad nicht angegeben ist, sucht PHP zunächst in dem Verzeichnis nach der Datei, in dem sich die ausführbare Datei befindet.
3	include_path-Einstellung: Wenn die Datei nicht im Ausführungsverzeichnis gefunden werden kann, führt PHP eine Überprüfung durch`php.ini`einsetzen`include_path`Weg.
4	Datei existiert nicht: Wenn die Datei in keinem der oben genannten Pfade gefunden werden kann, wird eine Warnung generiert (`Warning`) und zurück`false`。

PHP erhält den aktuellen Seitennamen

Verwenden Sie $_SERVER['PHP_SELF']

durchgehen kann$_SERVER['PHP_SELF']Rufen Sie den Dateipfad der aktuellen Ausführung ab und verwenden Sie ihn dannbasenameDateinamen abrufen:

<?php
$current_page = Basisname($_SERVER['PHP_SELF']);
echo "Aktueller Seitenname:" . $current_page;
?>

Verwenden Sie $_SERVER['REQUEST_URI']

durch$_SERVER['REQUEST_URI']Holen Sie sich den vollständigen URL-Pfad und verwenden Sie ihn dannparse_urlUndbasenameParse-Dateiname:

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$current_page = Basisname($url_path);
echo "Aktueller Seitenname:" . $current_page;
?>

Unterscheiden Sie zwischen Dateinamen und zusätzlichen Parametern

Wenn die URL Abfrageparameter enthält, können diese separat verarbeitet werden:

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$query_string = parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY);
$current_page = Basisname($url_path);

echo "Dateiname:" . $current_page . "<br>";
echo "Abfrageparameter:" .$query_string;
?>

Anwendungsbeispiele

Angenommen, die aktuelle URL lautethttps://example.com/page.php?id=123：

Aktueller Seitenname: page.php
Dateiname: page.php
Abfrageparameter: id=123

PHP ruft die aktuelle Seite und die Einstiegsseite ab

In PHP, wannmain.phpverwendenincludeeinführensubpage.phpZu diesem Zeitpunkt werden die beiden Dateien tatsächlich „zusammengeführt und ausgeführt“. Um den „Hauptprogrammpfad“ bzw. den „eingeführten Dateipfad“ zu erhalten, müssen Sie verschiedene superglobale Variablen und Konstanten verwenden.

1. Holen Sie sich den Pfad der „aktuellen Datei“ (subpage.php)

Unabhängig davon, wer die Datei importiert hat, verwenden Sie die magische Konstante__FILE__Zeigt immer auf den Pfad „der Datei, in der sich dieser Code befindet“.

//Schreiben in subpage.php
$thisFilePath = __FILE__;
echo "Aktueller Dateipfad: " . $thisFilePath;
//Ausgabe ähnlich: /var/www/html/fullpath/subpage.php

2. Ermitteln Sie den Pfad des „Hauptprogramms“ (main.php).

wenn du es bistsubpage.phpUm herauszufinden, wer der ursprüngliche Einstiegspunkt war, gibt es mehrere Möglichkeiten:

Methode A: Verwenden$_SERVER['SCRIPT_FILENAME'](am genauesten)
Diese Variable speichert den absoluten Pfad, in dem das Skript ursprünglich ausgeführt wurde.
```
$mainPath = $_SERVER['SCRIPT_FILENAME'];
```
Methode B: Verwendenget_included_files()(erweiterte Nachverfolgung)
Dadurch wird ein indiziertes Array zurückgegeben0Dies ist die anfängliche Eintragsdatei.
```
$allFiles = get_included_files();
$mainPath = $allFiles[0];
```

3. Code-Integrationsbeispiel

Bitte geben Sie den folgenden Code in Ihr einsubpage.phpMittlerer Test:

<?php
// 1. Der Pfad zur Datei selbst, die eingeführt wird
$sub_page_path = str_replace('\\', '/', __FILE__);

// 2. Der Pfad der Hauptausführungsdatei
$main_page_path = str_replace('\\', '/', $_SERVER['SCRIPT_FILENAME']);

echo "Unterseitenpfad: " . $sub_page_path . "<br>";
echo "Pfad der Hauptseite: " . $main_page_path . "<br>";
?>

Tipps: str_replace('\\', '/', ...)Es dient dazu, die Pfadformate von Windows (Backslash) und Linux (Schrägstrich) zu vereinheitlichen, was bei der plattformübergreifenden Entwicklung sehr praktisch ist.

---

== Erweiterung: URL-Pfad abrufen

Wenn Sie sich nicht auf den Server-Festplattenpfad (vollständiger Pfad), sondern auf den URL-Pfad im Browser beziehen, sollten Sie Folgendes verwenden:

Ziel	Grammatik	veranschaulichen
URL-Pfad	`$_SERVER['REQUEST_URI']`	Holen Sie sich als`/project/main.php?id=1`URL-Fragment.
Virtueller Pfad des Skripts	`$_SERVER['PHP_SELF']`	Ermitteln Sie den Pfad des Hauptprogramms auf der Webseite (ohne Parameter).

Vorschläge zur Verwendung von Pfaden

Schreiben$mainTableView__whereclauseWenn Sie SQL-Bedingungen basierend auf verschiedenen Hauptseiten ändern müssen, können Sie Folgendes schreiben:

if (basename($_SERVER['SCRIPT_FILENAME']) == 'main.php') {
    // Logik, die nur bei der Eingabe aus main.php ausgeführt wird
}

Variable Übergabe von PHP-Dateireferenzen

1. Klarstellung`include`die Essenz von

Verwenden Sie in PHPincludeoderrequire, man kann es sich vorstellen alsKopieren Sie den in die Datei importierten Code direkt und fügen Sie ihn in die aktuelle Datei ein. Daher nutzen beide die gleiche Ausführungsumgebung (Scope).

2. Häufig gestellte Fragen: Ist es notwendig?`global`？

es liegt an IhnenOrt der Aufrufvariable：

Fall 1: Global verwendet (kein Global erforderlich)
wenn du es bistmain.phpDefinieren Sie Variablen und fügen Sie sie einlibrary.phpDie äußerste Schicht nutzt es direkt ohne zusätzliche Deklaration.
```
// main.php
$var1 = "Apple";
include 'library.php';

// Bibliothek.php
echo $var1; // Ausgabe: Apple
```
Fall 2: Zugriff innerhalb einer Funktion (erfordert global)
Wenn die Variable im globalen Bereich definiert ist, aberlibrary.phpinnenFunktionUm darauf zuzugreifen, müssen Sie es deklarieren.
```
// library.php
function printVar() {
    global $var1; 
    echo $var1;
}
        
```

3. Korrektur:`include_once`Missverständnis der Parameterübergabe

Besondere Aufmerksamkeit:PHPinclude_once Nicht unterstütztÜbergeben Sie ein zweites Argument (wie ein Array). Sein einziger Parameter ist die Dateipfadzeichenfolge.

Falsche Verwendung (❌)	Richtige Verwendung (✅)
`include_once('lib.php', ['v1' => $v1]);`	`$v1 = "Data"; include_once 'lib.php';`
PHP meldet einen Fehler, da die Anzahl der Parameter nicht übereinstimmt.	Variablen werden automatisch in die importierte Datei übernommen.

---

== Empfohlene Best Practices

Um Konflikte bei der Benennung von Variablen (Namespace-Verschmutzung) zu vermeiden, wird empfohlen, die Schreibmethode „Direkt abhängig von globalen Variablen“ aufzugeben und stattdessen die folgenden beiden Methoden zu verwenden:

Methode A: Übergabe von Funktionsparametern (am flexibelsten)

Willelibrary.phpAls reine Toolbox sind darin nur Funktionen geschrieben und Variablen werden über Parameter übergeben.

// Bibliothek.php
<?php
Funktion ProcessStock($name) {
    return „Verarbeitungsbestände:“ . $name;
}
?>

// main.php
<?php
include_once 'library.php';
echoprocessStock("TSLA"); // Variablen explizit übergeben
?>

Methode B: Verwendung von Kategorien und statischen Methoden (am professionellsten)

Dies ist in der modernen PHP-Entwicklung (z. B. Laravel-Konzepte) häufiger anzutreffen und kann den Code effektiv organisieren.

// library.php
class StockTool {
    public static function handle($var) {
        return "Result: " . $var;
    }
}

// main.php
include_once 'library.php';
echo StockTool::handle($var1);

Kernfazit

1. will nichtexistierenincludeDie Übergabe von Parametern in der Anweisung ist ungültig.
2. Versuchen Sie es zu vermeiden global, verwendenFunktionsparameterÜbergeben, damit der Code einfacher zu debuggen und zu warten ist.

Überprüfung der PHP-Variableneinstellungen

In PHP gibt es drei Hauptkernfunktionen, um zu überprüfen, ob eine Variable gesetzt (definiert) wurde:isset()、empty()Undarray_key_exists(). Ihre Betriebslogik ist etwas anders und die Wahl der falschen Logik kann zu Logiklücken führen.

1. isset() – die am häufigsten verwendete Prüfung

zur Bestimmung von Variablen verwendetWurde es deklariert?UndSein Wert ist es nichtNULL。

$var = "Gemini";
if (isset($var)) {
    echo „Die Variable wurde gesetzt und ist nicht NULL“;
}

Beachten:Wenn die Variable auf gesetzt ist$var = null;，isset($var)Werde zurückschickenfalse。

2. empty() – Prüfen, ob es sich um einen „leeren Wert“ handelt

Wird verwendet, um zu bestimmen, ob eine Variableexistiert nicht, oder sein Wert ist äquivalent zufalse. es ist gleichbedeutend mit!isset($var) || $var == false。

Die folgenden Werte werden seinempty()gilt alstrue：

""(leerer String)
0(Ganzzahl 0)
0.0(Gleitkommazahl 0)
"0"(Zeichenfolge 0)
null
false
[](leeres Array)

3. Vorschläge für praktische Anwendungsszenarien

Grammatik	Ziel prüfen	Passend zur Szene
`isset($var)`	Ob die Variable existiert und nicht NULL ist	Überprüfen Sie die optionalen Felder, um sicherzustellen, dass die Variablen definiert sind.
`empty($var)`	Hat die Variable einen Inhalt?	Formularvalidierung (stellen Sie sicher, dass die Nachricht nicht leer ist und die Menge nicht 0 ist).
`is_null($var)`	Ob die Variable genau NULL ist	Wenn Sie nur wissen müssen, ob eine Variable absichtlich auf Null gesetzt wurde.

---

== für Include-Fall

Wenn Sie dabei sindmain.phpÜbergeben Sie Variablen anlibrary.php, es wird empfohlenlibrary.phpFühren Sie interne Fehlersicherheitsprüfungen durch:

Schreibmethode A: Verwenden Sie isset, um Fehler zu vermeiden

// Bibliothek.php
if (isset($var1)) {
    echo „Die empfangene Variable ist:“ . $var1;
} sonst {
    echo „Warnung: Variable var1 ist noch nicht definiert.“;
}

Schreibmethode B: Verwenden Sie den Null-Koaleszenzoperator (PHP 7+) – empfohlen

Dies ist eine prägnantere Schreibweise. Wenn die Variable nicht gesetzt ist, wird ihr ein Standardwert zugewiesen.

// Wenn $var1 nicht gesetzt ist, ist $data gleich 'Standardwert'
$data = $var1 ?? 'Standardwert';

Schreibmethode C: GET/POST-Parameter prüfen

Wenn Sie den Wert vom Frontend übergeben, lautet die Prüfmethode wie folgt:

if (isset($_GET['var1'])) {
    $v1 = $_GET['var1'];
}

Tipps:Während der Entwicklungsphase wird empfohlen, hinzuzufügenerror_reporting(E_ALL);, sodass PHP direkt ausspuckt, wenn Sie auf eine undefinierte Variable zugreifenNotice: Undefined variableWohlgemerkt.

PHPs debug_backtrace()

verwenden

debug_backtrace()Es handelt sich um eine Funktion, die von PHP verwendet wird, um den aktuellen Ausführungsstapel (Aufrufpfad) abzurufen. Es wird häufig zum Debuggen und Aufzeichnen von Anrufquellen verwendet.

Grundlegende Verwendung


$trace = debug_backtrace();
print_r($trace);

Beschreibung der Rückgabestruktur

debug_backtrace()Es wird ein Array zurückgegeben, angeordnet in der Reihenfolge des Aufrufs:

[0]:Aktuelle Datei (aktuelle Funktion oder eingebundene Datei)
[1]: die Quelle, von der es aufgerufen wird (Datei oder Funktion der oberen Ebene)
[2]、[3]...: Übergeordneter Anruf

Gemeinsame Felder

file:Dateipfad
line:Programmzeilennummer
function：Der aufgerufene Funktionsname
class: Kategoriename (falls vorhanden)
args: Parameter übergeben

Beispiel: Rufen Sie den Dateipfad der vorherigen Ebene ab

Funktion showCaller() {
    $trace = debug_backtrace();
    echo 'Von: ' . $trace[1]['file'] . ' NEIN. ' . $trace[1]['line'] . ' Linie';
}

include 'subpageA.php'; // showCaller() innerhalb von subpageA.php aufrufen

Beispiel: Mehrstufige Inklusionssituationen

main.php include subA.php
subA.php include subB.php
subB.phpverwenden:

$trace = debug_backtrace();
echo 'Aktuelle Datei:' . $trace[0]['file'] . "\N";
echo 'Vorheriges Level:' . $trace[1]['file'] . "\N"; // subA.php
echo 'Homepage:' . $trace[2]['file'] . "\N"; // main.php

Zusammenfassung

debug_backtrace()Dies ist die praktischste Möglichkeit, die Quelle von Include-/Funktionsaufrufen anzuzeigen
Geeignet für Debugging, Aufzeichnung, Berechtigungsprüfung und andere Anforderungen

PHP error_log

verwenden

error_log()Ist eine von PHP verwendete Funktion zum Protokollieren von Fehlern oder benutzerdefinierten Nachrichten. Es wird häufig zum Debuggen, Verfolgen des Programmablaufs und zum Aufzeichnen von Ausnahmen verwendet, ohne die Bildschirmausgabe zu beeinträchtigen.

Grundlegende Verwendung

<?php
error_log("Dies ist eine Testnachricht");
?>

Erfassen Sie variable Inhalte

<?php
$data = ["a" => 1, "b" => 2];
error_log(print_r($data, true));
?>

Geben Sie die Datei an, in die geschrieben werden soll

Verwenden Sie den dritten Parameter, um das Protokoll in die angegebene Datei zu schreiben.

<?php
error_log("Benutzerdefinierte Datei schreiben", 3, "D:/logs/php_debug.log");
?>

Fehlerstufe aufzeichnen

Verwenden Sie es zusammen mit der Fehlerstufe, um die Quelle leicht zu bestimmen.

<?php
error_log("[INFO] Programm startet Ausführung");
error_log("[WARN]-Parameter ist leer");
error_log("[ERROR] Datenbankverbindung fehlgeschlagen");
?>

Speicherort des Fehlerprotokolls

Die tatsächliche Schreibposition ist gegeben durchphp.iniKontrolle:

log_errors = On
error_log = "D:/logs/php_errors.log"

Wenn nicht festgelegterror_log, der Standardwert ist:

Linux: In das Webserver-Fehlerprotokoll schreiben
Windows: In das System- oder Apache-Fehlerprotokoll schreiben

Umgang mit Ausnahmen

<?php
versuche es mit {
    throw new Exception("Ausnahme aufgetreten");
} Catch (Ausnahme $e) {
    error_log($e->getMessage());
}
?>

Häufige Verwendungen

Keine Ausgabe auf dem Bildschirm beim Debuggen (um Unterbrechungen von JSON/API-Postbacks zu vermeiden)
Zeichnen Sie Benutzervorgänge oder den Systemstatus auf
Fehlerquelle bei der formalen Umgebungsverfolgung

Dinge zu beachten

Bitte stellen Sie sicher, dass das Protokollverzeichnis über Schreibrechte verfügt
Vermeiden Sie die Aufzeichnung sensibler Informationen (Passwörter, Token)
Das offizielle Umfeld empfiehlt die Schließungdisplay_errors, einfach verwendenerror_log

Verarbeitung des chinesischen PHP-Fehlerprotokolls

Wenn Sie error_log() in PHP verwenden, um Zeichenfolgen mit chinesischen Zeichen aufzuzeichnen, wird die Protokolldatei häufig in hexadezimaler Kodierung angezeigt, z. B. im Format \xe6\xb2\x92. Dabei handelt es sich in der Regel nicht um einen Programmierfehler, sondern darum, dass der Server (Apache/Nginx) aus Sicherheits- oder Kompatibilitätsgründen die Verwendung von Escapezeichen für Nicht-ASCII-Zeichen erzwingt.

Lösung 1: Verwenden Sie eine benutzerdefinierte Protokollfunktion (am meisten empfohlen)

Dies ist der einfachste und effektivste Weg, dies zu tun. Durch direktes Bearbeiten von Dateien kann der Filtermechanismus des Servers für error_log() umgangen werden.

Funktion write_utf8_log($message) { $log_file = DIR . '/debug.log'; $timestamp = date('Y-m-d H:i:s'); // FILE_APPEND-Modus verwenden, um Rohbytes zu schreiben file_put_contents($log_file, "[$timestamp] $message" . PHP_EOL, FILE_APPEND | LOCK_EX); }

// Aufrufbeispiel $title = $_GET["title"]; write_utf8_log("Titelinhalt: " . $title);

Lösung 2: Unicode-Kodierung ohne Escapezeichen erzwingen

Wenn Sie die Pfadeinstellung von error_log() beibehalten möchten, können Sie json_encode mit dem Parameter JSON_UNESCAPED_UNICODE verwenden. Dadurch wird PHP gezwungen, im UTF-8-Format auszugeben, es kann jedoch in einigen Serverumgebungen dennoch zu zwei Escapezeichen kommen.

 $title = $_GET["title"]; error_log('title: ' . json_encode($title, JSON_UNESCAPED_UNICODE));

Lösung 3: Serverprotokollkonfiguration ändern

Wenn Sie Apache 2.4+ verwenden, können Sie versuchen, ErrorLogFormat zu ändern, um das Escape-Verhalten der Protokollausgabe anzupassen.

1. Definieren Sie das Format in der Apache-Konfigurationsdatei (z. B. httpd.conf):

 ErrorLogFormat "[%t] [%l] [pid %P] %F: %E: [client %a] %M"

2. Stellen Sie sicher, dass die Sprache des Betriebssystems UTF-8 unterstützt. Ändern Sie /etc/apache2/envvars in Ubuntu:

 export LANG=en_US.UTF-8 export LC_ALL=en_US.UTF-8

Lösung 4: Dekodierungstechniken für die vorübergehende Anzeige

Wenn das Protokoll erstellt wurde und Sie die Servereinstellungen nicht ändern können, können Sie die folgende Methode verwenden, um das ursprüngliche Chinesisch anzuzeigen:

Terminal-Sofortdekodierung:Verwenden Sie tail mit dem Befehl sed, um \x in ein Bash-lesbares Format zu konvertieren.
Base64-Relais:Führen Sie zuerst base64_encode($title) in PHP aus und zeichnen Sie es dann auf. Dekodieren Sie es dann beim Anzeigen manuell, um sicherzustellen, dass die Daten nicht durch Escape beschädigt werden.

Zusammenfassender Vergleich

Verfahren	Vorteil	Mangel
Benutzerdefiniertes Protokoll (file_put_contents)	100 % Anzeige auf Chinesisch, keine Genehmigung erforderlich	Erfordert eine manuelle Verwaltung der Dateigröße und Berechtigungen
JSON_UNESCAPED_UNICODE	Minimale Codeänderungen	Immer noch von der globalen Serverkonfiguration betroffen
Ändern Sie die Apache-Konfiguration	Lösen Sie alle Systemprotokollprobleme von der Grundursache her	Es sind Administratorrechte erforderlich, starten Sie den Dienst neu

Analysieren Sie Namen und Werte von URL-Abfragezeichenfolgen

Abfragezeichenfolge abrufen

In PHP können Sie verwendenparse_url()FunktionskollokationPHP_URL_QUERYKonstante zum Abrufen des Abfragezeichenfolgenteils aus der vollständigen URL. Zum Beispiel:

$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY); // Das Ergebnis ist „name=John&age=30&lang=php“

Analysieren Sie die Abfragezeichenfolge in Schlüssel-Wert-Paare

verwendenparse_str()Die Funktion analysiert eine Abfragezeichenfolge in ein assoziatives Array, wobei jeder Satz von Namen und Werten automatisch dekodiert und in Array-Elemente konvertiert wird:

parse_str($query, $params);

zu diesem Zeitpunkt$paramsDer Inhalt ist:

[
  "name" => "John",
  "age" => "30",
  "lang" => "php"
]

Vollständiges Beispiel

<?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";
}
?>

Ausführungsergebnis

name = John
age = 30
lang = php

Dinge zu beachten

parse_url()Es wird nur der Abfrageteil abgerufen und der Inhalt wird nicht analysiert.
parse_str()Kann URL-Codierung verarbeiten, z.B.%20wird in Leerzeichen umgewandelt.
Durch die Verwendung des zweiten Arguments zum Empfang des Ergebnisarrays wird das Schreiben der Variablen in den globalen Namespace vermieden.
Unterstützt Array-Formate wietags[]=php&tags[]=htmlwird in ein Array umgewandelt.

PHP ruft den Inhalt eines bestimmten Tags ab

Methode 1: Verwenden Sie JavaScript

Nutzen Sie JavaScript<h1>Inhalt und senden Sie ihn dann an PHP:

<!DOCTYPE html>
<html lang="zh-Hant">
<Kopf>
<meta charset="UTF-8">
<title>H1-Inhalt abrufen</title>
<script>
    Funktion sendH1Content() {
        var h1Content = document.querySelector('h1').innerText;
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'process.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('h1Content=' + encodeURIComponent(h1Content));
    }

    window.onload = sendH1Content;
</script>
</head>
<Körper>
<h1>Dies ist der Titel der Seite</h1>
</body>
</html>

PHP-seitige Verarbeitung

existierenprocess.phpEmpfangen und Verarbeiten von H1-Inhalten in:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$h1Content = $_POST['h1Content'] ?? '';
// $h1Content verarbeiten, z. B. in der Datenbank speichern oder andere Vorgänge ausführen
echo "H1-Inhalt erhalten: " . htmlspecialchars($h1Content);
}
?>

Methode 2: Verwenden Sie serverseitiges Parsing

Wenn die HTML-Datei statisch ist, können Sie PHP verwenden, um die Datei zu lesen und zu analysieren:

<?php
$htmlContent = file_get_contents('path/to/your/file.html');

preg_match('/<h1>(.*?)<\/h1>/', $htmlContent, $matches);
$h1Content = $matches[1] ?? '';

// $h1Content behandeln
echo "H1-Inhalt: " . htmlspecialchars($h1Content);
?>

Zusammenfassen

Die gebräuchlichste Methode besteht darin, JavaScript zu verwenden, um den Inhalt auf der Clientseite abzurufen und ihn dann zur Verarbeitung über AJAX an PHP zu senden. Serverseitiges Parsing wird normalerweise für statische Inhalte verwendet und wird für dynamisch generierte Seiten nicht empfohlen.

Holen Sie sich den Inhalt des letzten Tags auf der Startseite

veranschaulichen

PHP selbst kann den ausgegebenen HTML-Code nicht „direkt“ lesen, also inabc.phpMehrere wurden gedruckt<h2>, dann einschließensubpage.phpWenn , kann der Inhalt nicht aus dem Ausgabe-HTML erfasst werden. Der richtige Weg besteht darin, ─ **den Inhalt des letzten <h2> in subpage.php** (Variable) aus abc.php vor dem Einbinden eingefügt und von subpage.php verwendet.

Methode 1: Variablen übergeben (am besten und am häufigsten verwendet)

<!-- abc.php -->
<h2>AAA</h2>
<h2>BBB</h2>
<h2>lasth2</h2>

<?php
$last_h2 = "lasth2";
include "subpage.php";
?>

<!-- subpage.php -->
<?php
echo "Das letzte H2 auf der Homepage ist: " . $last_h2;
?>

Methode 2: Verwenden Sie den Ausgabepuffer, um den ausgegebenen HTML-Code zu erfassen (erweitert)

Diese Methode fängt „zuerst die gesamte Ausgabe von abc.php ab“, analysiert das darin enthaltene h2 und schließt dann subpage.php ein.

<!-- abc.php -->
<?php
ob_start(); // Pufferung starten
?>

<h2>AAA</h2>
<h2>BBB</h2>
<h2>lasth2</h2>

<?php
$html = ob_get_clean(); // Alle Ausgaben abrufen und den Puffer löschen

preg_match_all('/<h2>(.*?)<\\/h2>/i', $html, $matches);
$last_h2 = end($matches[1]); //Der Inhalt der letzten h2

„subpage.php“ einschließen;

//Zum Schluss den Original-HTML-Code ausdrucken
echo $html;
?>

Methode 3: Fügen Sie alle h2 in das Array ein und geben Sie das letzte vor dem Einschließen an

<!-- 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";
?>

abschließend

PHP kann den Tag-Inhalt nicht direkt aus dem Ausgabe-HTML abrufen, daher:

bester Weg: Übergeben Sie „den Inhalt des letzten h2“ als Variable vor dem Einbinden in subpage.php
Wenn Sie wirklich HTML aus der Ausgabe abrufen müssen → verwenden Sieob_start()+ Parsen regulärer Ausdrücke

PHP urlencode()

urlencode()Die Funktion wird zur URL-Codierung (Prozentcodierung) einer Zeichenfolge verwendet. Bei der Übergabe von Daten als URL-Parameter ist dies ein erforderlicher Schritt, um sicherzustellen, dass alle Sonderzeichen korrekt übertragen und geparst werden.

Funktionsdefinition und Verwendung

string urlencode(string $string): string

Diese Funktion konvertiert die angegebene Zeichenfolge in ein URL-sicheres Format. Es ersetzt alle nicht alphanumerischen Zeichen außer dem Minuszeichen (-), Fazit (_), Zeitraum (.) und Tilde (~) draußen.

Ersetzte Sonderzeichen werden durch Prozentzeichen ersetzt (%), gefolgt von der zweistelligen hexadezimalen Darstellung des ASCII-Werts des Zeichens (z. B. ein Leerzeichen $\rightarrow$).%20）。

Warum ist eine URL-Kodierung erforderlich?

Konflikte mit Sonderzeichen:Einige Zeichen in der URL (z. B?、&、=、/) hat eine besondere Bedeutung. Wenn diese Zeichen in den Parametern enthalten sind, kann es sein, dass der Browser oder Server die Struktur der URL falsch versteht.
Nicht-ASCII-Zeichenübertragung:Nicht-ASCII-Zeichen wie Chinesisch, Japanisch, Koreanisch usw. müssen in URL-sichere Bytesequenzen codiert werden, bevor sie in der URL übertragen werden können.urlencode()Diese Zeichen sind im UTF-8-Format codiert.
Platzhandhabung: urlencode()wandelt Leerzeichen in Pluszeichen um (+) oder%20(Obwohlurlencode()Was produziert wird, ist+, aber in URL-Parametern stellen beide Darstellungen Leerzeichen dar).

PHP-Codebeispiel

Beispiel 1: Sonderzeichen und chinesische Kodierung

$data = "PHP-Array mit 100 $ und 50 % Rabatt";
$encoded_data = urlencode($data);

echo "<h3>Sonderzeichen und chinesische Beispiele</h3>";
echo "<p>Originalzeichenfolge: " . htmlspecialchars($data) . "</p>";
echo "<p>Encoding-Ergebnis: " . htmlspecialchars($encoded_data) . "</p>";

// Ausgabeergebnisse sind ähnlich: PHP+array und +%24100+%26+50%25+offer
// (Chinesisches „Array“ wird als %E9%99%A3%E5%88%97 usw. kodiert)

Beispiel 2: Erstellen einer vollständigen API-Abfrage-URL

Angenommen, Sie müssen die Abfragezeichenfolge ändernq_strSicher an die API-URL angehängt.

$api_base = "http://api.example.com/search";
$search_query = "Tipps für mobile Fotografie (2025)";

// Gewährleistung der Sicherheit der Abfragezeichenfolge
$encoded_query = urlencode($search_query);

//Konstruieren Sie die endgültige URL
$final_url = $api_base . "?q_str=" . $encoded_query;

echo "<h3>Beispiel für eine Konstruktions-URL</h3>";
echo "<p>Abfragezeichenfolge: " . htmlspecialchars($search_query) . "</p>";
echo "<p>Endgültige URL: " . htmlspecialchars($final_url) . "</p>";

// Die endgültige URL ist ähnlich: 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

Vergleich mit rawurlencode()

PHP hat eine weitere ähnliche Funktionrawurlencode(), der Hauptunterschied zwischen ihnen ist die Handhabung von Leerzeichen:

urlencode(): Leerzeichen in Pluszeichen umwandeln (+). Dies wird normalerweise verwendet, um den Wert eines **GET-Parameters** zu kodieren (z. B.?key=valueInvalueTeil).
rawurlencode(): Leerzeichen umwandeln in%20. Dies steht im Einklang mitRFC 3986Eine restriktivere Definition, die normalerweise zum Codieren der **Pfadsegmente** (Pfadsegmente) einer URL verwendet wird oder wenn Sie präzise Angaben benötigen%20statt+Stunde.

Vergleichsbeispiel für die Raumverarbeitung

$space_test = "Dies ist ein Test";

echo "<h3>urlencode() vs rawurlencode()</h3>";
echo "<p>urlencode(): " . URL-Code($space_test) . "</p>"; // Ausgabe: Dies+ist+ein+Test
echo "<p>rawurlencode(): " . rawurlencode($space_test) . "</p>"; // Ausgabe: Dieser %20is%20a%20test

PHP-Ausgabepufferung

Einführung

Output Buffering ist eine Funktion von PHP, die es ermöglicht, Ausgabeinhalte vorübergehend zu speichern, anstatt sie sofort an den Browser zu senden. Dadurch können Entwickler Inhalte vor der Ausgabe ändern, formatieren, komprimieren usw.

Häufig verwendete Funktionen

ob_start(): Ausgabepufferung aktivieren.
ob_get_contents(): Den aktuellen gepufferten Inhalt abrufen.
ob_end_clean(): Pufferung beenden und ohne Ausgabe löschen.
ob_end_flush(): Pufferung beenden und Inhalt ausgeben.
ob_get_clean(): Inhalt abrufen und Pufferung beenden.

Beispiel: Ausgabeinhalt ändern

<?php
ob_start(); // Ausgangspufferung starten

echo „Hallo Welt!“;

$content = ob_get_clean(); // Pufferinhalt abrufen und löschen
echo strtoupper($content); // Den geänderten Inhalt ausgeben: HALLO WORLD!
?>

Beispiel: Fügen Sie einen einheitlichen Stil ein, bevor der gesamte Inhalt ausgegeben wird

<?php
ob_start();
register_shutdown_function(function () {
    $html = ob_get_clean();
    echo "<div class='container'>" . $html . "</div>";
});
?>

<h1>Inhaltstitel</h1>
<p>Dies ist der Inhaltsabsatz. </p>

verwenden

Automatische Verarbeitung der gesamten HTML-Ausgabe (z. B. Komprimierung, Stilumbruch)
Verhindern Sie, dass Fehlermeldungen die JSON- oder XML-Ausgabe beeinträchtigen
Verarbeiten oder speichern Sie die Ausgabe vorübergehend, bevor Sie entscheiden, ob Sie sie später ausgeben möchten
Kombinieren Sie Ausgabe und Komprimierung, um die Webseitengröße zu reduzieren

Dinge zu beachten

Bei Pufferung kann header() nach echo aufgerufen werden, da die Ausgabe noch nicht tatsächlich ausgegeben wird
Vermeiden Sie mehrere Öffnungs- und Schließpuffer, da dies sonst zu Verwirrung führt
Wenn der Puffer nicht beendet wird, kann es zu Ausgabeverzögerungen kommen

PHP-Bibliothek, die automatisch Bilder rechts von jedem h2-Block anzeigt

Funktionsbeschreibung

Diese PHP-Bibliothek fängt den gesamten Seitenausgabeinhalt ab und findet jeden automatisch<h2>Titel und den Block darunter und fügen Sie rechts das entsprechende Bild hinzu. Die Bilddateien werden der Reihe nach benannth2-1.jpg、h2-2.jpg... und so weiter, es muss vorher im dafür vorgesehenen Bilddateiordner abgelegt werden.

Wie zu verwenden

Verweisen Sie am Anfang Ihrer PHP-Seite auf das folgende Programm (z. B. 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);
});
?>

Zeichnungsvorbereitung

Benennen Sie die entsprechenden Bilddateien der Reihe nach und speichern Sie sie im Stammverzeichnis der Website/images/Ordner, zum Beispiel:

/images/h2-1.jpg
/images/h2-2.jpg
/images/h2-3.jpg

Beispielverwendung

<?php include "h2-image-right.php"; ?>

<h2>Überschrift des ersten Absatzes</h2>
<p>Dies ist der Inhalt des ersten Absatzes. </p>

<h2>Zweiter Absatztitel</h2>
<p>Dies ist der Inhalt des zweiten Absatzes. </p>

Dinge zu beachten

Die Reihenfolge der Bilder ist entsprechend<h2>Bitte benennen Sie sie entsprechend der Reihenfolge, in der sie erscheinen.
Diese Methode umschließt<h2> ~ Inhalt untenEs handelt sich um einen flexiblen Block, der für reine Inhaltsseiten geeignet ist.
Wenn es zu Konflikten mit der Verwendung anderer Ausgabepuffer kommt, achten Sie bitte darauf, dies nicht zu wiederholen.ob_start()。

Überprüfen Sie, ob die Traffic-Quelle von Suchmaschinen-Bots stammt

1. Verwenden Sie Serverprotokolle

Die Überprüfung von Serverprotokollen ist eine wichtige Methode zur Identifizierung von Suchmaschinen-Bots. Hier sind einige Beispiele für User-Agents für Suchmaschinen-Robots:

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. Verwenden Sie die robots.txt-Datei

Überprüfen Sie die Websiterobots.txtDatei, mit der Sie erfahren können, welchen Suchmaschinen-Robots der Zugriff auf bestimmte Teile Ihrer Website gestattet oder verwehrt ist. Zum Beispiel:

User-agent: * 
Disallow: /private/

3. Bestimmen Sie die IP-Adresse

Suchmaschinen-Bots haben normalerweise IP-Adressen aus einem bestimmten Bereich. Sie können vergleichen, ob die IP-Adresse des Besuchers in diese Bereiche fällt. Zum Beispiel:

IP-Adressbereich des Googlebots
Der IP-Adressbereich von Bingbot

Mithilfe von Tools kann überprüft werden, ob die IP des Besuchers tatsächlich von einer Suchmaschine stammt.

4. Verwenden Sie Backend-Code, um Urteile zu fällen

Im Folgenden finden Sie ein Beispiel für die Verwendung von PHP auf der Serverseite zur Durchführung der User-Agent-Prüfung:

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'Googlebot') !== false) {
    echo „Dies ist Googlebot-Verkehr“;
} sonst {
    echo „Dies ist kein Suchmaschinen-Robot-Traffic“;
}
?>

5. Überwachungs- und Analysetools

Verwenden Sie Google Analytics oder andere Website-Analysetools, um Traffic-Quellen zu verfolgen. Diese Tools filtern den Großteil des Bot-Verkehrs normalerweise automatisch.

Hashwert der URL

1. Definition

Der Hashwert einer URL bezieht sich auf den Teil nach dem „#“-Symbol in der URL, der auch als Fragment-Identifikator (Fragment Identifier) bezeichnet wird. Es wird normalerweise verwendet, um einen Ort oder einen Zustand innerhalb einer Seite zu identifizieren.

2. Zweck

Navigieren Sie zu einer bestimmten Stelle auf einer Webseite, beispielsweise zu einem Anker.
Stellt den Status einer Anwendung dar, beispielsweise eine Route für eine Single-Page-Anwendung (SPA).
Wird zum Speichern des Benutzeroberflächenstatus verwendet, z. B. Filterbedingungen oder Bildlaufposition.

3. Beispiel

Hier sind einige gängige URL-Hash-Beispiele:

Ankernavigation:https://example.com/page#section1
SPA-Routen:https://example.com/app#/dashboard
Statusspeicherung:https://example.com/search#filter=active

4. Funktionsprinzip

Wenn der Browser einen Hashwert in der URL findet, sendet er diesen Teil der Daten nicht an den Server.
Hash-Werte werden vom Client (normalerweise JavaScript) verarbeitet und zum Auslösen bestimmter Logik oder Aktionen verwendet.
In HTML kann Hash verwendet werden, um das zu findenid。

5. Vorsichtsmaßnahmen

Der Hash wirkt sich nicht auf HTTP-Anfragen aus und kann daher dynamisch geändert werden, ohne dass die Seite neu geladen werden muss.
In SPA müssen Anwendungen Hash-Werte manuell analysieren und verarbeiten, um Routing-Funktionen zu implementieren.
Vermeiden Sie ein zu komplexes Hash-Wert-Design und halten Sie die Struktur einfach und klar.

Rufen Sie den Hash-Wert der URL ab

JavaScript-Beispiel

<script>
  // Den Hash-Wert der URL abrufen
  const hashValue = window.location.hash.substring(1);

  //Hash-Wert anzeigen
  console.log("Hash-Wert ist:", hashValue);
</script>

PHP-Beispiel

<?php
//Mock-URL
$url = "http://example.com/page#section2";

// Verwenden Sie parse_url, um Hash-Werte zu analysieren
$parsedUrl = parse_url($url);
$hash = isset($parsedUrl['fragment']) ? $parsedUrl['fragment']: null;

// Hash-Wert ausgeben
if ($hash) {
    echo "Der Hash-Wert ist: " . htmlspecialchars($hash, ENT_QUOTES, 'UTF-8');
} sonst {
    echo „Die URL enthält keinen Hash-Teil.“;
}
?>

Dinge zu beachten

JavaScript kann mithilfe von direkt den Hash-Wert der aktuellen Seite abrufenwindow.location.hash。
Der Server kann den Hash der URL nicht direkt abrufen und muss über JavaScript an den Server gesendet werden.

Verlinken Sie auf ein bestimmtes Tag, ohne eine ID zu verwenden

Methode 1: Verwenden`name`Eigentum

Obwohl seltener verwendet, ist dies möglichnameFügen Sie ein Attribut hinzu<a>Tag und platzieren Sie es vor dem Ziel-Tag.

<a name="spezifische-überschrift1"></a>
<h3>Zieltitel 1</h3>

<a href="#special-heading1">Link zu einer bestimmten Überschrift</a>

Wirkung:

Zieltitel 2

Link zu einem bestimmten Titel

Methode 2: Verwenden`data-attribute`Mit JavaScript

Durch das Festlegen benutzerdefinierter Eigenschaften, zdata-anchorund verwenden Sie JavaScript, um das Sprungverhalten zu handhaben.

<h3 data-anchor="heading-1">Zielüberschrift 3</h3>

<a href="#" onclick="jumpToHeading('heading-1')">Link zu einer bestimmten Überschrift</a>

<script>
  Funktion jumpToHeading(anchor) {
    const target = document.querySelector(`[data-anchor="${anchor}"]`);
    if (Ziel) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  }
</script>

Wirkung:

Zieltitel 4

Link zu einem bestimmten Titel

Methode 3: Verwenden`h2`Textinhalte mit JavaScript

per Sucheh2Textinhalte für das Targeting, wobei JavaScript verwendet wird, um das Ziel dynamisch anzusprechen.

<h3>Zieltitel 5</h3>

<a href="#" onclick="jumpToText('Zieltitel')">Link zu einem bestimmten Titel</a>

<script>
  Funktion jumpToText(text) {
    const target = Array.from(document.querySelectorAll('h2')).find(el => el.textContent === text);
    if (Ziel) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  }
</script>

Wirkung:

Zieltitel 6

Link zu einer bestimmten Überschrift – Zielüberschrift 6

cURL

verwenden

cURL ist eine Bibliothek, die in PHP zum Senden von HTTP-Anfragen verwendet wird. Es unterstützt GET, POST, PUT, DELETE und andere Methoden und wird häufig für den API-Datenzugriff verwendet.

Grundlegende Schritte

Initialisierung:curl_init()
Einstellmöglichkeiten:curl_setopt()
Anfrage ausführen:curl_exec()
Schließen Sie die Verbindung:curl_close()

GET-Beispiel

<?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-Beispiel

<?php
$url = "https://api.example.com/post";
$data = ['name' => 'Test', 'email' => '[email protected]'];
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

Plus Header mit 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;
?>

Gemeinsame Optionen

CURLOPT_URL: Ziel-URL festlegen
CURLOPT_RETURNTRANSFER: Ob das Ergebnis zurückgegeben werden soll (nicht direkt ausgegeben)
CURLOPT_POSTFIELDS:Informationen gesendet
CURLOPT_HTTPHEADER: Benutzerdefinierte HTTP-Header

Fehlerbehandlung

<?php
if(curl_errno($ch)) {
  echo 'Fehler:' . curl_error($ch);
}
?>

PHP überprüft den Netzwerkport

Überprüfen Sie in PHP, ob ein bestimmter Netzwerkport (Port) lauscht, normalerweise um zu bestätigen, ob der lokale oder Remote-Dienst ausgeführt wird und Verbindungen akzeptiert. Die gebräuchlichste Methode besteht darin, Socket-bezogene Funktionen zu verwenden, um zu versuchen, eine TCP-Verbindung herzustellen.

Verwenden Sie die Funktion fsockopen() (empfohlen für die Ferninspektion).

fsockopen()Die Funktion wird zum Öffnen einer Netzwerkverbindung oder einer Unix-Domänen-Socket-Verbindung verwendet. Wenn die Verbindung erfolgreich ist, bedeutet dies, dass der Port lauscht. Wenn die Verbindung fehlschlägt, bedeutet dies normalerweise, dass der Port nicht geöffnet oder durch eine Firewall blockiert ist.

PHP-Codebeispiel

/**
 * Überprüfen Sie, ob der Port auf der angegebenen IP/dem angegebenen Hostnamen lauscht
 *
 * @param string $host Der zu überprüfende Hostname oder die zu überprüfende IP-Adresse
 * @param int $port Die zu überprüfende Portnummer
 * @param int $timeout Verbindungs-Timeout in Sekunden
 * @return bool Wenn die Verbindung erfolgreich ist, geben Sie true zurück. andernfalls wird false zurückgegeben
 */
function is_port_listening(string $host, int $port, int $timeout = 2): bool {
    // Eine Socket-Verbindung herstellen. Das @-Symbol wird verwendet, um Verbindungsfehlermeldungen zu unterdrücken.
    $connection = @fsockopen($host, $port, $errno, $errstr, $timeout);

    if (is_resource($connection)) {
        // Wenn $connection ein Ressourcentyp ist, bedeutet dies, dass die Verbindung erfolgreich ist
        fclose($connection); //Schließen Sie die Verbindung sofort nach Erfolg
        return true;
    } sonst {
        // Die Verbindung ist fehlgeschlagen. Möglicherweise ist der Port nicht geöffnet oder der Dienst wird nicht ausgeführt.
        // Optional: Sie können hier $errstr und $errno zum Debuggen drucken
        // echo „Verbindung fehlgeschlagen: $errstr ($errno)<br>“;
        return false;
    }
}

// --- Testbeispiel ---
$remote_host = 'www.google.com';
$remote_port = 80; // Überprüfen Sie den HTTP-Port von Google

$local_host = '127.0.0.1';
$local_web_port = 80; // Überprüfen Sie den Port des lokalen Webservers
$unoccupied_port = 65432; // Angenommen, dieser Port wird nicht verwendet

echo "<h3>Ergebnisse der Portüberwachungsprüfung</h3>";

// Überprüfen Sie den Remote-Dienst
if (is_port_listening($remote_host, $remote_port)) {
    echo "<p>{$remote_host}:{$remote_port} lauscht (Verbindung erfolgreich).</p>";
} sonst {
    echo "<p>{$remote_host}:{$remote_port} ist nicht geöffnet oder die Verbindung ist fehlgeschlagen.</p>";
}

// Überprüfen Sie den lokalen Webserver (wenn Ihr Webserver auf Port 80 läuft)
if (is_port_listening($local_host, $local_web_port)) {
    echo "<p>{$local_host}:{$local_web_port} lauscht (Webserver läuft).</p>";
} sonst {
    echo "<p>{$local_host}:{$local_web_port} hört nicht zu.</p>";
}

// Auf einen unbesetzten Port prüfen
if (is_port_listening($local_host, $unoccupied_port)) {
    echo "<p>{$local_host}:{$unoccupied_port} hört zu.</p>";
} sonst {
    echo "<p>{$local_host}:{$unoccupied_port} lauscht nicht (erwartetes Ergebnis).</p>";
}

Verwendung der Socket-Bibliothek (Steuerung auf niedrigerer Ebene)

Wenn Sie Socket-Vorgänge auf niedrigerer Ebene benötigen (z. B. Einstellungsoptionen, nicht blockierender Modus usw.), können Sie die Socket-Funktionsbibliothek von PHP verwenden (muss aktiviert werden).php_socketsVerlängerung).

function is_port_listening_socket(string $host, int $port): bool {
    // Einen TCP/IP-Socket erstellen
    $socket = @socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

    if ($socket === false) {
        // echo "socket_create failed: " . socket_strerror(socket_last_error()) . "<br>";
        return false;
    }

    //Versuchen Sie, eine Verbindung herzustellen
    // socket_connect() wird versuchen, eine Verbindung auf dem angegebenen Host und Port herzustellen
    $result = @socket_connect($socket, $host, $port);

    socket_close($socket);

    return ($result !== false);
}

Hinweise und Einschränkungen

Verbindungszeitlimit (Timeout):Stellen Sie sicher, dass Sie einen angemessenen Wert festlegen$timeoutWert (z. B. 2-5 Sekunden). Ohne diese Einstellung blockiert Ihr Skript möglicherweise für längere Zeit, wenn der Zielhost nicht erreichbar ist.
Firewall:Wenn Sie den Remote-Port überprüfen, auch wenn der Dienst ausgeführt wird und die Firewall des Zielservers Ihre Verbindung blockiert,fsockopen()Es wird trotzdem scheitern.
`allow_url_fopen`： fsockopen()Funktionen sind im Allgemeinen nicht in PHP-Konfigurationsdateien enthaltenallow_url_fopenEine Einschränkung des Befehls, da er direkt auf Netzwerk-Sockets ausgeführt wird.
Lokale Portprüfung:Um zu überprüfen, ob ein nativer Dienst lauscht, tun Sie dies normalerweise$hosteingestellt auf127.0.0.1oderlocalhost。

PHP erhält Web-API-Ergebnisse

Um in PHP die Ergebnisse einer Web-API abzurufen und JSON zu analysieren, verwenden Sie normalerweisefile_get_contents()oder cURL-Bibliothek zum Senden von HTTP-Anfragen und dann verwendenjson_decode()Funktion zum Parsen der zurückgegebenen JSON-Zeichenfolge.

Verwenden Sie file_get_contents(), um API-Ergebnisse zu erhalten

Für eine einfache GET-Anfrage:file_get_contents()ist eine schnelle Methode. Wenn die API jedoch bestimmte HTTP-Header oder komplexere Anfragen erfordert, ist cURL besser geeignet.

PHP-Codebeispiel (GET-Anfrage)

$api_url = 'https://jsonplaceholder.typicode.com/posts/1'; // Beispiel-API-URL

// Den von der API zurückgegebenen Inhalt abrufen (JSON-Formatzeichenfolge)
$json_data = @file_get_contents($api_url);

if ($json_data === FALSE) {
    echo „API-Daten konnten nicht abgerufen werden oder die API-Anfrage ist fehlgeschlagen.“;
} sonst {
    // JSON-String in PHP-Array oder -Objekt analysieren
    // Der zweite Parameter wird auf true gesetzt und in ein assoziatives Array geparst.
    // Auf false (Standard) setzen, um in ein Objekt zu analysieren.
    $data = json_decode($json_data, true);

    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        echo „JSON-Parsing-Fehler:“ .json_last_error_msg();
    } sonst {
        echo "<h3>API-Rückgabedaten (zugeordnetes Array)</h3>";
        //Beispiel: Auf bestimmte Felder in Daten zugreifen
        echo "<p>title (title): " . htmlspecialchars($data['title']) . "</p>";
        echo "<p>Inhalt (Text): " . htmlspecialchars($data['body']) . "</p>";

        // Die vollständige Struktur zur Inspektion ausgeben
        echo "<h4>Vollständige Datenstruktur (print_r)</h4>";
        echo "<pre>";
        print_r($data);
        echo "</pre>";
    }
}

Verwenden Sie cURL, um API-Ergebnisse zu erhalten (geeignet für komplexe Anfragen).

cURL bietet mehr Kontrolle, z. B. das Festlegen von Anforderungsmethoden (POST, PUT, DELETE), Headern, Zeitüberschreitungen usw.

PHP-Codebeispiel (cURL GET-Anfrage)

$api_url = 'https://jsonplaceholder.typicode.com/posts/2';

// cURL-Sitzung initialisieren
$ch = curl_init();

// cURL-Optionen festlegen
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // Das Ergebnis als String zurückgeben, anstatt es direkt auszugeben

// cURL-Sitzung ausführen und Ergebnisse abrufen
$json_data = curl_exec($ch);

// Prüfen, ob ein Fehler aufgetreten ist
if (curl_errno($ch)) {
    echo „cURL-Fehler:“ . curl_error($ch);
    $data = null;
} sonst {
    // JSON analysieren
    $data = json_decode($json_data, true);
    
    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        echo „JSON-Parsing-Fehler:“ .json_last_error_msg();
    }
}

// cURL-Sitzung schließen
curl_close($ch);

if ($data !== null) {
    echo "<h3>API-Rückgabedaten (cURL-Beispiel)</h3>";
    echo "<p>title (title): " . htmlspecialchars($data['title']) . "</p>";
    echo "<p>Benutzer-ID (userId): " . htmlspecialchars($data['userId']) . "</p>";
}

JSON-Parsing-Funktion: json_decode()

json_decode($json_string, $associative)

$json_string: Zu analysierende JSON-Formatzeichenfolge.
$associative: Bollinger-Wert. wenn jatrue, dann das zugehörige Array zurückgeben; Wennfalse(Standard), das Objekt wird zurückgegeben.

Asynchrone Ausführung von PHP exec()

PHPexec()Funktion undshell_exec()、system()Ebenso handelt es sich im Wesentlichen um synchrones Blockieren, d. h. das PHP-Skript wartet auf den Abschluss des externen Befehls, bevor es fortfährt. Um externe Befehle auszuführen, ohne das PHP-Hauptprogramm zu blockieren (durch Implementierung einer „asynchronen“ oder „Hintergrundausführung“), müssen wir uns auf die Eigenschaften der Shell selbst verlassen, um die Befehle zu trennen.

Das Kernprinzip der Implementierung von asynchronem exec()

Der Schlüssel zur nicht blockierenden Ausführung liegt im Passenexec()Fügen Sie der Befehlszeichenfolge eine bestimmte Shell-Syntax hinzu:

**Hintergrundausführungssymbol&:** Dies ist das Kernsymbol zum Verschieben von Befehlen in die Hintergrundausführung.
**Ausgabeumleitung> /dev/null 2>&1:** Dies ist der Schlüssel, um zu verhindern, dass PHP blockiert. Es leitet sowohl die Standardausgabe (STDOUT) als auch die Standardfehlerausgabe (STDERR) auf ein leeres Gerät um/dev/null. Ohne Umleitung, auch bei Nutzung&Symbol: Einige PHP-Versionen warten möglicherweise immer noch darauf, dass der E/A-Stream geschlossen wird, was zu falschen Blockierungen führt.
**Prozess trennennohup(Optional, aber empfohlen): ** Auf Linux/Unix-Systemen verwendennohupDadurch wird sichergestellt, dass der Prozess nach der Beendigung des Webservers weiter ausgeführt wird, beispielsweise wenn die HTTP-Anfrage endet oder der Benutzer den Browser schließt.

PHP-Codebeispiel (Linux/Unix-ähnliche Systeme)

Beispiel 1: Grundlegende asynchrone Ausführung

Dieses Beispiel eignet sich für kurzlebige Hintergrundaufgaben, die nach Abschluss der HTTP-Anfrage nicht ausgeführt werden müssen.

$command_to_run = 'php /path/to/my_long_task.php arg1 arg2';

// Nicht blockierende Befehle kombinieren
// 1. Der Befehl selbst
// 2. Leiten Sie STDOUT an /dev/null weiter
// 3. STDERR (2) an STDOUT (&1) weiterleiten
// 4. Verwenden Sie das &-Symbol, um den Hintergrund zu verschieben
$async_command = $command_to_run . ' > /dev/null 2>&1 &';

$output = [];
$return_var = 0;

//Nicht blockierende Befehle ausführen
exec($async_command, $output, $return_var);

echo "<h3>Asynchrones Ausführungsergebnis (exec)</h3>";
echo "<p>Der Befehl wurde zur Hintergrundausführung gesendet.</p>";
echo "<p>PHP-Skripte setzen die Ausführung sofort fort und warten nicht auf den Abschluss externer Skripte.</p>";
echo "<p>Das von exec() zurückgegebene Ausgabearray (\$output) ist fast leer.</p>";

Beispiel 2: Verwenden Sie nohup, um eine Prozesstrennung zu erreichen (empfohlen für lange Aufgaben).

Dieses Beispiel verwendetnohupUm sicherzustellen, dass Hintergrundaufgaben vollständig vom übergeordneten Prozess des PHP-Webservers getrennt sind, werden die Aufgaben auch dann weiter ausgeführt, wenn der Webserver heruntergefahren wird.

$command_to_run = '/usr/bin/python3 /path/to/process_data.py';
$log_file = '/var/log/my_app/task_log.log'; // Spezielle Protokolldatei

// Stellen Sie sicher, dass Befehlsparameter ordnungsgemäß maskiert werden, um Shell-Injection-Angriffe zu verhindern
$safe_command = escapeshellcmd($command_to_run);

// Direkte Ausgabe und Fehlerausgabe in die Protokolldatei anstelle von /dev/null
$tached_command = 'nohup' . $safe_command . ' >> ' . escapeshellarg($log_file) . ' 2>&1 &';

exec($tached_command);

echo "<h3>Nohup verwenden, um den Prozess zu trennen</h3>";
echo "<p>Der Befehl wurde mit nohup gestartet und die Ausgabe in eine Protokolldatei geleitet.</p>";
echo "<p>Die Aufgabe wird im Hintergrund weiter ausgeführt, bis sie abgeschlossen ist.</p>";

Sicherheitsüberlegungen: Escape-Befehle und Parameter

Sicherheit ist der wichtigste Gesichtspunkt, wenn Sie externe Befehle ausführen. **Niemals** unbereinigte oder maskierte Benutzereingaben an übergebenexec()oder andere ausführbare Shell-Funktionen. PHP bietet zwei Funktionen zur Unterstützung der Verarbeitung:

escapeshellcmd($command): Escape **der gesamten Befehlszeichenfolge**, um zu verhindern, dass böswillige Benutzer mehrere Befehle eingeben.
escapeshellarg($arg):Escape **einzelner Parameter**, um sicherzustellen, dass der Parameter als einzelne Zeichenfolge behandelt wird.

$user_input = "test; rm -rf /"; // Potenziell böswillige Eingabe

// Fehler: Unsichere Praxis
// exec('my_script.sh ' . $user_input);

// Richtig: sicheres Anfahren
$safe_input = escapeshellarg($user_input);
$safe_command = 'my_script.sh' . $safe_input;
//Ausführungsergebnis: my_script.sh 'test; rm -rf /' (als einzelner Parameter behandelt)

PHP ruft Python auf

Konzept

PHP kann Python-Programme über Systembefehle ausführen und Ausgaben erhalten. Zu den häufig verwendeten Methoden gehören:

exec()
shell_exec()
passthru()
proc_open()(Fortschrittlich)

Grundlegende Verwendung: Shell_exec

<?php
$cmd = "python3 myscript.py 123";
$output = shell_exec($cmd);
echo $output;
?>

Parameter übergeben

<?php
$arg1 = 100;
$arg2 = "hello";

$cmd = "python3 script.py " . escapeshellarg($arg1) . " " . escapeshellarg($arg2);
$result = shell_exec($cmd);

echo $result;
?>

Python-Beispiel

#script.py
importsys
a = sys.argv[1]
b = sys.argv[2]
print(f"Eingabeparameter: {a}, {b}")

Holen Sie sich die mehrzeilige Python-Ausgabe: exec

<?php
exec("python3 test.py", $output_lines, $status);

echo "<pre>";
print_r($output_lines);
echo "</pre>";
?>

Erweitert: Verwenden Sie proc_open, um stdin/stdout zu steuern

<?php
$descriptor = [
    0 => ["pipe", "r"],
    1 => ["pipe", "w"],
    2 => ["pipe", "w"]
];

$process = proc_open("python3 calc.py", $descriptor, $pipes);

if (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($process);

    echo "Ausgabe: $output<br>";
    echo „Fehler: $error<br>“;
}
?>

Dinge zu beachten

PHP muss Python3 finden können und der absolute Pfad kann festgelegt werden, z/usr/bin/python3oderC:\\Python39\\python.exe
verwendenescapeshellarg()Befehlsinjektion verhindern
Bitte achten Sie bei Windows-Systemen darauf, im Pfad doppelte Anführungszeichen einzufügen.
Wenn langfristige Vorgänge erforderlich sind, wird empfohlen, die Warteschlangen- oder Hintergrundausführung zu verwenden (z. B. systemd / supervisor).

Anregung

Wenn Sie Folgendes benötigen:

PHP ruft Python auf, um AI/ML-Berechnungen durchzuführen
Zwei-Wege-Kommunikation (PHP ↔ Python)
Residentes Python-Programm für PHP-Abfragen

Ziehen Sie Flask API oder FastAPI in Betracht, damit PHP Python über HTTP aufrufen kann (der stabilste Ansatz).

PHP-GTK

Einführung

PHP-GTK ist eine Erweiterung für PHP, die es Entwicklern ermöglicht, PHP zum Erstellen von Desktop-Anwendungen (GUI) zu verwenden. Es basiert auf der GTK+-Grafiktoolbibliothek und erweitert PHP von einer einfachen Web-Backend-Sprache zur Entwicklung von Desktop-Anwendungen.

Besonderheit

Verwenden Sie PHP, um plattformübergreifende Desktop-Anwendungen zu schreiben.
Unterstützt GUI-Komponenten wie Schaltflächen, Textfelder, Dropdown-Menüs, Tabellen usw.
Kann mit den vorhandenen Funktionsbibliotheken von PHP kombiniert werden, z. B. Datenbankzugriff, String-Verarbeitung und Netzwerkfunktionen.
Plattformübergreifend, unterstützt Windows, Linux (GTK+-Umgebung).

Installationsmethode

Windows: Laden Sie das PHP-GTK-Binärpaket herunter, entpacken Sie es und verwenden Sie es.
Linux: Sie müssen GTK+ installieren und dann PHP-GTK aus dem Quellcode kompilieren.
Installation prüfen: ausführenphp -mBestätigen Sie das Ladenphp-gtkMods.

Beispielprogramm

<?php
if (!class_exists('gtk')) {
    die("PHP-GTK wurde nicht installiert\n");
}

$window = new GtkWindow();
$window->set_title("PHP-GTK-Beispiel");
$window->set_size_request(300, 200);
$window->connect_simple('destroy', array('Gtk', 'main_quit'));

$button = new GtkButton("Klick mich");
$button->connect_simple('clicked', function() {
    echo "Schaltfläche angeklickt!\n";
});

$window->add($button);
$window->show_all();

Gtk::main();
?>

Limit

PHP-GTK wird seit vielen Jahren nicht mehr aktualisiert und ist derzeit wartungsarm.
Nicht geeignet für große oder leistungsstarke Desktop-Anwendungen.
Unterstützt nur GTK+ 2, nicht GTK+ 3 oder 4.

Anwendbare Situationen

Lernen Sie GUI- und ereignisgesteuerte Programmierung.
Einfache Desktop-Tools wie Datenbankverwaltungs-Gadgets.
Möchten Sie schnell Desktop-Anwendungen mit PHP-Syntax entwickeln?

Alternativen zur PHP-GUI-Entwicklung

aktuelle Situation

PHP-GTK wurde seit vielen Jahren nicht mehr aktualisiert, ist wartungsarm und unterstützt nur die alte Version von GTK+, wodurch es für die Entwicklung moderner Desktop-Anwendungen ungeeignet ist. Wenn Sie eine Desktop-GUI in PHP entwickeln möchten, empfiehlt es sich, die folgenden Alternativen in Betracht zu ziehen.

Alternativen

Electron + PHPverwendenElectron(Basierend auf Chromium und Node.js) Erstellen Sie eine Desktop-GUI, und das Backend kann weiterhin PHP-Programme aufrufen. Dadurch können Sie schöne plattformübergreifende Anwendungen mit HTML/CSS/JavaScript erstellen und über die API mit PHP kommunizieren.
NW.jsÄhnlich wie bei Electron werden Desktop-Anwendungen mithilfe von Web-Technologie entwickelt und können mit PHP als Backend-Computing kombiniert werden.
PHP + Webbrowser (Lokale Web-App)Starten Sie einen in PHP integrierten Server auf dem Desktop (php -S localhost:8000), Öffnen Sie dann die Seite mit dem Browser und sie sieht aus wie eine Desktop-Anwendung. Mit PWA (Progressive Web App) kann es auch als Desktop-Icon installiert werden.
GUI-Framework für andere SprachenWenn das Ziel eine Desktop-Anwendung und nicht PHP selbst ist, sollten Sie Folgendes in Betracht ziehen:
- Python + PyQt / Tkinter / Kivy
- Java + JavaFX / Swing
- C# + WinForms / WPF / .NET MAUI
Diese sind stabiler und werden kontinuierlich gewartet als PHP-GTK.

Anregung

Wenn Sie darauf bestehen, PHP zu verwenden, ist dies die beste LösungElectron/NW.js + PHP, Das Front-End ist mit Web-Technologien aufgebaut und das Back-End nutzt weiterhin PHP, was es plattformübergreifend und modern macht.
Wenn andere Sprachen akzeptiert werden, wird empfohlen, stattdessen Python oder C# zu verwenden, was eine bessere Unterstützung im Bereich der Desktop-Entwicklung bietet.

Einzelseitenanwendung

Eine Single Page Application (SPA) ist eine Webanwendung oder ein Website-Modell, das mit Benutzern interagiert, indem es die aktuelle Seite dynamisch neu schreibt, anstatt eine komplett neue Seite vom Server zu laden. Dieser Ansatz vermeidet Unterbrechungen zwischen Seitenwechseln und bringt das Benutzererlebnis näher an eine Desktop-Anwendung.

Unterschiede zwischen SPA und herkömmlichen mehrseitigen Anwendungen (MPA)

Im traditionellen Modell wird jedes Mal, wenn auf einen Link geklickt wird, eine neue HTML-Datei vom Server angefordert. In SPA werden die erforderlichen HTML-, CSS- und JavaScript-Codes nur beim ersten Laden heruntergeladen und der anschließende Datenaustausch erfolgt über AJAX oder die Fetch-API.

Merkmal	SPA (Einzelseitenanwendung)	MPA (Mehrseitige Bewerbung)
Laden der Seite	Nur einmal laden, teilweise aktualisiert	Laden Sie bei jedem Vorgang die gesamte Seite neu
Benutzererfahrung	Sanft, kein Sprunggefühl	Es gibt einen offensichtlichen weißen Bildschirm und ein Gefühl des Wartens
Serverlast	Niedriger (überträgt nur JSON-Daten)	Höher (HTML muss jedes Mal gerendert werden)
SEO-Optimierung	Schwieriger und erfordert zusätzliche Bearbeitung	Einfach und natürlich suchmaschinenfreundlich

Die Kernkomponenten eines SPA

Front-End-Routing (Routing):Obwohl es nur eine HTML-Datei gibt, wird JavaScript verwendet, um URL-Änderungen zu überwachen (Hash oder History API) und die entsprechenden Komponenten dynamisch anzuzeigen.
Staatsverwaltung:Teilen Sie Daten (z. B. Anmeldestatus des Benutzers, Inhalt des Warenkorbs) zwischen verschiedenen Komponenten.
Dynamisches Rendering:Verwenden Sie Frameworks wie Vue, React oder Angular, um die DOM-Struktur basierend auf Datenänderungen sofort zu aktualisieren.

Einfaches Beispiel für eine SPA-Routing-Logik

Dies ist ein Framework-unabhängiges Verfahren, bei dem nur natives JavaScript verwendet wird, um die Logik des SPA-Wechselinhalts zu simulieren:

<!-- index.html -->
<nav>
  <a href="#home" onclick="route()">Homepage</a>
  <a href="#trading" onclick="route()">Handelsdiagramme</a>
</nav>

<div id="content">
  <!-- Hier werden dynamische Inhalte eingefügt -->
</div>

<script>
  const Routen = {
    „#home“: „<h2>Willkommen zurück</h2><p>Dies ist Ihr Dashboard.</p>“,
    „#trading“: „<h2>Echtzeitkurse</h2><div id='tv-container'>Chart wird geladen...</div>“
  };

  Funktion route() {
    const hash = window.location.hash || "#heim";
    const contentDiv = document.querySelector("#content");
    contentDiv.innerHTML = Routen[Hash];

    // Wenn Sie zur Handelsseite wechseln, können Sie hier das bisherige TradingView Widget initialisieren
    if (hash === "#trading") {
      // initTradingView();
    }
  }

  // URL-Änderungen überwachen
  window.addEventListener("hashchange", route);
  // Erstlast
  route();
</script>

Vor- und Nachteile von SPA

Vorteil:Hohe Geschwindigkeit, reduzierter Bandbreitenverbrauch und separate Front-End- und Back-End-Entwicklung (das Back-End muss nur eine API bereitstellen).
Mangel:Die anfängliche Ladezeit ist lang (First Load) und SEO muss durch SSR (serverseitiges Rendering) oder Pre-Rendering-Technologie kompensiert werden.

Single-Page-Anwendungsframework

Bei der Entwicklung einer Single-Page-Anwendung (SPA) kann die Auswahl einer geeigneten Framework-Lösung die Entwicklungseffizienz und die Wartbarkeit des Codes erheblich verbessern. Der aktuelle Markt wird von drei Mainstream-Frameworks dominiert, mit vielen aufstrebenden Newcomern.

React

Sie wurde von Meta (Facebook) entwickelt und gepflegt und ist derzeit die weltweit am häufigsten verwendete UI-Funktionsbibliothek. Es führt die Syntax von Virtual DOM (Virtual DOM) und JSX ein und legt dabei den Schwerpunkt auf Komponentisierung und unidirektionalen Datenfluss.

Vorteil:Das Ökosystem ist extrem groß, die Gemeinschaftsressourcen sind reichlich vorhanden und die Nachfrage auf dem Arbeitsmarkt ist enorm.
Häufig verwendete Kombinationen:React Router (Routing), TanStack Query (Datenerfassung), Zustand/Redux (Zustandsverwaltung).

Vue.js

Es wurde von You Yuxi entwickelt und ist für sein „progressives“ Framework bekannt. Die Lernkurve ist relativ sanft und der Beamte stellt eine sehr vollständige Toolkette bereit, die sich sehr gut für Projekte eignet, die eine Entwicklungseffizienz anstreben.

Vorteil:Hohe Dateiaffinität, bidirektionale Datenbindung und intuitive Syntax.
Häufig verwendete Kombinationen:Vue Router (Routing), Pinia (Staatsverwaltung), Vite (Konstruktionstool).

Angular

Ein vollständiges, von Google verwaltetes Framework, geschrieben in TypeScript. Es bietet eine „Family Bucket“-Lösung, die alle notwendigen Funktionen wie Routing, Formularüberprüfung und HTTP-Clients umfasst.

Vorteil:Die strenge Architektur eignet sich für große Projekte auf Unternehmensebene und verfügt über eine integrierte Abhängigkeitsinjektion (DI).
Häufig verwendete Kombinationen:RxJS (reaktive Programmierung).

Neue und leichte Lösungen

Zusätzlich zu den oben genannten drei großen Frameworks sind in den letzten Jahren viele Alternativen zur Leistungsoptimierung entstanden:

Rahmenname	Merkmale
Svelte	Kein virtuelles DOM, der Programmcode wird während der Kompilierungsphase in effizientes natives JS umgewandelt.
SolidJS	Ähnlich der React-Syntax, aber mit ultimativer Laufleistung.
Preact	Eine leichtgewichtige Version von React, nur etwa 3 KB groß und hochkompatibel.

Wie wähle ich?

Bei der Auswahl eines Frameworks empfiehlt es sich generell, die folgenden Benchmarks zu berücksichtigen:

Projektgröße:Angular oder React werden für große Unternehmensprojekte bevorzugt; Für kleine und mittlere Projekte oder Rapid Prototyping empfiehlt sich Vue oder Svelte.
Teamerfahrung:Wenn das Team mit HTML-Vorlagen vertraut ist, ist der Einstieg in Vue einfacher; Wenn Sie eine starke Typisierung und Architektur bevorzugen, ist Angular eine gute Wahl.
Wartbarkeit:Die Communities von React und Vue sind stark, sodass es in Zukunft am bequemsten ist, Unterstützung durch Pakete von Drittanbietern zu erhalten.

Single-Page-Anwendungslösungen für Python

Im Python-Ökosystem werden SPA-Entwicklungslösungen (Single Page Application) hauptsächlich in zwei Kategorien unterteilt: Die eine verwendet Python als Back-End-API und die andere verwendet ein spezifisches Framework, das es Entwicklern ermöglicht, durch einfaches Schreiben von Python-Code automatisch eine Front-End-Schnittstelle mit SPA-Funktionen zu generieren.

1. Datenwissenschaft und Rapid Prototyping (UI-as-Code)

Diese Frameworks sind am beliebtesten, da Entwickler keine HTML-/CSS-/JS-Kenntnisse benötigen, um sofort interaktive Einzelseiten-Webseiten zu entwickeln.

Streamlit：Der aktuelle Mainstream in der Datenwissenschaft. Es führt das Skript von oben nach unten aus und alle Parameteränderungen lösen lokale Aktualisierungen aus. Geeignet für die schnelle Erstellung von Daten-Dashboards.
Gradio：Speziell für die Modellanzeige für maschinelles Lernen entwickelt. Die Schnittstelle verfügt über einen hohen Grad an Komponentisierung und beherrscht besonders gut die Interaktion zwischen Bild, Spracheingabe und Modellausgabe.
Dash (by Plotly)：Basierend auf Flask und React. Dash ist das leistungsstärkste Tool für Datenanwendungen auf Unternehmensebene, die hochgradig angepasste und komplexe Diagramme erfordern.

2. Vollständige Webanwendung (Modern Full-Stack)

Diese Art von Framework versucht, das traditionelle React/Vue + FastAPI-Modell herauszufordern und die Full-End-Entwicklung einheitlicher zu gestalten.

Rahmenname	Merkmale	Technische Architektur
Reflex (früher bekannt als Pynecone)	In reinem Python geschrieben und in eine React-Anwendung kompiliert.	Python + Next.js / Tailwind
NiceGUI	Extrem einfache Syntax, geeignet zur Steuerung von Hardware, Gadgets oder einfachen Webseiten.	Python + Vue / Quasar
Flet	Ein auf Flutter basierendes Python-Framework, das gleichzeitig als Web-SPA und Desktop-Anwendung veröffentlicht werden kann.	Python + Flutter

3. Traditionelle Backend-API-Lösung (Entkoppelte Architektur)

Dies ist das gängigste kommerzielle Softwareentwicklungsmodell. Python ist nur für Logik und Daten verantwortlich, das Frontend wird dem professionellen JavaScript-Framework überlassen.

// Architekturdiagramm
Backend (Python): FastAPI / Django Ninja / Flask
Transportprotokoll: RESTful API oder WebSocket
Frontend (JavaScript): Vue.js / React / Svelte (verantwortlich für das Rendern von SPA)

4. HTMX-Lösung (minimalistisches SPA-Erlebnis)

Dies ist ein sehr beliebter Trend der letzten Jahre. HTMX allows traditional Python web frameworks (such as Django or Flask) to achieve the effect of AJAX partial page update without writing complex JavaScript.

# Django + HTMX-Beispiel (Schaltfläche für teilweise Aktualisierung)
# Nach dem Klicken wird nur der #Ergebnisbereich ersetzt und die Webseite wird nicht aktualisiert.
<button hx-post="/get-data/" hx-target="#result">
    Klicken Sie auf mich, um Daten zu erhalten
</button>
<div id="result">Warten...</div>

Wählen Sie Vorschläge aus

Wenn Sie ein Datenwissenschaftler sind:wählenStreamlitoderGradio。
Wenn Sie schöne Webseiten in reinem Python entwickeln möchten:wählenReflex。
Wenn Sie ultimative Leistung und Cross-Plattform anstreben:wählenFlet。
Wenn Sie Ihre traditionelle Website auf einfachste Weise aktualisieren möchten:wählenHTMX。

Single-Page-Webentwicklungslösungen über JavaScript und Python hinaus

1. Moderne HTML-Erweiterungslösung (HTMX / Alpine.js)

Das Kernkonzept dieser Art von Lösung ist die „Rückkehr zu HTML“. Sie befürworten, dass keine Notwendigkeit besteht, komplexe JavaScript-Frameworks zu schreiben, um die dynamischen Effekte von SPA zu erzielen.

HTMX：Senden Sie AJAX-Anfragen direkt über HTML-Attribute und ersetzen Sie Teilinhalte. Damit können Backends (unabhängig von der Sprache) direkt HTML-Fragmente anstelle von JSON zurückgeben.
Alpine.js：Bekannt als „Tailwind CSS für das Web“. Schreiben Sie einfache Logik direkt in HTML-Tags, perfekt für statische Seiten, die wenig Interaktion erfordern.

2. WebAssembly (Wasm)-Lösung

Mit WebAssembly können Entwickler browserseitige Logik mit Hochleistungssprachen wie C++, Rust oder Go schreiben und so das Monopol von JavaScript brechen.

Sprache	Hauptrahmen	Besonderheit
C# / .NET	Blazor WebAssembly	Ermöglichen Sie .NET-Entwicklern, Frontends in C# statt in JS zu schreiben.
Rust	Yew / Leptos	Extreme Ausführungsleistung und starke Typensicherheit.
Go	Hugo / TinyGo	Die Kompilierung ist extrem schnell und eignet sich für die Ausführung logisch komplexer Operationen.

3. Statische Site-Generierung (SSG)

Diese Art von Lösung generiert alle Seiten zur „Build-Zeit“ in statische HTML-Dateien, die sehr schnell geladen werden und sehr SEO-freundlich sind.

Astro：Moderne SSG-Vertreter übernehmen die „Archipel-Architektur“ und laden JS nur in den Teilen, die eine Interaktion erfordern.
Eleventy (11ty)：Es ist minimalistisch und flexibel und unterstützt mehrere Vorlagensprachen.

4. Plattformübergreifende UI-Lösung (Flutter for Web)

Die von Google eingeführte Lösung verwendet die Dart-Sprache. Es verwendet nicht den standardmäßigen HTML/CSS-Renderingpfad, sondern zeichnet die gesamte Benutzeroberfläche über Canvas.

// Beispiel für Flutter-Logik
void main() {
  runApp(const MyApp());
}
// Die Benutzeroberfläche wird vollständig von Canvas gezeichnet und eignet sich zum Transplantieren von Apps mit hoher visueller Konsistenz.

5. Low-Code / No-Code

Für interne Unternehmenstools oder schnelle Startanforderungen kann SPA ohne handschriftliche Codierung erstellt werden.

Appsmith / Budibase：Erstellen Sie schnell ein Verwaltungs-Backend, indem Sie Komponenten ziehen und eine Verbindung zur Datenbank herstellen.
Webflow：Bietet Designern eine visuelle Schnittstelle zur direkten Erstellung hochwertiger Webseiten.

Zusammenfassung des Lösungsvergleichs

planen	Anwendbare Situationen	Technische Schwelle
HTMX	Aufwertung traditioneller Websites durch ein Gefühl der Interaktivität	Niedrig (nur Backend-Sprache erforderlich)
WebAssembly	Bildverarbeitung, komplexe Operationen, Spiele	Hoch (erfordert Kompilierungssprachengrundlage)
Astro (SSG)	Blog, Dokumente, offizielle Website	Mitte
Flutter for Web	Die App wird gleichzeitig auf der Webseite veröffentlicht	Mittel (erfordert Dart)

Selbstverkapselte Webanwendung

Grundlegende Einführung

Herkömmliche Webarchitekturen wie PHP + JavaScript werden häufig in serverseitigen Bereitstellungen verwendet, können jedoch den Zugriff auf oder das Kopieren von Quellcode nicht wirksam verhindern und sind daher nicht für die kommerzielle Lizenzierung und Bereitstellung in nicht vertrauenswürdigen Umgebungen geeignet. Um dieses Problem zu lösen, entstand die „Self-hosted Web Application“-Architektur. Es kompiliert die Back-End-Logik in eine nicht lesbare ausführbare Datei und verfügt über integrierte HTTP-Dienstfunktionen, die es dem Front-End ermöglichen, weiterhin mit HTML/JS zu interagieren, während das Back-End Verschlüsselung, Sicherheit, Autorisierungskontrolle und andere Anforderungen implementieren kann.

Vorteil

Das Back-End-Programm kann zum Schutz des Quellcodes in eine nicht lesbare ausführbare Datei (Binärdatei) gekapselt werden.
Zur Verhinderung unbefugter Nutzung kann ein Lizenzmanagementsystem integriert werden.
Kann plattformübergreifend als lokaler Dienst oder Desktop-Anwendung bereitgestellt werden.
Das Frontend wird immer noch mit Standard-Webtechnologien entwickelt, mit geringen Lernkosten.

Mangel

Die Entwicklungsarchitektur ist relativ komplex und muss sich mit Front-End- und Back-End-Kommunikations-, Autorisierungs- und Aktualisierungsmechanismen befassen.
Sie müssen Ihre eigenen Bereitstellungs- und Benutzerinstallationsprozesse entwerfen.
Einige Tools verfügen über eine geringe Desktop-Integration und erfordern zusätzliche UX-Verarbeitung.

Anwendbare Situationen

Es müssen interne Tools oder kommerzielle Anwendungen für die Client-Bereitstellung bereitgestellt werden.
Der Quellcode muss vor Dekompilierung oder Diebstahl geschützt werden.
Einschränkungen wie Berechtigungsverwaltung, Ausführungszeiten oder Zeitsteuerung sind erforderlich.

Technologievergleichstabelle (sortiert nach Marktanteil/Nutzungsrate)

Name	Benutze Sprache	Ob die Lizenzverwaltung unterstützt werden soll	Unterstützt es C#?	Kann Binärdateien erzeugen	für den Zweck geeignet	Nutzungsrate/Marktanteil
Electron	JavaScript + Node.js	Kann mit einem Verifizierungssystem verwendet werden	NEIN	Ja (Desktop-App)	Plattformübergreifende Desktop-Web-App	sehr hoch
Node.js + pkg	JavaScript	Kann mit JWT/Schlüsselüberprüfung verwendet werden	NEIN	Ja	Kapselung von Web-API-Anwendungen	hoch
ASP.NET Core + Kestrel	C#	Native Unterstützung	Ja	Ja (.exe/.dll)	Enterprise Web API/Tools	hoch
Go HTTP Server	Go	Integriert oder benutzerdefiniert	NEIN	Ja	Hochleistungsfähiges Web-Backend	hoch
Blazor WebAssembly + ASP.NET	C#	Unterstützung der Autorisierungsüberprüfung	Ja	Ja	SPA + Web-API-Integration	Mittel bis hoch
Gradio	Python	Kann mit Dritten verwendet werden	NEIN	Kann (PyInstaller)	ML/AI Web UI	Mitte
Streamlit	Python	Kann mit Dritten verwendet werden	NEIN	Kann (PyInstaller)	Web-Benutzeroberfläche zur Datenvisualisierung	Mitte
Tauri	Rust + JS	Unterstützt die benutzerdefinierte Überprüfung	NEIN	Ja	Ultraleichte Desktop-App	Mitte
Mongoose / Civetweb	C / C++	Eingebettete Validierungslogik	Ja (mit CLI)	Ja	Eingebetteter Webserver	Mitte

Bemerkung

Das Marktanteilsranking wird basierend auf der GitHub-Nutzung, der Akzeptanzrate in Unternehmen und der Aktivität der Entwickler-Community geschätzt.
Von C#-Benutzern empfohlen: ASP.NET Core und Blazor sind die erste Wahl, zusammen mit dem selbst erstellten Webserver von Kestrel.
Wenn das Front-End fertiggestellt ist, können die oben genannten Tools verwendet werden, um den Back-End-Dienst als Binärpaket zu packen und einen Autorisierungsmechanismus hinzuzufügen.

ASP.NET Core

Einführung

ASP.NET Core ist ein plattformübergreifendes, leistungsstarkes Open-Source-Webanwendungs-Framework, das von Microsoft entwickelt wurde und Windows, Linux und macOS unterstützt. Es ist Teil der .NET-Plattform und für moderne Web-APIs, Web-Apps und Microservices konzipiert. Im Vergleich zu herkömmlichem ASP.NET ist die Core-Version leichter, modularer und kann in eine unabhängige ausführbare Datei (.exe) kompiliert werden, was sich sehr gut für die selbstgekapselte Webanwendungsarchitektur eignet.

Besonderheit

Plattformübergreifende Unterstützung (Windows/Linux/macOS)
Hohe Leistung, geringer Speicherverbrauch
Kann in eine eigenständige ausführbare Datei kompiliert werden (eigenständige .exe/.dll)
Integrierter Webserver (Kestrel), kann unabhängig bereitgestellt werden
Kann Razor Pages, Blazor, MVC, gRPC und andere Architekturen integrieren
Unterstützt den Middleware-Mechanismus, um die Funktionserweiterung zu erleichtern
Gute Sicherheit, unterstützt HTTPS, JWT, OAuth und andere Authentifizierungsmethoden

Vorteile für selbstkapselnde Webanwendungen

Kann direkt mit Kestrel Web Server ohne IIS ausgeführt werden
Das Backend kann als .exe oder .dll gepackt werden und lässt sich nicht einfach dekompilieren
Kann über einen integrierten Autorisierungsmechanismus verfügen (z. B. Seriennummer, Autorisierungsüberprüfung)
Verwenden Sie es mit Front-End-HTML/JS oder Blazor, um schnell eine Web-Benutzeroberfläche zu erstellen
Praktisch für Versionskontrolle, automatische Updates und Fehlerverfolgung

Gängige Verpackungsmuster

hinteres Ende:Verwenden Sie die ASP.NET Core-Web-API, um sie in eine eigenständige ausführbare Datei zu kompilieren
Frontend:Verfügbar im HTML/JS- oder Blazor-Framework, eingebettet in das Projekt oder extern gespeichert
einsetzen:Erstellen Sie einen einzelnen Ordner (einschließlich ausführbarer Dateien und statischer Dateien) für die lokale Ausführung durch den Client

Integrationsmethode für die Autorisierungsverwaltung

Verwenden Sie JWT mit Seriennummer/Token-Mechanismus
Hardwarebindung (Bindung von MAC, CPU-ID, UUID usw.)
Stellen Sie zur Autorisierungsüberprüfung eine Verbindung zum Lizenzserver her
Lokale Autorisierungsdatei (verschlüsselte Autorisierungsinformationen)

Ausführbare Datei generieren (Eigenständiger Build)

dotnet publish -c Release -r win-x64 --self-contained true -p:PublishSingleFile=true

Mit diesem Befehl kann die ASP.NET Core-Anwendung in eine eigenständige ausführbare Datei (z. B. „MyApp.exe“) kompiliert werden, die direkt auf dem Zielsystem ausgeführt werden kann, ohne dass .NET Runtime installiert werden muss.

Geeignet für Anwendungsszenarien

Webtools, die auf dem Client bereitgestellt oder in Desktopanwendungen gepackt werden müssen
Kommerzielle Softwaresysteme erfordern eine Berechtigungskontrolle und einen Quellcodeschutz
Interne Unternehmensanwendungen, Vermeidung der Abhängigkeit von IIS oder der Cloud-Bereitstellung

ASP.NET Core vs. .NET MAUI + Blazor

Position

ASP.NET Core: Plattformübergreifendes serverseitiges Entwicklungsframework zum Erstellen von Webanwendungen und APIs.
.NET MAUI + Blazor: Kombination der plattformübergreifenden nativen Anwendungen von .NET MAUI mit der Web-UI-Technologie von Blazor, sodass Entwickler Web-UI-Komponenten auf Desktop- oder Mobilgeräten wiederverwenden können.

Support-Plattform

ASP.NET Core: Wird auf Servern unter Windows, Linux und macOS bereitgestellt und ermöglicht den Zugriff über Browser oder APIs.
.NET MAUI + Blazor: Kann auf Android, iOS, Windows, macOS ausgeführt werden und Blazor-Komponenten sind in MAUI-Anwendungen eingebettet.

Entwicklungsmodus

ASP.NET Core: Backend-Logik + Razor Pages / MVC / Blazor Server / Blazor WASM.
.NET MAUI + Blazor: Native Application Framework (MAUI) + Einbetten der Blazor-Benutzeroberfläche mithilfe von BlazorWebView-Steuerelementen.

UI-Rendering

ASP.NET Core: Die Benutzeroberfläche basiert auf dem Browser und wird mit HTML, CSS und JS gerendert.
.NET MAUI + Blazor: Die Benutzeroberfläche wird in der nativen Anwendung angezeigt und der Blazor-Teil rendert Razor-Komponenten über die integrierte WebView.

Anwendbare Szenarien

ASP.NET Core:Erstellen Sie Cloud-Dienste, interne Unternehmenssysteme, Webanwendungen und APIs.
.NET MAUI + Blazor: Wenn Sie bereits über eine Blazor-Komponente oder Web-Benutzeroberfläche verfügen und diese schnell plattformübergreifend auf Desktop- und Mobilgeräte portieren möchten.

Integration

ASP.NET Core kann als Backend von .NET MAUI + Blazor verwendet werden, um Daten und API bereitzustellen.
Wenn Sie bereits über ein Blazor-Webprojekt verfügen, können Sie es nahezu problemlos in eine MAUI-App verschieben und viel Code wiederverwenden.

Zusammenfassen

ASP.NET Core konzentriert sich auf Backend- und Webarchitektur und eignet sich für die Entwicklung von Clouds und APIs.
.NET MAUI + Blazor konzentriert sich auf benutzerseitige plattformübergreifende Anwendungen und eignet sich besonders für Teams, die bereits über den Front-End-Technologie-Stack von Blazor verfügen.
Wenn beides kombiniert wird, kann eine Komplettlösung aus „Back-End-Service + plattformübergreifender Front-End-App“ erreicht werden.

Häufig verwendete IDEs für die ASP.NET Core-Entwicklung

Visual Studio

Es wurde von Microsoft entwickelt und ist die optimale IDE für die Entwicklung von ASP.NET Core
Unterstützt nur Windows (einige Funktionen sind nur für Windows verfügbar)
Unterstützt alle .NET-Entwicklungsfunktionen wie Razor, Blazor, Web API, EF Core usw.
Grafisches Design, erweitertes Debugging, Unit-Tests, NuGet und Veröffentlichungstools sind verfügbar.
Kann Azure, Docker, Git und andere Entwicklungsdienste integrieren
Empfohlene Version:Visual Studio 2022 und höher
Versionsauswahl:
- Community(Kostenlos, geeignet für Einzelpersonen und kleine Entwicklungsteams)
- Professional / Enterprise(Kostenpflichtiger Support und Funktionen auf Unternehmensniveau)

Visual Studio Code

Plattformübergreifend (Windows, Linux, macOS)
Leichter Editor, Sie müssen das C#-Erweiterungskit selbst installieren (bereitgestellt von OmniSharp).
Unterstützt die ASP.NET Core-Entwicklung wie Razor, Blazor, Web API, EF Core usw.
Für das Debuggen und Kompilieren müssen launch.json und task.json manuell festgelegt werden
Geeignet für Entwickler zur individuellen Anpassung der Entwicklungsumgebung und Toolkette
Kostenlos und Open Source

JetBrains Rider

Entwickelt von JetBrains, plattformübergreifend (Windows, Linux, macOS)
Unterstützt ASP.NET Core, Blazor, Razor, Web API, EF Core usw.
Integriertes ReSharper-Analysetool, leistungsstarke IntelliSense- und Rekonstruktionsfunktionen
Unterstützt Docker, Git, CI/CD-Toolkette
Es gibt eine Gebühr, aber die Kosten sind niedriger als bei Visual Studio Enterprise

Zusammenfassende Vergleichstabelle

IDE	Support-Plattform	Besonderheit	Ist es kostenlos?	Geeignet für Gegenstände
Visual Studio	Windows	Volle Funktionalität, bester offizieller Support	Community kostenlos (es fallen andere Gebühren an)	Enterprise- und Full-End-Entwickler
Visual Studio Code	Windows / Linux / macOS	Leicht und hoch skalierbar	frei	Plattformübergreifende Entwickler, Studenten
JetBrains Rider	Windows / Linux / macOS	ReSharper-Integration, plattformübergreifend	Gebühr erforderlich	Fortgeschrittene Entwickler und plattformübergreifende Teams

Erstellen Sie ein ASP.NET Core-Projekt in VS Code

Vorbereitung

Installieren.NET SDK: Gehe zuOffizielle .NET-Downloadseite, laden Sie die neueste Version herunter und installieren Sie sie.
InstallierenVisual Studio Code。
In VS-Code installierenC#-Erweiterungskit(bereitgestellt von Microsoft).

Projekt erstellen

Öffnen Sie das integrierte Terminal von VS Code (Tastenkombination:Ctrl + `)。
Geben Sie die folgenden Befehle ein, um ein ASP.NET Core-Projekt zu erstellen:
```
dotnet new webapp -o MyAspNetApp
```
- webapp: Erstellen Sie ASP.NET Core-Webanwendungen mit Razor Pages.
- -o MyAspNetApp:Geben Sie den Namen des Projektordners an.
Geben Sie den Projektordner ein:
```
cd MyAspNetApp
```

Ausführungsprojekt

Geben Sie im Terminal ein:
```
dotnet run
```
Standardmäßig ist es inhttps://localhost:5001oderhttp://localhost:5000implementieren.

Öffnen Sie das Projekt in VS Code

wählenDatei → Ordner öffnen, laden Sie das neu erstellteMyAspNetApp。
Verwenden Sie bei der Installation der erforderlichen NuGet-Pakete Folgendes:
```
dotnet Paket hinzufügen Paketname
```

Gängige Projekttypen

dotnet new webapp → Razor Pages Web App
dotnet new mvc→ MVC-Architektur
dotnet new webapi→ Web-API-Projekt

VS Code debuggt ASP.NET Core-Projekteinstellungen

Erstellen Sie ein Debugging-Profil

Öffnen Sie den Projektordner in VS Code.
entsprechendCtrl + Shift + P, eingeben und auswählenDebug: Open launch.json。
wählen.NET CoreUmgebung wird automatisch generiert.vscode/launch.json。

Beispiel launch.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"
      }
    }
  ]
}

Erstellen Sie Build-Einstellungen

VS Code wird es auch tun.vscodeOrdnergenerierungtasks.json。

Wenn nicht, können Sie einen neuen Bauauftrag hinzufügen:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyAspNetApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

Ausführung und Debugging

entsprechendF5Oder wählen Sie links im Bereich „Ausführung und Debug“ eine Option aus.NET Core Launch (web)。
VS Code erstellt und startet das ASP.NET Core-Projekt automatisch und öffnet es im Browserhttps://localhost:5001。
Für das Echtzeit-Debuggen können in C#-Programmen Haltepunkte festgelegt werden.

VS Code debuggt ASP.NET Core Web API-Projekteinstellungen

Erstellen Sie ein Web-API-Projekt

Geben Sie im Terminal ein:

dotnet new webapi -o MyWebApiApp
cd MyWebApiApp
code .

Dadurch wird ein Web-API-Projekt erstellt und in VS Code geöffnet.

launch.json einstellen

{
  "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"
      }
    }
  ]
}

Legen Sie task.json fest

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyWebApiApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

Ausführungs- und Test-API

entsprechendF5Oder wählen Sie im Bereich „Ausführung und Debug“ eine Option aus.NET Core Launch (web API)。
Nach dem Start wird der Serverhttps://localhost:5001oderhttp://localhost:5000。
verfügbarSwagger UI(Projektstandard) Testen Sie die API im Browser.
Sie können die API auch mit Postman oder dem REST-Client-Plugin für VS Code testen.

Erstellen Sie eine REST-Client-Testbeispieldatei

Installieren Sie die REST-Client-Erweiterung

Durchsuchen Sie den VS Code Extension StoreREST Client。
Nach der Installation sofort einsatzbereit.httpoder.restArchivtest-API.

Fügen Sie die Datei test.http hinzu

### GET-API testen
ERHALTEN Sie https://localhost:5001/weatherforecast
Akzeptieren: application/json

###

### Test-POST-API-Beispiel
POST https://localhost:5001/api/sample
Inhaltstyp: application/json

{
  „id“: 1,
  „name“: „Testdaten“
}

Verwendung

Im Projektstammverzeichnis erstellentest.http。
Sobald Sie das Archiv öffnen, wird über jeder Anfrage etwas angezeigtSend RequestTaste.
Klicken Sie hier, um eine API-Anfrage direkt in VS Code zu senden und die Antwort anzuzeigen.

Kestrel

Einführung

Turmfalke istASP.NET CoreEin integrierter plattformübergreifender Webserver, der von Microsoft entwickelt wurde. Er ist leistungsstark und leichtgewichtig konzipiert, unterstützt HTTP/1.1 und HTTP/2 und ist der Standardserver für ASP.NET Core-Anwendungen. Durch die Verwendung von Kestrel können Entwickler Webanwendungen direkt umschließenselbstverpackende ausführbare Dateikönnen Sie HTTP-Dienste lokal starten und bereitstellen, ohne auf externe Server wie IIS, Apache oder Nginx angewiesen zu sein.

Besonderheit

Plattformübergreifende Unterstützung (Windows, Linux, macOS)
Native Unterstützung für HTTPS, HTTP/2, WebSocket und andere Protokolle
Hohe Leistung, geeignet für eingebettete oder selbst gepackte Anwendungen
Interner Dienst oder eigenständiger Server, der als Reverse-Proxy fungieren kann
Kann direkt ausgeführt werden, ohne dass zusätzliche Serversoftware installiert werden muss

Kestrel und selbstgekapselte Webanwendungen

Turmfalke ist erhältlich alsNativer HTTP-API-Anbieter, wird mit der Front-End-Benutzeroberfläche verwendet
Geeignet für die Verwendung mit ASP.NET Core, um die gesamte Anwendung in eine unabhängige Ausführungsdatei (.exe) zu kompilieren.
Autorisierungs- und Verifizierungslogik kann als Sicherheitsgrundlage von Webanwendungen integriert werden.
durchlässigUseUrlsLegen Sie den lokalen Port und Pfad des Dienstes fest

Einfacher Beispielcode

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();
    }
}

Bereitstellungsmethode

verwendendotnet publishPacken Sie die Anwendung mit Kestrel in eine einzige ausführbare Datei
Es ist kein externer Webserver erforderlich und kann direkt auf dem Zielrechner gestartet werden
Kann mit Frontends wie Blazor oder HTML/JS gepackt und bereitgestellt werden

Unterschiede zu IIS/Nginx

Projekt	Kestrel	IIS / Nginx
Ob eingebaut	Ja (in ASP.NET Core integriert)	Nein (muss separat installiert werden)
Support-Plattform	Windows / Linux / macOS	Variiert je nach Server
Benötigen Sie Administratorrechte?	NEIN	Hängt von der Plattform und den Einstellungen ab
Ist es zur Selbstverkapselung geeignet?	sehr geeignet	Nicht geeignet
Leistung	hoch	Hoch (aber die Einstellung ist komplizierter)

Anwendbare Situationen

Anwendungen, die als native Web-Apps gepackt werden müssen
Sie möchten auf verschiedenen Plattformen bereitstellen, ohne auf externe Server angewiesen zu sein
Kommerzielle Anwendungen, die Lizenzüberprüfung und API integrieren müssen

ASP.NET Core wird zusammen mit dem Front-End (HTML/JavaScript) gepackt und bereitgestellt.

Einführung

ASP.NET Core unterstützt die Integration von Front-End-Ressourcen (HTML, CSS, JavaScript, SPA usw.) und Back-End-API-Diensten in eine einzelne Anwendung und deren Bereitstellung als unabhängige Ausführungseinheit (eigenständige Anwendung), um die Ziele einfacher Bereitstellung, Quellcodeschutz und Lizenzkontrolle zu erreichen.

Gängige Front-End-Integrationsmethoden

Statische Dateien:Fügen Sie HTML/CSS/JS einwwwroot/Ein Ordner für ASP.NET Core, der als statische Ressourcen dient.
Front-End- und Back-End-Trennung SPA (React/Vue/Angular):Nachdem Sie das Front-End-Projekt (mit Tools wie Webpack/Vite erstellt) in statische Ressourcen erstellt haben, kopieren Sie es nachwwwroot/。
Razor Pages / Blazor Server：Verwenden Sie das von ASP.NET Core bereitgestellte UI-Framework, um Seiten direkt zu schreiben (kein reines HTML/JS, aber eng in die Front-End-Logik integriert).

Beispiel für Bereitstellungsschritte

Erstellen Sie ein ASP.NET Core-Projekt (optionale Web-API + statische Website oder Blazor).
Fügen Sie die Front-End-Build-Ergebnisse einwwwroot,Zum Beispiel:
- Vue：npm run buildspäterdist/Kopieren inwwwroot/
- React：npm run buildspäterbuild/Kopieren inwwwroot/
bestätigenProgram.csDer statische Dateidienst ist aktiviert in:
```
app.UseStaticFiles();
```
Legen Sie die Catch-All-Route so fest, dass SPA unterstützt wird (falls Vue/React):
```
app.MapFallbackToFile("index.html");
    
```
Stellen Sie die Anwendung bereit mit:
- Ausführbare Datei generieren (eigenständig):
  dotnet publish -c Release -r win-x64 --self-contained
- Generieren Sie eine Docker-Image-Datei (kann plattformübergreifend bereitgestellt werden)
- Bereitstellung auf IIS, Nginx, Kestrel oder Cloud-Plattformen (Azure, AWS, GCP)

Vorteil

Integrierte Bereitstellung von Front-End und Back-End zur Vereinfachung des Wartungsprozesses
Kann in eine einzige ausführbare Datei gepackt werden, um die Verteilung und den Schutz des Quellcodes zu erleichtern
Unterstützt Lizenzkontrolle und Offline-Bereitstellung
Integrieren Sie das .NET-Ökosystem und unterstützen Sie EF Core, Identität, Sicherheitsüberprüfung usw.

Mangel

Wenn Sie Razor/Blazor verwenden, gibt es eine Lernschwelle für diejenigen, die mit .NET nicht vertraut sind.
Das Frontend muss kompiliert und integriert werden, und der Entwicklungsprozess ist kompliziert.
Größere Größe nach dem Verpacken (insbesondere im eigenständigen Modus)

ASP.NET Core MVC

Was ist ASP.NET Core MVC?

ASP.NET Core MVC ist ein von Microsoft eingeführtes plattformübergreifendes Webanwendungs-Framework. Es basiert auf dem Designmuster Model-View-Controller (Model-View-Controller) und bietet eine strukturierte und modulare Möglichkeit, dynamische Websites und Web-APIs zu entwickeln.

Hauptmerkmale

Trennung von Belangen: Model ist für Daten und Logik verantwortlich, View ist für die UI-Präsentation verantwortlich und Controller ist für die Anforderungsverarbeitung verantwortlich.
Unterstützt das Routing-System und kann URL-Regeln flexibel definieren
Integrierte Unterstützung für stark typisierte Ansichten für eine einfache Bindung an das Modell
Unterstützt die Abhängigkeitsinjektion (Dependency Injection), um das Testen und Erweitern zu erleichtern
Kann zum Erstellen von RESTful-APIs und dynamischen Webseiten verwendet werden
Plattformübergreifende Unterstützung für Windows, Linux, macOS

Grundstruktur

Model: Stellt Datenstruktur und Geschäftslogik dar
View: Generieren Sie eine HTML-Benutzeroberfläche mithilfe der Razor-Syntax
Controller: Benutzeranfragen verarbeiten und Ansichten oder Daten zurückgeben

Einfaches Beispiel

// Modell
Produkt der öffentlichen Klasse
{
    public int Id { get; Satz; }
    öffentlicher String Name { get; Satz; }
    öffentlicher Dezimalpreis { get; Satz; }
}

//Controller
öffentliche Klasse ProductsController: Controller
{
    öffentlicher IActionResult Index()
    {
        var products = new List<Product>
        {
            neues Produkt { Id = 1, Name = "Laptop", Preis = 29999 },
            neues Produkt { Id = 2, Name = „Maus“, Preis = 499 },
            neues Produkt { Id = 3, Name = „Tastatur“, Preis = 899 }
        };

        return View(products);
    }
}

// Ansicht (Index.cshtml)
@model List<Product>

<table border="1" cellpadding="6" cellspacing="0">
    <thead>
        <tr>
            <th>Nummer</th>
            <th>Name</th>
            <th>Preis</th>
        </tr>
    </thead>
    <tbody>
        @foreach(Var-Element im Modell)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

ASP.NET Core-Anzeigetabelle

Beispielcode

<!-- Product.cs – Datenmodell –>
Produkt der öffentlichen Klasse
{
    public int Id { get; Satz; }
    öffentlicher String Name { get; Satz; }
    öffentlicher Dezimalpreis { get; Satz; }
}

<!-- ProductsController.cs – Controller (ASP.NET Core MVC) -->
öffentliche Klasse ProductsController: Controller
{
    öffentlicher IActionResult Index()
    {
        var products = new List<Product>
        {
            neues Produkt { Id = 1, Name = "Laptop", Preis = 29999 },
            neues Produkt { Id = 2, Name = „Maus“, Preis = 499 },
            neues Produkt { Id = 3, Name = „Tastatur“, Preis = 899 }
        };

        return View(products);
    }
}

<!-- Views/Products/Index.cshtml – Razor View-Seite -->
@model List<Product>

<table border="1" cellpadding="6" cellspacing="0">
    <thead>
        <tr>
            <th>Nummer</th>
            <th>Name</th>
            <th>Preis</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var-Element im Modell)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

Razor

Was ist Razor?

Razor ist eine von Microsoft für ASP.NET Core entwickelte Auszeichnungssprache, die es Entwicklern ermöglicht, C#-Code in HTML-Seiten einzubetten. Es kombiniert Standard-HTML und C#, um die dynamische Erstellung von Webseiten einfach und intuitiv zu gestalten.

Besonderheit

Prägnante Syntax, einfach zu schreiben und zu lesen
Unterstützt serverseitiges Rendering
Enge Integration mit ASP.NET Core MVC oder Razor Pages
Sie können C#-Sprachfunktionen wie bedingte Beurteilung, Schleifen, Funktionsaufrufe usw. direkt verwenden.
Hohe Leistung nach der Kompilierung, geeignet für die Entwicklung großer und mittlerer Webanwendungen

Nutzungsszenarien

ASP.NET Core MVC-Ansichtsseite
Dynamische Seiten für Razor Pages
Webanwendungen, die statische und dynamische Inhalte mischen

Beispiel

@page
@model IndexModel

<h1>Willkommen auf der Razor-Seite</h1>

<p>Heutiges Datum: @DateTime.Now.ToString("yyyy-MM-dd")</p>

@if(Model.Items != null && Model.Items.Any())
{
    <ul>
    @foreach(Var-Element in Model.Items)
    {
        <li>@item</li>
    }
    </ul>
}
sonst
{
    <p>Keine Daten angezeigt</p>
}

Gründe und Lösungen für NullReferenceException in Razor @foreach

Problemstellung

Verwendung in der Razor-Ansicht:

@foreach(var item in Model)
{
    <div>@item</div>
}

Wenn der folgende Fehler auftritt:

System.NullReferenceException: Object reference not set to an instance of an object.

äußernModelfürnull, was dazu führt, dass keine Schleife ausgeführt werden kann.

Häufige Ursachen

Der Controller übergibt das Modell nicht an die Ansicht.
Das übergebene Model-Objekt ist null.
Das Modell ist nicht vom Typ IEnumerable oder List.

Lösung

Stellen Sie sicher, dass Sie das richtige Modell im Controller übergeben, zum Beispiel:

public IActionResult Index()
{
    var data = new List<string> { "A", "B", "C" };
    return View(data);
}

Deklarieren Sie den Modelltyp über der Razor View-Datei:

@model IEnumerable<string>

Überprüfen Sie, ob das Modell null ist, und führen Sie dann die Schleife aus:

@if (Modell != null)
{
    foreach (Var-Element im Modell)
    {
        <div>@item</div>
    }
}
sonst
{
    <div>Keine Daten</div>
}

Anregung

Best Practice istStellen Sie sicher, dass das Modell einen Wert im Controller haben muss(sogar eine leere Sammlung), um zu vermeiden, dass View NULL-Situationen verarbeitet. Zum Beispiel:

return View(data ?? new List<string>());

MVC bietet zwei korrekte Möglichkeiten, Controller zu verwenden

Grundlegende Konzepte

In ASP.NET Core MVC kann ein Projekt mehrere Controller haben, wobei jeder Controller für verschiedene Funktionen oder Bereiche verantwortlich ist. Zum Beispiel:

HomeController— Verarbeitung von Homepages und statischen Seiten
ProductController— Übernehmen Sie das Produktmanagement

Erstellen Sie mehrere Controller

Jeder Controller muss erbenControllerKategorie auswählen und in speichernControllersOrdner.

// HomeController.cs
öffentliche Klasse HomeController: Controller
{
    öffentlicher IActionResult Index()
    {
        return View();
    }
}

// ProductController.cs
öffentliche Klasse ProductController: Controller
{
    öffentliche IActionResult List()
    {
        var products = new List<string> { „Computer“, „Mobiltelefon“, „Tablet“ };
        return View(products);
    }
}

Entsprechende Ansichten

Die Ansicht von MVC erstellt standardmäßig Ordner basierend auf dem Controller-Namen, zum Beispiel:

Views/Home/Index.cshtml
Views/Product/List.cshtml

Rufen Sie Aktionen verschiedener Controller in View auf

Kann verwendet werdenasp-controllerUndasp-actionTag-Helfer:

<a asp-controller="Home" asp-action="Index">Zurück zur Startseite</a>
<a asp-controller="Product" asp-action="List">Produktliste</a>

Routing-Einstellungen

existierenProgram.csoderStartup.cs, die Standardroute ist normalerweise:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

Dies bedeutet, dass die URL lautet/, führt automatisch die Führung durchHomeController.Index(). Wenn die URL ist/Product/List, es wird ausgeführtProductController.List()。

abschließend

Sie können in MVC mehrere Controller gleichzeitig haben, solange:

Jeder Controller erbtController
existierenViewsErstellen Sie entsprechende Ordner und Dateien in
durchasp-controllerUndasp-actionRichtiger Anruf
Bestätigen Sie, dass die Routing-Einstellungen korrekt sind

So verwenden Sie mehrere Controller für dieselbe Ansicht

Schlüsselkonzepte

Razor View selbst bindet nur einenModel(oder ein zusammengesetztes ViewModel), kann aber Daten/Aktionen von mehreren Controllern auf derselben Seite anzeigen oder mit ihnen verknüpfen.
Gängige Methoden: Daten in einem einzelnen ViewModel, einer Teilansicht/ViewComponent zusammenführen oder andere Controller über AJAX aufrufen.

Methode 1: Daten in einem ViewModel im Controller kombinieren (empfohlen)

// Models/ViewModels.cs
öffentliche Klasse HomePageViewModel {
    public IEnumerable<Product> Produkte { get; Satz; }
    public IEnumerable<Order> RecentOrders { get; Satz; }
}

// HomeController.cs
öffentlicher IActionResult Index() {
    var vm = neues HomePageViewModel {
        Products = productService.GetTopProducts(),
        RecentOrders = orderService.GetRecentOrders()
    };
    return View(vm);
}

// Views/Home/Index.cshtml
@model HomePageViewModel

<h2>Produkt</h2>
@foreach(var p in Model.Products){ <div>@p.Name</div> }

<h2>Letzte Bestellungen</h2>
@foreach(var o in Model.RecentOrders){ <div>@o.Id</div> }

Methode 2: Teilansicht (jeder Controller stellt Daten bereit, und dann kombiniert oder ruft der übergeordnete Controller Partial auf)

// Views/Product/_ProductList.cshtml (teilweise)
@model IEnumerable<Product>
@foreach(var p in Model){ <div>@p.Name</div> }

// Views/Home/Index.cshtml (übergeordnete Ansicht)
@model HomePageViewModel
<div>
  @Html.Partial("_ProductList", Model.Products)
</div>

Methode drei: ViewComponent (entspricht einem wiederverwendbaren kleinen Controller + View)

// Components/ProductListViewComponent.cs
public class ProductListViewComponent : ViewComponent {
    private readonly IProductService _svc;
    public ProductListViewComponent(IProductService svc){ _svc = svc; }
    public IViewComponentResult Invoke(int count) {
        var products = _svc.GetTopProducts(count);
        return View(products); // Views/Shared/Components/ProductList/Default.cshtml
    }
}

// Used in Razor
@await Component.InvokeAsync("ProductList", new { count = 5 })

Methode 4: Front-End-AJAX stellt APIs von verschiedenen Controllern bereit (geeignet für dynamisches Laden)

<!-- Views/Home/Index.cshtml -->
<div id="product-area">Laden...</div>

<script>
fetch('/api/product/top5')
  .then(r => r.json())
  .then(data => {
    document.getElementById('product-area').innerHTML =
      data.map(p => `${p.name}`).join('');
  });
</script>

Methode 5: Mehrere Links zu verschiedenen Controllern in der Ansicht einfügen (die einfachste Navigation)

<a asp-controller="Product" asp-action="List">Produktliste</a>
<a asp-controller="Order" asp-action="History">Bestellverlauf</a>

Wählen Sie Vorschläge aus

Wenn Sie mehrere Datenquellen gleichzeitig auf derselben Seite anzeigen müssen: Verwenden Sie die SyntheseViewModeloderViewComponent(modularer).
Um Blöcke einzeln wiederzuverwenden oder zu rendern: verwendenPartial ViewoderViewComponent。
Wenn Sie asynchrones oder bedarfsgesteuertes Laden benötigen: Verwenden Sie AJAX, um Daten von verschiedenen Controller-APIs abzurufen.
Vermeiden Sie es, andere Controller-Aktionen in View direkt aufzurufen, um Daten abzurufen (die Controller-/Service-Schicht sollte für den Abruf von Daten verantwortlich sein), um die Trennung der Verantwortlichkeiten und die Testbarkeit sicherzustellen.

Web alte Technologie

Java Applet

Grundlegende Konzepte

Ein Java-Applet ist eine kleine, in der Java-Sprache geschriebene Anwendung, die über einen Webbrowser ausgeführt und in eine HTML-Seite eingebettet werden kann. Es wurde erstmals in den 1990er Jahren in großem Umfang zur Erstellung interaktiver Webseiten wie Animationen, Spiele und Diagrammvisualisierungen eingesetzt.

Ausführungsmethode

Das Applet muss in einem Browser ausgeführt werden, der das Java-Plugin unterstützt<applet>oder<object>Tags sind in HTML eingebettet und werden von der benutzerseitigen JVM (Java Virtual Machine) geladen und ausgeführt.

Sicherheitsbeschränkungen

Da Applets auf der Clientseite ausgeführt werden können, verwendet die Ausführungsumgebung zur Verhinderung böswilligen Verhaltens einen „Sandbox-Mechanismus“ zur Sicherheitsisolation, der beispielsweise den Zugriff auf das lokale Dateisystem oder die Ausführung externer Programme verbietet.

Support-Situation und aktuelle Situation

Google Chrome: Die NPAPI-Unterstützung wurde seit 2015 vollständig entfernt und Java-Applets werden nicht mehr unterstützt.
Mozilla Firefox: Die Unterstützung von NPAPI-Plug-ins wurde 2017 offiziell eingestellt.
Microsoft Edge: Java-Applets wurden seit dem Start nicht unterstützt.
Safari: Die Unterstützung für die Ausführung von Java-Applets wurde ab macOS Catalina vollständig entfernt.

Offizielle Oracle-Richtlinie

Oracle hat die Entfernung der Applet-API seit Java 9 angekündigt und wird Applet in Java 11 vollständig abschaffen. Java Web Start, eine weitere Desktop-Ausführungstechnologie, wird ebenfalls nicht mehr gewartet.

Alternativen

JavaFX：Bietet ein moderneres GUI-Framework und Web-Integrationsfunktionen, verfügt jedoch nicht über eine integrierte Browserunterstützung.
HTML5 + JavaScript：Entwicklung einer Mainstream-Alternativtechnologie mit Unterstützung plattformübergreifender und höherer Interaktivität.
WebAssembly：Andere Sprachen können in ein vom Browser ausführbares Format kompiliert werden, was sie zu einer potenziellen Wahl für Hochleistungsrechnen macht.

Zusammenfassen

Java-Applets sind in die Phase der Eliminierung eingetreten, und moderne Webentwicklungstrends verwenden tendenziell offene Standardtechnologien wie HTML5, JavaScript und WebAssembly. Entwickler sollten die Verwendung von Applets vermeiden und bestehende Anwendungen auf moderne Technologieplattformen verlagern.

Beispiel für ein Java-Applet

Das Folgende ist ein Beispiel für ein Java-Applet, das eine einfache Meldung anzeigt:

HTML-Code

<!DOCTYPE html>
<html lang="zh-Hant">
<Kopf>
<meta charset="UTF-8">
<title>Java Applet Example</title>
</head>
<Körper>
<h1>Java Applet Example</h1>
<applet code="HelloWorldApplet.class" width="300" height="300>
    <param name="message" value="Hello, world! ">
    Your browser does not support Java Applets.
</applet>
</body>
</html>

Java-Applet-Code

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);
}
}

Kompilieren und ausführen

1. Speichern Sie den Java-Code unterHelloWorldApplet.java, und führen Sie es in der Befehlszeile ausjavac HelloWorldApplet.javakompilieren.

2. Stellen Sie sicher, dass das generierte.classDie Datei befindet sich im selben Verzeichnis wie die HTML-Datei.

3. Verwenden Sie eine Umgebung, die Java-Applets unterstützt, um die HTML-Datei auszuführen.

Dinge zu beachten

Da die meisten modernen Browser Java-Applets nicht mehr unterstützen, empfiehlt es sich, den Einsatz anderer Technologien (wie JavaFX oder Webanwendungen) in Betracht zu ziehen, um eine ähnliche Funktionalität zu erreichen.

PHP v: 7.4.10

email: [email protected]

T:0000

資訊與搜尋 | 回dev首頁
email: Yan Sa [email protected] Line: 阿央

電話: 02-27566655 ,03-5924828

阿央
泱泱科技
捷昱科技泱泱企業

Webentwicklung

Computernutzung

Softwareentwicklung

Webserver

Internet-Marketing

Multimedia-Entwicklung

Website mit Entwicklungsinformationen

Website-Entwicklungsdienste

Maßgeschneidertes Website-Design

Responsive Webentwicklung

Aufbau einer E-Commerce-Plattform

Entwicklung von Backend-Systemen

Website-Optimierungsdienste

Wartung und Updates der Website

Technischer Support und Beratung

HTML

Infrastruktur

Allgemeine Tag-Kategorien

Immobilienantrag

Semantische Tags

Beziehung zu CSS und JavaScript

HTML-Farbname

Grundfarbe

Graue Serie

Rosa und Rot

blau und grün

Orange, gelbe und braune Farben

JavaScript

Funktionen von JavaScript

1. Dynamisch typisierte Sprache

2. Objektorientierte Unterstützung

3. Funktionen sind Objekte (Funktionen höherer Ordnung)

4. Unterstützung des asynchronen Betriebs

5. Umfangreiche plattformübergreifende Anwendungen

JavaScript-Boolescher Wert

Das Konzept der Bollinger-Werte

1. Direkte Zuordnung und Vergleich

2. Verwenden Sie (If/Else) in der bedingten Beurteilung

3. Logische Operatoren

4. Wahre und falsche Werte (implizite Konvertierung)

1. Falscher Wert (wird konvertiert infalseWert):

2. Wahrheitswert (wird umgerechnet intrueWert):

JavaScript-Array

Array-Erstellung und grundlegende Operationen

Verwenden Sie die Methode „slice()“.

So erhalten Sie zufällig 5 Elemente aus einem Array

Überprüfung der JavaScript-Array-Mitglieder

1. Die Verwendung umfasst die Methode

2. Verwenden Sie die indexOf-Methode

3. Verwenden Sie eine Methode, um mit komplexen Bedingungen umzugehen

4. Verwandte erweiterte Nutzung

5. Vorschläge zur Leistungsoptimierung

Neues Array zum JavaScript-Array hinzufügen

Verwenden Sie die Concat-Methode

Verwenden Sie den Spread-Operator

Verwendung der Push-Methode und des Spread-Operators

Rufen Sie den Namen der aktuell ausgeführten Funktion ab

Zweck

Funktionsschreiben

Anwendungsbeispiele

Ergebnisse ausgeben

Dinge zu beachten

Erweiterte Vorschläge

Binning- und Klassifizierungsmanagement von JavaScript-Funktionen

Zweck

Empfohlene Praktiken

1. Verwenden Sie ES6-Modul-Binning

2. Ähnliche Funktionen werden in dasselbe Modul eingeteilt

3. Wann ist es angebracht, Unterricht zu nutzen?

4. Passen Sie Tools und Frameworks an

Beispielhafte Strukturvorschläge

Variablen und Methodenverwendung von JavaScript-Klassenmitgliedern

Grundgrammatik

Beispiel

Verwendung

Mitgliedsvariablentyp

Private Variablen und Methoden (ES2022-Standard)

Vererbung und Überschreibung

Hinweise dazu

abschließend

1. Falscher Wert (wird konvertiert in`false`Wert):

2. Wahrheitswert (wird umgerechnet in`true`Wert):