vuecli 和 python django 前后端分离

柔情只为你懂 2023-06-21 03:47 26阅读 0赞

### 一 前台vue项目搭建 ###

**1.** 创建vuecli 脚手架  
　　　vue create data\_analysis\_front(项目名字)  
　　　![在这里插入图片描述][20191210231826138.png]  
　　　default 是 使用默认配置  
　　　Manually select features 是 自定义配置  
**2**.选择配置（自定义配置）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]  
　　　Babel：ES6语法转换包  
　　　Router: 路由  
　　　Vuex: 状态管理  
　　　Linter: 语法检查包

**3**.语法检测选择  
语法检查我只检查是否有错的即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]  
**4**.只在保存的时候检测语法  
![在这里插入图片描述][20191210233035895.png]  
**5**.把babel,postcss,eslint这些配置文件放哪，这里随便选。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 2]  
\*\*6.\*\*是否保存这些配置，为以后的项目使用，我选了N.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 3]  
**7.** 然后等待它把所以的包下载完毕，就可以按提示启动vue项目了。.  
![在这里插入图片描述][20191210233550867.png]  
**8.** vue项目启动的结果  
![在这里插入图片描述][2019121023381714.png]  
**9**.用浏览器打开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 4]  
**10.** 使用vscode 打开项目，下载axios用来做异步请求用的；  
引用axios模块，并将axios赋值给Vue的$http属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 5]  
**11.** 添加一个test.vue 的测试页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 6]

### 二 后台django项目搭建 ###

**1.** 创建一个django 项目  
　　　django-admin startproject data\_analysis（项目名字）  
**2.** 使用pycharm 打开创建好的项目，然后创建一个app应用  
　　　manage.py startapp ganji  
**2.** 在项目的urls.py 中给创建的ganji app 应用配置路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 7]  
**3.** 在ganji app 中的urls.py 中配置访问view.py 中test 方法的路由  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 8]  
在浏览器可以看到 “return ok”  
![在这里插入图片描述][20191211204229861.png]  
**4.** 给ganji app 添加处理跨域问题的CORS响应的中间件，为了让vue项目能访问到![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 9]

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

就可以开启django+vue前后端分离之旅了！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 10]

[20191210231826138.png]: https://img-blog.csdnimg.cn/20191210231826138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210232054740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191210232901880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[20191210233035895.png]: https://img-blog.csdnimg.cn/20191210233035895.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/201912102331587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191210233332329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[20191210233550867.png]: https://img-blog.csdnimg.cn/20191210233550867.png
[2019121023381714.png]: https://img-blog.csdnimg.cn/2019121023381714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191210233928558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191211210017144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191211202421443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191211203710285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/201912112041018.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[20191211204229861.png]: https://img-blog.csdnimg.cn/20191211204229861.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191211204623802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191211205913549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz,size_16,color_FFFFFF,t_70