Cara membina platform media sosial yang mudah menggunakan Node.js

Platform media sosial telah menjadi salah satu aplikasi yang paling popular dan popular pada era hari ini, dan Node.js ialah masa jalan JavaScript yang digunakan secara meluas dalam pembangunan web Ia sangat cekap dan boleh disesuaikan, menjadikan penggunaan Node .js telah menjadi pilihan yang baik untuk membina platform media sosial. Dalam artikel ini, kita akan belajar cara membina platform media sosial yang mudah menggunakan Node.js.

1. Pasang Node.js

Mula-mula, pastikan Node.js dipasang pada komputer anda. Anda boleh menyemak sama ada Node.js dipasang dengan arahan berikut:

node -v

Jika anda telah memasang Node.js, ia akan mengeluarkan nombor versi anda yang didayakan pada masa ini. Jika anda belum memasang Node.js, sila pasang versi terkini Node.js berdasarkan jenis komputer, sistem pengendalian dan persekitaran pengendalian anda.

2. Memulakan projek

Kami mula mencipta projek kami. Mula-mula, cipta direktori baharu pada komputer anda menggunakan arahan berikut:

mkdir social-media-app
cd social-media-app

Sekarang kita perlu memulakan projek Node.js kosong dalam folder. Jalankan arahan berikut:

npm init

Ini akan memandu anda melalui beberapa persediaan asas semasa membuat projek baharu. Ikut gesaan (npm init -y boleh dilakukan dengan cepat), dan dalam langkah terakhir pastikan nama fail "utama" adalah sama dengan fail kemasukan yang anda mahu gunakan dalam projek anda (biasanya dinamakan "app.js") .

{
  "name": "social-media-app",
  "version": "1.0.0",
  "description": "A simple social media app built with Node.js",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3. Pasang kebergantungan yang diperlukan

Seterusnya, kita perlu memasang beberapa kebergantungan yang diperlukan, termasuk:

• Express: Kami akan menggunakan rangka kerja ringan ini untuk mengendalikan penghalaan HTTP dan permintaan
• Semasa memproses POST InBody-parser: permintaan, kami perlu menghuraikan data dalam badan permintaan melalui middleware penghurai badan
• EJS: Kami akan menggunakan enjin templat ini untuk memaparkan halaman kami

Pasang kebergantungan ini melalui arahan berikut:

npm install express body-parser ejs --save

Pemasangan selesai Akhirnya, anda boleh melihat kebergantungan berikut muncul dalam fail package.json anda:

  "dependencies": {
    "body-parser": "^1.18.3",
    "ejs": "^2.6.1",
    "express": "^4.16.4"
  }

4. Buat fail kemasukan aplikasi

Kami telah memasang kebergantungan yang diperlukan, sekarang mari kami mencipta fail entri aplikasi "app .js". Pertama, import modul Express dan Body-parser:

const express = require('express');
const bodyParser = require('body-parser');

Seterusnya buat aplikasi Express:

const app = express();

Dayakan body-parser untuk menghuraikan data dalam badan permintaan. Kami memilih untuk menghuraikan data ke dalam JSON, jadi tambahkan baris berikut pada app.js:

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

Gunakan enjin templat EJS untuk memaparkan halaman. Dalam aplikasi ini, kami akan menggunakan EJS untuk memaparkan templat kami. Untuk mendayakannya, tambah baris berikut dalam fail app.js:

app.set('view engine', 'ejs');

Akhir sekali, mulakan aplikasi dalam fail app.js:

app.listen(3000, () => console.log('Server running on port 3000!'))

Dengan aplikasi mudah ini kami boleh memastikan semuanya disediakan dengan betul dan kini kami boleh Jalankan atur cara dengan menaip arahan berikut dalam terminal:

node app.js

Buka http://localhost:3000 dalam penyemak imbas anda dan anda akan melihat mesej "Cannot GET".

5. Menambah Laluan dan Pengawal

Sekarang mari kita mula menambah laluan dan pengawal yang sepadan pada aplikasi kami. Kami akan membuat dua halaman:

• Laman Utama (menunjukkan semua mesej)
• Halaman pos (menyiarkan mesej baharu)

(1) Laluan dan Pengawal Laman Utama

Untuk mengendalikan permintaan halaman utama, kami perlu membuat laluan untuk / laluan . Kami juga memerlukan pengawal untuk mendapatkan semua mesej dan menghantarnya ke paparan.

Mula-mula, buat folder dan namakan fail "pengawal" dan buat fail bernama "home.js" di dalamnya. Berikut ialah pengawal kami:

// controllers/home.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getHomePage = (req, res) => {
  res.render('pages/home', { messages });
};

Pengawal ini hanya menghantar tatasusunan dua mesej ke templat home.ejs dan memaparkannya.

Kini, kita perlu mencipta laluan dalam fail app.js untuk mengendalikan laluan /:

const homeController = require('./controllers/home');

app.get('/', homeController.getHomePage);

Laluan akan mencipta laluan untuk permintaan "GET", menunjuk ke fungsi getHomePage yang kami takrifkan dalam pengawal/rumah fail .js.

(2) Terbitkan laluan halaman dan pengawal

Seterusnya, kami akan mencipta fail untuk laluan penerbitan dan pengawal yang sepadan. Dalam folder "Controllers", buat fail yang dipanggil "publish.js" dengan kandungan berikut:

// controllers/publish.js

let messages = [
  { id: 1, title: 'First Message', body: 'This is the first message' },
  { id: 2, title: 'Second Message', body: 'This is the second message' }
];

exports.getPublishPage = (req, res) => {
  res.render('pages/publish');
};

exports.publishMessage = (req, res) => {
  const { title, body } = req.body;
  const id = messages.length + 1;
  messages.push({ id, title, body });

  res.redirect('/');
};

Pengawal ini mentakrifkan dua gelagat:

• getPublishPage: Fungsi ini akan menjadikan halaman yang mengandungi tajuk dan badan Satu borang yang membenarkan pengguna untuk menghantar mesej baharu.
• publishMessage: Fungsi ini akan menerima data yang diserahkan oleh pengguna dan menambah mesej baharu pada tatasusunan "mesej", kemudian ubah hala semula ke halaman utama.

Mari buat laluan ini dalam fail app.js:

const publishController = require('./controllers/publish');

app.get('/publish', publishController.getPublishPage);

app.post('/publish', publishController.publishMessage);

Ini akan mencipta dua laluan untuk laluan /publish: laluan permintaan GET untuk memberikan borang dan laluan permintaan POST untuk menyerahkan data.

6. Buat pandangan

Kami telah mencipta dua laluan dan pengawal yang sepadan, kini kami perlu mencipta pandangan yang sepadan dalam paparan.

Kita perlu mencipta dua folder: folder yang dipanggil "reka letak" dan folder yang dipanggil "halaman".

Buat fail yang dipanggil "main.ejs" dalam folder "reka letak" yang mengandungi elemen biasa untuk semua halaman tapak web, seperti pengepala, skrip halaman dan helaian gaya. Berikut ialah kandungan fail ini:

<!-- layouts/main.ejs -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Social Media App</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <header>
    <h1 id="Social-Media-App">Social Media App</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/publish">Publish</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <%- body %>
  </main>

  <footer>
    &copy; 2020 Social Media App
  </footer>
</body>
</html>

在“pages”文件夹中，创建两个名为“home.ejs”和“publish.ejs”的文件。

以下是“home.ejs”文件的内容：

<!-- views/pages/home.ejs -->

<h2 id="Messages">Messages</h2>

<ul>
  <% messages.forEach(message => { %>
    <li><%= message.title %>: <%= message.body %></li>
  <% }) %>
</ul>

这呈现了一个包含所有消息的列表。

以下是“publish.ejs”文件的内容：

<!-- views/pages/publish.ejs -->

<h2 id="Publish-Message">Publish Message</h2>

<form method="POST" action="/publish">
  <label for="title">Title:</label>
  <input type="text" name="title" id="title"><br>

  <label for="body">Body:</label>
  <textarea name="body" id="body"></textarea><br>

  <button type="submit">Publish</button>
</form>

这个文件包含一个表单，用户可以在其中输入新消息的标题和正文。

现在，该应用程序已准备就绪，可以运行。在终端中运行以下命令：

node app.js

在浏览器中输入http://localhost:3000，您应该会看到一个包含所有消息的列表，并能够通过单击链接到发布页面。

7. 完成

如果您想了解更多关于如何使用Node.js开发Web应用程序或其他Node.js开发内容，请用以上代码示例作为参考，并根据您自己的需求和想法进行更改。现在，您已经拥有了一个基于Node.js的简单社交媒体平台，您可以使用类似的技术来扩展功能，构建更大、更复杂的社交媒体平台。

Atas ialah kandungan terperinci Cara membina platform media sosial yang mudah menggunakan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!