当前位置: 首页 > news >正文

Django和ECharts异步请求示例

前提条件

创建django项目,安装配置过程这里就不讲述了。

后端url

http://127.0.0.1:8000/echarts/demo/

view视图函数

from django.http import HttpResponse
import jsondef EchartsDemo(request):data = {}categories = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]values = [5, 20, 36, 10, 10, 20]data['categories'] = categoriesdata['values'] = valuesreturn HttpResponse(json.dumps(data), content_type="application/json")

前端页面

需要分别引入jquery、echarts,顺序jquery在前

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>echarts示例</title>		<script src="jquery.min.js"></script><script type = "text/javascript" src = "echarts.min.js" ></script>		</head><body>				<div id="main" style="width: 800px;height:600px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));$.get('api/echarts/demo/').done(function(data) {// data 的结构:// {//     categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],//     values: [5, 20, 36, 10, 10, 20]// }myChart.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {},xAxis: {data: data.categories},yAxis: {},series: [{name: '销量',type: 'bar',data: data.values}]});});</script></body>
</html>

跨域问题

html浏览器不支持跨域请求,这里采用nginx。

server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html;index  index.html index.htm;}location /api {rewrite  ^.+api/?(.*)$ /$1 break;proxy_pass  http://127.0.0.1:8000;}}

演示效果:

相关文章:

Django和ECharts异步请求示例

前提条件 创建django项目&#xff0c;安装配置过程这里就不讲述了。 后端url http://127.0.0.1:8000/echarts/demo/ view视图函数 from django.http import HttpResponse import jsondef EchartsDemo(request):data {}categories ["衬衫","羊毛衫",&…...

Java序列化、反序列化-为什么要使用序列化?Serializable接口的作用?

什么是序列化和反序列化&#xff1f; 把对象转换成字节序列把字节序列恢复成对象 结合OSI七层协议模型&#xff0c;序列化和反序列化是在那一层做的&#xff1f; 在OSI七层模型中&#xff0c;序列化工作的层级是表示层。这一层的主要功能包括把应用层的对象转换成一段连续的二进…...

连锁零售企业如何优化网络性能?

在传统的WAN网络中&#xff0c;分支机构通常通过专线或者MPLS连接到总部或数据中心&#xff0c;但这种连接受制于地理位置。而SD-WAN&#xff08;Software-Defined Wide Area Network&#xff09;这种创新的网络架构&#xff0c;它通过软件定义和虚拟化技术&#xff0c;将分支机…...

[已解决]HttpMessageNotReadableException: JSON parse error: Unexpected character:解析JSON时出现异常的问题分析与解决方案

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…...

华为OD机试 - 找数字(Java JS Python C)

题目描述 小扇和小船今天又玩起来了数字游戏, 小船给小扇一个正整数 n(1 ≤ n ≤ 1e9),小扇需要找到一个比 n 大的数字 m,使得 m 和 n 对应的二进制中 1 的个数要相同,如: 4对应二进制100 8对应二进制1000 其中1的个数都为1个 现在求 m 的最小值。 输入描述 输入一个…...

ElasticSearch - networking配置global

版本8.11 单机部署了一个节点 在elasticsearch.yml中 配置了network.host: 8.8.8.8(之前为127.0.0.1) 但启动服务失败 报错信息为: BindTransportException: Failed to bind to 8.8.8.8:[9300-9399] 为啥要配置8.8.8.8 是因为参考的官方说明 Networking | Elasticsearch Gu…...

GPT4停止订阅付费了怎么办? 怎么升级ChatGPT plus?提供解决方案

11月中旬日OpenAI 暂时关闭所有的升级入口之后&#xff0c;很多小伙伴就真的在排队等待哦。其实有方法可以绕开排队&#xff0c;直接付费订阅升级GPT的。赶紧用起来立马“插队”成功&#xff01;亲测~~~ 一、登录ChatGPT账号 1、没有账号可以直接注册一个&#xff0c;流程超级…...

MySQL数据库,视图、存储过程与存储函数

数据库对象&#xff1a; 常见的数据库对象&#xff1a; 视图&#xff1a; 视图是一种虚拟表&#xff0c;本身是不具有数据的占用很少的内存空间。 视图建立在已有表的基础上&#xff0c;视图赖以建立的这些表称为基表。 视图的创建和删除只影响视图本身&#xff0c;不影响对…...

【Pytorch】学习记录分享3——PyTorch 自动微分与线性回归

【【Pytorch】学习记录分享3——PyTorch 自动微分与线性回归 1. autograd 包&#xff0c;自动微分2. 线性模型回归演示3. GPU进行模型训练 小结&#xff1a;只需要将前向传播设置好&#xff0c;调用反向传播接口&#xff0c;即可实现反向传播的链式求导 1. autograd 包&#x…...

Android Studio实现俄罗斯方块

文章目录 一、项目概述二、开发环境三、详细设计3.1 CacheUtils类3.2 BlockAdapter类3.3 CommonAdapter类3.4 SelectActivity3.5 MainActivity 四、运行演示五、项目总结 一、项目概述 俄罗斯方块是一种经典的电子游戏&#xff0c;最早由俄罗斯人Alexey Pajitnov在1984年创建。…...

【Hive】——DDL(DATABASE)

1 概述 2 创建数据库 create database if not exists test_database comment "this is my first db" with dbproperties (createdByAllen);3 描述数据库信息 describe 可以简写为desc extended 可以展示更多信息 describe database test_database; describe databa…...

【华为OD题库-092】单词加密-java

题目 输入一个英文句子&#xff0c;句子中包含若干个单词&#xff0c;每个单词间有一个空格需要将句子中的每个单词按照要求加密输出。要求: 1)单词中包括元音字符(‘aeuio’、‘AEUIO’&#xff0c;大小写都算)&#xff0c;则将元音字符替换成’*) 2)单词中不包括元音字符&…...

构建一个简单的 npm 验证项目

构建一个简单的 npm 验证项目 0. 背景1. 构建过程1-1. 创建项目并初始化1-2. 安装 mjs 支持的 package1-3. 在 package.json 中添加 mjs 脚本1-4. 创建 index.mjs 文件1-5. 执行脚本 2. (Optional)环境变量配置 0. 背景 工作上需要验证一下 npm 程序&#xff0c;所以需要构建一…...

利用vue-okr-tree实现飞书OKR对齐视图

vue-okr-tree-demo 因开发需求需要做一个类似飞书OKR对齐视图的功能&#xff0c;参考了两位大神的代码&#xff1a; 开源组件vue-okr-tree作者博客地址&#xff1a;http://t.csdnimg.cn/5gNfd 对组件二次封装的作者博客地址&#xff1a;http://t.csdnimg.cn/Tjaf0 开源组件v…...

持续集成交付CICD:CentOS 7 安装SaltStack

目录 一、理论 1.SaltStack 二、实验 1.主机一安装master 2.主机二安装第一台minion 3.主机三安装第二台minion 4.测试SaltStack 三、问题 1.CentOS 8 如何安装SaltStack 一、理论 1.SaltStack &#xff08;1&#xff09;概念 SaltStack是基于python开发的一套C/S自…...

vscode 环境配置

必备插件 配置调试 {// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid830387"version": "0.2.0","confi…...

pytorch文本分类(二):引入pytorch处理文本数据

pytorch文本数据处理 目录 pytorch文本数据处理1. Pytorch背景2. 数据分割3. 数据加载Dataset代码分析字典的用途代码修改的目的 Dataloader 4. 练习 原学习任务链接 相关数据链接&#xff1a;https://pan.baidu.com/s/1iwE3LdRv3uAkGGI2fF9BjA?pwdro0v 提取码&#xff1a;ro…...

Centos硬盘操作合集

一、硬盘命令说明 lsblk 列出系统上的所有磁盘列表 查看磁盘列表 参数意义 blkid 列出硬盘UUID [rootzs ~]# blkid /dev/sda1: UUID"77dcd110-dad6-45b8-97d4-fa592dc56d07" TYPE"xfs" /dev/sda2: UUID"oDT0oD-LCIJ-Xh7r-lBfd-axLD-DRiN-Twa…...

三大循环语句

goto 我们看代码去感受goto的循环&#xff0c;那么goto循环最经常搭配的就是loop&#xff0c;那么就像如下代码 这个代码中loop&#xff1a;就是个标志&#xff0c;然后程序正常向下运行&#xff0c;goto loop&#xff1b;就会让她回到loop&#xff0c;然后在运行到goto loop…...

Mybatis详解

MyBatis是什么 MyBatis是一个持久层框架&#xff0c;用于简化数据库操作的开发。它通过将SQL语句和Java方法进行映射&#xff0c;实现了数据库操作的解耦和简化。以下是MyBatis的优点和缺点&#xff1a; 优点&#xff1a; 1. 灵活性&#xff1a;MyBatis允许开发人员编写原生的…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

结构化文件管理实战:实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...

【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验

2024年初&#xff0c;人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目&#xff08;一款融合大型语言模型能力的云端AI编程IDE&#xff09;时&#xff0c;技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力&#xff0c;TRAE在WayToAGI等…...

新版NANO下载烧录过程

一、序言 搭建 Jetson 系列产品烧录系统的环境需要在电脑主机上安装 Ubuntu 系统。此处使用 18.04 LTS。 二、环境搭建 1、安装库 $ sudo apt-get install qemu-user-static$ sudo apt-get install python 搭建环境的过程需要这个应用库来将某些 NVIDIA 软件组件安装到 Je…...

Linux信号保存与处理机制详解

Linux信号的保存与处理涉及多个关键机制&#xff0c;以下是详细的总结&#xff1a; 1. 信号的保存 进程描述符&#xff08;task_struct&#xff09;&#xff1a;每个进程的PCB中包含信号相关信息。 pending信号集&#xff1a;记录已到达但未处理的信号&#xff08;未决信号&a…...