最近在使用django作为后台提供数据接口，VUE.js与Element UI作为前端框架，发现不少坑，看了很多人写的帖子，觉得不错，现搬运到这里，以备后来查看。
先回顾一下Django，在我们进入Django的话题之前，先了解一下WSGI和MTV模式。
Django介绍
什么是WSGI？
在用Python进行Web开发中，我们将其分为两部分，一是服务器程序，二是应用程序，前者负责把客户端请求接收、整理，后者负责具体的逻辑处理。那么对于服务器来说，就需要支持不同的框架，比如Django、Flask等，对于框架来说，也只有支持它的服务器才能被开发出的应用使用，这个时候就需要定一个标准，来使得服务器程序和应用程序都支持这个标准，这个标准就是WSGI，全称是Web Server Gateway Interface，它规定了双方各自的接口，以及提供什么功能，这样一来，二者就能配合使用了。
具体可以参考http://blog.csdn.net/on_1y/article/details/18803563
什么是MTV模式？
就是把Web应用分为：模型（Model），模板（Template），视图（View）这三层，这样一来，各组件之间就保持了松耦合关系；M主要是用来负责业务对象和数据库对象，T负责把页面如何展示给用户，V负责业务逻辑，并在适当的时候调用M和T。对于Django来说，还有一个url分发器，它的作用就是将一个个url的页面请求分发给不同的V处理，V再调用相应的M和T。
Django项目搭建以及环境配置
# 创建项目
django-admin startproject 项目的名称
# 进入项目文件夹，创建app
python mannage.py startapp app名称
# 项目文件夹下setting.py，settings配置
# 将自己的app添加到INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app名称',
]
/*说着上面也可以写成'app名称.apps.app名称Config'，其实
就是在我们定义app文件夹下，apps.py文件中，对应用名有配置
信息，我们在这里引用配置信息就行。
*/
# 在这里我们修改mysql数据库
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'DjRecord', #你的数据库名称
'USER': 'root', #你的数据库用户名
'PASSWORD': '', #你的数据库密码
'HOST': '', #你的数据库主机，留空默认为localhost
'PORT': '3306', #你的数据库端口
}
}
# 我们用的是pymysql，所以需要在项目名这个目录下的__init__.py文件添加：
import pymysql
pymysql.install_as_MySQLdb()
# 配置templates路径
/*主要是修改'DIRS'这一项，后面跟着的属性是html文件的文件夹地址，
我觉得就是一旦你在url.py中引入templates中某个html文件，程序能够知道去哪里
找，在后期django与VUE.js连接时候也要配置这里，以便django能够找到VUE.js编译后
（cnpm run build）生成的index.html文件。（在dist文件夹下）
*/
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
# 配置static路径
/*这里好像涉及到django对static文件的处理，静态文件（static files），诸如 HTML、CSS、图片和 JavaScript 之类的资源会被 ASP.NET Core应用直接提供给客户端，django是不能够处理静态文件的，这里要注意，在配置django与VUE.js的时候，也要将VUE.js编译后（cnpm run build）生成的静态文件夹目录引入到django中，这里主要添加STATICFILES_DIRS。（在dist文件夹下）。*/
STATIC_URL = '/static/'
STATICFILES_DIRS=(
# 告诉django static的路径
os.path.join(BASE_DIR,"static"),
)
# 运行项目
python manage.py runserver 127.0.0.1:8080
# 同步数据库
python manage.py makemigrations
python manage.py migrateDjango目录结构说明：
manage.py：Django项目里面的工具，通过它可以调用django shell和数据库等
settings.py：包含了项目的默认配置，包括数据库信息，调试标志以及一些工作的变量
urls.py：负责把URL模式映射到应用程序
model.py：负责数据库处理
view.py：处理一些业务逻辑
admin.py：Django自带的一个后台数据管理系统
关于URL路由系统
from django.conf.urls import url,include
from django.contrib import admin
from app import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
# 静态路由
url(r'^login/',views.login), # 如 http://127.0.0.1:8080/login
# 为路由取别名,这样,在地址修改的时候,前端不需要修改地址
url(r'^register/',views.register,name='reg'),
# 动态路由,可以用来做分页
# 无名分组,views里面的函数名参数可任意
url(r'^article/(\d{4})$',views.article), # 如 http://127.0.0.1:8080/article/2017
# 有名分组,view里面的函数名必须是year和month
url(r'^arcticle/(?P<year>\d{4})/(?P<month>\d{2})',views.arcticle),
# 路由分发
url(r'^app/',include('app.urls')),
]视图函数views
在http请求中产生两个核心对象，所在位置是，django.http：
http请求：HttpRequest对象
http响应：HttpResponse对象
def register(request):
'''
request就是HttpRequest对象
HttpResponse常用的扩展对象
render:页面渲染,可将参数以字典的形式传递给页面 也可以通过locals()将参数传递过去,没有进行页面跳转,url没有改变
redirect:页面跳转,url发生改变
:param request:
:return:
'''
# 获取请求方法
if request.method == "GET":
'''
对注册来分析,当我们进入注册页面的时候,一般都是GET请求
'''
# 获取GET里面的信息
ret = request.GET
print("GET信息",ret) # 输出 GET信息 <QueryDict: {}> 是一个字典对象
return render(request,"register.html")
elif request.method == "POST":
'''
通过表单提交之后,变成了POST请求
'''
# 获取POST里面的信息
ret = request.POST
print("POST信息",ret)
'''
输出 POST信息 <QueryDict: {'csrfmiddlewaretoken': ['oeKNHGKKm9Ip6B4Y2bfZM16lD2ECoTylPzX7rKzEUO5baf5Dfw4uB2zz5zz61fL9'], 'username': ['Jason'], 'pwd': ['123'], 'gender': ['1']}>
也是一个字典对象,可以通过句点获取表单提交过来的数据
'''
return redirect("/login/")
def login(request):
return render(request,"login.html")模板系统Template
- 变量，使用双大括号来引用变量：{{ var_name }}
# 视图函数
def index(request):
people={
"username":"Jason",
"age":18,
"gender":"男"
}
username="Jason"
return render(request,"index.html",{"username":username,"people":people})
<!--模板文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--通过双大括号来获取变量-->
<h1>欢迎{{ username }}</h1>
<!--通过句点符号来实现深度查询-->
<h2>用户名:{{ people.username }}</h2>
<h2>年龄:{{ people.age }}</h2>
<h2>性别:{{ people.gender }}</h2>
</body>
</html>- 标签，语法格式：{% tags %}
# views函数
def index(request):
temp_list=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
return render(request,"index.html",{"temp_list":temp_list})
<!--HTML模板-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标签的使用-->
<!--对于for来说,不支持中断循环,也不支持continue语句,内置一个forloop模板变量
forloop.counter表示循环的次数
forloop.first当第一次循环的时候,为True
-->
{% for temp in temp_list %}
<!--对于if来说,不允许同一标签里同时出现and和or,这样容易产生歧义-->
{% if temp == "星期一" or temp == "星期三" or temp == "星期五" or temp == "星期日"%}
<h2>不上班</h2>
{% elif temp == "星期二" or temp == "星期四"%}
<h3>上班</h3>
{% else %}
<h1>吃大餐</h1>
{% endif %}
{% empty %}
<!--当temp_list为空,会走这里,和for循环并列-->
<h1>放假时间太多了</h1>
{% endfor %}
<!-- 其他标签:
{% csrf_token %}:用于生成csrf_token标签,用于防止跨站攻击验证,如果在views中用的是render_to_response方法 则不会生效,一般会和表单一起提交给后台
{% url "reg" %}:引用路由配置的地址,也就是路由中的name值,如: <form method="post" action="{% url "reg" %}"> ... </form> url(r"^register",views.register,name='reg')
{% with total=fhjsaldfhjsdfhlasdfhljsdal %} {{ total }} {% endwith %}:使用更简单的变量名代替复杂的变量名
{% verbatim %} {% endverbatim %}:禁止render
{% load tz %}:加载标签库 -->
</body>
</html>使用 Django+Vue.js 快速构建项目
具体流程目录
- 创建 Django 项目
- 创建 Django App 做为后端
- 创建 VueJS 项目作为前端
- 使用 Webpack 处理前端代码
- 配置 Django 模板的搜索路径
- 配置 Django 静态文件搜索路径
数据交互：（还不知道干啥的）
https://www.cnblogs.com/jieru/p/7145800.html
具体参考以下文章： - https://zhuanlan.zhihu.com/p/25080236
- https://cloud.tencent.com/community/article/774449
上面介绍的非常详细。
Django与VUE.js项目中一些方法
- JSON.parse(text, reviver)
This method parses a JSON text to produce an object or array. It can throw a SyntaxError
exception.
The optional reviver parameter is a function that can filter and
transform the results. It receives each of the keys and values,
and its return value is used instead of the original value.
If it returns what it received, then the structure is not modified.
参数
text
必需。 一个有效的 JSON 字符串。
reviver
可选。 一个转换结果的函数。 将为对象的每个成员调用此函数。 如果成员包含嵌套对象，则先于父对象转换嵌套对象。 对于每个成员，会发生以下情况：
如果 reviver 返回一个有效值，则成员值将替换为转换后的值。
如果 reviver 返回它接收的相同值，则不修改成员值。
如果 reviver 返回 null 或 undefined，则删除成员。
返回值
一个对象或数组。
- vue-chartjs
参考文档：