前言:

此方法是用于前后端分离python-web项目,前端写完项目vue直接将打包好的(dist)交给后台(将vue作为静态资源,以django驱动vue的方式部署)


1. 后台框架主体

在这里插入图片描述
首先看看跟路由里面访问index.html路径设置

在这里插入图片描述

再来看看未启用前端项目时访问根目录的界面
在这里插入图片描述
这个就是后台自己的api接口界面(方便接口测试)
在这里插入图片描述

2. 前台disk包结构

在这里插入图片描述

3. 在django项目中新建文件夹(一般命名为frontend)用来存放前台代码,然后将代码dist内的两个文件以及一个static文件夹拷贝进去

在这里插入图片描述

4.修改主配置文件settings.py

这是后台单独使用时我们的配置(即使用后台自己的模板文件)
在这里插入图片描述
将静态文件模板配置为前台项目
在这里插入图片描述
在这里插入图片描述

5. 使用nginx进行转发

upstream qingyun {
   server 10.10.8.179:9000;   # 此处为django启动端口
}

# 将80端口转发到jango服务上
server {
    listen      80;
    server_name 10.10.8.179; # 你的访问地址, 有域名的话直接写域名

    location /  { 
        proxy_pass qingyun; 
    }
}

再来访问一下根目录看看

  • 访问根目录时我们未登录,所以直接重定向到用户登录界面了,此时说明已经成功了在这里插入图片描述
Logo

前往低代码交流专区

更多推荐