23 KiB

Raw Permalink Blame History

ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 1: HTML ਟੈਂਪਲੇਟ ਅਤੇ ਵੈੱਬ ਐਪ ਵਿੱਚ ਰੂਟਸ

ਪੂਰਵ-ਵਿਆਖਿਆ ਪ੍ਰਸ਼ਨਾਵਲੀ

ਪਰਿਚਯ

ਜਦੋਂ ਤੋਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਆਇਆ ਹੈ, ਵੈੱਬਸਾਈਟਾਂ ਪਹਿਲਾਂ ਨਾਲੋਂ ਜ਼ਿਆਦਾ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਜਟਿਲ ਹੋ ਗਈਆਂ ਹਨ। ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਹੁਣ ਆਮ ਤੌਰ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਗਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜੋ ਸਿੱਧੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਦੀਆਂ ਹਨ, ਜਿਸਨੂੰ ਅਸੀਂ ਵੈੱਬ ਐਪ ਕਹਿੰਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਵੈੱਬ ਐਪਸ ਬਹੁਤ ਹੀ ਇੰਟਰਐਕਟਿਵ ਹੁੰਦੀਆਂ ਹਨ, ਉਪਭੋਗਤਾ ਹਰ ਵਾਰ ਪੂਰੇ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕਰਨ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ। ਇਸ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ DOM ਦੀ ਵਰਤੋਂ ਕਰਕੇ HTML ਨੂੰ ਸਿੱਧੇ ਅਪਡੇਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਜੋ ਇੱਕ ਚੁਸਤ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾ ਸਕੇ।

ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਬੈਂਕ ਵੈੱਬ ਐਪ ਬਣਾਉਣ ਲਈ ਨੀਵਾਂ ਰੱਖਣ ਜਾ ਰਹੇ ਹਾਂ, HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣ ਲਈ ਜੋ ਪੂਰੇ HTML ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਦਿਖਾਈ ਅਤੇ ਅਪਡੇਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।

ਪੂਰਵ ਸ਼ਰਤ

ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਵਿੱਚ ਬਣਾਈ ਜਾਣ ਵਾਲੀ ਵੈੱਬ ਐਪ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਇੱਕ ਸਥਾਨਕ ਵੈੱਬ ਸਰਵਰ ਦੀ ਲੋੜ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਨਹੀਂ ਹੈ, ਤਾਂ ਤੁਸੀਂ Node.js ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਤੋਂ npx lite-server ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਇੱਕ ਸਥਾਨਕ ਵੈੱਬ ਸਰਵਰ ਬਣਾਏਗਾ ਅਤੇ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੇਗਾ।

ਤਿਆਰੀ

ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ bank ਨਾਮਕ ਇੱਕ ਫੋਲਡਰ ਬਣਾਓ ਜਿਸ ਵਿੱਚ index.html ਨਾਮਕ ਇੱਕ ਫਾਈਲ ਹੋਵੇ। ਅਸੀਂ ਇਸ HTML ਬੋਇਲਰਪਲੇਟ ਤੋਂ ਸ਼ੁਰੂ ਕਰਾਂਗੇ:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>

HTML ਟੈਂਪਲੇਟ

ਜੇ ਤੁਸੀਂ ਵੈੱਬ ਪੇਜ ਲਈ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਹੱਲ ਇਹ ਹੋਵੇਗਾ ਕਿ ਤੁਸੀਂ ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਇੱਕ HTML ਫਾਈਲ ਬਣਾਓ ਜੋ ਤੁਸੀਂ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਹਾਲਾਂਕਿ, ਇਸ ਹੱਲ ਨਾਲ ਕੁਝ ਅਸੁਵਿਧਾਵਾਂ ਆਉਂਦੀਆਂ ਹਨ:

ਸਕ੍ਰੀਨ ਸਵਿੱਚ ਕਰਨ ਸਮੇਂ ਤੁਹਾਨੂੰ ਪੂਰੇ HTML ਨੂੰ ਰੀਲੋਡ ਕਰਨਾ ਪਵੇਗਾ, ਜੋ ਹੌਲੀ ਹੋ ਸਕਦਾ ਹੈ।
ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਦੇ ਵਿਚਕਾਰ ਡਾਟਾ ਸਾਂਝਾ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੈ।

ਇੱਕ ਹੋਰ ਪਹੁੰਚ ਇਹ ਹੈ ਕਿ ਸਿਰਫ ਇੱਕ HTML ਫਾਈਲ ਹੋਵੇ, ਅਤੇ <template> ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ HTML ਟੈਂਪਲੇਟ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਜਾਣ। ਇੱਕ ਟੈਂਪਲੇਟ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ HTML ਬਲਾਕ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਦਿਖਾਇਆ ਨਹੀਂ ਜਾਂਦਾ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰਨਟਾਈਮ 'ਤੇ ਇਸਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਕੰਮ

ਅਸੀਂ ਦੋ ਸਕ੍ਰੀਨਾਂ ਵਾਲੀ ਬੈਂਕ ਐਪ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ: ਲੌਗਇਨ ਪੇਜ ਅਤੇ ਡੈਸ਼ਬੋਰਡ। ਪਹਿਲਾਂ, ਆਓ HTML ਬਾਡੀ ਵਿੱਚ ਇੱਕ ਪਲੇਸਹੋਲਡਰ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰੀਏ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀ ਐਪ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਲਈ ਕਰਾਂਗੇ:

<div id="app">Loading...</div>

ਅਸੀਂ ਇਸਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਬਾਅਦ ਵਿੱਚ ਲੱਭਣ ਲਈ ਆਸਾਨ ਬਣਾਉਣ ਲਈ ਇੱਕ id ਦੇ ਰਹੇ ਹਾਂ।

ਸੁਝਾਅ: ਕਿਉਂਕਿ ਇਸ ਐਲੀਮੈਂਟ ਦੀ ਸਮਗਰੀ ਬਦਲੀ ਜਾਵੇਗੀ, ਅਸੀਂ ਇਸ ਵਿੱਚ ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਜਾਂ ਸੂਚਕ ਰੱਖ ਸਕਦੇ ਹਾਂ ਜੋ ਐਪ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।

ਅਗਲੇ, ਆਓ ਲੌਗਇਨ ਪੇਜ ਲਈ HTML ਟੈਂਪਲੇਟ ਨੂੰ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੀਏ। ਇਸ ਵਿੱਚ ਅਸੀਂ ਫਿਲਹਾਲ ਸਿਰਫ ਇੱਕ ਟਾਈਟਲ ਅਤੇ ਇੱਕ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਹੋਵੇਗਾ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਨੈਵੀਗੇਸ਼ਨ ਕਰਨ ਲਈ ਕਰਾਂਗੇ।

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

ਫਿਰ ਅਸੀਂ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਲਈ ਇੱਕ ਹੋਰ HTML ਟੈਂਪਲੇਟ ਸ਼ਾਮਲ ਕਰਾਂਗੇ। ਇਸ ਪੇਜ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸੈਕਸ਼ਨ ਹੋਣਗੇ:

ਇੱਕ ਹੈਡਰ ਜਿਸ ਵਿੱਚ ਟਾਈਟਲ ਅਤੇ ਲੌਗਆਉਟ ਲਿੰਕ ਹੋਵੇਗਾ
ਬੈਂਕ ਖਾਤੇ ਦੀ ਮੌਜੂਦਾ ਬੈਲੈਂਸ
ਲੈਣ-ਦੇਣ ਦੀ ਇੱਕ ਸੂਚੀ, ਜੋ ਇੱਕ ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਈ ਜਾਵੇਗੀ

<template id="dashboard">
  <header>
    <h1>Bank App</h1>
    <a href="/login">Logout</a>
  </header>
  <section>
    Balance: 100$
  </section>
  <section>
    <h2>Transactions</h2>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Object</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</template>

ਸੁਝਾਅ: ਜਦੋਂ HTML ਟੈਂਪਲੇਟ ਬਣਾਉਂਦੇ ਹੋ, ਜੇ ਤੁਸੀਂ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇਹ ਕਿਵੇਂ ਲੱਗੇਗਾ, ਤਾਂ ਤੁਸੀਂ <template> ਅਤੇ </template> ਲਾਈਨਾਂ ਨੂੰ  ਨਾਲ ਘੇਰ ਕੇ ਕਮੈਂਟ ਕਰ ਸਕਦੇ ਹੋ।

✅ ਤੁਹਾਨੂੰ ਕੀ ਲੱਗਦਾ ਹੈ ਕਿ ਅਸੀਂ ਟੈਂਪਲੇਟਸ 'ਤੇ id ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਿਉਂ ਕਰਦੇ ਹਾਂ? ਕੀ ਅਸੀਂ ਕੁਝ ਹੋਰ ਵਰਤ ਸਕਦੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਕਲਾਸ?

ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਟੈਂਪਲੇਟ ਦਿਖਾਉਣਾ

ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ HTML ਫਾਈਲ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਅਜ਼ਮਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ Loading... ਦਿਖਾਉਣ 'ਤੇ ਅਟਕ ਜਾਂਦੀ ਹੈ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਸਾਨੂੰ HTML ਟੈਂਪਲੇਟਸ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਅਤੇ ਦਿਖਾਉਣ ਲਈ ਕੁਝ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।

ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਲਈ ਆਮ ਤੌਰ 'ਤੇ 3 ਕਦਮ ਕੀਤੇ ਜਾਂਦੇ ਹਨ:

DOM ਵਿੱਚ ਟੈਂਪਲੇਟ ਐਲੀਮੈਂਟ ਨੂੰ ਲੱਭੋ, ਉਦਾਹਰਣ ਲਈ document.getElementById ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
ਟੈਂਪਲੇਟ ਐਲੀਮੈਂਟ ਨੂੰ ਕਲੋਨ ਕਰੋ, cloneNode ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
ਇਸਨੂੰ ਇੱਕ ਦਿੱਖ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਹੇਠਾਂ DOM ਵਿੱਚ ਜੋੜੋ, ਉਦਾਹਰਣ ਲਈ appendChild ਦੀ ਵਰਤੋਂ ਕਰਕੇ।

✅ ਸਾਨੂੰ DOM ਵਿੱਚ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਟੈਂਪਲੇਟ ਨੂੰ ਕਲੋਨ ਕਰਨ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ? ਤੁਹਾਨੂੰ ਕੀ ਲੱਗਦਾ ਹੈ ਕਿ ਜੇ ਅਸੀਂ ਇਹ ਕਦਮ ਛੱਡ ਦਿੰਦੇ ਤਾਂ ਕੀ ਹੁੰਦਾ?

ਕੰਮ

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ app.js ਨਾਮਕ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਉਸ ਫਾਈਲ ਨੂੰ ਆਪਣੇ HTML ਦੇ <head> ਸੈਕਸ਼ਨ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰੋ:

<script src="app.js" defer></script>

ਹੁਣ app.js ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ updateRoute ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ:

function updateRoute(templateId) {
  const template = document.getElementById(templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

ਇੱਥੇ ਅਸੀਂ ਉਪਰੋਕਤ 3 ਕਦਮਾਂ ਨੂੰ ਹੀ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ templateId ਦੇ id ਵਾਲੇ ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਇਸਦੀ ਕਲੋਨ ਕੀਤੀ ਸਮਗਰੀ ਨੂੰ ਆਪਣੀ ਐਪ ਪਲੇਸਹੋਲਡਰ ਵਿੱਚ ਰੱਖਦੇ ਹਾਂ। ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ cloneNode(true) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਟੈਂਪਲੇਟ ਦੇ ਪੂਰੇ ਸਬਟ੍ਰੀ ਨੂੰ ਕਾਪੀ ਕੀਤਾ ਜਾ ਸਕੇ।

ਹੁਣ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਇੱਕ ਟੈਂਪਲੇਟ ਨਾਲ ਕਾਲ ਕਰੋ ਅਤੇ ਨਤੀਜੇ ਨੂੰ ਦੇਖੋ।

updateRoute('login');

✅ ਇਸ ਕੋਡ app.innerHTML = ''; ਦਾ ਉਦੇਸ਼ ਕੀ ਹੈ? ਇਸ ਦੇ ਬਿਨਾਂ ਕੀ ਹੁੰਦਾ?

ਰੂਟਸ ਬਣਾਉਣਾ

ਜਦੋਂ ਵੈੱਬ ਐਪ ਦੀ ਗੱਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਅਸੀਂ URLs ਨੂੰ ਵਿਸ਼ੇਸ਼ ਸਕ੍ਰੀਨਾਂ ਨਾਲ ਮੈਪ ਕਰਨ ਦੇ ਇਰਾਦੇ ਨੂੰ Routing ਕਹਿੰਦੇ ਹਾਂ ਜੋ ਦਿਖਾਈ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਕਈ HTML ਫਾਈਲਾਂ ਵਾਲੀ ਵੈੱਬਸਾਈਟ 'ਤੇ, ਇਹ ਆਪਣੇ ਆਪ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਫਾਈਲ ਪਾਥ URL 'ਤੇ ਦਰਸਾਏ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਣ ਲਈ, ਜੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ ਇਹ ਫਾਈਲਾਂ ਹਨ:

mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html

ਜੇ ਤੁਸੀਂ mywebsite ਨੂੰ ਰੂਟ ਵਜੋਂ ਵਰਤ ਕੇ ਇੱਕ ਵੈੱਬ ਸਰਵਰ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ URL ਮੈਪਿੰਗ ਇਹ ਹੋਵੇਗੀ:

https://site.com            --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/     --> mywebsite/admin/index.html

ਹਾਲਾਂਕਿ, ਸਾਡੀ ਵੈੱਬ ਐਪ ਲਈ ਅਸੀਂ ਇੱਕ HTML ਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਸਾਰੀਆਂ ਸਕ੍ਰੀਨ ਸ਼ਾਮਲ ਹਨ, ਇਸ ਲਈ ਇਹ ਡਿਫਾਲਟ ਵਿਹਾਰ ਸਾਡੀ ਮਦਦ ਨਹੀਂ ਕਰੇਗਾ। ਸਾਨੂੰ ਇਸ ਮੈਪ ਨੂੰ ਹੱਥੋਂ ਬਣਾਉਣਾ ਪਵੇਗਾ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ।

ਕੰਮ

ਅਸੀਂ ਇੱਕ ਸਧਾਰਨ ਓਬਜੈਕਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ map ਨੂੰ URL ਪਾਥ ਅਤੇ ਆਪਣੇ ਟੈਂਪਲੇਟਸ ਦੇ ਵਿਚਕਾਰ ਲਾਗੂ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ। ਇਸ ਓਬਜੈਕਟ ਨੂੰ ਆਪਣੇ app.js ਫਾਈਲ ਦੇ ਸਿਖਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ।

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

ਹੁਣ ਆਓ updateRoute ਫੰਕਸ਼ਨ ਨੂੰ ਥੋੜਾ ਬਦਲਦੇ ਹਾਂ। ਸਿੱਧੇ templateId ਨੂੰ ਇੱਕ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਪਹਿਲਾਂ ਮੌਜੂਦਾ URL ਨੂੰ ਦੇਖ ਕੇ ਇਸਨੂੰ ਲੱਭਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਆਪਣੇ ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਬੰਧਿਤ ਟੈਂਪਲੇਟ ID ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ window.location.pathname ਦੀ ਵਰਤੋਂ ਕਰਕੇ URL ਤੋਂ ਸਿਰਫ ਪਾਥ ਸੈਕਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

ਇੱਥੇ ਅਸੀਂ ਘੋਸ਼ਿਤ ਰੂਟਸ ਨੂੰ ਸੰਬੰਧਿਤ ਟੈਂਪਲੇਟ ਨਾਲ ਮੈਪ ਕੀਤਾ। ਤੁਸੀਂ ਇਸਨੂੰ ਸਹੀ ਕੰਮ ਕਰਦੇ ਹੋਏ ਅਜ਼ਮਾ ਸਕਦੇ ਹੋ ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ URL ਨੂੰ ਮੈਨੁਅਲ ਤੌਰ 'ਤੇ ਬਦਲਦੇ ਹੋ।

✅ ਜੇ ਤੁਸੀਂ URL ਵਿੱਚ ਇੱਕ ਅਣਜਾਣ ਪਾਥ ਦਰਜ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ? ਅਸੀਂ ਇਸਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰ ਸਕਦੇ ਹਾਂ?

ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ

ਸਾਡੀ ਐਪ ਲਈ ਅਗਲਾ ਕਦਮ ਪੇਜਾਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਬਿਨਾਂ URL ਨੂੰ ਮੈਨੁਅਲ ਤੌਰ 'ਤੇ ਬਦਲਣ ਦੀ ਲੋੜ। ਇਸਦਾ ਮਤਲਬ ਦੋ ਚੀਜ਼ਾਂ ਹਨ:

ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
ਨਵੇਂ URL ਦੇ ਆਧਾਰ 'ਤੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ

ਅਸੀਂ updateRoute ਫੰਕਸ਼ਨ ਨਾਲ ਦੂਜੇ ਹਿੱਸੇ ਦੀ ਦੇਖਭਾਲ ਪਹਿਲਾਂ ਹੀ ਕਰ ਚੁੱਕੇ ਹਾਂ, ਇਸ ਲਈ ਸਾਨੂੰ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਪਵੇਗਾ।

ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ history.pushState ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ ਜੋ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਅਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਇਤਿਹਾਸ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਬਿਨਾਂ HTML ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ।

ਨੋਟ: ਜਦੋਂ HTML ਐਂਕਰ ਐਲੀਮੈਂਟ <a href> ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਵੱਖ-ਵੱਖ URLs ਲਈ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਣ ਲਈ, ਇਹ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ HTML ਨੂੰ ਰੀਲੋਡ ਕਰੇਗਾ। ਜਦੋਂ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਰੂਟਿੰਗ ਨੂੰ ਸੰਭਾਲਦੇ ਹੋ, ਤਾਂ preventDefault() ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣਾ ਜ਼ਰੂਰੀ ਹੈ।

ਕੰਮ

ਆਓ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀ ਐਪ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹਾਂ:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

ਇਹ ਵਿਧੀ ਪਹਿਲਾਂ ਦਿੱਤੇ ਪਾਥ ਦੇ ਆਧਾਰ 'ਤੇ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ, ਫਿਰ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ। ਗੁਣ window.location.origin URL ਰੂਟ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਜਿਸਦੀ ਵਰਤੋਂ ਇੱਕ ਦਿੱਤੇ ਪਾਥ ਤੋਂ ਪੂਰਾ URL ਦੁਬਾਰਾ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇਹ ਫੰਕਸ਼ਨ ਹੈ, ਅਸੀਂ ਉਸ ਸਮੱਸਿਆ ਦੀ ਦੇਖਭਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੇਕਰ ਕੋਈ ਪਾਥ ਕਿਸੇ ਵੀ ਪਰਿਭਾਸ਼ਿਤ ਰੂਟ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ। ਅਸੀਂ updateRoute ਫੰਕਸ਼ਨ ਨੂੰ ਬਦਲ ਕੇ ਇੱਕ ਮੌਜੂਦਾ ਰੂਟ ਵਿੱਚ ਫਾਲਬੈਕ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜੇਕਰ ਅਸੀਂ ਕੋਈ ਮੇਲ ਨਹੀਂ ਲੱਭ ਸਕਦੇ।

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  ...

ਜੇਕਰ ਕੋਈ ਰੂਟ ਨਹੀਂ ਲੱਭਦਾ, ਤਾਂ ਅਸੀਂ ਹੁਣ login ਪੇਜ 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਾਂਗੇ।

ਹੁਣ ਆਓ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ URL ਪ੍ਰਾਪਤ ਕਰੇ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਹਾਰ ਨੂੰ ਰੋਕੇ:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

ਆਓ ਆਪਣੇ Login ਅਤੇ Logout ਲਿੰਕਸ ਵਿੱਚ HTML ਵਿੱਚ ਬਾਈਡਿੰਗ ਸ਼ਾਮਲ ਕਰਕੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਨੂੰ ਪੂਰਾ ਕਰੀਏ।

<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

ਉਪਰੋਕਤ event ਆਬਜੈਕਟ, click ਇਵੈਂਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਾਡੇ onLinkClick ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ।

onclick ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ click ਇਵੈਂਟ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ ਬਾਈਡ ਕਰੋ, ਇੱਥੇ navigate() ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ।

ਇਨ੍ਹਾਂ ਲਿੰਕਸ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਹੁਣ ਤੁਸੀਂ ਆਪਣੀ ਐਪ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

✅ history.pushState ਵਿਧੀ HTML5 ਮਿਆਰ ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ [ਸਾਰੇ ਆਧੁਨ

ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਣਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੌਜੂਦ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਪ੍ਰਮਾਣਿਕ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੇ ਪ੍ਰਯੋਗ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੀਆਂ ਕਿਸੇ ਵੀ ਗਲਤਫਹਮੀਆਂ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆਵਾਂ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

23 KiB Raw Permalink Blame History