背景
因为网站的挑战榜模块之前都是前端写的静态数据，适应性不强，我每次加一个标签需要重新发布一次前端，非常麻烦
效果
前端：
django后台动态配置：
接口实现
django介绍
Django是一个开源的Web应用程序框架，基于Python编程语言。它遵循了MVC（Model-View-Controller）的设计模式和DRY（Don’t Repeat Yourself）的开发原则，提供了一套完整的Web应用程序开发所需的组件，包括模型、视图、模板、表单、数据库、URL路由、管理员界面等。Django的目标是让开发人员可以快速地构建高质量的Web应用程序，同时还提供了很好的可扩展性、安全性和可维护性。Django的主要特点有：
- 强调代码复用和“松散耦合”。
- 自带ORM（对象关系映射），方便与数据库交互。
- 自带Admin管理系统。
- 自带表单和模板系统，使得开发过程更加高效。
- 提供了完善的URL路由解决方案，方便管理不同的URL请求。
- 支持多种缓存机制，提高了应用程序的性能。
- 提供了工具和插件，方便开发人员进行开发和测试。
总体来说，Django是一款强大而灵活的Web框架，适合构建各种类型的Web应用程序，从简单的博客到复杂的社交网络。
admin
Django的admin是Django框架中一个非常强大的内置模块，它提供了一个自动生成的后台管理界面，可以方便地对数据库中的数据进行增删改查、权限管理、更改站点设置等操作，大大减少了开发人员的工作量。
通过在Django项目中注册模型，就可以快速创建一个自定义的管理界面。管理员可以通过admin站点直接对注册的模型对象进行管理，而无需编写管理功能的代码。
在admin中，开发人员还可以自定义模型的表单、列表、过滤器、搜索、排序等功能，以满足不同的需求。此外，admin还支持多语言功能，使得开发人员能够轻松支持不同的语种。
总而言之，Django的admin是一个极其方便、易用、高效的后台管理模块，可以大大提高后台管理的效率和开发效率。
模型层
类型，标题，json字符串
from django.db import models from django.utils import timezone # Create your models here. class DictModel(models.Model): kind = models.TextField(blank=True,null=True) #种类 title=models.CharField(blank=True, null=True, max_length=20) #标题 describe=models.TextField(blank=True,null=True) #配置项 json字符串 option=models.TextField(blank=True,null=True) #发布时间 publish=models.DateTimeField(default=timezone.now) class Meta: ordering=("-publish",) db_table = 'DictModel' def __str__(self): return '%s' % (self.title)
视图层
查询接口 get全部，post进行全量匹配
from django.http import JsonResponse import json from .models import DictModel def index(request):#获取所有的文章 try: if request.method == 'GET': allDictModel = DictModel.objects.order_by('publish') resData = [] for dicItem in allDictModel: resData.append({ "title": dicItem.title, "option": dicItem.option }) return JsonResponse({"code": 200, "data": resData, "msg": 'return all dict'}) elif request.method == 'POST': print('post') postData = json.loads(request.body.decode('utf-8')) print(postData) kind = postData['kind'] allDictModel = DictModel.objects.order_by('publish') resData = [] for dicItem in allDictModel: if str(kind) == str(dicItem.kind): resData.append({ "title": dicItem.title, "option": dicItem.option }) return JsonResponse({"code": 200, "data": resData, "msg": 'serch dict success'}) return JsonResponse({"code": 0, "data": [], "msg": 'not allowed'}) except Exception as e: return JsonResponse({"code": -1, "data": [], "msg": str(e)})
前端适配
获取接口数据即可
methods定义一个获取接口的方法
getChallengeDict () { const that = this that.$axios .post(that.baseurl + 'dictModel/index/', { kind: 'challenge' // 传入索引 }) .then((res) => { that.challengeConfig = res.data.data.map(item => { return JSON.parse(item.option) }) }) .catch((error) => { throw Error(error) }) }
渲染层
<ul v-for="(item, index) in challengeConfig" :key="index" class="ul_style" > <div v-bind:class="[ { li_active: index === activeChallengeIndex }, li_errorClass, ]" > <li @click="clickChallengeEvent(item,index)">{{ item.title }}</li> </div> </ul>
我的博客网站链接：https://yongma16.xyz
结束，感谢阅读！
