Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan imej latar belakang dalam nodejs
Bagaimana untuk menetapkan imej latar belakang dalam nodejs
- WBOYasal
- 2023-05-23 21:47:36715semak imbas
Node.js ialah persekitaran masa jalan JavaScript sebelah pelayan yang popular yang sering digunakan untuk menulis aplikasi web yang cekap. Walaupun Node.js digunakan terutamanya untuk pembangunan bahagian belakang, ia juga boleh mengendalikan tugas tertentu dalam pembangunan bahagian hadapan, seperti menambahkan imej latar belakang pada elemen DOM.
Dalam artikel ini, kami akan membincangkan cara menetapkan imej latar belakang menggunakan Node.js dan menyediakan beberapa kod sampel untuk membantu anda memulakannya.
Pertama, anda perlu memasang Node.js. Anda boleh memuat turun dan memasang versi terkini dari tapak web rasmi Node.js.
Setelah anda memasang Node.js, cipta folder baharu dan buka tetingkap terminal dalam folder ini.
Dalam tetingkap terminal ini, masukkan arahan berikut untuk memulakan projek npm baharu:
npm init
Arahan ini akan meminta anda untuk mendapatkan beberapa maklumat projek, seperti nama projek, nombor versi dan penerangan . Anda boleh mengisi maklumat mengikut arahan.
Selepas melengkapkan langkah ini, anda perlu memasang Express.js. Express.js ialah rangka kerja pembangunan web Node.js yang memudahkan pembuatan aplikasi web.
Dalam terminal anda, jalankan arahan berikut untuk memasang Express.js:
npm install express
Seterusnya, buat fail JavaScript baharu dan namakannya app.js. Fail ini akan menjadi tempat anda menulis kod untuk menetapkan imej latar belakang.
Dalam fail app.js, kami akan menggunakan kod berikut untuk menetapkan imej latar belakang halaman:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static('public'));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(3000, function () {
console.log('App listening on port 3000!');
});Dalam kod ini, kami telah mencipta aplikasi web menggunakan Express.js dan Tetapkan folder awam sebagai folder statik, yang mengandungi imej latar belakang kami.
Kami juga menyediakan laluan supaya apabila pengguna mengakses direktori akar, fail HTML akan dihantar kepada klien. Fail HTML ini akan kami buat dalam langkah seterusnya. Dalam fail HTML ini, kami akan menetapkan imej latar belakang dalam teg 6c04bd5ca3fcae76e30b72ad730ca86d
Seterusnya, kita perlu mencipta fail HTML yang dipanggil index.html. Dalam fail ini kami akan menetapkan imej latar belakang. Berikut ialah kod untuk contoh mudah:
<!DOCTYPE html>
<html>
<head>
<title>使用Node.js设置背景图片</title>
<style>
body {
background-image: url("/background.jpg");
background-size: cover;
}
</style>
</head>
<body>
<h1>使用Node.js设置背景图片</h1>
</body>
</html>Dalam kod ini, kami menetapkan imej latar belakang kepada background.jpg (dalam folder awam). Kami juga menambah beberapa gaya untuk melaraskan saiz imej latar belakang dan tajuk halaman.
Sekarang kami telah menyelesaikan semua langkah yang diperlukan, anda boleh cuba membuka localhost:3000 dalam penyemak imbas untuk melihat imej latar belakang yang anda tetapkan.
Ringkasan
Dalam artikel ini, kami mempelajari cara menetapkan imej latar belakang menggunakan Node.js. Menggunakan rangka kerja Express.js, kami mencipta aplikasi web dan menetapkan folder awam sebagai folder statik, yang mengandungi imej latar belakang kami. Kemudian, kami menggunakan HTML dan CSS untuk menetapkan imej latar belakang.
Walaupun ini hanyalah contoh mudah, ia boleh membantu anda mula menyediakan imej latar belakang dalam Node.js dan mengembangkan lagi kemahiran pembangunan web anda.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan imej latar belakang dalam nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!