Cara menggunakan Layui untuk membangunkan sistem pesanan restoran yang menyokong tempahan dalam talian

Cara menggunakan Layui untuk membangunkan sistem tempahan restoran yang menyokong tempahan dalam talian

Pengenalan:
Dengan perkembangan pesat Internet, semakin banyak Semakin banyak industri tradisional mula bergerak dalam talian. Industri katering tidak terkecuali, dan permintaan untuk sistem pesanan restoran semakin meningkat dari hari ke hari. Artikel ini akan memperkenalkan cara menggunakan Layui untuk membangunkan sistem pesanan restoran yang menyokong tempahan dalam talian dan menyediakan contoh kod khusus.

1. Persediaan persekitaran
Pertama, kita perlu menyediakan persekitaran pembangunan. Layui ialah rangka kerja bahagian hadapan berdasarkan HTML5 dan CSS3 Untuk membangunkan sistem, anda perlu menggunakan perpustakaan Layui, perpustakaan jQuery dan pelayan bahagian belakang (seperti Node.js).

1. Install Node.js: Muat turun dan pasang Node.js mengikut sistem pengendalian yang berbeza Selepas pemasangan selesai, anda boleh menggunakan arahan nod dan npm melalui alat baris arahan.
2. Buat projek: Gunakan alat baris arahan untuk memasuki direktori tempat projek terletak, laksanakan arahan "npm init", isi maklumat projek mengikut gesaan dan jana package.json fail.
3. Pasang kebergantungan: Laksanakan "npm install layui jquery" untuk memasang perpustakaan Layui dan jQuery ke dalam projek.

2. Reka bentuk halaman hadapan
Sistem pesanan restoran terutamanya merangkumi berbilang halaman berfungsi seperti log masuk, pendaftaran, senarai menu, pengurusan pesanan, dll. Semasa proses reka bentuk muka surat hadapan, anda boleh menggunakan komponen dan gaya yang kaya yang disediakan oleh Layui untuk menjadikan halaman itu memberikan kesan antara muka yang cantik.

1. Halaman log masuk: Gunakan komponen borang Layui untuk mereka bentuk borang log masuk dan tambah peraturan pengesahan yang sesuai untuk memastikan ketepatan input pengguna.

   <form class="layui-form" action="">
     <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="login">登录</button>
    </div>
     </div>
   </form>

   Salin selepas log masuk

2. Halaman pendaftaran: Gunakan juga komponen borang Layui untuk mereka bentuk borang pendaftaran dan menambah peraturan pengesahan yang sesuai.

   <form class="layui-form" action="">
     <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <label class="layui-form-label">确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="confirmPwd" required lay-verify="required|confirmPwd" placeholder="请输入确认密码" autocomplete="off" class="layui-input">
    </div>
     </div>
     <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="register">注册</button>
    </div>
     </div>
   </form>

   Salin selepas log masuk

3. Halaman senarai menu: Gunakan komponen jadual Layui untuk mereka bentuk senarai menu, berinteraksi dengan pelayan bahagian belakang melalui AJAX, dapatkan data menu dan paparkannya dalam meja.

   <table class="layui-hide" id="menuTable" lay-data="{url:'/api/menus',page:true,limit:10}" lay-filter="menuTable"></table>
   
   //JS代码
   layui.use('table', function(){
     var table = layui.table;
     
     table.render({
    elem: '#menuTable',
    cols: [[
      {field:'name', title: '菜名', width:120},
      {field:'price', title: '价格', width:80},
      {field:'description', title: '描述', minWidth:200},
      {fixed: 'right', title:'操作', toolbar: '#menuBar', width:150}
    ]]
     });
   });

   Salin selepas log masuk

4. Halaman pengurusan pesanan: Gunakan juga komponen jadual Layui untuk mereka bentuk senarai pesanan, berinteraksi dengan pelayan bahagian belakang melalui AJAX, dapatkan data pesanan dan paparkannya dalam meja.

   <table class="layui-hide" id="orderTable" lay-data="{url:'/api/orders',page:true,limit:10}" lay-filter="orderTable"></table>
   
   //JS代码
   layui.use('table', function(){
     var table = layui.table;
     
     table.render({
    elem: '#orderTable',
    cols: [[
      {field:'id', title: '订单号', width:150},
      {field:'username', title: '用户名', width:120},
      {field:'total', title: '总价', width:80},
      {field:'status', title: '状态', minWidth:80},
      {fixed: 'right', title:'操作', toolbar: '#orderBar', width:150}
    ]]
     });
   });

   Salin selepas log masuk

3. Pembinaan perkhidmatan bahagian belakang
Perkhidmatan hujung belakang terutamanya menyediakan antara muka untuk panggilan muka hadapan untuk melakukan penambahan, pemadaman, pengubahsuaian data dan operasi pertanyaan. Mengambil Node.js sebagai contoh, anda boleh menggunakan rangka kerja Express untuk membina perkhidmatan back-end.

1. Install Express: Jalankan arahan "npm install express" untuk memasang rangka kerja Express ke dalam projek.

2. Buat pelayan: Buat fail server.js dalam direktori projek dan tulis kandungan berikut:

   const express = require('express');
   const app = express();
   
   // 菜单列表接口
   app.get('/api/menus', function(req, res) {
     // 返回菜单数据
   });
   
   // 订单列表接口
   app.get('/api/orders', function(req, res) {
     // 返回订单数据
   });
   
   app.listen(3000, function() {
     console.log('Server is running on port 3000');
   });

   Salin selepas log masuk
3. Mulakan pelayan: Di baris arahan Laksanakan arahan "node server.js" dalam alat untuk memulakan pelayan.

4. Pelaksanaan fungsi sistem
Dengan berinteraksi dengan pelayan bahagian belakang, kita boleh mencapai fungsi sistem berikut:

1. Log masuk pengguna : Halaman hujung hadapan menghantar permintaan ke bahagian belakang melalui AJAX untuk mengesahkan sama ada maklumat pengguna adalah betul.
2. Pendaftaran pengguna: Halaman hujung hadapan menghantar permintaan ke bahagian belakang melalui AJAX dan menyimpan maklumat pengguna ke pangkalan data.
3. Paparan menu: Dapatkan data menu dari bahagian belakang melalui AJAX dan paparkannya pada halaman senarai menu.
4. Pengurusan pesanan: Dapatkan data pesanan dari bahagian belakang melalui AJAX dan paparkannya pada halaman pengurusan pesanan. Pada masa yang sama, anda boleh melihat, mengubah suai dan memadam pesanan.

5. Ringkasan
Artikel ini memperkenalkan cara menggunakan Layui untuk membangunkan sistem pesanan restoran yang menyokong tempahan dalam talian dan menyediakan contoh kod khusus. Melalui komponen dan gaya yang kaya yang disediakan oleh Layui, anda boleh mereka bentuk antara muka hadapan yang cantik, interaktif dan mesra. Digabungkan dengan pelayan bahagian belakang, pelbagai fungsi seperti log masuk pengguna, pendaftaran, senarai menu dan pengurusan pesanan dilaksanakan. Selepas membaca artikel ini, saya percaya anda telah menguasai kaedah asas menggunakan Layui untuk membangunkan sistem tempahan restoran saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara menggunakan Layui untuk membangunkan sistem pesanan restoran yang menyokong tempahan dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!