express主页删除数据库数据

给对应数据

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

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

<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 update" data-id="<%= item.id %>" data-name="<%= item.name %>"data-imgUrl="<%= item.imgUrl %>">
        <img src="/images/home_black.png" alt="del" class="delete-item" data-id="<%= item.id %>">
      </td>
      </tr>
      <%  }) %>        
   </tbody>
  </table>

修改操作

弹出修改框
收数据var updateId = $(this).data(‘id’)
var updateName = $(this).data(‘name’)
var updateImgUrl = $(this).data(‘imgUrl’)

使用value进行对应修改

<script src="/javascripts/jquery.js"></script>
 <script>
   var id = '';
   $(function(){
     // 点击修改操作
     $('.update').click(function(){
       var updateId = $(this).data('id')
       var updateName = $(this).data('name')
       var updateImgUrl = $(this).data('imgUrl')
      updateHTML = `
      <div class="dialog isUpdate"></div>
         <div class="dialog-wrap isUpdate">
           <h3>修改操作</h3>
           <div class="close" id="close">
             <img src="/images/home_black.png"  alt="">
           </div>
           <form action="/update" enctype="multipart/form-data" method="post">
             <div>
             <p>ID</p>
             <p>
               <input type="text" class="form-control" name="upid" disabled="disabled" value="${updateId}"/>
             </p>
           </div>
             <div>
             <p>图片名称</p>
             <p>
               <input type="text" class="form-control" name="imgName" value="${updateName}"/>
             </p>
           </div>
           <div>
             <p>图片路径</p>
             <p>
               <input type="file" name="pic" class="upload-input" id="uploadInput"/>
             </p>
           </div>
           <div class="dialog-footer">
             <span class="cancel" id="cancel">取消</span>
             <input type="submit" value='确定' class="determine">
             
           </div>
         </form>
       </div>`
       $('body').append(updateHTML)
     })
     // 取消修改
     $('body').on('click','#close,#cancel',function(){
       $('.isUpdate').hide();
     })
   })
 </script>

在app.js里配置

修改地方form action=”/update” enctype=”multipart/form-data” method=”post”

var update = require(‘./routes/update’)
app.use(‘/update’, update)
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 upid = fields.upid[0]
    var imgName = fields.imgName[0]
    console.log(files)
    // 上传图片路径
    var pic = files.pic[0].path
    db.query(
      `update  background set id=?,name=?, imgUrl=? where id=${upid}`,
      [upid, 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(pager.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

其他部分

.dialog-wrap{
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%,-50%);
       z-index: 999;
       padding: 20px;
       width: 460px;
       margin-left: -120px;
       background: #fff;
       border-radius: 24px;
     }
     .dialog-wrap img{
       width: 25px;
       height: 25px;
       margin-top: -73px;
     }
     .dialog-header{
       position: relative;
     }
     .dialog-header div{
       position: absolute;
       right: 0;
       top: 0;
     }
     form > div{
       margin: 20px 0;
     }
     .dialog-footer{
       text-align: right;
     }
    .dialog-footer span,.dialog-footer input[type='submit']{
       /* outline: none; */
       display: inline-block;
       cursor: pointer;
       padding: 6px 10px;
       color: #fff;
       background-color: gray;
     }