从零开始搭建django前后端分离项目 系列一(技术选型)
前言
最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析、报表数据查询、GIS地理化展示、任务监控管理。由于页面功能较复杂,所以采用前后端分离方式开发。前端采用webpack+vue+vue-router+axios技术栈,后端用django进行开发。从搭建到上线,整个项目前前后后花了差不多一个月时间,中途也遇到一些问题,不过还好都解决了。由于是个人项目,所以我打算把源码贡献出来大家一起讨论学习。
源代码
后端:https://github.com/dotafeiying/myproject
前端:https://github.com/dotafeiying/appfont
关于技术选型
由于页面交互较多,所以整个项目采用前后端分离方式开发。使用Vue.js作为前端框架,代替Django本身较为孱弱的模板引擎,Django则作为服务端提供api接口,使得前后端实现完全分离,更适合单页应用的开发构建。
使用框架
前端:
webpack + vue + axios + element-ui + iview + zui + jquery
后端:
django + celery
数据库:
mysql + redis
数据分析:
impala + pandas + sklearn
项目目录
前端

后端

实现的功能
1、文件上传预览
2、异步任务执行
3、websocket实现实时进度
4、表格分页
5、excel文件动态导出
6、pandas数据分析
7、impala大数据实时查询分析
8、KMeans、DBSCAN聚类分析
9、距离计算算法优化
10、GIS地图展示
11、websocket实现实时进度和动态渲染
12、百度地图批量经纬度转换(服务端实现)
13、历史数据流式查询,解决数据量过大问题
14、树组件懒加载,改善用户体验
15、excel文件流式导出
16、celery异步任务监控管理,websocket实时监控
17、django后台管理
18、项目部署nginx+uwsgi+django+centos7.5
效果图:
文件上传前进行数据核查和预览

异步任务执行和实时进度

表格分页

海量点聚类分析和GIS展示

历史数据流式查询和树节点懒加载

异步任务实时监控和管理

从零开始搭建django前后端分离项目 系列一(技术选型)的更多相关文章
- 从零开始搭建django前后端分离项目 系列四(实战之实时进度)
本项目实现了任务执行的实时进度查询 实现方式 前端websocket + 后端websocket + 后端redis订阅/发布 实现原理 任务执行后,假设用变量num标记任务执行的进度,然后将num发 ...
- 从零开始搭建django前后端分离项目 系列三(实战之异步任务执行)
前面已经将项目环境搭建好了,下面进入实战环节.这里挑选项目中涉及到的几个重要的功能模块进行讲解. celery执行异步任务和任务管理 Celery 是一个专注于实时处理和任务调度的分布式任务队列.由于 ...
- 从零开始搭建django前后端分离项目 系列二(项目搭建)
在开始项目之前,假设你已了解以下知识:webpack配置.vue.js.django.这里不会教你webpack的基本配置.热更新是什么,也不会告诉你如何开始一个django项目,有需求的请百度,相关 ...
- 从零开始搭建django前后端分离项目 系列六(实战之聚类分析)
项目需求 本项目从impala获取到的数据为用户地理位置数据,每小时的数据量大概在8000万条,数据格式如下: 公司要求对这些用户按照聚集程度进行划分,将300米范围内用户数大于200的用户划分为一个 ...
- 从零开始搭建django前后端分离项目 系列五(实战之excel流式导出)
项目中有一处功能需求是:需要在历史数据查询页面进行查询字段的选择,然后由后台数据库动态生成对应的excel表格并下载到本地. 如果文件较小,解决办法是先将要传送的内容全生成在内存中,然后再一次性传入R ...
- Django前后端分离项目部署
vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...
- luffy项目搭建流程(Django前后端分离项目范本)
第一阶段: 1.版本控制器:Git 2.pip安装源换国内源 3.虚拟环境搭建 4.后台:Django项目创建 5.数据库配置 6.luffy前 ...
- nginx+vue+uwsgi+django的前后端分离项目部署
Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
随机推荐
- python+selenium+PhantomJS爬取网页动态加载内容
一般我们使用python的第三方库requests及框架scrapy来爬取网上的资源,但是设计javascript渲染的页面却不能抓取,此时,我们使用web自动化测试化工具Selenium+无界面浏览 ...
- 如何查看程序所占端口号和IP
如何查看程序所占端口号和IP 一个软件可能占用多个端口拥有多个目标IP,下面以FQ工具Lantern为例,说明端口查看方法: 1.借助第三方软件查看 如果你电脑上安装了360等优化工具,可能会自带查看 ...
- Nginx 参数配置相关
Nginx参数配置相关 by:授客 QQ:1033553122 目的: 对Nginx配置的点滴学习总结,主要目的在于分析Nginx与性能相关的一些参数设置,以便性能调优时选择最优配置 环境: $ ...
- VysorPro助手
Vysor是一款非常强大而又好用的Android远程显示及控制软件,有Chrome插件版.Windows客户端版和Mac版,是Android开发和测试人员的必备神器.其中Windows客户端版相对Ch ...
- Boostrap模态框,以及通过jquery绑定td的值,使模态框回显
做页面不管是登录或是修改信息,难免会使用到模态框,在此分享一个比较漂亮的模态框 Boostrap模态框 使用之前首先导入jquery-3.2.1.min.js,和bootstrap.min.js 先添 ...
- (网页)HTMl5的sessionStorage和localStorage
百度上百度的,记录一下: html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(sessi ...
- C#获取日期的星期名称
private string GetWeekName(DayOfWeek week) { string weekName = ""; switch (week) { case Da ...
- Windows 远程桌面剪贴板失效的处理办法
解决方法: 1.在任务管理器里选择rdpclip.exe进程,结束进程: 2.任务管理器左上角,文件-运行新任务,输入rdpclip.exe,确定运行即可.
- js对WebApi请求的基本操作
在WebAPI对外提供的,大概有4种接口,get,post,delete,put,现在,我就简单的来说一下js请求webApi的方式和大概的作用: get:在webApi中,get方法通常是用来获取数 ...
- Oracle 泵导入导出
C:\Users\Administrator>sqlplus / as sysdba; SQL> drop user 老用户名 cascade ; 用户已删除. SQL> creat ...