likes
comments
collection
share

多人后台博客管理DAY06

作者站长头像
站长
· 阅读数 20

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

多人后台博客管理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'));