一 前台vue项目搭建
1. 创建vuecli 脚手架
vue create data_analysis_front(项目名字)
default 是 使用默认配置
Manually select features 是 自定义配置
2.选择配置(自定义配置)
Babel:ES6语法转换包
Router: 路由
Vuex: 状态管理
Linter: 语法检查包
3.语法检测选择
语法检查我只检查是否有错的即可
4.只在保存的时候检测语法
5.把babel,postcss,eslint这些配置文件放哪,这里随便选。
**6.**是否保存这些配置,为以后的项目使用,我选了N.
7. 然后等待它把所以的包下载完毕,就可以按提示启动vue项目了。.
8. vue项目启动的结果
9.用浏览器打开
10. 使用vscode 打开项目,下载axios用来做异步请求用的;
引用axios模块,并将axios赋值给Vue的$http属性。
11. 添加一个test.vue 的测试页面
二 后台django项目搭建
1. 创建一个django 项目
django-admin startproject data_analysis(项目名字)
2. 使用pycharm 打开创建好的项目,然后创建一个app应用
manage.py startapp ganji
2. 在项目的urls.py 中给创建的ganji app 应用配置路由
3. 在ganji app 中的urls.py 中配置访问view.py 中test 方法的路由
在浏览器可以看到 “return ok”
4. 给ganji app 添加处理跨域问题的CORS响应的中间件,为了让vue项目能访问到
三 点击前端test.vue 的test data 按钮可以看见django 返回的结果;
就可以开启django+vue前后端分离之旅了!!!