Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > pemasangan ejs ekspres nodejs

pemasangan ejs ekspres nodejs

WBOY
Lepaskan: 2023-05-11 18:35:07
asal
742 orang telah melayarinya

Node.js ialah persekitaran masa jalan JavaScript yang popular yang membolehkan pembangun membangunkan aplikasi belakang berprestasi tinggi menggunakan bahasa JavaScript. Node.js disertakan dengan Express.js, rangka kerja aplikasi web yang ringkas dan fleksibel, dan juga menyediakan enjin templat yang berkuasa EJS, yang boleh membantu pembangun mencipta aplikasi web yang cantik dan mudah diselenggara.

Dalam artikel ini, kami akan membincangkan cara memasang Node.js, Express.js dan EJS serta mempelajari cara menggunakannya bersama-sama untuk mencipta aplikasi web mudah.

Pasang Node.js

Sebelum anda bermula, sila pastikan komputer anda memasang persekitaran masa jalan Node.js. Jika anda belum memasangnya lagi, sila ikuti langkah di bawah untuk memasangnya:

  1. Buka [tapak web rasmi Node.js](https://nodejs.org/), klik "Muat turun " dan pilih operasi yang sesuai dengan versi Sistem anda untuk dimuat turun.
  2. Selepas muat turun selesai, klik dua kali pakej pemasangan untuk memasang. Hanya ikuti langkah wizard pemasangan.
  3. Selepas pemasangan selesai, buka terminal (atau tetingkap baris arahan) dan masukkan arahan berikut untuk menyemak sama ada Node.js dipasang dengan betul:

    node -v
    Salin selepas log masuk

    Jika Node.js dipasang dengan jayanya, ia akan dipaparkan Paparkan maklumat versi Node.js.

Pasang Express.js

Selepas memasang Node.js, anda boleh menggunakan arahan npm (pengurus pakej yang disertakan dengan Node.js) untuk memasang Express.js . Sila ikuti langkah di bawah untuk memasang:

  1. Buka terminal (atau tetingkap baris arahan) dan masukkan arahan berikut:

    npm init
    Salin selepas log masuk

    Arahan ini akan membimbing anda untuk mencipta projek Node .js baharu. Ikuti arahan langkah demi langkah untuk masuk.

  2. Selepas permulaan selesai, masukkan arahan berikut untuk memasang Express.js:

    npm install express --save
    Salin selepas log masuk

    Arahan ini akan memasang versi terkini Express.js daripada repositori npm dan akan Menambahkannya sebagai pergantungan kepada projek anda.

  3. Selepas pemasangan berjaya, buat fail baharu bernama app.js dalam direktori akar projek. Ini adalah pintu masuk utama ke aplikasi Express.js anda.
  4. Dalam fail app.js, masukkan kod berikut untuk mencipta aplikasi Express.js yang mudah:

    const express = require('express');
    const app = express();
    
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    app.listen(3000, () => {
      console.log('Server listening on port 3000!');
    });
    Salin selepas log masuk

    Aplikasi ini akan membalas semua permintaan daripada pelayar klien permintaan HTTP GET dan mengembalikan rentetan yang mengandungi "Hello World!"

  5. Selepas menyimpan fail app.js, tukar ke terminal (atau tetingkap baris arahan), tukar direktori kerja ke direktori di mana fail app.js terletak, dan jalankan arahan berikut:

    node app.js
    Salin selepas log masuk
    Salin selepas log masuk

    Jika semuanya berjalan lancar, anda akan melihat mesej "Server listening on port 3000 output from the terminal. Ini menunjukkan bahawa aplikasi Express.js anda sedang berjalan dan boleh diakses dengan melawati http://localhost:3000/.

Pasang EJS

EJS ialah enjin templat yang ringkas dan mudah digunakan yang membantu anda membuat halaman web dengan kandungan dinamik dalam aplikasi Express.js. Sila ikuti langkah di bawah untuk memasang:

  1. Buka terminal (atau tetingkap baris arahan) dan masukkan arahan berikut:

    npm install ejs --save
    Salin selepas log masuk

    Arahan ini akan memasang versi terkini daripada repositori npm EJS dan tambahkannya sebagai pergantungan kepada projek anda.

  2. Dalam direktori akar aplikasi anda, buat folder baharu bernama views. Di sinilah aplikasi Express.js anda akan menyimpan fail templat EJSnya.
  3. Dalam folder views, buat fail baharu bernama index.ejs. Ini akan menjadi fail templat utama untuk halaman web anda.
  4. Dalam fail index.ejs, masukkan kod berikut untuk mencipta halaman web ringkas:

    <!DOCTYPE html>
    <html>
    <head>
      <title>EJS Example</title>
    </head>
    <body>
      <h1>Welcome to the EJS Example!</h1>
      <p>The current date and time is <%= new Date().toString() %>.</p>
    </body>
    </html>
    Salin selepas log masuk

    Templat ini akan memaparkan tajuk, "Selamat Datang ke Contoh EJS!", dan perenggan yang mengandungi tarikh dan masa semasa.

  5. Kembali ke dalam fail app.js, tambah kod berikut dalam pengepala untuk memberitahu aplikasi Express.js tempat untuk mencari fail templat EJS:

    app.set('views', './views');
    app.set('view engine', 'ejs');
    Salin selepas log masuk
  6. Dalam fail app.js, gantikan kaedah app.get dengan kod berikut:

    app.get('/', (req, res) => {
      res.render('index');
    });
    Salin selepas log masuk

    Kaedah ini akan memaparkan fail views/index.ejs melalui enjin templat EJS dan menghantarnya semula ke pelayar klien.

  7. Selepas menyimpan fail app.js dan index.ejs, tukar ke terminal (atau tetingkap baris arahan), tukar direktori kerja ke direktori di mana fail app.js terletak , dan jalankan arahan berikut :

    node app.js
    Salin selepas log masuk
    Salin selepas log masuk

    Jika semuanya berjalan lancar, anda akan melihat mesej "Server listening on port 3000 output from the terminal. Ini menunjukkan bahawa aplikasi Express.js anda sedang berjalan dan boleh diakses dengan melawati http://localhost:3000/.

    Klik pautan dan anda akan melihat halaman web dengan tarikh dan masa semasa.

Kesimpulan

Dalam artikel ini, kami mempelajari cara memasang Node.js, Express.js dan EJS serta mencipta aplikasi web yang ringkas. Dalam artikel seterusnya, kami akan menyelami cara menggunakan Express.js dan EJS untuk mencipta aplikasi web yang lebih kompleks dan berkuasa.

Atas ialah kandungan terperinci pemasangan ejs ekspres nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan