文章目录
- 背景
- 效果
- 接口实现
- django介绍
- 模型层
- 视图层
- 前端适配
背景
因为网站的挑战榜模块之前都是前端写的静态数据，适应性不强，我每次加一个标签需要重新发布一次前端，非常麻烦
效果
前端：
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 结束，感谢阅读！
