前后端配置动态的数据字段标签(django_vue)

简介: 前后端配置动态的数据字段标签(django_vue)

背景

因为网站的挑战榜模块之前都是前端写的静态数据,适应性不强,我每次加一个标签需要重新发布一次前端,非常麻烦

效果

前端:

django后台动态配置:

接口实现

django介绍

Django是一个开源的Web应用程序框架,基于Python编程语言。它遵循了MVC(Model-View-Controller)的设计模式和DRY(Don’t Repeat Yourself)的开发原则,提供了一套完整的Web应用程序开发所需的组件,包括模型、视图、模板、表单、数据库、URL路由、管理员界面等。Django的目标是让开发人员可以快速地构建高质量的Web应用程序,同时还提供了很好的可扩展性、安全性和可维护性。Django的主要特点有:

  1. 强调代码复用和“松散耦合”。
  2. 自带ORM(对象关系映射),方便与数据库交互。
  3. 自带Admin管理系统。
  4. 自带表单和模板系统,使得开发过程更加高效。
  5. 提供了完善的URL路由解决方案,方便管理不同的URL请求。
  6. 支持多种缓存机制,提高了应用程序的性能。
  7. 提供了工具和插件,方便开发人员进行开发和测试。

总体来说,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

结束,感谢阅读!


目录
相关文章
|
1月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
89 2
|
7天前
|
SQL 关系型数据库 MySQL
基于Hive的天气情况大数据分析系统(通过hive进行大数据分析将分析的数据通过sqoop导入到mysql,通过Django基于mysql的数据做可视化)
基于Hive的天气情况大数据分析系统(通过hive进行大数据分析将分析的数据通过sqoop导入到mysql,通过Django基于mysql的数据做可视化)
|
8天前
|
缓存 运维 Serverless
Serverless 应用引擎产品使用合集之基于django应用模板创建的FC,如何配置数据库
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
11天前
|
API 数据安全/隐私保护 网络架构
在django3中配置应用的权限
【6月更文挑战第9天】该文档介绍了Django REST Framework的权限管理。总结来说,本文介绍如何设置严格项目权限和如何通过自定义权限控制对特定资源的访问。
29 10
在django3中配置应用的权限
|
12天前
|
数据采集 存储 数据库
优化 Django 模型设计:解决重复爬虫任务和商品数据
在开发数据采集(爬虫)应用时,我们常常面临这样一个问题:不同用户提交了相同的采集任务。为了避免在数据库中存储重复的 URL 和商品数据,我们需要优化模型设计。本文将介绍如何设计 Django 模型,以解决这个问题,并确保数据的一致性和完整性。
|
13天前
|
Python
如何处理Django项目中表数据的排序问题
如何处理Django项目中表数据的排序问题
|
13天前
|
数据安全/隐私保护 Python
Django调用SECRET_KEY对数据进行加密
Django调用SECRET_KEY对数据进行加密
|
13天前
|
前端开发 JavaScript 关系型数据库
三. Django项目之电商购物商城 -- 校验用户名 , 数据入库
三. Django项目之电商购物商城 -- 校验用户名 , 数据入库
|
16天前
|
JSON 测试技术 API
迁移django3配置新应用
【6月更文挑战第4天】本文介绍创建应用的具体步骤。首先创建名为`posts`的新Django应用,实现blog API功能。并说明如何编写测试用例,并执行迁移。建议为API版本控制,如v1和v2,以便逐步升级。
26 1
|
18天前
|
Python 数据库 Linux
使用django创建和配置应用
【6月更文挑战第2天】本文介绍在Linux环境下,安装Python3和Django,创建名为`library`的项目。创建超级用户并注册应用到`admin.py`。配置URL路由,创建模板文件`book_list.html`展示书籍列表。访问查看结果,确保已更新`ALLOWED_HOSTS`。如果遇到问题,如admin访问错误,可运行管理 shell 调整站点设置。
22 0