【本节目标】实现前后端连调成功
【依赖包】django-cors-headers (pip直接下载)
第一二节课，我们成功的搞定了django后端，和vue前端。但是他们并不难简单的通过http就实现成功连调。如果想实现前端打包后让django单独服务就能启动整个平台的效果，那就需要合二为一，也就是本节课的目标，不管这段话你看的懂看不懂，都不重要，只要你先照葫芦画瓢往下跟，要不了几节课你就会突然大悟。
首先，先处理一下django项目：
urls.py：
这里我们指定vue项目打包好后的文件地址的入口index.html 。
然后打开settings.py：
把我们刚刚pip下载好的插件塞进去：(注意位置第三行，主要解决跨域)
然后是html寻址路径，这里加上指向vue项目打包后的路径:
最后是在settings.py结尾处加上vue项目的静态资源路径：
(之后的截图都会包含上下文，以便同学们找到新增/修改代码的具体位置，而当事代码我会有那个红框或红线标记)
django的部分到此结束，下面开始vue项目的部分：
首先在v_project目录下创建一个名为vue.config.js的文件，用来加入配置。
然后再在这个文件内输入：
代码语言：javascript复制module.exports = {
// 输出目录
assetsDir: 'static',
};保存后如图：
这个操作的目的是给之后打包的前端静态资源指定一个具体文件夹static内。毕竟我们django项目刚刚设置静态资源寻找路径就是从这个static内。
然后我们要手动去public文件夹下创建一个static的文件夹：
这个操作的目的是，我们之后把自己的第三方资源都放在这里，然后打包的时候，系统会从这个public/static文件夹内取资源 打包到 dist/static内，以供django调用。
然后我们给vue安装一些常见插件：（vue的命令/npm的命令，都要先进入v_project项目根目录！！！）
jquery: (请耐心等待几十秒的下载和安装结束)
axios:
执行完后，我们打开package.json看看 是不是出现了这俩个插件，出现即代表安装成功：
然后基本上就完成了本节课任务。
最后我们要测试一下，进行vue的第一次打包：npm run build
打包完成后，检查下目录，看看是否有这个dist文件夹：
然后我们在pycharm右上角 启动django项目
关注下控制台输出：
然后输入网址：127.0.0.1:8000/home/ 看看进入的是不是vue的页面：
就发现了神奇之处，django项目的端口和网址，居然打开了vue的首页。至此，我们的联调算是通了。并且没有任何跨域问题。
之后的开发节奏就是，在v_love项目内写前端，能前端处理的都在前端写。数据方面直接通过axios去django的后端内请求数据库。
下节课预告，架构设计分析等.
