Web开发新手求教：如何通过DynamoDB数据与JS实现页面个性化

1. 从URL中提取邮箱参数 #

先从自定义链接的查询参数里拿到用户邮箱，用浏览器原生的URLSearchParams就能实现：

// 获取当前页面的URL查询参数
const urlParams = new URLSearchParams(window.location.search);
// 提取名为"email"的参数值（假设你的链接格式是xxx.com?vote=xxx&email=user@example.com）
const userEmail = urlParams.get('email');

// 检查是否成功获取到邮箱，避免后续出错
if (!userEmail) {
  console.error('未检测到用户邮箱参数');
  // 可在这里显示错误提示
  document.getElementById('error-message').textContent = '无效的投票链接，请检查后重试';
}

2. 通过后端接口从DynamoDB获取用户投票数据 #

注意：前端不能直接访问DynamoDB（会泄露密钥，存在严重安全风险），你需要搭建一个后端接口（比如用AWS Lambda + API Gateway）来查询DynamoDB，前端通过这个接口获取数据。

示例Lambda函数（Node.js） #

这个Lambda负责根据邮箱查询DynamoDB的投票数据：

const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {
  const { email } = event.queryStringParameters;
  
  const params = {
    TableName: '你的投票表名称',
    KeyConditionExpression: 'email = :email', // 假设你的表将email作为分区键
    ExpressionAttributeValues: {
      ':email': email
    }
  };
  
  try {
    const data = await dynamodb.query(params).promise();
    return {
      statusCode: 200,
      body: JSON.stringify(data.Items[0]) // 返回找到的第一条数据（假设一个邮箱对应一条投票记录）
    };
  } catch (err) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: '查询数据失败' })
    };
  }
};

部署这个Lambda后，通过API Gateway配置一个GET接口（比如https://你的API域名/get-vote-data），前端就可以调用这个接口：

// 假设已拿到userEmail
async function fetchVoteData(email) {
  try {
    const response = await fetch(`https://你的API域名/get-vote-data?email=${encodeURIComponent(email)}`);
    if (!response.ok) throw new Error('请求失败');
    const voteData = await response.json();
    return voteData;
  } catch (err) {
    console.error('获取投票数据出错:', err);
    return null;
  }
}

3. 用数据生成JS变量，个性化展示HTML #

拿到投票数据后，将其存为JS变量，再更新页面内容：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', async () => {
  const userEmail = new URLSearchParams(window.location.search).get('email');
  if (!userEmail) return;
  
  const voteData = await fetchVoteData(userEmail);
  if (!voteData) return;
  
  // 把数据存成JS变量，方便后续使用
  const userVoteInfo = {
    email: voteData.email,
    voteTitle: voteData.vote_title, // 假设你的表有投票标题字段
    createdTime: voteData.created_at,
    // 其他你需要的字段
  };
  
  // 个性化更新HTML内容
  document.getElementById('welcome-message').textContent = `欢迎回来，${userEmail.split('@')[0]}！`;
  document.getElementById('vote-title').textContent = `你的投票：${userVoteInfo.voteTitle}`;
  document.getElementById('vote-time').textContent = `创建时间：${new Date(userVoteInfo.createdTime).toLocaleString()}`;
});

关键注意事项 #

• 务必对URL参数做校验，避免恶意输入（比如XSS攻击，或无效邮箱导致的查询错误）
• DynamoDB的查询条件要和你的表结构对应，如果email不是分区键，可能需要调整表结构（扫描操作效率低，不建议大量数据使用）
• 前端调用接口时，记得用encodeURIComponent处理邮箱参数，避免特殊字符导致请求错误

内容的提问来源于stack exchange，提问作者Jack Eggert