Django项目练习（七）——视频页面重构&添加集数&编辑功能&删除功能

本文链接：https://blog.csdn.net/cccxxxqq/article/details/121395882

本文详细介绍了如何使用Django重构视频页面，包括增加添加集数功能，实现集数编辑，删除功能，外链视频编辑以及视频状态管理。通过优化地址生成逻辑、美化页面和增加各种操作按钮，提升用户体验。

摘要由CSDN通过智能技术生成

视频页面功能重构

视频页面功能重构

视频页面功能重构

1、当前的地址添加以及集数生成都是自增的，如果删除url的话，id会很混乱，针对这点进行修改。
2、美化视频功能页面。
在这里插入图片描述
当前页面，还比较丑陋。。

一、增加添加集数功能

在前端增加添加集数的input

<form class="form-horizontal edit-area add-video-area add-url" method="post">
    <p>地址与选集编辑区域</p>
    <label>添加地址</label><input type="text" name="url" class="form-control"/><br>
    <label>添加集数</label><input type="number" name="number" class="form-control"/>
    <input type="submit" value="添加" class="btn btn-info" id="add-url-btn"/>
</form>

然后在后端的view中，在VideoSubView的post方法中，获取到集数number，并创建：

    def post(self, request, video_id):
        url = request.POST.get('url')

        number = request.POST.get('number')
        url_format = reverse('video_sub', kwargs={
   'video_id': video_id})

        if not all([url, number]):
            return redirect('{}?error={}'.format(url_format, '缺少必要字段'))

        video = Video.objects.get(pk=video_id)

        try:
            VideoSub.objects.create(video=video, url=url, number=number)
        except:
            return redirect('{}?error={}'.format(url_format, '创建失败'))

        return redirect(reverse('video_sub', kwargs={
   'video_id': video_id}))

在这里插入图片描述
然后我们再对地址那里的显示做一下优化，现在太长了，而且我们可以通过后面的查看来跳转的。
然后我们在给他加上几个操作按钮：

<tbody>
        % for video_sub in video.video_sub.all():
        <tr>
            <td>第${video_sub.number}集</td>
            <td><p class="info">${video_sub.url}</p></td>
            <td>
                <a class="btn btn-default" href="${video_sub.url}">查看</a> 
                <button class="btn btn-default">编辑</button>
                <a class="btn btn-default" href="">删除</a>
            </td>
        </tr>
        % endfor
    </tbody>

接下来我们对编辑功能进行开发

二、视频集数编辑功能开发

编辑的功能主要数：修改集数和修改地址。
html中增加一个编辑区域：

<h1>${video.name} <span>${error}</span></h1>

<form class="form-horizontal edit-area add-video-area add-url" method="post"