nodejs数据的删除

页面.png

现在假设有这么一个页面，要实现的功能如下：
标题、描述、链接都输入内容，点添加后，下方表单中会出现添加的内容，点击删除，表单中的内容会被删除。（修改功能还没有实现，暂定）
先做添加的功能：

      <div>
        <form action="?" method="post">
          标题：<input type="text" name="title"><br>
          描述：<textarea name="description"></textarea><br>
          链接：<input type="text" name="href"><br>
          <input type="submit" value="添加">
        </form>
      </div>

这边点击添加后，数据就会被POST当前页面。我们的当前页面是banners页面。
所以，我们要处理所接收到的POST数据。

router.post('/banners',function(req,res){
    // 先从req中取得各样的数据
    var title=req.body.title;
    var description=req.body.description;
    var href=req.body.href;

    // 如果title、description、href为空，则报错
    if(!title|| !description|| !href){
      res.status(400).send('arg error').end();
    }else{
      // 将前端POST过来的数据插入数据库
      db.query(`INSERT INTO banner_table (title,description,href) VALUE('${title}','${description}','${href}')`,function(err,data){
        if(err){
          console.error(err);
          res.status(500).send('database error').end();
        }else{
          // 重定向到banners页面
          res.redirect('/admin/banners');
        }
      });
    }
  });

经过这步操作之后，数据库确实保存了前端POST过来的数据，然后我们需要将POST来的数据再返回给前端，然后渲染到页面上。
大家看一下前面这段代码的最后一句：

res.redirect('/admin/banners');

这边是以get的方式重新访问，admin下面的banners页面，因此，我们需要对这个get请求做处理，这样就可以把数据返回给前端了。

  router.get('/banners',function(req,res){
        db.query('SELECT * FROM banner_table',function(err,banners){
          if(err){
            console.error(err);
            res.status(500).send('database error').end();
          }else{
            // 将banners数据返回给前端，供ejs文件使用
            res.render('admin/banners.ejs',{banners});
          }
        });
  });

然后前端就拿到了数据库的数据，就可以开始渲染了。

<table border="1" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>title</th>
            <th>description</th>
            <th>href</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <% for(var i=0;i<banners.length;i++){ %>
          <tr>
            <td><%=banners[i].id%></td>
            <td><%=banners[i].title%></td>
            <td><%=banners[i].description%></td>
            <td><%=banners[i].href%></td>
            <td>
              <a href="?act=mod&id=<%=banners[i].id%>">修改</a>
              <a href="?act=del&id=<%=banners[i].id%>">删除</a>
            </td>
          </tr>
          <% } %>
        </tbody>
      </table>

用的是ejs的模版。
然后删除是同样的道理。

router.get('/banners',function(req,res){
    switch(req.query.act){
      case 'mod':
        break;
      case 'del':
        db.query(`DELETE FROM banner_table WHERE id=${req.query.id}`,function(err,data){
          if(err){
            console.error(err);
            res.status(500).send('database error').end();
          }else{
            res.redirect('/admin/banners');
          }
        });
        break;
      default:
        db.query('SELECT * FROM banner_table',function(err,banners){
          if(err){
            console.error(err);
            res.status(500).send('database error').end();
          }else{
            // 将banners数据返回给前端，供ejs文件使用
            res.render('admin/banners.ejs',{banners});
          }
        });
        break;
    }
  });