使用node.js,Bootstrap,axios实现增删改查存取数据带自写接口

最新推荐文章于 2024-07-19 11:39:44 发布

The butcher

最新推荐文章于 2024-07-19 11:39:44 发布

阅读量593

点赞数 3

文章标签： nodejs

本文链接：https://blog.csdn.net/yangyabing2020/article/details/107069776

版权

本文介绍如何利用Node.js、Bootstrap和axios库创建一个包含增、删、改、查功能的数据管理应用。通过编写自定义接口，实现数据的存取，同时涉及到index.html、new.html、edit.html等页面的交互逻辑以及package.json配置。

摘要由CSDN通过智能技术生成

在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    />
  </head>
  <body class="container">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">萌宠列表</h3>
      </div>
      <div class="panel-body">
        <a href="/new.html" class="btn btn-danger btn-sm">新增</a>

        <table class="table table-bordered table-striped table-hover">
          <thead>
            <tr>
              <th>序号</th>
              <th>头像</th>
              <th>名称</th>
              <th>技能</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="list"></tbody>
        </table>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
      axios.get("/api/v1/pets").then((res) => {
   
        var strHtml = "";
        res.data.forEach((pet, index) => {
   
          strHtml += `<tr>
              <td>${
   index + 1}</td>
              <td>${
   pet.name}</td>
              <td><img src="${
   
                pet.img
              }" style="width: 80px; max-height: 80px;"/></td>
              <td>${
   pet.skills}</td>
              <td>
                <button onclick="delOne('${
   
                  pet.id
                }')" class="btn btn-danger btn-sm">删除</button>
                <a class="btn btn-info btn-sm" href="/edit.html?id=${
   
                  pet.id
                }">修改</a>
              </td>
            </tr><