website·Indexed 29 days ago
https://xiaomaohuifaguang.github.io/blog/A personal technical learning record focusing on backend development (Java, Spring Boot, microservices), DevOps (Docker, Kubernetes, Linux), and frontend technologies. Content includes guides on JDK 21 Docker images, nginx-rtmp-module for streaming, bpmn-js workflow integration, and Java logging framework comparisons.
nginx-rtmp-module is a third-party module for Nginx that provides support for real-time media streaming protocols, specifically RTMP, HLS, and HTTP-FLV.Kubernetes (K8s) uses several primary abstractions to manage containerized applications:
nginx-rtmp-module is a third-party module for Nginx that provides support for real-time media streaming protocols, specifically RTMP, HLS, and HTTP-FLV.node -v and npm -v. To avoid permission issues and organize global packages, create node_global and node_cache folders in your installation directory and configure npm to use them. Additionally, update your system environment variables to include the Node.js installation path and the global modules path.# Verify installation
node -v
npm -v
# Configure global and cache directories
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
# Environment Variables to add:
# NODE_PATH: D:\nodejs\node_modules
# PATH: D:\nodejs; D:\nodejs\node_global;onChange handler updates the state, and the value prop reflects that state.function LoginForm() {
const [formData, setFormData] = useState({ username: '', password: '' });
return (
<form onSubmit={(e) => { e.preventDefault(); console.log(formData); }}>
<input
value={formData.username}
onChange={e => setFormData(prev => ({ ...prev, username: e.target.value }))}
/>
<button type="submit">Login</button>
</form>
);
}elasticsearch-analysis-ik plugin to enable Chinese tokenization. The plugin version must match the Elasticsearch version (e.g., 8.7.0). The plugin must be placed in its own subdirectory within the plugins folder.# Download the plugin zip
wget https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v8.7.0/elasticsearch-analysis-ik-8.7.0.zip
# Copy to container
docker cp elasticsearch-analysis-ik-8.7.0.zip es8.7.0:/usr/share/elasticsearch/plugins
# Install inside container
docker exec -it es8.7.0 /bin/bash
cd /usr/share/elasticsearch/plugins
mkdir ik
mv elasticsearch-analysis-ik-8.7.0.zip ik/
cd ik
unzip elasticsearch-analysis-ik-8.7.0.zip
rm -rf elasticsearch-analysis-ik-8.7.0.zip
exit
# Restart to apply changes
docker restart es8.7.0createContext and useContext to avoid prop drilling.// Context API for cross-level communication
import { createContext, useContext, useState } from 'react';
const ThemeContext = createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
function ThemedButton() {
const { theme, toggleTheme } = useContext(ThemeContext);
return <button onClick={toggleTheme}>{theme}</button>;
}useState hook allows function components to maintain state. When updating state that is an object, you must spread the previous state to avoid overwriting other properties.import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(prev => prev - 1)}>-1</button>;
}
// Updating object state
function UserForm() {
const [user, setUser] = useState({ name: '', email: '' });
const updateField = (field, value) => {
setUser(prev => ({ ...prev, [field]: value }));
};
return <input value={user.name} onChange={e => updateField('name', e.target.value)} />;
}