天天看点

vuecli 和 python django 前后端分离

一 前台vue项目搭建

1. 创建vuecli 脚手架

   vue create data_analysis_front(项目名字)

   

vuecli 和 python django 前后端分离

   default 是 使用默认配置

   Manually select features 是 自定义配置

2.选择配置(自定义配置)

vuecli 和 python django 前后端分离

   Babel:ES6语法转换包

   Router: 路由

   Vuex: 状态管理

   Linter: 语法检查包

3.语法检测选择

语法检查我只检查是否有错的即可

vuecli 和 python django 前后端分离

4.只在保存的时候检测语法

vuecli 和 python django 前后端分离

5.把babel,postcss,eslint这些配置文件放哪,这里随便选。

vuecli 和 python django 前后端分离

**6.**是否保存这些配置,为以后的项目使用,我选了N.

vuecli 和 python django 前后端分离

7. 然后等待它把所以的包下载完毕,就可以按提示启动vue项目了。.

vuecli 和 python django 前后端分离

8. vue项目启动的结果

vuecli 和 python django 前后端分离

9.用浏览器打开

vuecli 和 python django 前后端分离

10. 使用vscode 打开项目,下载axios用来做异步请求用的;

引用axios模块,并将axios赋值给Vue的$http属性。

vuecli 和 python django 前后端分离

11. 添加一个test.vue 的测试页面

vuecli 和 python django 前后端分离

二 后台django项目搭建

1. 创建一个django 项目

   django-admin startproject data_analysis(项目名字)

2. 使用pycharm 打开创建好的项目,然后创建一个app应用

   manage.py startapp ganji

2. 在项目的urls.py 中给创建的ganji app 应用配置路由

vuecli 和 python django 前后端分离

3. 在ganji app 中的urls.py 中配置访问view.py 中test 方法的路由

vuecli 和 python django 前后端分离

在浏览器可以看到 “return ok”

vuecli 和 python django 前后端分离

4. 给ganji app 添加处理跨域问题的CORS响应的中间件,为了让vue项目能访问到

vuecli 和 python django 前后端分离

三 点击前端test.vue 的test data 按钮可以看见django 返回的结果;

就可以开启django+vue前后端分离之旅了!!!

vuecli 和 python django 前后端分离