从 Node.js 将 URL 传递到前端

Question

我正在为用户构建一个带有预先确定答案的聊天机器人。一些答案需要文本，这些文本将是可点击的 URL/重定向。使用这个https://developer.mozilla.org/en-US/docs/Web/API/URL/URL 作为参考。

如何以较短的方式将 URL 从我的节点服务器传递到我的前端应用程序？例如。 “点击这里”

let url_one = new URL('https://www.google.co.uk/books/edition/Cotton_Candy/4smcwgEACAAJ?hl=en', 'Cotton Candy — Victoria Blakemore (2019)');

const Messages = [
    {
        message: `I couldn’t find what you’re looking for. Maybe try again but use vaguer search terms. This is also interesting by the way: ${url_one}`
    },

]

module.exports = Messages;

Answer 1

您错误地使用了URL constructor。第一个参数是url 的路径，然后是base。锚标记 (<a>) 的文本不是实际 URL 对象的一部分。您将需要自己的对象或数据结构来保存这些附加信息。

请看下面的例子：

const anchorTag = ({ text, href }) => `<a href="${href}">${text}</a>`;

const link = {
  text: 'Cotton Candy — Victoria Blakemore (2019)',
  href: new URL('books/edition/Cotton_Candy/4smcwgEACAAJ?hl=en', 'https://www.google.co.uk')
};

const Messages = [{
  message: `I couldn’t find what you’re looking for. Maybe try again but use vaguer search terms. This is also interesting by the way: ${anchorTag(link)}`
}];

//module.exports = Messages;

document.body.innerHTML = Messages[0].message; // Processed as raw HTML on the client

您也可以只传递 url 而不传递基础：

const link = {
  text: 'Cotton Candy — Victoria Blakemore (2019)',
  href: new URL('https://www.google.co.uk/books/edition/Cotton_Candy/4smcwgEACAAJ?hl=en')
};

这是在 React 客户端中使用 dangerouslySetInnerHTML 呈现原始 HTML 的方法：

// Server
const
  anchorTag = ({ text, href }) => `<a href="${href}">${text}</a>`,
  link = {
    text: 'Cotton Candy — Victoria Blakemore (2019)',
    href: new URL('books/edition/Cotton_Candy/4smcwgEACAAJ?hl=en', 'https://www.google.co.uk')
  },
  Messages = [{
    message: `I couldn’t find what you’re looking for. Maybe try again but use vaguer search terms. This is also interesting by the way: ${anchorTag(link)}`
  }];

// Client
const App = () => {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: Messages[0].message
      }}>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>