关于django结合vue遇到的坑

1.在django前端页面无法渲染vue data数据问题：
用{% verbatim %} {{ item.SystemID }} {% endverbatim %}
因为django自身的前端渲染和vue渲染会冲突，所以要做封装。

2.前后端数据传输问题：
1）先说后端传的问题：
一般的数据，不用json封装过的数据，在后端接收的时候，定义一个变量：var a = {{ a | safe }}，a是后端传给前端的，用的是render返回的形式，但是这仅限极少数的数据格式，数据库导出的，用字典做2层封装的就不能传给vue，还报错。所以用 HttpResponse去返回给前端，通过ajax的形式，前端接收，vue里面的一个methods去接收：
getCustomers:function() {
var _this = this;
axios.get(’/getdata/’)
.then((response) => {
this.count1 = response.data;
console.log(_this.count1);
alert(_this.count1)

        }
    )

},
这里面的response.data;就是后端返回的json数据，必须用json做封装才能传过去。

3.再说后端接收的问题：
Django一般的接收方式用POST/GET.get方法去拿取数据，但是vue封装过的数据，传给后端，接口是不一样的，所以要通过request.body去取出封装在body中的数据{data:数据}，传给后端的是个byte类型，通过data.decode(encoding=‘utf-8’)去转化成utf-8的字符形式，这样就拿到了数据。
那么前端vue传数据的方式，也是用ajax的形式，这里面用的是vue的一个插件，axios这个库，方法如下：submit:function () {
this.count+=1
alert(this.count1)

           axios.post('/database_info/', {

data1: this.data_base

})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
这里通过axios的post方法传的数据，其实用get也是一样。data1就是我们传给后端的数据。

4.django改默认数据库为mysql：
首先是要修改setting配置中DATABASES的参数，案例如下：
DATABASES = {
‘default’: {
‘ENGINE’: ‘django.db.backends.mysql’, # 数据库引擎
‘NAME’: ‘ava_record’, # 你要存储数据的库名，事先要创建之
‘USER’: ‘root’, # 数据库用户名
‘PASSWORD’: ‘123456’, # 密码
‘HOST’: ‘192.168.153.5’, # 主机
‘PORT’: ‘3306’, # 数据库使用的端口
}
}
然后，因为用的是mysql，所以还要在你创建的aap目录的__init__.py文件中，加入
import pymysql
pymysql.install_as_MySQLdb()
这样，app调用数据库的时候，django会通过这个去做orm的封装，
如果没有pymysql这个模块的，就需要pip install装一个

5.关于数据库时间字段无法做json封装问题：
数据库中的时间字段，python默认是不能json封装的，那么就需要对这个字段的数据做处理，我这边是通过一个类方法，json封装的时候，调用这个类方法，去做格式化处理，类如下：
import json
import datetime

class DateEncoder(json.JSONEncoder):
def default(self, obj):
if isinstance(obj, datetime.datetime):
return obj.strftime(’%Y-%m-%d %H:%M:%S’)
elif isinstance(obj, datetime.date):
return obj.strftime("%Y-%m-%d")
else:
return json.JSONEncoder.default(self, obj)
调用的时候，用json.dumps(data,cls=DateEncoder),这样就可以json封装了。