bootstrap + express - LilyLiya

refer to: https://www.udemy.com/course/the-web-developer-bootcamp/

1. 新建一个Public文件夹，里面包含css & js 文件夹，css里面放bootstrap.min.css，js里面放bootstrap.min.js & jquery.js

2. 在对应的ejs文件中添加依赖关系

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        home
    </title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>

3. 使用bootstrap的navbar，

href="/"分别都对应我们之前写好的/random, /cats, /r/:subreddit标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        home
    </title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/random">random</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/r/soccer">soccer</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="/r/chickens" tabindex="-1" aria-disabled="true">chickens</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="/cats" tabindex="-1" aria-disabled="true">cats</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <h1>Browsing the <%= name %> subreddit</h1>
        <p>
            <%= subscribers %> total subscribers
        </p>

        <hr>
        <%for(let post of posts){%>
            <article>
                <p>
                    <%= post.title %> - <b>
                            <%=post.author%>
                        </b>>
                </p>
                <%if(post.img){%>
                    <img src=" <%= post.img %>" alt="">

                    <%}%>

            </article>


            <% }%>
    </div>

</body>


</html>

div class = container,让整个内容居中显示一下。

4. index.js

const express = require('express');
const app = express();
const path = require('path');
const redditData = require('./data.json');

app.use(express.static(path.join(__dirname, 'public')))

// tell my app to use express, the teacher is ejs
// we don't need to require ejs, just set the engine view to ejs
app.set('view engine', 'ejs')
app.set('views', path.join(__dirname, '/views'))   //__dirname is where index.js is located



app.get('/', (req, res) => {
    res.render('home.ejs')
})

app.get('/random', (req, res) => {
    const num = Math.floor(Math.random() * 10) + 1
    res.render('random.ejs', { random: num })
})

// app.get('/r/:subreddit', (req, res) => {
//     const { subreddit } = req.params;
//     res.render('subreddit', { subreddit })
// })

app.get('/cats', (req, res) => {
    const cats = ['sweety', 'candy', 'cutey', 'honey'];
    res.render('cats.ejs', { cats })
})


app.get('/r/:subreddit', (req, res) => {
    const { subreddit } = req.params;
    const data = redditData[subreddit];
    if (data) {
        res.render('subreddit', { ...data });
    } else {
        res.render('notfound', { subreddit })
    }
})

app.listen(3000, () => {
    console.log("Listening On Port 3000")
})

posted on 2021-02-03 13:37 LilyLiya 阅读(217) 评论(0) 收藏举报

刷新页面返回顶部