最近写了一个小项目,用django+vue+redis实现的echarts图表。主要功能是利用redis丰富的数据类型和超高读写性能来存储数据,这样可以快速响应用户需求并支撑海量的数据和流量。左边提供了一个数据输入框(可以收起),右边提供了2个不同形式的图表来展示redis中的数据。页面载入时自动显示reids中的数据,左边参数提交数据之后立马刷新右边的图表。
![689297e139f465f6d32d55972fc8460c.gif](https://i-blog.csdnimg.cn/blog_migrate/a510261596df5deb230afa03d0284980.gif)
Vue前端实现
前端主要通过Vue脚手架来实现,利用echart组件来定义图表,具体实现可以参考文章【Vue实战090:Vue使用ECharts图表详解】。参数提交和图表都是以组件的形式构建的,利用vuex在组件之间共享数据和状态。利用axios向django发送请求获取redis数据及数据写入,并实时监听数据的变化及时刷新图表。
![59b86df74d2f166f44701963fc5d3266.png](https://i-blog.csdnimg.cn/blog_migrate/fcafd07c9cdbf2367cac7007144899f2.jpeg)
Redis使用
redis还是挺好用的东西,操作简单易上手。存储超快且支撑海量的数据,非常适合用于缓存和消息列队。Windows安装使用可以参文章【Redis实战002:Windows上安装配置Redis】,Django中使用redis可以参考文章:【Django实战016:django中使用redis详解】。Redis这块只要将服务安装配置好开启即可,基本上没有太多的操作。
![0617ee4a327d94a1554e1fbf3bf1fcb7.png](https://i-blog.csdnimg.cn/blog_migrate/19d28b46879ac01a3878082b238d6e54.jpeg)
Django后端交互
后端通过Django来实现,负责与redis交互及数据处理。配置跨域及redis缓存允许前端访问,功能实现了数据的获取和数据的写入。这里我们主要利用到了django-redis组件来实现和redis的交互,这里需要注意的是redis存储的是二进制数据(byte类型),json本身不支持二进制数据无法直接传递byte类型。所以拿到redis数据之后需要对二进制数据进行转义,以便可以将其放入JSON中的字符串元素中。
![e66962782767e813d1e42b5d747bc636.png](https://i-blog.csdnimg.cn/blog_migrate/38e5b738c7533e68a865c79449f29a60.jpeg)
总结:
Redis响应的确比想象的快很多,特别是在图表这种数据量比较大的地方使用效果比较显著。就是数据要做适当的处理才能抛给前端,总体来说效果不错!以上内容是小编给大家分享的【Django实战017:django+vue+redis项目】。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Django实战技巧可以参考以下专栏: