Nodejs 论坛 Gravatar 请求失败的页面太难看了

Nodejs 论坛 Gravatar 请求失败的页面太难看了

回学校突然发现头像都出不来了, 在家的时候都没出事的. 图片截的有点长… http://huaban.com/pins/15015053/

3 回复

Nodejs 论坛 Gravatar 请求失败的页面太难看了

最近回学校后，突然发现论坛中的用户头像都无法显示了。在家的时候一切正常，但在学校的网络环境下，Gravatar 图片请求总是失败。查看了错误页面，发现设计得很糟糕，影响了用户体验。

下面是我在项目中遇到的问题以及解决方案。

问题描述

当用户的 Gravatar 图片请求失败时，系统返回一个非常简陋的错误页面，如下图所示：

Error Page

解决方案

为了改善用户体验，我们可以自定义一个友好的错误页面，并且提供一些提示信息，例如建议用户检查网络连接或刷新页面。

步骤 1: 创建错误处理中间件

首先，我们需要创建一个错误处理中间件来捕获所有未处理的错误，并返回一个自定义的错误页面。

const express = require('express');
const app = express();

// 自定义错误处理中间件
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).send({
        status: 'error',
        message: '请求失败，请稍后再试或刷新页面。',
        details: err.message
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});
步骤 2: 捕获 Gravatar 请求失败

接下来，我们需要确保在请求 Gravatar 图片时捕获任何可能的错误，并调用错误处理中间件。

const axios = require('axios');

function fetchGravatar(email) {
    const gravatarUrl = `https://www.gravatar.com/avatar/${md5(email.toLowerCase())}?d=404`;

    return axios.get(gravatarUrl)
        .then(response => {
            if (response.status === 404) {
                throw new Error('Gravatar 图片不存在');
            }
            return response.data;
        })
        .catch(error => {
            // 抛出错误以触发错误处理中间件
            throw error;
        });
}
步骤 3: 渲染自定义错误页面

最后，在前端页面中渲染自定义的错误消息。这里假设你使用的是 EJS 模板引擎。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Error Page</title>
</head>
<body>
    <% if (locals.error) { %>
        <h1><%= locals.error.status %> 错误</h1>
        <p><%= locals.error.message %></p>
        <p>详细信息: <%= locals.error.details %></p>
    <% } else { %>
        <img src="<%= gravatarUrl %>" alt="User Avatar">
    <% } %>
</body>
</html>

通过以上步骤，我们可以为 Gravatar 请求失败的情况提供一个更友好的错误页面，从而提升用户体验。


enter image description here

还是应该在本地好些

针对“Nodejs 论坛 Gravatar 请求失败的页面太难看了”这个问题，可以从两个方面来解决：一个是Gravatar请求失败的处理，另一个是美化失败提示页面。

1. 处理Gravatar请求失败

首先确保你的Node.js应用能够正确地从Gravatar获取头像。如果请求失败，我们需要提供一个友好的错误处理机制。可以使用axios或node-fetch等库来发送HTTP请求。

const axios = require('axios');

async function fetchGravatar(email) {
    const gravatarUrl = `https://www.gravatar.com/avatar/${md5(email.trim().toLowerCase())}`;
    try {
        const response = await axios.get(gravatarUrl);
        if (response.status === 200) {
            return gravatarUrl;
        } else {
            throw new Error('Gravatar request failed');
        }
    } catch (error) {
        console.error('Failed to fetch Gravatar:', error.message);
        return null; // 或者返回默认头像URL
    }
}

2. 美化失败提示页面

当Gravatar请求失败时，你可以显示一个自定义的失败提示页面，而不是默认的404错误页面。可以通过Express或其他Web框架实现。

app.get('/profile', async (req, res) => {
    const email = req.query.email || 'default@example.com';
    const gravatarUrl = await fetchGravatar(email);

    if (gravatarUrl) {
        res.render('profile', { gravatar: gravatarUrl });
    } else {
        res.render('noGravatar', { fallbackImageUrl: '/images/default-avatar.jpg' });
    }
});

视图模板

noGravatar.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Profile</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 50px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Oops! Couldn't load the Gravatar.</h1>
    <img src="<%= fallbackImageUrl %>" alt="Default Avatar">
    <p>We couldn't load your Gravatar. Here's a default avatar instead.</p>
</body>
</html>

通过这种方式，我们可以确保用户在Gravatar请求失败时，能够看到一个更友好的提示页面，并且该页面的样式也更加美观。

回到顶部