drf + vue全栈教程:后端拓展
原来我们的模型是有些简陋的,这一讲我们将文章模型拓展一下。
安装插件首先,我们安装一个为方便复杂序列化的插件:
1pip3 install drf-flex-fields
拓展模型首先,我们在顶部引入django的User模型:
123# backend/blog/models.pyfrom django.contrib.auth.models import User # 顶部新增
接着,新增标签,栏目两个拓展模型:
1234567891011121314151617181920# backend/blog/models.pyclass Column(models.Model): # Column类,栏目 name = models.CharField(max_length=50, unique=True) # 短字段,最多50字,unique代表唯一 class Meta: # 内部类 verbose_name = "栏目 Column" def __str__(self): # 后台返回内容 return sel ...
vue+drf全栈教程:后端初试
经常关注的老读者可能发现了,把前端UI美化工具换掉了,换成了Ant Design的vue版本,因为element的导航栏不太合适,敬请谅解!
这篇文章,将带大家简单地体验一下django的模型,视图,以及drf特有的序列化!
首先,让我们进入跟目录,录执行命令创建django的第一个APP:
12cd backend # 进入我们先前创建的djangoAPP的目录python3 manage.py startapp blog # 创建我们一会要写后端代码的APP
然后注册我们这个APP到settings.py中:
12345678910INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', ' ...
drf+vue全栈教程:前端项目分解
这篇文章,我们系统的学习一下vue前端项目主要文件的作用。
注意:这一章内容相对有难度,也很重要,注意认真学习!
分析项目结构首先,我们分析一下项目目录主要结构:
123flask-vue-todo├─frontend # 存放前端文件├─backend # 存放后端文件
后端文件的目录就是我们新建的djangoAPP,前端目录是vue项目,这篇文章主要讲前端目录。
123456frontend├─node_modules├─src├─public├─static # 不用管├─test # 不用管
这里只列举了一些重要文件夹,其他package.json等文件就不说了,也和项目没太大关系,接下去一步步分析这些文件夹的作用。
1,node_modules:存放下载的开发环境和生产环境的各种依赖
2,src:工程项目的源码以及资源,包括页面图片、路由组件、路由配置、vuex、入口文件等,也是我们要写代码的地方。
2,public:存放html,ico等文件
接下来再着重分析src文件夹下面的文件
1234567src├─assets├─components├─ro ...
drf+vue全栈教程:初始化后端项目
突然想起还没有告诉大家项目的github仓库地址,
就在这里说一下吧:https://github.com/jackyfzh/j_drf_blog
喜欢记得star哦!
好了,回归正题,我们开始初始化后端项目!
配置settings.py有三个地方:
第一个:已安装APP123456789INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', # 新增(drf前后端分离)]
第二个:语言和时间123LANGUAGE_CODE = 'zh-Han ...
drf+vue全栈教程:环境搭建
开始前的提示:
教程的github仓库地址:https://github.com/jackyfzh/drf_learn
教程是博主自己的学习笔记,也是做一篇写一篇,可能有一些问题,欢迎高手在评论区指出
教程路线:drf → vue.js → vue组件库 → vue结合drf
本教程版本,最好和博主保持一致
django 2.x
vue.js 2.x
django rest framework 3.x
Ant Design for vue 1.6.x
simeple UI 4.x
好了,说了这么多,让我们先搭建开发环境并创建项目吧。
1,安装首先必须要安装好nodejs,pip3,npm和python3,篇幅有限,就不再讲了,请读者自行查阅。安装完成后,打开命令行,输入以下命令创建项目文件夹并安装必要包:
1234567mkdir drf_learncd drf_learnpipenv shellpip3 install django==2.2pip3 install djangorestframeworknpm install -g cnpm --regist ...
drf+vue全栈教程:序言
起因今年4月开始尝试用Django框架写了一个博客应用,今年想要学习django rest framework,想体验体验前后端分离开发。但是苦于在网上一直没找到优质(免费)的教程,搞得我无心更新,pyecharts详细教程两周没更新了(绝不是因为懒)
我一直觉得,给自己找一个需求,通过实践来学习某个技术,是最好,也是最快的方式。这次也是一样:在此过程中学习一些新技术。
写作目的之前提到在网上没有找到合适的教程,所以只能自己一步步摸索着学习了,与其说这是一个系列教程,不如说是我个人的学习笔记。将它公开到网上,主要是希望给有相同需求的朋友一个参考,同时也希望能被一些前辈高手看到,并不吝赐教。
基本要求如果你想跟我一起学习,那么至少需要以下具备四点条件:
至少掌握了Python语法基础
有一台可用的电脑
会一点django基础
有一颗坚持不懈(爱折腾)的心
目标
学会vue.js
学会django rest framework
写出一个前后端分离的博客
其实,我也是想借此机会把自己的博客好好改一改。
如读者们所见,我现在的博客实在太难看了。
所以希望读者们先忍一忍,在本 ...
django相关概念理解
Django是使用十分广泛的的重量级web框架,功能完善,使用高效,正所谓在最短的时间内做出最好的产品。今天,就从,模型,视图,模板等方面谈谈我的理解。
模型(models)ORM,就是(Django)封装数据库后写出的可使用Python代码操作数据库的产品。支持所有主流数据库,比如说mysql,sqlite等等。我们可以在项目app的models.py中指定“表”,这就是模型的相关概念。
视图(views)这一概念相对来说比较难以理解,其实也不难。首先讲讲他的作用:
操做模型(数据库)
操作模板(html)
处理表单(form)
没错,差不多只有这几个概念,views.py相当于指挥部,也是一个app的核心了。
模板(html文件)也就是(广受后端程序员鄙视的)前端了,也就是html,JavaScript,css等等,最后给用户展示的内容啦。但是Django的模板还有继承(extend),判断(if),循环(for),包含(include),链接(url),静态文件(static)等。值得一提的是,Django和flask不同,不用jinjia2模板引擎,而是自行开发(不得不 ...
pyecharts详细教程:绘制基础图表
今天,就教大家绘制pyecharts的基础图表,散点图,直方图和折线图
绘制基础图表
导入需要的包123456from pyecharts.charts import * # 图表from pyecharts.components import Table # 表格from pyecharts import options as opts # 配置from pyecharts.commons.utils import JsCode import random # 随机数import datetime #时间
这就是pyecharts已经我们可能用到的所有库了,导入报错的话需要另外自行安装.
直方图代码12345678# 直方图x_data = ["水笔","铅笔","钢笔","圆珠笔"] # x轴数据y_data = [40,30,98,42] # y轴数据bar = Bar() # 初始化图表bar.add_xaxis(x_data) # x轴bar.add_yaxis('', y_ ...
pyecharts详细教程:环境搭建
俗话说,”工欲善其事,必先利其器”,今天,我们就来搭建pyecharts的环境吧!
搭建Python环境这个我就不多说了,大家应该都有,没有的话参见以下教程:
廖雪峰的个人网站:安装Python
百度经验:Python环境搭建和配置
合适的编辑器如果是做数据分析,推荐以下四款编辑器:
notebook系列
Jupyter lab [四星(推荐)]推荐教程:JupyterLab,极其强大的下一代notebook!
Jupyter notebook [二星]推荐教程:小白都能看懂的Jupyter安装教程,带你绕过很多坑(Windows版)
文本编辑器系列
Visual Studio Code (Vscode) [五星(推荐)]推荐教程:VSCode配置Python环境指南
Pycharm [三星(没用过)]推荐教程:pycharm的安装和配置
pyecharts安装接下来安装pyecharts数据分析工具,pip3有三种安装方法:
直接安装
1pip3 install pyecharts
限时安装(防报错)
1pip3 --timeout=100 install pyec ...
pyecharts详细教程:序言
pyecharts是百度开源的echarts的python接口,是使用十分方便的Python数据可视化工具,功能强大,可以绘制几乎所有静态图表,和matplotlib系列媲美,使用简单,适合初学者使用,本教程会详细的讲解如何用它绘制漂亮的图表.
教程特点
零基础、免费、中文、完整实例代码
基于Python 3.7、Django 2.2、Bootstrap 4
博主热情的技术支持
适合人群
拥有一台能开机的电脑
有一点基础的 python 编程知识
每天能抽出一个小时学习 不要犹豫说的就是你,现在立刻开始pyecharts的学习吧!
资源列表
本教程的代码托管在GitHub:pyecharts_demo
本教程代码托管在Gitee:pyecharts_demo
pyecharts的官方网站:pyecharts
和鲸社区:【pyecharts教程】应该是全网最全的教程了~
遇到困难时怎么办
认真检查代码拼写、缩进是否正确。一个标点符号的错误可能会导致难以发现的问题
较简单的问题直接询问百度;若无法得到满意的答案请尝试 Google 以英文关键字搜索。要坚信全世界这么多学习 pyec ...