大家情人节快乐！今天开始第二节，我们要对俩个项目进行初始化，并解决跨域问题！

首先下载一个专门解决跨域的组件：

pip3 install django-cors-headers

下载好后就可以开干了！

Part1首先是django的初始化：

• 首先是admin.py 我使用了之前我公布的自动注册算法

from django.contrib import admin

# Register your models here.
from myapp.models import *
import inspect,sys

clsmemebers = inspect.getmembers(sys.modules[__name__],inspect.isclass)
for name,cls in clsmemebers:
    admin.site.register(cls)

• 然后是urls.py中，配置上v_love项目的路径，毕竟我们的首页入口是vue项目的index.html （这个之后说）

from django.contrib import admin
from django.urls import path

from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/', TemplateView.as_view(template_name='index.html')),

]

• 然后是settings.py 这个改的地方比较多。

• 把自己的myapp写到installed_apps里

• 然后是Middleware中间件，这里我们要在第三行插入一个新的，也就是刚刚下载的那个。然后再注释掉俩个。

• 然后是紧接着顶格写一个变量 和上面的中间件设置都是为了解决跨域问题。

• 然后是html寻址路径,这里写的也是指向vue项目的打包后文件路径

• 然后是语言和时区

• 然后是最后一个，给静态资源寻址路径设置一下,同样指向vue项目的静态资源路径

好到这里。django部分的初始化算是完事了，接着来干vue项目的初始化：

Part2Vue项目v_love的初始化设置

• 首先给v_love目录下创建一个名为 vue.config.js的文件，用来做配置。

• 然后在这个vue.config.js这个文件内写上如下的内容,其实我们之后很多设置都可以写这里，不过目前我们就下一个，意思是打包后的前端静态资源统一放入到static文件夹内，以便django调用。

module.exports = {
    // 输出目录
    assetsDir: 'static',
};

• 接下来我们去手动创建一个空的static文件夹，放在public文件夹下：

• 然后我们给vue安装常用插件，bootstrap和jquery和axios 在v_love项目根目录分别一句一句执行命令：

npm install jquery --save
npm install bootstrap --save
npm install axios --save

执行完后，记得打开package.json看看是不是出现了这三个插件：

如果运气好和上面图一样，就证明你安装成功了。

然后我们检查下django和vue的连调情况。在v_love项目根目录下执行打包命令：npm run build

看上图，执行了打包命令成功后，可以看到v_love文件夹下自动新增了一个打包后的成品文件夹dist。

展开dist，可以看到里面的入口页面index.html还有自己的static静态资源文件夹。

然后我们运行django项目，是的，运行django项目：

启动成功后，进入我们设置好的入口url：

http://127.0.0.1:8000/home/#/

就发现了神奇之处，django项目的端口和网址，居然打开了vue的首页。至此，我们的联调算是通了。并且没有任何跨域问题。

之后的开发节奏就是，在v_love项目内写前端，能前端处理的都在前端写。数据方面直接通过axios去django的后端内请求数据库。

下节课预告，架构设计分析等。