vue前端和django结合的方法

vue前端和django结合的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站设计、中江网络推广、小程序定制开发、中江网络营销、中江企业策划、中江品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供中江建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

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结合的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

本文标题：vue前端和django结合的方法
文章网址：http://6mz.cn/article/pihddj.html