搭建django + vue前后端分离项目并解决跨域

本文介绍了如何搭建一个Django和Vue结合的前后端分离项目,包括创建Django项目、调整APP结构、采用Vue作为前端、配置Webpack打包、设置模板和静态文件路径。在开发过程中遇到跨域问题,文章也详细说明了如何配置和解决跨域问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建django项目

dango-admin startproject AtEase    # AtEase是项目名
cd AtEase # 进入项目根目录

修改manage.py文件

vim manage.py
#!/usr/bin/env python3 #将其设为以python3解释器执行

创建APPS文件夹,将项目所有APP收纳在一起

mkdir APPS
../manage.py startapp LoginRegister # 创建APP

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth', 
    'django.contrib.contenttypes',
    'django.contrib.sessions', 
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'LoginRegister',  # 注册APP
]   

设置APP寻找路径

# 找到setting.py文件

sys.path.insert(0,os.path.join(BASE_DIR,'APPS'))


ALLOWED_HOSTS = ['*']  # 顺便设置所有用户都能访问

放弃Django的后端模板引擎渲染,创建vue项目做为项目的前端

cd AtEase  # 进入项目根目录
vue-init webpack midn
### DjangoVue进行前后端分离开发的具体步骤 #### 一、项目初始化 在开始之前,需要分别创建Django后端和Vue前端的独立环境。 1. **安装依赖** 需要确保已安装Python以及Node.js。通过pip工具安装Django框架,使用npm或yarn来管理Vue项目的依赖项[^1]。 2. **创建Django项目** 使用命令`django-admin startproject my_project` 创建一个新的Django项目。随后,在settings.py文件中配置静态资源路径注册自定义的应用程序[^2]。 3. **设置Vue项目** 利用Vue CLI或其他脚手架工具(如Vite),执行如下命令建立Vue工程: ```bash vue create front_end_app ``` #### 二、API接口设计 为了实现前后端分离架构中的数据交互,需借助RESTful API完成通信过程。 1. **集成DRF (Django Rest Framework)** 安装Django REST framework扩展包以简化JSON序列化逻辑处理工作流。修改requirements.txt加入对应版本号之后运行 `pip install -r requirements.txt` 进行同步加载。 2. **构建模型类与视图集** 在models.py里声明实体对象结构;接着于views.py或者serializers.py编写关联业务方法及其返回格式描述规则。 ```python from rest_framework import serializers, viewsets from .models import Student class StudentSerializer(serializers.HyperlinkedModelSerializer): class Meta: model = Student fields = ['id', 'name', 'age'] class StudentViewSet(viewsets.ModelViewSet): queryset = Student.objects.all() serializer_class = StudentSerializer ``` #### 三、资源共享(CORS)支持 由于浏览器同源策略限制,默认情况下不允许不同名下的请求访问服务器资源。因此有必要引入corsheaders中间件解决该问题。 编辑INSTALLED_APPS列表新增'corsheaders'条目,调整MIDDLEWARE顺序使其生效: ```python INSTALLED_APPS += [ ... 'rest_framework', 'corsheaders' ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.security.SecurityMiddleware', ... ] CORS_ORIGIN_ALLOW_ALL = True # 开发阶段可暂时允许所有来源连接测试效果 ``` #### 四、部署方案考虑事项 当实际生产环境中上线服务时,则推荐采用Nginx反向代理机制统一转发HTTP流量至各自对应的Web容器实例上运行[Docker Compose](https://docs.docker.com/compose/)能够很好地满足这一需求场景下的一键启动多进程协作模式。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值