Djangovue前后端项目

Djangovue

建立过程：

1. 创建 Django 项目

新建一个django项目

配置 settings.py 文件，与 Mysql 数据库引擎进行连接

执行同步操作，将数据迁移到 Mysql

运行项目，验证配置是否正常

1）使用python manage.py runserver命令(在manage文件目录运行）

2）编辑配置、快捷运行，配置完成后可直接点击运行按钮运行

创建一个 app 作为项目后端

把 backend 加入到 settings.py 文件中的 INSTALLED_APPS 列表里

在 backend/models.py 里写一个简单 model 如下

根据修改创建迁移文件，并应用这些修改到数据库中

# 创建迁移文件 python manage.py makemigrations

# 应用修改到数据库 python manage.py migrate

Django 生成的表名将以 app 名加上 model 中的类名组合而成，也可以自定义表名，如下

在 backend/views 里新增两个接口，一个返回所有的书籍列表，一个往数据库里添加一条book数据

在 backend 目录下，新增一个 urls.py 文件，把我们新增的两个接口添加到路由里

最后把backend 下的 urls 添加到项目 djangoVue 下的 urls 中，完成路由

重新启动服务，测试刚才写的两个接口

2. 创建 Vue.js 前端项目

使用 node 自带的 npm 包管理器安装 vue 和相关模块。推荐使用淘宝的 cnpm 命令行工具代替默认的 npm。

python
复制代码npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 vue.js

python
复制代码cnpm install -g vue

安装vue-cli脚手架工具（vue-cli是官方脚手架工具，能迅速帮你搭建起vue项目的框架）

python
复制代码cnpm install -g vue-cli

在 djangoVue 项目根目录下，新建一个前端工程目录

python
复制代码vue-init webpack frontend

在创建项目的过程中会弹出一些与项目相关的选项需要回答，按照真实情况进行输入即可，如下：

安装 vue 依赖模块,依次输入命令：

cd frontend

cnpm install

cnpm install vue-resource

cnpm install element-ui

建好之后整个文件的目录结构如下：

在 src/components 文件夹下新建一个名为 Home.vue 的组件，通过调用之前在 Django 上写好的 api，实现添加书籍和展示书籍信息的功能。

在 src/router 目录的 index.js 中，把新建的 Home 组件，配置到 vue-router 路由中

在 src/main.js 文件中，导入 element-ui、vue-resource 库。

在前端工程 frontend 目录下，输入 npm run dev，打开网址如下

3. 解决跨域问题

用 Django 的第三方包 django-cors-headers 来解决跨域问题

使用命令：pip install django-cors-headers

在python解释器中添加包

修改 settings.py

项目框架：

项目运行：

1 保证后端处于运行中

均验证无误后，可进行前端运行

错误：

项目构建过程：

https://juejin.cn/post/7028812676230807582