goo.gl或jsfiddle等网站如何生成网址代码？

前端开发工程师

要生成一个短链接，您可以使用许多前端库和框架，例如 jQuery、Bootstrap、Material-UI 等。下面是一个使用 Material-UI 的示例代码片段：

import { useState, useEffect } from 'react';
import axios from 'axios';
import { createShortUrl } from './shortener';
import { getDomain } from './utils/get_domain';

const App = () => {
  const [shortUrl, setShortUrl] = useState('');
  const [longUrl, setLongUrl] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchShortUrl = async () => {
      try {
        const response = await axios.get(
          `https://api.shrtco.com/v1/shorten?access_key=YOUR_ACCESS_KEY&longurl=${longUrl}`
        );
        setShortUrl(response.data.short_url);
      } catch (error) {
        setError(error.response.data.error);
      }
    };

    if (longUrl) {
      fetchShortUrl();
    }
  }, [longUrl]);

  const handleClick = () => {
    setLongUrl(shortUrl);
  };

  return (
    <div>
      <button onClick={handleClick}>复制短网址</button>
      {error && <div>{error}</div>}
      <div>
        <h3>原始长网址:</h3>
        <input
          type="text"
          value={longUrl}
          onChange={(e) => setLongUrl(e.target.value)}
        />
      </div>
      <div>
        <h3>缩短后的短网址:</h3>
        <a href={shortUrl}>{shortUrl}</a>
      </div>
    </div>
  );
};

export default App;

首先，请确保您的 access_key 替换为您的 Shrtco API 密钥。这个示例使用了 Material-UI，但您也可以使用其他 UI 库或纯 React 组件来实现类似的功能。

注意: shortener 和 get_domain 函数是从示例代码中导入的，您需要根据实际需要替换为实际函数。