前端数据可视化diango rest-framwork + vue

最新推荐文章于 2024-07-25 13:50:26 发布
最新推荐文章于 2024-07-25 13:50:26 发布
阅读量2.5k 收藏 13
点赞数 6
分类专栏： Web 文章标签： python vue.js django 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/by6671715/article/details/105871142
版权

HouseAnalysisWeb

项目地址GitHub

基于joint-spider爬虫数据的Web端数据可视化平台，在线访问

数据源来自项目 Joint-spider

后端: django-restframework

前端: Vue

应用技术

  • Python 后端
    • django-restframework
    • redis
    • mysql
  • Web 前端
    • Vue 全家桶
    • echarts
    • element-ui
  • 百度地图
    • Web服务API
    • vue-baidu-map

环境配置及项目启动

# 环境配置需要 python3.7 redis mysql vue vue-cli3.x
# 
# 项目启动
# 1. 后端服务启动,进入项目\HouseAnalysis\
 	 python manage.py runserver
# 2. 前端项目启动,进入项目目录\HouseAnalysisWeb\
	 npm run dev
# 3. 前端项目打包
	 npm run build-prod
# 4. 访问地址:http://localhost:9527/
# 5. 后端接口地址: http://localhost:8000/
项目持续改进中…

注意事项

  • mysql及redis服务配置均在\HouseAnalysis\HouseAnalysis\settings.py文件中进行配置
  • utils文件夹下文件功能:
    • 插入数据分析结果信息至MySQL:Insert.py
    • 插入基本总信息至Redis:insertRedis.py
    • 插入区划及小区信息至MySQL:com_pro.py
前端页面展示
  1. 房源信息页面

在这里插入图片描述

  1. 房价分析-数据探索分析可视化页面

在这里插入图片描述

  1. 房价分析-各区划详细信息页面

在这里插入图片描述

  1. 区划小区详情

在这里插入图片描述

  1. 小区房源列表详情
    在这里插入图片描述

  2. 搜索房源页面
    在这里插入图片描述

  3. 具体房源详情页面
    在这里插入图片描述

  4. 房屋周边

在这里插入图片描述

  1. 房源热力信息图页面

在这里插入图片描述

项目介绍:

一. 系统功能架构

  1. 后端

在这里插入图片描述

  1. 前端、

在这里插入图片描述

二. 系统实现

1) 后端部分
# 项目依赖
Django==2.1.5
django-cors-headers==2.4.0
django-crispy-forms==1.7.2
django-filter==2.0.0
django-formtools==2.1
django-guardian==1.4.9
django-import-export==1.1.0
django-redis==4.10.0
django-reversion==3.0.2
djangorestframework==3.9.0
djangorestframework-jwt==1.11.0
drf-extensions==0.4.0
PyMySQL==0.9.3
redis==3.0.1
SQLAlchemy==1.3.2

基本流程

  • Django生命周期:

    前端发送请求–>Django的wsgi–>中间件–>路由系统–>视图–>ORM数据库操作–>模板–>返回数据给用户

  • rest framework生命周期：

    前端发送请求–>Django的wsgi–>中间件–>路由系统_执行CBV的as_view()，就是执行内部的dispath方法–>在执行dispath之前，有版本分析 和 渲染器–>在dispath内，对request封装–>版本–>认证–>权限–>限流–>视图–>如果视图用到缓存( request.data or request.query_params )就用到了 解析器–>视图处理数据，用到了序列化(对数据进行序列化或验证) -->视图返回数据可以用到分页

项目文件树：

在这里插入图片描述

  1. 基本接口框架搭建
# 1. 初始化项目
django-admin startproject HouseAnalysis
# 2. 创建相关应用
cd HouseAnalysis
django-admin startapp house
  1. 配置xadmin后台可视化管理系统
# 项目根目录下创建extra_app 文件夹，存放xadmin压缩文件，运行
pip3 install xadmin
  1. 配置基本项目信息
# 1. 配置settings.py 文件 位于\\HouseAnalysis\HouseAnalysis\settings.py
# 找到INSTALLED_APPS,加入配置项
	'corsheaders',
 	'xadmin',
    'crispy_forms',
    'rest_framework',
    'django_filters',
    'house'
# 上述配置向是用于将app注册到项目中
# 2. 增加跨域支持
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)
# 3. 在DATABASES中配置MySQL数据库信息
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'house',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
        'PORT': '3306',
        'OPTIONS':{
            'init_command':"SET sql_mode='STRICT_TRANS_TABLES'"
        },
    }
}
# 4. 配置drf缓存
REST_FRAMEWORK_EXTENSIONS = {
    #10s后失效
    'DEFAULT_CACHE_RESPONSE_TIMEOUT': 10
}
# 5. 配置redis缓存
CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/3",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    }
}

注：本项目为接口开发不涉及template模板及static静态资源，所以不用对这两项进行配置

  1. 配置接口文档

进入\HouseAnalysis\HouseAnalysis\urls.py，配置路由信息：

添加path('xadmin/', xadmin.site.urls),
re_path(r'docs/', include_docs_urls(title="HA")),到urlpatterns列表,xadmin为管理页面路由，

docs为接口文档路由，通过http://localhost:8000/docs/可进行访问，如下图：

在这里插入图片描述

  1. 数据model设计

Django Model设计是Django五项基础核心设计之一（Model设计，URL配置，View编写，Template设计，From使用），也是MVC(MVT)模式中重要的环节。

Model是数据模型，并不是数据库，它描述了数据的构成和他们之间的逻辑关系，在Django中，Model设计实质上就是一个类。每一个模型都映射一张数据库表。

  • 每个模型都是一个 Python 的类，这些类继承 django.db.models.Model；
  • 模型类的每个属性都相当于一个数据库的字段；
  • 利用这些，Django 提供了一个自动生成访问数据库的 API；

进入\HouseAnalysis\house\models.py ,添加Api，Elevator，Floor，Layout，Region，Decortion，Purposes，Orientation，Constructure，Community，CommunityRange模型,用以提供数据进行序列化。

model创建完成后进行数据迁移：

# 进入项目根目录
python manage.py makemigrations
# 同步至数据库
python manage.py migrate
  1. 序列化器设计

在house文件夹下新建文件serializer.py 文件，用来进行数据序列化。

定义序列化器（本质就是一个类），一般包括模型类的字段，有自己的字段类型规则。实现了序列化器后，就可以创建序列化对象以及查询集进行序列化操作，通过序列化对象.data来获取数据（不用自己构造字典，再返回Json数据）

  • 用于序列化时，将模型类对象传入instance参数

  • 用于反序列化时，将要被反序列化的数据传入data参数

  • 除了instance和data参数外，在构造Serializer对象时，还可通过context参数额外添加数据

这里我们使用模型序列化器(ModelSerializer)，ModelSerializer与常规的Serializer相同，但提供了：

  • 基于模型类自动生成一系列字段
  • 基于模型类自动为Serializer生成validators，比如unique_together
  • 包含默认的create()和update()的实现

例如：利用简单代码就可序列化house内容

class HouseSerializer(serializers.ModelSerializer):

    class Meta:
        # 需要序列化的model
        model = Api
        # 需要序列化的字段
        fields = "__all__"

同理，将剩余的model序列化，包括ElevatorSerializer，FloorSerializer，LayoutSerializer，RegionSerializer，RegionS，CommunitySerializer，CommunityRangeSerializer，DecortionSerializer，PurposesSerializer，ConstructureSerializer，OrientationSerializer，其中，RegionS序列化器作为CommunitySerializer和CommunityRangeSerializer的上级序列化器。

  1. 视图View：

视图的功能：说白了就是接收前端请求，进行数据处理

（这里的处理包括：如果前端是GET请求，则构造查询集，将结果返回，这个过程为序列化；如果前端是POST请求，假如要对数据库进行改动，则需要拿到前端发来的数据，进行校验，将数据写入数据库，这个过程称为反序列化）

最原始的视图可以实现这样的逻辑处理，但是针对不同的请求，需要在类视图中定义多个方法实现各自的处理，这样是可以解决问题，但是存在一个缺陷，那就是每个函数中一般的逻辑都差不多：读请求，从数据库拿数据，写东西到数据库，返回结果给前端。这样就会产生大量的重复代码。

在开发REST API的视图中，虽然每个视图具体操作的数据不同，但增、删、改、查的实现流程基本套路化，所以这部分代码也是可以复用简化编写的：

增：校验请求数据 -> 执行反序列化过程 -> 保存数据库 -> 将保存的对象序列化并返回

删：判断要删除的数据是否存在 -> 执行数据库删除

改：判断要修改的数据是否存在 -> 校验请求的数据 -> 执行反序列化过程 -> 保存数据库 -> 将保存的对象序列化并返回

查：查询数据库 -> 将数据序列化并返回

视图编写在views.py 文件中，这里我们使用类识图的方式进行开发。

  • 对于GET请求，我们需要返回一个列表，例如对于请求为：http://127.0.0.1/api/v1/allhouse，我们需要将所有房源信息的序列化结果返回暴露出去。
  • 对于GET/:ID请求，我们需要返回一个对用结果，例如对于请求为：http://127.0.0.1/api/v1/allhouse/1，我们需要将房源id(此时的id可配置为指定需求参数)为1的序列化结果返回暴露出去。
  • 对于POST请求，我们需要新建一条信息，例如对于post请求参数为：{id:xxx,values:xxx...}，我们需要当前信息做检验，合法后将当前数据添加到数据库中。
  • 对于PATCH请求：更新某个指定房源的信息。
  • 对于DELETE请求：删除某个房源信息。

例：

# CacheResponseMixin: 缓存，内存级别
# ListModelMixin处理GET（all）请求
# RetrieveModelMixin处理（id）请求
# 基础类GenericViewSet，提供分页，过滤，排序等功能
class HouseListViewSet(CacheResponseMixin, mixins.ListModelMixin, mixins.RetrieveModelMixin, GenericViewSet):
    queryset = Api.objects.all()
    # 房源序列化
    serializer_class = HouseSerializer
    # 房源分页
    pagination_class = HousePagination
    # 自定义排序，过滤类
    filter_backends = (DjangoFilterBackend, filters.SearchFilter, filters.OrderingFilter)
    # 过滤信息字段
    filter_fields = ('price',)
    # 搜搜字段
    search_fields = ('title', 'region', 'community_name')
    # 排序字段
    ordering_fields = ('price', 'unit_price','construction_area')
	
    # 重写retrieve方法，实现获取单个序列化对象信息
    def retrieve(self, request, *args, **kwargs):
        instance = self.get_object()
        serializer = self.get_serializer(instance)
        return Response(serializer.data)

# 分页配置项
class HousePagination(PageNumberPagination):
    page_size = 30
    page_size_query_param = 'page_size'
    page_query_param = "page"
    max_page_size = 100

其他视图类似，包括：ElevaorViewSet，FloorViewSet，LayoutViewSet，RegionViewSet，CommunityViewSet，CommunityPagination，AllCommunityViewSet，CommunityRangeViewSet，DecortionViewSet，PurposesViewSet，ConstructureViewSet，OrientationViewSet

其中对于CommunityViewSet类，我们需要根据具体的community_id来返回其所有信息，这时就不能用RetrieveModelMixin类的retrieve方法了，需要重写get_queryset方法，返回特定的model。

    def get_queryset(self):
        if self.request.GET['rid'] == '0' :
            # 获取所有
            return  Community.objects.all()
        else:
            return Community.objects.filter(region=self.request.GET['rid'])

其他参数

  • ?limit=10：指定返回记录的数量
  • ?offset=10：指定返回记录的开始位置。
  • ?page=2&per_page=100：指定第几页，以及每页的记录数。
  • ?sort=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。
  • ?animal_type_id=1：指定筛选条件
  1. 路由配置

使用rest_framework的DefaultRouter进行路由注册：

from rest_framework.routers import DefaultRouter
router = DefaultRouter()
router.register(r'v1/api/all_house', HouseListViewSet, base_name="house")
......

将router加入到urlpatterns中：

path('', include(router.urls)),

这时当有请求访问到存在的路由后，路由会将请求转发到视图类，在视图类中将请求处理后，返回序列化结果，即后端暴露的接口数据。

  1. 关于接口数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JmH9EULX-1588257851195)(imgs/接口数据.png)]

数据描述

  • count : 总数据量
  • next： 下一页url
  • previous： 上一页url
  • results: 结果集

HTTP状态码：

  • 200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
  • 201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。
  • 202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
  • 204 NO CONTENT - [DELETE]：用户删除数据成功。
  • 400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
  • 401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）。
  • 403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
  • 404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
  • 406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
  • 410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
  • 422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
  • 500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。
  1. 关于具体数据处理-为了更方便序列化
  • 将总体信息数据存放到Redis数据库中，减少后端处理请求是进行大量数据操作是运算量
# 将所有房源数，小区数，总体单价价均价，总体总价均价，存入redis
def insertIndexInfo():
    all_number = house.count()
    com_number = Api.objects.values('community_name').distinct().count()
    mean_price = format(house.aggregate(Avg('price'))['price__avg'],'.3f')
    mean_unit_price = format(house.aggregate(Avg('unit_price'))['unit_price__avg'],'.3f')
    data = {
        "all_number": all_number,
        "com_number": com_number,
        "mean_price": mean_price,
        "mean_unit_price": mean_unit_price
    }

    redis_conn.mset(data)
  • 将处理好的数据存入MySQL，包括(电梯，装修情况等信息)
# 1. 定义专门数据库操作类InsertIntoMysql
class InsertIntoMysql():

    # 属性中定义sql语句获取数据
    def __init__(self):
        self.elevator_sql = 'select unit_price, price, elevator from house_api'
        # ......
	
    # 定义数据插入方法
    def insertElevator(self):
        index, values, price_mean, unit_price_mean = multiple(self.elevator_sql, engine, 'elevator')
        for i in range(len(index)):
            elevator = Elevator()
            elevator.version = 'v1'
            elevator.title = '电梯分布情况'
            elevator.has_ele = index[i]
            elevator.el_num = values[i]
            elevator.mean_price = price_mean[i]
            elevator.mean_unit_price = unit_price_mean[i]
            elevator.save()
     # 其他剩余数据插入方法
     # ......
# 2. 数据处理模块，包括单因子和对因子处理
#	 利用数据处理模块pandas
def single(sql,engine,feature):
    """
    :param sql: sql语句
    :param engine: mysql引擎
    :param feature: 数据特征
    :return: 特征，数量
    """
    df_sql = sql
    df = pd.read_sql(df_sql, engine)
    df[feature] = df[feature].astype(str)
    if feature=='floor':
        df[df[feature]=='暂无数据'] = '18'
        df[feature] = df[feature].apply(lambda x: re.findall('\d+',x)[0])
    feature_res = df[feature].value_counts()
    index = feature_res.index
    values = feature_res.values
    return index,values

def multiple(sql,engine,feature):
    """
    :param sql: sql语句
    :param engine: mysql引擎
    :param feature: 数据特征
    :return: 特征，数量，总价均价，单价均价
    """
    df_sql = sql
    df = pd.read_sql(df_sql, engine)
    df[feature] = df[feature].astype(str)
    if feature == 'region':
        df[feature] = df[feature].apply(lambda x:re.sub(r"\[|\]|'",'',x).split(',')[0])
    feature_res = df[feature].value_counts()
    index = feature_res.index
    values = feature_res.values
    price_mean = []
    unit_price_mean = []
    max_unit_price = []
    min_unit_price = []
    for inx,val in zip(index,values):
        price_mean.append(format(df[df[feature]==inx]['price'].astype(float).mean(),'.3f'))
        unit_price_mean.append(format(df[df[feature]==inx]['unit_price'].astype(float).mean(),'.3f'))
        max_unit_price.append(format(df[df[feature]==inx]['unit_price'].astype(float).max(),'.3f'))
        min_unit_price.append(format(df[df[feature]==inx]['unit_price'].astype(float).min(),'.3f'))
    return index, values, price_mean, unit_price_mean, max_unit_price, min_unit_price
2) 前端部分

​ 前端使用基本框架Vue搭建，基于vue-admin-template开发。前端主要业务用于图表展示，地图信息，主要用于做成都二手房房价数据及相关信息可视化，包括总体信息展示，各项特征-如房屋装修情况等的图表信息可视化，房源搜索，基本房源信息可视化，地图展示等功能。

项目说明

  • 关于地图模块，这里我们采用的是百度地图，使用之前，需要申请百度地图ak，用于我们的WebAPI服务
  • 地图库使用开源vue-baidu-map库，并采取按需加载的方式，即在需要用到的页面才进行模块导入。
  • 项目UI使用element-ui组件库，采用全局加载模式。
  • 图表库使用echarts.js，采用按需加载的方式使用模块。

前端项目文件树：

在这里插入图片描述

  • src目录为项目核心代码文件，所欲自定义工具，接口文件，页面文件都在这里面编写。
  • test目录是项目测试文件，使用jest进行项目测试。
  • public目录为公共资源文件。
  • dist目录为项目开发完成后进行打包后自动生成的文件。

具体流程

  1. UI组件的使用
# 安装到项目
npm install -S element-ui

# 全局加载: 在main.js中
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // i18n
Vue.use(ElementUI, { locale })

# 这样我们据可以在vue文件中使用UI组件，如: 按钮组件<Button />
  1. 地图组件使用
# 安装到项目
npm install -S vue-baidu-map

# 局部加载: 在任意vue文件中
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
# 地图标注组件
import { BmMarker } from 'vue-baidu-map'

# 使用，例如:
      <baidu-map  ref="baidumap"
                  class="bm-view"
                  style="width:100%;height:93vh"
                  ak="YOUR AK"
                  :center="{lng: 104.07, lat: 30.67}"
                  :scroll-wheel-zoom="true"
                  :zoom="16">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        <bm-marker v-for="spoi in searchResults"-->
                   <!--:position="{lng: spoi.lng, lat: spoi.lat}"-->
                   <!--:title="spoi.community_name">-->
        </bm-marker>
      </baidu-map>
  1. 定义请求拦截-用于截获错误请求及超时请求等。

在src目录下新建文件夹utils，用于存放我们自定义的工具文件，新建requests.js，重新封装axios方法，满足我们请求接口时的操作。此文件将暴露一个用作异步请求的对象，做为更高级的接口访问方法，在接口文件设计中将使用此方法。

  • 初始化
# 新建一个servie对象
const service = axios.create({
  // 项目基本配置文件中定义的VUE_APP_BASE_API，开发和发布环境各部相同，在.env.devolopment和.env.product文件中进行配置
  baseURL: process.env.VUE_APP_BASE_API,
  // 直接写死的url，无论环境如何都不会改变
  // baseURL: 'http://127.0.0.1:8000/v1/api',
  timeout: 8000 // 最大请求时间
})
  • 请求拦截-发送请求时
service.interceptors.request.use(config => {
  // 请求方法为POST时，配置请求头
  config.method === 'post'
    ? config.data = qs.stringify({ ...config.data })
    : config.params = { ...config.params }
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'

  return config
}, error => {
  // 错误时提示信息
  Message({
    message: error,
    type: 'error',
    duration: 3 * 1000
  })
  Promise.reject(error)
})
  • 响应拦截-接收数据时
service.interceptors.response.use(
  response => {
    if (response.statusText === 'OK') {
      // 正确响应时，直接返回数据
      return response.data
    } else {
      Notification({
        title: '错误',
        message: '访问api错误', // TODO 后端拦截错误请求
        type: 'error',
        duration: 3 * 1000
      })
    }
  },
  // 错误处理
  error => {
    let dtext = JSON.parse(JSON.stringify(error))
    try {
      if(dtext.response.status === 404) {
        Notification({
          type: 'error',
          title: '出问题404',
          message: '访问api错误或服务器忙',
          duration: 3 * 1000
        })
      }
    } catch (err) {
      Notification({
        title: '错误',
        message: '请求超时,请稍后再试或刷新页面',
        type: 'error',
        duration: 3 * 1000
      })
    }


    return Promise.reject(error)
  }
)
  • 最后一定要暴露service对象
export default service
  1. 前端路由配置

使用vue-router实现路由功能，在新建router.js，进行路由项配置。

// 定义路由列表
export const constantRoutes = [
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      // 采用路由懒加载的方式
      component: () => import('@/views/dashboard/index'),
      meta: { title: '房源信息', icon: 'house' }
    }]
  },
  // ......
  ]
// 构造路由对象
const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

// 在main.js 中引入并挂载
import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
  1. 接口函数编写

接口api.js文件中定义了所有与项目有关的接口访问请求，并封装成函数暴露出去，供组件使用。

// 例如获取区划信息接口
export function getRegionInfo(id,params) {
  return request({
    url: '/region/'+id,
    method: 'get',
    params
  })
}

其中request为上面封装好的接口访问对象，使用前需引入，组件中使用接口的时候，按需导入，例如：

// charts.js是接口函数文件
import { getRegionInfo } from '@/api/charts'

// 使用
// 第一种方式，由于它本来就是一个promise对象，所以直接在then中获取响应
getRegionInfo(1).then((res,err)=>{
    // 相关操作
})
// 第二种方式，使用async await方式,包含await的方法中需要加上async 作为方法前缀
let res = await getRegionInfo(1)
  1. 项目页面编写
    在这里插入图片描述
  • dashbord为总体信息展示面班，也是页面入口
  • heatmap为热力图页面
  • house为房源搜索和基本信息展示页面
  • map为房源地图分布图
  • multiple为区划信息页面
  • single为房源一系列数据可视化图表页
  • word为词云页
码侯烧酒
关注
  • 6
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的数据的可视化
fvcvv的博客
12-08 2195
Vue 的数据可视化实现
vue+django restful framework 电商项目(二)---数据表的设计
FourLeafCloverLLLS的博客
01-05 554
       这一节开始我们来开始做这个项目, 至于项目的新建还有文件结构, 我就不做详细介绍了,这些步骤在这个博客都有:http://www.cnblogs.com/derek1184405959/p/8733578.html  我呢,从来就不喜欢照搬别人的做, 反而喜欢多问几个为什么, 为什么要这么做? 因为我在之前遇到学习上的一个问题, 就是我看着老师讲的视频来就很会, 但是一旦脱离老师的视...
前端数据可视化适配方案汇总
最新发布
DZQ1223的博客
07-25 1467
在日常开发过程中，我们经常会遇到大屏可视化这种需求，而选用技术方案的不同则会呈现出不同的效果。方案实现方式优点缺点vw vh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦scale1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放1.代码量少，适配简单 2.一次处理后不需要在各个图表中再去单独适配。
一个基于Vue的数据可视化web应用
08-12
一个基于Vue的数据可视化web应用
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
django rest_framework实战，前端原生js
大龄python业余爱好者锅大虾
10-07 300
本人是python业余选手，公司的系统是我业余时间开发的，一直在维护升级。 前段时间更新了一个业务人员下单的功能 上方的是本地开发的页面和数据，实际业务中，订单会很多，每天会增加几十条订单记录，那订单的筛选必不可少，而且是多条件查询，这是刚需。 先对需求做一个整理： 多条件交叉查询 异步请求 程序采用的是django 2.1.8，跑在本地的windows sever2008上，使用apache2.4部署，前端使用的是django前端模板语言，那么以下几点是可以明确的 django rest_fra
EZInfo：信息博客（Vue CLI + Django RESTful + Mysql + ElementUI + Echarts + PeerJS）
02-10
前端：Vue + ElementUI + Axios + Echarts + PeerJS 后端：Django RESTful + Mysql +翻译 跑 cd前端> npm install npm运行构建将backend / temp_static文件夹中的文件移动到backend / static文件夹workon env_...
基于django+ vue快速开发平台.zip
03-29
1. Django REST Framework：用于构建RESTful API，方便前端与后端的数据交换。 2. Vue Router：Vue的官方路由库，用于管理页面跳转和状态。 3. Vuex：Vue的状态管理库，集中管理应用的状态，保证数据的一致性。 4. ...
django-gestao-rh:Django进阶课程开发的HR管理应用
05-30
5. **JavaScript**：在前端部分，项目可能使用了JavaScript来增强用户体验，如动态表单验证、页面交互和数据可视化。可能使用了流行的库或框架，如jQuery、React或Vue.js，来处理客户端的逻辑。 6. **项目结构**：`...
DRF_Vue3_ElementPlus_TypeScript部署搭建
BIT_1120161757的博客
03-24 2165
后端开发环境 后端开发环境为： Win 10（64位） Python 3.7.2 Django 3.1.3 djangorestframework 3.12.2 安装Django 在虚拟环境下，输入命令 pip install django==3.1.3： (venv) E:\drf> pip install django==3.1.3 Collecting django==3.1.3 Using cached ... ... Successfully installed djan
python爬虫技术对就业网站进行爬取，将爬取到的数据进行可视化显示到前端中
04-12
前端需要与Django提供的API接口进行交互，获取Python爬虫爬取的数据，并通过数据可视化库（如ECharts、D3.js等）将数据以图表的形式展示出来，如饼图表示职位分类占比，折线图显示薪资趋势等。 总结来说，这个项目...
django3.0+rest framework + Vue 生鲜超市项目-后端
04-27
django3.0+rest framework + Vue 生鲜超市学习素材，学习交流好素材，亲测正常
vue结合restframework
laoli815的博客
02-25 963
restframework安装MySQL单机和集群自动化
django rest_framework入门
lmz_lmz的博客
07-10 327
1.rest_framework的作用1)可以对orm和非orm资源序列化2)支持restful风格编程(POST,PUT,PATCH)3)使用类视图编写API的view，而不是函数视图，类视图更符合代码的设计模式。4)用户认证和权限控制2.使用示例功能如下：管理员查看，编辑用户，组信息1)新建名为tutorial的Project，创建一个名为quickstart的APP创建表，创建超级管理员dj...
django之rest_framework认证组件
上善若水
12-13 171
如果需要全局使用 -在setting中配置: REST_FRAMEWORK={ 'DEFAULT_AUTHENTICATION_CLASSES':['app01.MyAuth.LoginAuth',] } -局部禁用: -在视图类中加一行: -authentication_classes = [] 1,配置登录路由 url...
Django DRF框架（八）
分享我的点点滴滴，在成长路上与你同行！
07-10 723
一、Web 应用模式 有两种应用模式： 前后端不分离 前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。 2. 前后端分离 在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。 在前后端分离的应
基于restful页面数据交互（前端页面访问处理）
lwj_07的博客
07-26 1057
做的功能如下所示。
【Django restframework】接口开发流程及接口功能组成
在红尘中争渡
09-21 622
Django restframework ModelSerializer+GenericAPIView接口开发流程、接口功能成分及关系
基于vue-admin-template+Django+Elementui权限管理系统
多年互联网一线运维开发经验，为多家企业独立开发过相关运维管理平台，负责过近千台服务器运维管理工作，对运维及运维开发岗位有深入理解。
10-20 899
基于vue-admin-template+django+drf+elementui开发的权限管理系统，涵盖知识面较广，一步一步带你如何开发
Django-Rest-Framework权限管理源码解析与实践总结
"本文主要对Django-Rest-Framework的权限管理系统进行了简要分析和总结，探讨了如何在Django应用中实现权限控制，重点介绍了`authentication_classes`和`permission_classes`这两个关键概念。" Django-Rest-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值