node.js 实战——餐厅静态主页编写（express+node+ejs+bootstrap）

于 2025-05-07 17:31:27 发布
阅读量820 收藏 13
点赞数 21
分类专栏： #node 实战 文章标签： node.js express bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46282323/article/details/147770744
版权

ejs页面

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel='stylesheet' href='/stylesheets/font-awesome.css'/>
    <link rel='stylesheet' href='/stylesheets/fontello.css'/>
    <!-- 本地 Bootstrap 引入方式 -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<div class="top-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">

            </div>
            <div class="col-lg-6">
                <div class="top-text">
                    <div class="text-block ">
                        <i class="icon-phone-call"></i>
                        <span>400-800-123-456</span>
                    </div>

                    <div class="text-block ">
                        <i class="bi bi-clock"></i>
                        <span>Mo-Fr 11:00-10:00, Sa-Su 10:00-11:00</span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-lg-5">
                <div class="logo">
                    <img src="./images/logo.png" alt="logo"></img>
                </div>
            </div>
            <div class="col-lg-7 navigation ">

                <div class="content">
                    <div class="col-lg-2 menu">主页</div>
                    <div class="col-lg-2 menu">菜单</div>
                    <div class="col-lg-3 menu">
                        <span>预约</span>
                        <div class="menu-item">
                            <div class="title">
                                预约须知
                            </div>
                            <div class="title">
                                直接预约
                            </div>
                        </div>
                    </div>
                    <div class=" col-lg-3 menu">餐厅趣事</div>
                    <div class="col-lg-4 menu">注册/登陆</div>
                </div>


            </div>
        </div>
    </div>
</div>
<div class="hero-section" style=" background: url('<%=banner.img%>') no-repeat center right;">
    <div class="">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="hero-caption">
                        <h1 class="hero-title"><%=banner.displayName%></h1>
                        <p class="hero-text"><%=banner.displayTitle%></p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="space-medium">
    <div class="container">

        <div class="row">

            <div class="col-lg-12">
                <div class="section-title">
                   <h1> 🧑‍🍳今日主厨</h1>
                </div>
            </div>

            <div class="chef-section">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="author-img mb40">
                            <img src="./images/author.jpg" alt="author"></img>
                        </div>

                    </div>
                    <div class="col-lg-9">
                        <div class="author-info">
                            <div class="author-name ">
                                Sarah Perkins
                            </div>
                            <div class="author-mete mb40">
                                助理主厨
                            </div>
                            <div class="author-content mb40">
                                Etiam posuere dictum liquam mollis sem atex venenatis mauris ultrices rmentum justoed porttitorsed mollis posuere dictum.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="space-medium bg-default">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title text-center">
                    <h1 class="">明星菜单</h1>
                    <h5>主厨推荐 & 食客热评</h5>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="food-block mb40">
                    <div class="food-img">
                        <div class="img-hover">
                            <img src="./images/service-1.jpg" ></img>
                        </div>

                    </div>
                    <div class="food-title">
                        剁椒鱼头手工豆腐煲
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="food-block mb40">
                    <div class="food-img">
                        <div class="img-hover">
                            <img src="./images/service-4.jpg" ></img>
                        </div>

                    </div>
                    <div class="food-title">
                        剁椒鱼头手工豆腐煲
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="food-block mb40">
                    <div class="food-img">
                        <div class="img-hover">
                            <img src="./images/service-3.jpg" ></img>
                        </div>

                    </div>
                    <div class="food-title">
                        剁椒鱼头手工豆腐煲
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="food-block mb40">
                    <div class="food-img">
                        <div class="img-hover">
                            <img src="./images/service-2.jpg" ></img>
                        </div>

                    </div>
                    <div class="food-title">
                        剁椒鱼头手工豆腐煲
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="space-medium ">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title text-center">
                    <h1 class="">食客评价</h1>
                    <h5>喜爱上我们餐厅的客人常说</h5>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="comment-area">
                    <div class="comment-people">
                        <div class="comment-author">
                            <img src="./images/user1.jpg" alt="avatar" class="img-circle"/>
                        </div>
                    </div>
                    <div class="comment-content">
                        <div class="time">2023-12-12</div>
                        <div class="content">
                            Lorem ipsum dolor sit ameonsectetur adipiscing elitlentesque ut dui leonean commo lorem porttitor hendrerit orem ipsum dolor siectetur adipiscing elit.
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="comment-area">

                    <div class="comment-content">
                        <div class="time">2023-12-12</div>
                        <div class="content">
                            Lorem ipsum dolor sit ameonsectetur adipiscing elitlentesque ut dui leonean commo lorem porttitor hendrerit orem ipsum dolor siectetur adipiscing elit.
                        </div>
                    </div>
                    <div class="comment-people">
                        <div class="comment-author">
                            <img src="./images/user2.jpg" alt="avatar" class="img-circle"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

js 页面

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  let banner ={
    img: '../images/hero-img.jpg',
    displayName:'📢  芝士流心咸蛋黄虾球！',
    displayTitle:'今日厨师推荐'
  }


  res.render('index', { title: '订餐系统', banner });
});

module.exports = router;

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

layman0528

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值