FastAPI + Frontend Interaction: Practical JavaScript Call to FastAPI API
This article introduces the interaction methods between a FastAPI backend and frontend JavaScript. The core principle is that the frontend calls the backend API through HTTP requests, and the backend returns JSON data after processing, which the frontend then renders and displays. Prerequisites: The backend needs to install FastAPI and uvicorn, while the frontend only requires HTML + JS. The backend writes main.py to implement three interfaces: GET (/api/hello) returns a message, GET (/api/items/{item_id}) with parameters returns product information, and POST (/api/submit) receives data and provides feedback. CORSMiddleware is configured to handle cross-origin issues (allowing all origins during development and specifying domains in production). On the frontend, the fetch API is used to call the interfaces. Three buttons respectively trigger the requests, parse the JSON, and display the results. During runtime, start the backend service and open the frontend page to test. Key knowledge points include cross-origin configuration, HTTP methods (GET/POST), JSON data exchange, and error handling. For advanced exploration, one can look into Axios, frontend frameworks, and data validation.
Read MoreFrontend Developers Learning Node.js: The Mindset Shift from Browser to Server
This article introduces the necessity and core points for front-end developers to learn Node.js. Based on Google Chrome's V8 engine, Node.js enables JavaScript to run on the server-side, overcoming the limitations of front-end developers in building back-end services and enabling full-stack development. Its core features include "non-blocking I/O" (handling concurrent requests through the event loop), "full-access" environment (capable of operating on files and ports), and the "CommonJS module system". For front-end developers transitioning to back-end roles, mindset shifts are required: changing from the sandboxed (API-limited) runtime environment to a full-access environment; transforming asynchronous programming from an auxiliary task (e.g., setTimeout) to a core design principle (to avoid server blocking); and adjusting from ES Modules to CommonJS (require/module.exports) for module systems. The learning path includes: mastering foundational modules (fs, http), understanding asynchronous programming (callbacks/Promise/async), developing APIs with frameworks like Express, and exploring the underlying principles of tools such as Webpack and Babel. In summary, Node.js empowers front-end developers to build full-stack capabilities without switching programming languages, enabling them to understand server-side logic and expand career horizons. It is a key tool for bridging the gap between front-end and back-end development.
Read MoreWriting Your First Web Server with Node.js: A Quick Start with the Express Framework
This article introduces the method of building a web server using Node.js and Express. Based on the V8 engine, Node.js enables JavaScript to run on the server side, while Express, as a popular framework, simplifies complex tasks such as routing and request handling. For environment preparation, first install Node.js (including npm), and verify it using `node -v` and `npm -v`. Next, create a project folder, initialize it with `npm init -y`, and install the framework with `npm install express`. The core step is writing `server.js`: import Express, create an instance, define a port (e.g., 3000), use `app.get('/')` to define a GET request for the root path and return text, then start the server with `app.listen`. Access `http://localhost:3000` to test it. Extended features include adding more routes (e.g., `/about`), dynamic path parameters, returning JSON (`res.json()`), and hosting static files (`express.static`). The key steps are summarized as: installing tools, creating a project, writing routes, and starting the test, laying the foundation for subsequent learning of middleware, dynamic routing, etc.
Read MoreNode.js npm Tools: A Comprehensive Guide from Installation to Package Management
This article introduces the core knowledge of Node.js and npm. Node.js is a JavaScript runtime environment based on Chrome's V8 engine, and npm is its default package management tool for downloading, installing, and managing third-party code packages. **Installation**: Node.js can be installed on Windows, Mac, and Linux systems via the official website or package managers (npm is installed alongside Node.js). After installation, verify with `node -v` and `npm -v`. **Core npm Functions**: - Initialize a project with `npm init` to generate `package.json` (project configuration file). - Install dependencies: local (default, project-only) or global (`-g`, system-wide); categorized as production (`--save`) or development (`--save-dev`) dependencies. - Manage dependencies: view, update, uninstall (`npm uninstall`), etc. **Common Commands**: `npm install` (Install), `npm list` (View), `npm update` (Update), etc. For slow domestic access, accelerate with Taobao mirror (`npm config set registry`) or cnpm. **Notes**: Avoid committing `node_modules` to Git, use version numbers (`^` or `~`) reasonably, and prioritize local dependency installation. npm is a core tool for Node.js development; mastering its usage enhances efficiency.
Read More