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