测试圈相亲平台开发流程 (2): vue和django 初始化,打通联调。

     阅读:24

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

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

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的后端内请求数据库。

下节课预告,架构设计分析等。
图片