vue前端怎么和django结合[Django框架]

vue和django的结合尝试

使用vue进行前端开发时,如今也是工程化开发,和django类似,也有一个工程目录。开发过程中,会利用nodejs启动一个服务器,默认访问localhost:8080就可以打开页面。

vue开发过程中会使用vue专有的文件后缀名.vue,这些内容浏览器是无法识别的,因此开发完成后需要对项目进行打包生成浏览器可以识别的js,css文件以及一个单页面index.html。

django使用的就是最后生成的这几个文件。

具体设置

vue项目由前端开发完成后,会通过命令npm run build 打包成一个dist目录,其中包含一个index.html和static目录

这两项内容是django最终需要的页面。

static目录和django的static目录是同一个目录,可直接覆盖django的,settings中的配置不变,仍旧是原本的static路径

index.html可放在模板目录内,在settings中指定模板路径即可,最后配置路由,路由如下:

 path('', TemplateView.as_view(template_name='index.html')),

 path('index/', TemplateView.as_view(template_name='index.html'))

以上即可结合完成,其他的所有ajax请求,直接后台返回数据即可

开发过程中跨域问题的解决

vue开发过程中,ajax请求,既可以通过设置前端来访问,也可以通过django的设置来允许访问

vue的设置

vue的设置方式是在项目的config目录下,修改index.js文件中proxyTable项

// 'http://localhost:7890' 表示的是要跨域请求的地址,vue的开发地址可能是端口8080,7890就等于是django的端口

// 如果请求的地址是:'http://localhost:7890/index_data'

// 在请求时就可以写成: '/apis/index_data'

'/apis': {

    target: 'http://localhost:7890',

    changeOrigin: true,

    pathRewrite: {

        '^/apis': ''

    }

}

django的设置

安装第三方包 pip install django-cors-headers 这个包可以自动给响应头中添加允许跨域的响应头

具体配置分两步:

1、settings.py修改

MIDDLEWARE = [

    'django.middleware.security.SecurityMiddleware',

    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',  # 注意放置顺序

    'django.middleware.common.CommonMiddleware',

    'django.middleware.csrf.CsrfViewMiddleware',

    'django.contrib.auth.middleware.AuthenticationMiddleware',

    'django.contrib.messages.middleware.MessageMiddleware',

    'django.middleware.clickjacking.XFrameOptionsMiddleware',

2、settings.py添加

一般情况下,只添加一项:CORS_ORIGIN_ALLOW_ALL = False 即可

注意此为开发环境,生产环境需要关闭此项

以上是 vue前端怎么和django结合[Django框架] 的全部内容, 来源链接: utcz.com/z/539761.html

回到顶部