首頁 > web前端 > js教程 > 主體

Express 初學者:立即建立您的第一個 Web 應用程式

DDD
發布: 2024-09-21 20:30:03
原創
350 人瀏覽過

Express for Beginners: Create Your First Web App Today

建立 Express 應用程式涉及多個步驟。 Express 是一個最小且靈活的 Node.js Web 應用程式框架,為 Web 和行動應用程式提供了一組強大的功能。以下是建立基本 Express 應用程式的逐步指南:

第 1 步:設定您的環境

  1. 安裝 Node.js 和 npm:如果尚未安裝,請從 nodejs.org 下載並安裝 Node.js。 npm(節點套件管理器)與 Node.js 捆綁在一起。
  2. 建立專案目錄:

    mkdir my-express-app
    cd my-express-app
    
    
    登入後複製
  3. 初始化一個新的 Node.js 專案:

    npm init -y
    
    
    登入後複製

    這將建立一個具有預設設定的 package.json 檔案。

第 2 步:安裝 Express

使用 npm 安裝 Express:

npm install express

登入後複製

第 3 步:建立基本伺服器

  1. 建立入口檔案:建立一個名為app.js(或index.js)的檔案。
  2. 設定基本伺服器:

    const express = require('express');
    const app = express();
    const port = 3000;
    
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    登入後複製

第 4 步:運行伺服器

使用 Node.js 運行 Express 應用程式:

node app.js

登入後複製

開啟瀏覽器並導航至http://localhost:3000。您應該會看到“Hello World!”顯示。

第 5 步:新增更多路由和中間件(可選)

您可以為 Express 應用程式新增更多路由和中介軟體。例如:

  1. 新增路線:

    app.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    
    登入後複製
  2. 使用中間件:

    const bodyParser = require('body-parser');
    
    app.use(bodyParser.json());
    
    app.post('/data', (req, res) => {
      const data = req.body;
      res.send(`Received data: ${JSON.stringify(data)}`);
    });
    
    
    登入後複製

第 6 步:組織您的程式碼(可選)

對於較大的應用程序,將程式碼組織到單獨的模組中是一個很好的做法。

  1. 建立路由目錄:

    mkdir routes
    
    
    登入後複製
  2. 建立路線檔案:在routes目錄中建立一個名為index.js的檔案。

    const express = require('express');
    const router = express.Router();
    
    router.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    router.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    module.exports = router;
    
    
    登入後複製
  3. 更新 app.js 以使用路由檔案:

    const express = require('express');
    const app = express();
    const port = 3000;
    const indexRouter = require('./routes/index');
    
    app.use('/', indexRouter);
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    登入後複製

第 7 步:使用環境變數(可選)

對於配置設置,請使用環境變數。

  1. 安裝 dotenv 軟體包:

    npm install dotenv
    
    
    登入後複製
  2. 建立 .env 檔案:

    PORT=3000
    
    
    登入後複製
  3. 更新 app.js 以使用 dotenv:

    require('dotenv').config();
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 3000;
    const indexRouter = require('./routes/index');
    
    app.use('/', indexRouter);
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    登入後複製

就是這樣!您已經建立了一個基本的 Express 應用程式。您可以根據需要添加更多路由、中間件和其他功能來進一步擴展此功能。

以上是Express 初學者:立即建立您的第一個 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!