{"id":17841,"date":"2025-06-17T13:20:20","date_gmt":"2025-06-17T05:20:20","guid":{"rendered":"https:\/\/92it.top\/?p=17841"},"modified":"2025-06-17T13:20:20","modified_gmt":"2025-06-17T05:20:20","slug":"%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb%e7%9a%84%e4%b8%80%e7%82%b9tips","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=17841","title":{"rendered":"\u524d\u540e\u7aef\u5206\u79bb\u7684\u4e00\u70b9Tips"},"content":{"rendered":"\n

\u5728\u524d\u540e\u7aef\u5206\u79bb\u7684\u67b6\u6784\u4e2d\uff0c\u524d\u7aef\u9875\u9762\u4e3b\u8981\u901a\u8fc7 JavaScript \u52a8\u6001\u6e32\u67d3<\/strong>\u3002\u8fd9\u79cd\u6a21\u5f0f\u4e0e\u4f20\u7edf\u7684\u670d\u52a1\u7aef\u6e32\u67d3\uff08\u5982 JSP\u3001Thymeleaf\uff09\u6709\u672c\u8d28\u533a\u522b\uff0c\u6838\u5fc3\u6d41\u7a0b\u662f\uff1a<\/p>\n\n\n\n

    \n
  1. \u540e\u7aef\u4e13\u6ce8 API<\/strong>\uff1a\u53ea\u63d0\u4f9b RESTful API \u63a5\u53e3\uff0c\u8fd4\u56de JSON\/XML \u6570\u636e\uff0c\u4e0d\u8d1f\u8d23\u9875\u9762\u6e32\u67d3\u3002<\/li>\n\n\n\n
  2. \u524d\u7aef\u72ec\u7acb\u8fd0\u884c<\/strong>\uff1a\u901a\u8fc7 AJAX\u3001Fetch \u7b49\u65b9\u5f0f\u8c03\u7528\u540e\u7aef API\uff0c\u83b7\u53d6\u6570\u636e\u540e\u52a8\u6001\u751f\u6210 DOM \u5143\u7d20<\/strong>\uff0c\u5b8c\u6210\u9875\u9762\u5c55\u793a\u3002<\/li>\n<\/ol>\n\n\n\n

    \u3000<\/p>\n\n\n\n

    \u4e00\u3001\u524d\u7aef\u6e32\u67d3\u7684\u6838\u5fc3\u6280\u672f<\/strong><\/p>\n\n\n\n

    \n\n\n\n

    1. \u539f\u751f JavaScript<\/strong><\/p>\n\n\n\n

    \u901a\u8fc7 document.createElement()<\/code>\u3001innerHTML<\/code> \u7b49\u539f\u751f API \u64cd\u4f5c DOM\u3002
    \u793a\u4f8b<\/strong>\uff1a<\/p>\n\n\n\n

    <!-- \u9875\u9762\u7ed3\u6784 -->\n<div id=\"user-list\"><\/div>\n\n<script>\n  \/\/ \u83b7\u53d6\u6570\u636e\n  fetch('\/api\/users')\n    .then(res => res.json())\n    .then(users => {\n      \/\/ \u52a8\u6001\u6e32\u67d3\n      const container = document.getElementById('user-list');\n      users.forEach(user => {\n        const div = document.createElement('div');\n        div.innerHTML = `<p>${user.name}<\/p>`;\n        container.appendChild(div);\n      });\n    });\n<\/script><\/pre>\n\n\n\n
    2.\u00a0\u524d\u7aef\u6846\u67b6\uff08React\/Vue\/Angular\uff09<\/strong><\/p>\n\n\n\n
    \u6846\u67b6\u901a\u8fc7\u865a\u62df DOM \u548c\u7ec4\u4ef6\u5316\u601d\u60f3\uff0c\u7b80\u5316\u590d\u6742 UI \u7684\u6e32\u67d3\u903b\u8f91\u3002
    \u793a\u4f8b\uff08React\uff09<\/strong>\uff1a<\/p>\n\n\n\n
    function UserList() {\n  const [users, setUsers] = useState([]);\n\n  useEffect(() => {\n    fetch('\/api\/users')\n      .then(res => res.json())\n      .then(setUsers);\n  }, []);\n\n  return (\n    <div>\n      {users.map(user => (\n        <p key={user.id}>{user.name}<\/p>\n      ))}\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
    3.\u00a0\u6a21\u677f\u5f15\u64ce\uff08Handlebars\/Mustache\uff09<\/strong><\/p>\n\n\n\n
    \u901a\u8fc7\u9884\u5b9a\u4e49\u6a21\u677f\u548c\u6570\u636e\uff0c\u751f\u6210 HTML \u5b57\u7b26\u4e32\u3002
    \u793a\u4f8b\uff08Handlebars\uff09<\/strong>\uff1a<\/p>\n\n\n\n
    <script id=\"user-template\" type=\"text\/x-handlebars-template\">\n  {{#each users}}\n    <p>{{name}}<\/p>\n  {{\/each}}\n<\/script>\n\n<script>\n  const template = Handlebars.compile($('#user-template').html());\n  fetch('\/api\/users')\n    .then(res => res.json())\n    .then(data => {\n      $('#user-list').html(template(data));\n    });\n<\/script><\/pre>\n\n\n\n
    \u3000<\/p>\n\n\n\n
    \u4e8c\u3001\u4e0e\u670d\u52a1\u7aef\u6e32\u67d3\u7684\u5bf9\u6bd4<\/strong><\/p>\n\n\n\n
    \n\n\n\n
    \u7279\u6027<\/th>\u524d\u7aef\u6e32\u67d3\uff08JS\uff09<\/th>\u670d\u52a1\u7aef\u6e32\u67d3\uff08\u5982 Thymeleaf\uff09<\/th><\/tr><\/thead>
    \u6e32\u67d3\u65f6\u673a<\/strong><\/td>\u6d4f\u89c8\u5668\u4e0b\u8f7d HTML + JS \u2192 \u6267\u884c JS \u2192 \u751f\u6210 DOM<\/td>\u670d\u52a1\u5668\u751f\u6210\u5b8c\u6574 HTML \u2192 \u6d4f\u89c8\u5668\u76f4\u63a5\u5c55\u793a<\/td><\/tr>
    \u9996\u5c4f\u52a0\u8f7d\u901f\u5ea6<\/strong><\/td>\u8f83\u6162\uff08\u9700\u7b49\u5f85 JS \u52a0\u8f7d\u548c\u6267\u884c\uff09<\/td>\u8f83\u5feb\uff08\u76f4\u63a5\u62ff\u5230\u5b8c\u6574 HTML\uff09<\/td><\/tr>
    SEO \u53cb\u597d\u5ea6<\/strong><\/td>\u5dee\uff08\u641c\u7d22\u5f15\u64ce\u722c\u866b\u53ef\u80fd\u65e0\u6cd5\u83b7\u53d6\u5b8c\u6574\u5185\u5bb9\uff09<\/td>\u597d\uff08\u670d\u52a1\u5668\u8fd4\u56de\u5b8c\u6574 HTML\uff09<\/td><\/tr>
    \u4ea4\u4e92\u4f53\u9a8c<\/strong><\/td>\u597d\uff08\u9875\u9762\u5c40\u90e8\u66f4\u65b0\uff0c\u65e0\u5237\u65b0\u611f\uff09<\/td>\u4e00\u822c\uff08\u6bcf\u6b21\u8bf7\u6c42\u53ef\u80fd\u5237\u65b0\u6574\u4e2a\u9875\u9762\uff09<\/td><\/tr>
    \u5f00\u53d1\u6a21\u5f0f<\/strong><\/td>\u524d\u540e\u7aef\u5b8c\u5168\u5206\u79bb\uff0c\u53ef\u72ec\u7acb\u5f00\u53d1<\/td>\u524d\u540e\u7aef\u5f3a\u8026\u5408\uff0c\u4f9d\u8d56\u670d\u52a1\u7aef\u73af\u5883<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u3000<\/p>\n\n\n\n
    \u4e09\u3001\u524d\u7aef\u6e32\u67d3\u7684\u4f18\u5316\u65b9\u6848<\/strong><\/p>\n\n\n\n
    \n\n\n\n
    1.\u00a0\u9884\u6e32\u67d3\uff08Prerendering\uff09<\/strong><\/p>\n\n\n\n
    \u5728\u6784\u5efa\u65f6\u751f\u6210\u9759\u6001 HTML \u6587\u4ef6\uff0c\u89e3\u51b3\u9996\u5c4f\u52a0\u8f7d\u548c SEO \u95ee\u9898\u3002<\/p>\n\n\n\n