express主页删除数据库数据

写删除对话框

//style样式
.isDelete{
  display:none
}
//body里
 <div class="dialog isDelete"></div>
  <div class="dialog-wrap isDelete">
    <h3>确定是否删除</h3>
    <div class="close" id="close">
      <img src="/images/home_black.png"  alt="">
    </div>
      <div class="dialog-footer">
        <span class="cancel" id="cancel">取消</span>
        <button class="determine determineDel">确定</button>
      </div>
  </div>

点击删除按钮传一个id值

data-id=”<%= item.id %>

<table class="table">
    <thead>
     <tr>
       <th>ID</th>
       <th>图片名称</th>
       <th>图片路径</th>
       <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <% backgroundList.forEach(function(item){ %>
       <tr>
         <td> <%= item.id %></td>
         <td> <%= item.name %></td>
         <td> <%= item.imgUrl %></td>
       <td>
         <img src="/images/home_black.png" class="edit">
         <img src="/images/home_black.png" alt="del" class="delete-item" data-id="<%= item.id %>">//传遍历的id
       </td>
       </tr>
       <%  }) %>        
    </tbody>
   </table>

功能

点击弹出删除框

取消，确定按钮

<script src="/javascripts/jquery.js"></script>
 <script>
   var id = '';
   $(function(){
     // 点击删除按钮
     $('.delete-item').click(function(){
       id = $(this).data('id');
       $('.isDelete').show();
     })
     // 隐藏删除表单
     $('#close,#cancel').click(function(){
       $('.isDelete').hide();
     })
     // 点击确定删除determineDel
     $('.determineDel').click(function(){
       window.location.href= `/del?id=${id}`;
     })
   })
 </script>

删除提交的地方

window.location.href= /del?id=${id};
在app.js写var del = require(‘./routes/del’)&&app.use(‘/del’, del)

删除后要重新渲染页面

var express = require('express')
var router = express.Router()
var db = require('../sql.js')
/* GET home page. */
router.get('/', function (req, res, next) {
  var id = req.query.id
  db.query(`delete from background where id=${id} `, function (err, data) {
    db.query('select * from background ', function (err, data) {
      var pager = {}
      // 当前页码
      pager.pageCurrent = 1
      // 总的记录数
      pager.maxNum = data.length
      // 每页显示多少条记录
      pager.pageSize = 5
      // 一共多少页
      pager.pageCount = parseInt(Math.ceil(page.maxNum / pager.pageSize))
      // [0,5],[5,10]....
      var dataList = data.slice(
        (pager.pageCurrent - 1) * pager.pageSize,
        (pager.pageCurrent - 1) * pager.pageSize + pager.pageSize
      )
      if (err) {
        throw err
      } else {
        res.render('backgroundList', { backgroundList: dataList, pager: pager })
      }
    })
  })
})
module.exports = router

遇到的一个添加图片Bug

因为添加数据的页面没有收到，分页后的数据命名事件，所以在哪个文件加上数据重新渲染的分页代码

如addBackground.js里

var express = require('express')
var router = express.Router()
var db = require('../sql.js')
var multiparty = require('multiparty')
/* GET home page. */
router.post('/', function (req, res, next) {
  var form = new multiparty.Form()
  // 上传图片，需要一个目录
  form.uploadDir = './public/upload'
  form.parse(req, function (err, fields, files) {
    var imgName = fields.imgName[0]
    console.log(files)
    // 上传图片路径
    var pic = files.pic[0].path
    db.query(
      'insert into background value (?,?,?)',
      [0, imgName, pic],
      function (err, data) {
        if (err) {
          throw err
        } else {
          db.query('select * from background ', function (err, data) {
            //添加的地方
            var pager = {}
            // 当前页码
            pager.pageCurrent = 1
            // 总的记录数
            pager.maxNum = data.length
            // 每页显示多少条记录
            pager.pageSize = 5
            // 一共多少页
            pager.pageCount = parseInt(Math.ceil(page.maxNum / pager.pageSize))
            // [0,5],[5,10]....
            var dataList = data.slice(
              (pager.pageCurrent - 1) * pager.pageSize,
              (pager.pageCurrent - 1) * pager.pageSize + pager.pageSize
            )
            if (err) {
              throw err
            } else {
              res.render('backgroundList', {
                backgroundList: dataList,
                pager: pager
              })
            }
          })
            //添加的地方
        }
      }
    )
  })
})
module.exports = router

其他部分

.isDelete{
  display: none;
}
.page{
  width: 100%;
  padding: 20px;
  color: #fff;
  border-top: 1px solid #ccc;
}
.page ul li{
  margin-right: 6px;
}