博客管理系统 - 博客列表

<p>&quot;<div>\n        &lt;div id=&quot;top&quot;&gt;\n            <div>\n                &lt;input type=&quot;text&quot; style=&quot;width: 400px;&quot; placeholder=&quot;请输入要查找的博客标题、作者、分类等关键字&quot;&gt;\n                &lt;input id=&quot;btnQuery&quot;\n                    type=&quot;button&quot; value=&quot;查找&quot;&gt;\n            </div>\n            <div>\n                &lt;input id=&quot;btnAdd&quot; type=&quot;button&quot; value=&quot;新增&quot;&gt;\n            </div>\n        </div>\n        &lt;div id=&quot;content&quot;&gt;\n            <table>\n                <tr>\n                    <th>Id</th>\n                    <th>标题</th>\n                    <th>作者</th>\n                    <th>分类</th>\n                    <th>\n                        操作\n                    </th>\n                </tr>\n                <tr>\n                    <td>1</td>\n                    <td>如何搭建一个vue项目</td>\n                    <td>xiezhr</td>\n                    <td>前端开发</td>\n                    <td>\n                        &lt;input type=&quot;button&quot; value=&quot;删除&quot;&gt;\n                    </td>\n                </tr>\n                <tr>\n                    <td>2</td>\n                    <td>这么分析大文件日志，以后就不用加班卷了！</td>\n                    <td>睡觉谁叫</td>\n                    <td>后端开发</td>\n                    <td>\n                        &lt;input type=&quot;button&quot; value=&quot;删除&quot;&gt;\n                    </td>\n                </tr>\n                <tr>\n                    <td>3</td>\n                    <td>Go开源世界主流成熟ORM框架gorm实践分享</td>\n                    <td>itxiaoshen</td>\n                    <td>后端开发</td>\n                    <td>\n                        &lt;input type=&quot;button&quot; value=&quot;删除&quot;&gt;\n                    </td>\n                </tr>\n                <tr>\n                    <td>4</td>\n                    <td>PostgreSQL一站式插件推荐 -- pg_enterprise_views</td>\n                    <td>Chris_zhouy</td>\n                    <td>数据库</td>\n                    <td>\n                        &lt;input type=&quot;button&quot; value=&quot;删除&quot; onclick=&quot;del()&quot;&gt;\n                    </td>\n                </tr>\n\n            </table>\n        </div>\n    </div>\n    <script>\n        document.getElementById(&quot;btnAdd&quot;).addEventListener(&quot;click&quot;, () =&gt; {\n            location.href = './create.html';\n        })\n    </script>\n\n---------create.html---------------\n    <div>\n        &lt;form id=&quot;blogForm&quot;&gt;\n          <table>\n            <tr>\n              <td>博客标题：</td>\n              <td>&lt;input type=&quot;text&quot; name=&quot;title&quot; value=&quot;&quot;&gt;</td>\n            </tr>\n            <tr>\n              <td>作者：</td>\n              <td>&lt;input type=&quot;text&quot; name=&quot;author&quot; value=&quot;&quot;&gt;</td>\n            </tr>\n            <tr>\n              <td>分类：</td>\n              <td>\n                &lt;select name=&quot;classify&quot; id=&quot;&quot;&gt;\n                  &lt;option value=&quot;后端开发&quot;&gt;后端开发</option>\n                  &lt;option value=&quot;前端开发&quot;&gt;前端开发</option>\n                  &lt;option value=&quot;软件工程&quot;&gt;软件工程</option>\n                  &lt;option value=&quot;数据库&quot;&gt;数据库</option>\n                </select>\n              </td>\n            </tr>\n            <tr>\n              <td>&lt;input id=&quot;btnSave&quot; type=&quot;submit&quot; value=&quot;保存&quot;&gt;</td>\n              <td>&lt;input id=&quot;btnCancel&quot; type=&quot;reset&quot; value=&quot;取消&quot;&gt;</td>\n            </tr>\n          </table>\n        </form>\n      </div>\n    <script>\n        document.getElementById(&quot;btnCancel&quot;).addEventListener(&quot;click&quot;, () =&gt; {\n            location.href = &quot;./index.html&quot;;\n        });\n\n        document.getElementById(&quot;blogForm&quot;).addEventListener(&quot;submit&quot;, (e) =&gt; {\n            e.preventDefault(); // 阻止表单默认提交行为\n\n            const form = e.target;\n            const formData = new FormData(form);\n\n            fetch('http://localhost:3000/api/blogs/add', {\n                method: 'POST',\n                body: JSON.stringify(Object.fromEntries(formData)),\n                headers: {\n                    'Content-Type': 'application/json'\n                }\n            })\n                .then(response =&gt; response.json())\n                .then(data =&gt; {\n                    console.log(data);\n                    // 处理响应结果，例如显示保存成功的消息\n                    alert(&quot;新增成功&quot;);\n                    location.href = &quot;./index.html&quot;;\n                })\n                .catch(error =&gt; {\n                    console.error(error);\n                    // 处理错误，例如显示保存失败的消息\n                });\n        });\n    </script>\n\n这两个文件可以通过在index.html中添加一个事件监听器来实现结合。具体操作如下：\n\n1. 在index.html中的<script>标签中添加一个事件监听器，监听新增按钮的点击事件。\n   <code>\n   document.getElementById(\&quot;btnAdd\&quot;).addEventListener(\&quot;click\&quot;, () =&gt; {\n       location.href = './create.html';\n   })\n   </code>\n\n2. 在create.html中的<script>标签中添加两个事件监听器，分别监听取消按钮和保存按钮的点击事件。\n   <code>\n   document.getElementById(\&quot;btnCancel\&quot;).addEventListener(\&quot;click\&quot;, () =&gt; {\n       location.href = \&quot;\./index.html\&quot;;\n   });\n\n   document.getElementById(\&quot;blogForm\&quot;).addEventListener(\&quot;submit\&quot;, (e) =&gt; {\n       e.preventDefault(); // 阻止表单默认提交行为\n\n       // 其他保存表单数据的逻辑\n   });\n   </code>\n\n通过上述操作，当在index.html页面点击新增按钮时，会跳转到create.html页面。在create.html页面点击取消按钮时，会跳转回index.html页面。在create.html页面点击保存按钮时，会执行表单数据的保存逻辑，并跳转回index.html页面。</p>