用Django全栈开发——20. 友链一条龙全套开发

皮爷撸码
428 阅读6分钟

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将开发友链，并且是全套流程哦，全套！

Peekpa.com的官方地址：peekpa.com

经过之前几节的文章开发，我们其实已经很完善的开发了一套从后台模型，管理再到前端展示的工作。

所以，这一节，我们就来开发一下首页右下角的友链功能。

需求分析

友链功能的开发，主要涉及这么几个部分：

  • 友链模型的设计；
  • 友链后台管理开发；
  • 友链前端数据接入

这几部分的内容分别对应之前的类似课程:

  • 模型设计：《第13节 设计实现文章发布模型》
  • 后台管理开发：《第14节 CMS中添加Category和Tag管理》还有《15. 开发文章管理》
  • 前端数据的接入： 《第18节 首页文章列表展示》和《第19节 热门文章数据展示》

由于这些内容，之前的文章里面都有所设计，所以这一节我们就主要来整体的捋一遍，算是复习。

模型开发

友链的功能主要是，一个name用来显示内容，后面还有一个URL地址。所以我们首先创建友链的应用，然后在应用里面models.py文件中设计类：

class ExchangeLink(models.Model):
    STATUS_NORMAL = 1
    STATUS_DELETE = 0
    STATUS_DRAFT = 2
    STATUS_ITEMS = (
        (STATUS_NORMAL, '正常'),
        (STATUS_DELETE, '删除'),
        (STATUS_DRAFT, '草稿'),
    )
    name = models.CharField(max_length=30)
    show_name = models.CharField(max_length=30)
    url = models.URLField()
    create_time = models.DateTimeField(auto_now_add=True)
    status = models.PositiveIntegerField(default=STATUS_DRAFT, choices=STATUS_ITEMS)

我们这里也引入了status，为的是方便管理，show_name是为了在前台显示用。

接下来就是要在settings.py文件的INSTALLED_APPS中配置exchangelink应用：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps.peekpauser',
    'apps.poster',
    'apps.exchangelink',  #新添加的友链应用
]

然后执行$ makemigrations和$ migrate两条命令：

查看数据库里，发现新增表单exchangelink_exchangelink：

后台管理开发

接下来，我们就要开发后台管理了。

首先是修改左侧的sidebar，加入友链管理的入口，同时，在cms目录下，参照Post，Category还有Tag的方式，创建一个manage.html和publish.html两个文件，分别是管理友链还有发布友链：

在cms目录下变成了：

接着，我们就要在cms应用中，编写视图函数来将这两个页面映射出来。

#cms/urls.py文件里
urlpatterns = [
    path("dashboard/exchangelink/manage", views.exchangelink_manage_view, name="exchangelink_manage_view"),
    path("dashboard/exchangelink/publish", views.exchangelink_publish_view, name="exchangelink_publish_view"),
]

接着我们需要编写manage和publish这两个页面，发布页面：

这里面的项目基本就是我们上面model创建的项目，友链管理页面：

后台管理函数

接下来我们就要编写后台的管理方法了。

友链的新增：

首先是友链的发布。

发布的视图函数，主要就是一个Post请求，参考Category还有Tag，我们创建一个ExchangeLinkView类，在里面来处理Post请求：

class ExchangeLinkView(View):
    def post(self, request):
        # 新建提交
        if 'submit' in request.POST:
            form = ExchangeLinkForm(request.POST)
            if form.is_valid():
                name = form.cleaned_data.get('name')
                show_name = form.cleaned_data.get('show_name')
                url = form.cleaned_data.get('url')
                status = form.cleaned_data.get('status')
                ExchangeLink.objects.create(name=name, show_name=show_name, url=url, status=status)
                print("hehe")
                return redirect(reverse("cms:exchangelink_publish_view"))
            else:
                return restful.method_error("Form is error", form.get_errors())

接下来，我们就要在cms的url.py文件下，配置这个视图函数的映射：

urlpatterns = [
    path("dashboard/exchangelink/add", ExchangeLinkView.as_view(), name="exchangelink_add"),
】

就这么简单的一步，我们的发布功能就写完了。

友链的查询

接下来是友链的查询方法，我们要做的只是将数据从数据库里面捞出来，然后展示在页面上，所以，所有的方法就是在exchangelink_manage_view()函数中完成。

def exchangelink_manage_view(request):
    context = {
        "list_data": ExchangeLink.objects.all(),
        'list_data_status': ExchangeLink.STATUS_ITEMS
    }
    return render(request, 'cms/exchangelink/manage.html', context=context)

友链的修改

友链的修改，我们就是要把友链的id传到publish.html页面，然后在这个页面做修改。在manage.html页面的modify按钮，修改他的url数值：

<a href="{% url 'cms:exchangelink_edit' %}?exchangelink_id={{ item.id }}" class="btn btn-info btn-xs">Modify</a>

然后在编写视图函数：

class ExchangeLinkEditView(View):
    def get(self, request):
        exchangelink_id = request.GET.get('exchangelink_id')
        exchangeLink = ExchangeLink.objects.get(pk=exchangelink_id)
        context = {
            'item_data': exchangeLink,
            'list_data_status': ExchangeLink.STATUS_ITEMS,
        }
        return render(request, 'cms/exchangelink/publish.html', context=context)

最后别忘了在urls.py文件下配置映射：

urlpatterns = [
    path("dashboard/exchangelink/edit", ExchangeLinkEditView.as_view(), name="exchangelink_edit"),
]

别忘了在publish.html页面，通过Django的DTL来做数据的判断，显示数据。

最后就是修改ExchangeLinkView中的post方法，将修改的逻辑添加进去：

class ExchangeLinkView(View):
    def post(self, request):
        
        # 修改ExchangeLink
        elif 'modify' in request.POST:
            form = ExchangeLinkEditForm(request.POST)
            if form.is_valid():
                pk = form.cleaned_data.get('pk')
                name = form.cleaned_data.get('name')
                show_name = form.cleaned_data.get('show_name')
                url = form.cleaned_data.get('url')
                status = form.cleaned_data.get('status')
                ExchangeLink.objects.filter(id=pk).update(name=name, show_name=show_name, url=url, status=status)
                return redirect(reverse("cms:exchangelink_manage_view"))
            else:
                return restful.method_error("Form is error", form.get_errors())

友链的删除

友链的删除，我们还是参考Post的删除，即点击delte按钮，就只是将友链的status设置成了delete，并不是将数据从数据库里面删除。所以，我们就写一个delete视图函数，再配置一下就可以。这里可以参考Category和Tag的做法，写个js文件件来发送post请求。

class ExchangeLinkDeleteView(View):
    def post(self, request):
        exchangelink_id = request.POST.get('exchangelink_id')
        ExchangeLink.objects.filter(id=exchangelink_id).update(status=ExchangeLink.STATUS_DELETE)
        return restful.ok()

OK，至此，友链的后端开发就完成了。我们接下来开发友链的前端。

前端展示

接下来我们就要在前端展示数据，首先要填充数据：

接着，我们会发现，这个友链板块，会在首页还有文章详情页出现，就是像那个阅读排行榜一样，所以，我们的处理逻辑和于都排行榜是一样的，写一个视图函数，然后将数据放到一个变量中，再将这个变量返回给前端。

def get_exchange_link():
    exchange_link = ExchangeLink.objects.filter(status=ExchangeLink.STATUS_NORMAL)
    context = {
        'exchange_link': exchange_link
    }
    return context

可以看到，我们这里只是选择status为STATUS_NORMAL值的友链。放到了exchange_link川给前端，我们需要在right_section.html文件中，对exchange_link变量，使用for循环标签来显示出来内容。

<!-- 友链数据 -->
<div class="row ml-1" style="background-color: white">
    <ul class="list-unstyled row col-sm-12 pl-1 ml-0 ">
        {% if exchange_link %}
            {% for link_item in exchange_link %}
                <li class=" col-sm-6">
                    <a href="{{ link_item.url }}" class="text-decoration-none text-dark">
                        {{ link_item.show_name }}
                    </a>
                </li>
            {% endfor %}
        {% endif %}
    </ul>
</div>

至此，友链的开发就全部完成了。

页面效果

接着我们就来看一下页面的效果：

很完美，看到友链已经出来了。至此，我们的友链从零单排就上王者了。

技术总结

最后总结一下，

友链从零单排：

  1. 根据实际需求，设计模型，在应用的models.py文件里编写，编写完之后，在settings.py文件中安装应用，之后使用makemigration还有migrate命令，将数据模型映射到数据库中。；
  2. 编写后台管理界面，这里就两个，manage.html还有publish.html，其中publish满足复用；
  3. 编写后台的管理界面函数，增删改查四个方法，注意要在urls.py中让url映射到方法上；
  4. 完成后台功能，接下来就是填充数据；
  5. 前端的数据展示，通过Django的DTL模板，使用if标签还有for标签，来展示数据；
  6. 完毕。

获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。

avatar
文章
阅读
粉丝