多人后台博客管理DAY06

(六)项目功能的实现之用户信息删除

BLOG -- 源码目录
  └── model -- 数据库操作
   ├──  public -- 静态资源
   └──  route -- 路由
        └──  admin --博客管理              
               └── user-delete.js --用户分页功能路由
        └── admin.js --博客管理页面路由
 └── views -- 模板
      └── admin --博客管理页面art模板
          └── user.art --用户列表页
 └── app.js -- 创建网站服务

user.art

• 对删除框添加隐藏域，type=hidden，为隐藏域也添加id
• 找到删除按钮并添加Id,为删除标签添加类名 ，并添加点击事件，主要通过jquery中的来捆绑id添加点击事件
• 将要删除的id值添加到隐藏域中
• 为表单添加提交地址action到delete

{{extend './common/layout.art'}}

{{block 'main'}}
    <!-- 子模板的相对路径相对的就是当前文件 因为它是由模板引擎解析的 而不是浏览器 -->
    {{include './common/header.art'}}
    <!-- 主体内容 -->
    <div class="content">
        {{include './common/aside.art'}}
        <div class="main">
            <!-- 分类标题 -->
     ···
            <!-- /分类标题 -->
            <!-- 内容列表 -->
            <table class="table table-striped table-bordered table-hover custom-table">
       ···
                            <a href="/admin/user-edit?id={{@$value._id}}" class="glyphicon glyphicon-edit"></a>
                            <i class="glyphicon glyphicon-remove delete" data-toggle="modal" data-target=".confirm-modal" data-id="{{@$value._id}}"></i>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
            <!-- /内容列表 -->
            <!-- 分页 -->
        ···
            <!-- /分页 -->
        </div>
    </div>
    <!-- /主体内容 -->
    <!-- 删除确认弹出框 -->
    <div class="modal fade confirm-modal">
        <div class="modal-dialog modal-lg">
            <form class="modal-content" action="/admin/delete" method="get">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">请确认</h4>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这个用户吗?</p>
                    <input type="hidden" name="id" id="deleteUserId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
{{/block}}

{{block 'script'}}
    <script type="text/javascript">
        $('.delete').on('click', function () {
            // 获取用户id
            var id = $(this).attr('data-id');
            // 将要删除的用户id存储在隐藏域中
            $('#deleteUserId').val(id);
        })
    </script>
{{/block}}

user-delete.js

• 获取要删除的用户的Id
• 添加用户结合函数
• 根据findOneAndDelete方法来进行用户删除

• 用户删除成功后重定向回用户列表页面

  const { User } = require('../../model/user');
  
  module.exports = async (req, res) => {
    // 获取要删除的用户id
    // res.send(req.query.id)
    // 根据id删除用户
    await User.findOneAndDelete({_id: req.query.id});
    // 将页面重定向到用户列表页面
    res.redirect('/admin/user');
  }

  admin.js

  // 用户删除功能路由
  admin.get('/delete', require('./admin/user-delete'));