Djangorestframework+Vue搭建前后端分离项目

本文主要是介绍Djangorestframework+Vue搭建前后端分离项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、Django环境搭建

安装anaconda

https://www.anaconda.com/download
打开命令行工具，出现base就表示安装成功了，表示当前的虚拟环境名

创建虚拟环境的python3.8版本的虚拟环境

conda create -n django_test python=3.8

进入虚拟环境

conda activate django_test

下载django

pip install django

# 创建项目
django-admin startproject django_test# 运行项目
python manage.py runserver# 创建app
python manage.py startapp book# 安装djangorestframework，本质上是一个app
pip install djangorestframework# 注册
在settings.py中INSTALLED_APPS中注册"rest_framework"
加上一个好看的页面将数据呈现出来

在setting中加入rest_framework

INSTALLED_APPS = [# 'django.contrib.admin',# 'django.contrib.auth',# 'django.contrib.contenttypes',# 'django.contrib.sessions',# 'django.contrib.messages','django.contrib.staticfiles','rest_framework','home',# 解决跨域问题'corsheaders',
]

2、安装Vue

Vue 5.0 node 18.2.0
node是一个服务端语言

下载node

https://dev.nodejs.cn/download/

设置源下载vue

# 淘宝NPM镜像的老域名证书已过期，换到的“新”的域名上面就好了
npm config set registry https://registry.npmmirror.com# 下载vue-cli
npm install -g @vue/cli# 查看版本
vue -V

创建vue项目

创建vue项目
vue create vue_web
1、进入手动配置项目（空格选择和取消回车表示确定）
2、选择vue3.x
3、启动
cd vue_web
npm run serve

# 安装axios
npm install -S axios --registry https://registry.npm.taobao.org# 迁移一个项目只需要在项目根目录
npm install 

3、安装ant-design插件

# 安装ant-design插件(前端组建)
https://next.antdv.com/docs/vue/getting-started-cn
npm i --save ant-design-vue

项目中加载

// 注册ant-design
import Antd from ‘ant-design-vue’;
import ‘ant-design-vue/dist/reset.css’;
.use(Antd)

4、echarts图标插件

https://echarts.apache.org/zh/index.html
npm install echarts --save --registry https://registry.npmmirror.com
// 配置echarts
let echarts = require(‘echarts’)
app.config.globalProperties.$echarts = echarts

5、解决跨域问题

pip install django-cors-headers
app中加入：'corsheaders'
中间件中加入：'corsheaders.middleware.CorsMiddleware'python manage.py runserver api.1217zy.vip:8000

这篇关于Djangorestframework+Vue搭建前后端分离项目的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---