Nodejs 请问express+ejs如何实现左右结构局部刷新

要实现的效果如下: 目前的实现方式: 前台: $.ajax({ type:‘get’, url:_url, //点击导航1,_url的值是:localhost:3000/admin/back/test success:function(html){
if(html){ $(".content").empty().append(html); } else{ console.log(“返回值为空”); } } }); 后台: router.get(’/admin/back/test’, function (req, res) { console.log(“进入-------”); res.render(‘back/function1/function1’); }); 使用前端框架:bootstrap 问题描述:1.使用电脑浏览器可以实现局部刷新 2.用手机访问,点击导航,整个页面消失请问可以如何解决？

vueper 1楼

要实现左右结构局部刷新的功能，我们需要确保前后端代码能够正确处理请求，并且在不同的设备上都能正常工作。以下是详细的步骤和示例代码。

前端代码

首先，我们修改前端的AJAX请求来确保它能够正确地获取和渲染局部内容。

<!-- 假设这是你的HTML文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左右结构局部刷新示例</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">导航</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#" data-url="/admin/back/test">导航1</a>
                    </li>
                    <!-- 可以添加更多导航项 -->
                </ul>
            </div>
        </nav>
        <div class="row">
            <div class="col-md-3">
                <!-- 左侧导航栏 -->
            </div>
            <div class="col-md-9">
                <div class="content"></div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.nav-link').click(function(e) {
                e.preventDefault(); // 阻止默认行为
                var url = $(this).data('url'); // 获取data-url属性的值
                $.ajax({
                    type: 'GET',
                    url: url,
                    success: function(html) {
                        if (html) {
                            $(".content").empty().append(html);
                        } else {
                            console.log("返回值为空");
                        }
                    },
                    error: function() {
                        console.log("请求失败");
                    }
                });
            });
        });
    </script>
</body>
</html>

后端代码

接下来，我们需要确保后端能够正确响应这些请求，并渲染对应的视图。

// app.js 或者 router.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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

app.get('/admin/back/test', (req, res) => {
    console.log("进入-------");
    res.render('back/function1/function1');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

EJS 模板

最后，我们需要创建一个EJS模板文件function1.ejs，用于渲染右侧内容。

<!-- views/back/function1/function1.ejs -->
<div>
    <h1>这里是右侧内容</h1>
    <p>你可以在这里放置你想要显示的任何内容。</p>
</div>

解释

前端：我们使用Bootstrap来构建基本布局，并使用jQuery来处理点击事件并发送AJAX请求。
后端：Express接收AJAX请求并渲染相应的EJS模板。
EJS模板：用于生成动态内容。

这样，当用户点击导航链接时，右侧的内容会通过AJAX请求更新，而不会导致整个页面刷新。这应该可以在各种设备上正常工作，包括手机和平板。

songsunli 2楼

怎么没人帮解决一下呢?

eggper 3楼

为什么不把导航作为layout固定死然后在后台渲染部分模版。

songsunli 4楼

ajax只操作了内容区域，怎么会导致整个页面消失？

yuanlaile 5楼

电脑上浏览器访问没任何问题，手机访问就出现整个页面消失，不知是何原因？

songsunli 6楼

ejs页面使用div对页面进行分割 <div class=“x001a”> aaaaaa </div> <!–x001a–> … <div class=“x006a”> <%- include 101 %> </div> <!–x006a–> … <div class=“x0010a”> bbbbbbbbbbbbb </div> <!–x0010a–>

整个页面 aaaaa bbbbb时固定的 <%- include 101 %> 会根据你的操作而变化

nodeper 7楼

要在Express和EJS中实现左右结构的局部刷新，可以通过以下几个步骤来完成：

前端部分

首先，你需要确保你的AJAX请求在移动端也能正确执行。这通常涉及到处理响应类型以及正确解析HTML。以下是一个改进后的AJAX请求示例：

$.ajax({
    type: 'GET',
    url: _url, // 点击导航1, _url的值是: localhost:3000/admin/back/test
    dataType: 'html', // 明确指定数据类型为HTML
    success: function(html) {
        if (html) {
            $(".content").empty().append(html);
        } else {
            console.log("返回值为空");
        }
    },
    error: function() {
        console.log("请求失败");
    }
});

后端部分

确保服务器能够正确渲染视图，并且发送正确的HTTP响应。以下是后端代码示例：

// 引入EJS模板引擎
const express = require('express');
const app = express();
const ejs = require('ejs');

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

app.get('/admin/back/test', function(req, res) {
    console.log("进入-------");
    res.render('back/function1/function1'); // 渲染特定的视图文件
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

视图部分（EJS模板）

确保你的EJS模板中的.content元素存在并且正确填充。例如：

<!-- back/function1/function1.ejs -->
<div class="container">
    <div class="row">
        <div class="col-md-3"> <!-- 左侧导航栏 -->
            <ul class="nav flex-column">
                <li class="nav-item"><a href="/admin/back/test" class="nav-link">测试链接</a></li>
                <!-- 其他导航项 -->
            </ul>
        </div>
        <div class="col-md-9 content"> <!-- 右侧主要内容区域 -->
            <h2>这里是右侧内容</h2>
        </div>
    </div>
</div>