本项目用的Django是4.0.4版本，vue是2.0版本
一、背景
主要介绍如何使用后端Django + 前端Vue 的技术栈快速地搭建起一套web项目的框架
1.Django项目和应用的创建
pip install Django #安装Django django-admin startproject test1 #创新项目 cd test1 #进入项目 python manage.py startapp myApp #创建myApp应用
2.既然是前后端分离项目，那么就要在settings.py文件配置，跨域，白名单，请求头，中间件
pip install django-cors-headers
# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
CORS_ORIGIN_WHITELIST = ( # 设置白名单
'127.0.0.1:8000',
'127.0.0.1:8080',
'127.0.0.1:8081'
)
CORS_ALLOW_METHODS = ( # 设置请求方法
'DELETe',
'GET',
'POST',
'OPTIONS',
'PATCH',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = ( # 设置请求头的内容
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-request-with',
'Pragma',
'token'
)
# 支持跨域配置结束
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
3. 同时这个项目是用到mysql 数据库，所以还要再配置数据库，这里首先创建数据库
mysql -uroot -p123456789 #进入数据库 create database ats_test； #创建数据库ats_test
4。在settings里配置数据库
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'ats_test',
'USER': 'root',
'PASSWORD': '123456789',
'HOST': '127.0.0.1',
}
}
在settings里导入，pymysql模块
import pymysql pymysql.install_as_MySQLdb()
5.这时候Django前期的准备工作，已经差不多了。接下来就可以编写代码，首先是在应用文件夹myApp里的model.py文件里，用ORM模型编写操作数据库的代码，编写一个简单的图书类，添加两个字段，图书名称 book_name，和添加时间 add_time
from django.db import models
# Create your models here.
class Book(models.Model):
book_name = models.CharField(max_length=64)
add_time = models.DateTimeField(auto_now_add=True)
6.在myApp文件夹下的views里我们新增两个接口，一个是show_books返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据），另一个是add_book接受一个get请求，往数据库里添加一条book数据：
from django.shortcuts import render
from django.http import JsonResponse
from django.core import serializers
from myApp.models import Book
import json
# Create your views here.
def add_book(request):
response = {}
try:
book = Book(book_name=request.GET.get('book_name'))
book.save()
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
def show_books(request):
response = {}
try:
books = Book.objects.filter()
response['list'] = json.loads(serializers.serialize("json", books))
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
7. 添加路由，可以在应用里添加路由，也可以在项目里直接添加路由，Django默认是先从项目urls文件里进行路由的检索，这里我就直接把路由添加到项目里，如果应用多的话，最好在每个应用里都添加自己的urls.py 路由文件
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from myApp import views as BookView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html')),
path('admin/', admin.site.urls),
path('add_book/', BookView.add_book),
path('show_books/', BookView.show_books),
]
8 创建mysql数据库ats_test，迁移表，在项目的根目录，输入命令：
$python manage.py makemigrations
$python manage.py migrate
启动项目 $python manage.py runserve
9
在浏览器中测试接口：
http://localhost:8000/add_book/?book_name=test
http://localhost:8000/show_books/
没问题能打开之后，恭喜你，Django这部分构建完成。
前端搭建 vue1、安装node.js，查看是否安装成功:
$node –v
2. 先安装webpack脚手架：npm install webpack webpack-cli –g
再安装vue脚手架：npm install vue-cli –g
3.创建vue项目，这里我们可以直接进入到Django项目里，创建一个vue项目，也可以单独去其他文件夹里创建vue,都没有影响。只要最好把Django的，静态资源路径，和模板文件路径，指向vue打包好的dist文件里的静态资源就好
创建vue项目：vue init webpack vue_test1
4.运行：npm run dev ，正常能打开页面，说明安装成功vue。
这时前端的项目也已经运行成功，但是这时前后端还都是各自独立运行。
为了前后端能够互相通信，还要安装axios ,这个是可以发送请求的
npm install axios npm install axios --save-dev
5. 安装成功以后，要在src文件夹下面的main.js 进行配置，同时还要再config文件夹里的index.js里，加入后端的接口
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
或是这样使用
6. 创建elementui：npm i element-ui –S，在src/main.js中引入 整个Elementui
7.以上配置好了，前端所需要的一些模块，接下来就可以编写前端代码了，前端代码的编写，主要在src/components里，这里面可以创建各种vue组件，也可以理解为以后要用的页面。这里创建的组件，一定还要去src/router目录的index.js中， 加入到路由配置里，这里我们创建一个BookTest组件，再配置到vue-router路由中：
src/components 创建BookTest.vue
添加
src/router 里添加路由
import BookTest from '@/components/BookTest'
export default new Router({
routes: [
{
path: '/',
name: 'BookTest',
component: BookTest
}
]
})
8. 在前端工程目录下，输入npm run build，如果项目没有错误的话，就能够看到所有的组件、css、图片等都被webpack自动打包到dist目录下了。
整合Django和Vue.js上面已经打包好了前端项目，接下来就是要把Django的TemplateView指向我们刚才生成的前端dist文件即可.
1、 找到project目录的urls.py，使用通用视图创建最简单的模板控制器，访问 “/” 时直接返回 index.html:
from django.views.generic import TemplateView
from myApp import views as BookView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html')),
path('admin/', admin.site.urls),
path('add_book/', BookView.add_book),
path('show_books/', BookView.show_books),
]
2、 上一步使用了Django的模板系统，所以需要配置一下模板使Django知道从哪里找到index.html。我们的前端目录是在Django的项目文件夹下，目录结构如下：
所以模板路径如下 ，在project目录的settings.py下：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# 'DIRS': [],
'DIRS': ['vue_test1/dist'], #update
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3、 我们还需要配置一下静态文件的搜索路径。同样是project目录的settings.py下：
这里的BASE_DIR是django项目的根路径，此时再运行python manage.py runserver，就可以打开了.
注意服务的端口已经是Django服务的8000而不是node服务的8080了。
前端部分修改后，Django服务的8000页面不会实时更新，需要重新执行npm run build打包到dist目录下，Django的
端口8000才会有变化。
至此，成功完成了构建,小伙伴们可以跟着试一试哦
______________________________________________________________________
下面再顺便介绍下vue的文件结构
