从零开始搭建Django+vue前后端分离项目

此博客仅是记录学习的过程！！！

今天也是又又又一次开始减肥的第一天！！！

减肥要加油～学习也要加油～

备注：附上完整的项目结构+页面展示

一、环境准备

 

• python3.x版本 python3 --version

django3版本 python3 -m django --version 

• node "brew install node"/node官网下载

• mysql

二、新建django项目

方法1:

1.创建项目：django-admin startproject book_project

2.再新建app：

进入项目根目录：

cd book_project

python3 manage.py startapp book

 

方法2: pycharm---推荐

 

项目目录结构

三、后端准备

3.1、更改settings配置

3.1.1、更改数据库配置

在book_project下的settings.py配置文件中，把默认的sqllite3数据库换成我们的mysql数据库

3.1.2、导入pymysql包

在项目setting文件同级__init__.py文件下加入

import pymysql
pymysql.version_info=(1,3,13,"final",0)
pymysql.install_as_MySQLdb()

3.1.3、更改installed_apps

将创建的app加入到installed_apps里面

3.2、创建model

from __future__ import unicode_literals
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)

    def __unicode__(self):
        return self.book_name

3.3、新增接口

在app目录下的views里我们新增两个接口，一个是show_books返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据），二是add_book接受一个get请求，往数据库里添加一条book数据

from django.shortcuts import render

# Create your views here.
from book.models import Book
from django.views.decorators.http import require_http_methods
from django.http import JsonResponse
from django.core import serializers
import json

# Create your views here.
@require_http_methods(["GET"])
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)

@require_http_methods(["GET"])
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)

3.4、创建app路由

3.4.1、 将新接口加入到app的路由下

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

from django.urls import path, re_path
from book import views

urlpatterns = [
    re_path('add_book$', views.add_book),
    re_path('show_books/', views.show_books),
]

3.4.2、将app的路由，导入到项目路由

把app下的urls添加到项目book_project下的urls中，才能完成路由

from django.urls import include, re_path
from django.contrib import admin
from book import urls

urlpatterns = [
    re_path('admin/', admin.site.urls),
    re_path('api/', include(urls)),
]

3.5、初始化数据库

进入项目根目录，输入

先 python3 manage.py makemigrations

再 python3 manage.py migrate

显示如下图就是成功了

验证此时数据库book_book表已经加入

四、启动服务测试接口

4.1、启动服务

进入项目根目录，输入：

python3 manage.py runserver

 

4.2、验证接口

postman调用：

插入书籍接口：http://127.0.0.1:8000/api/add_book?book_name=张雪test1

查询书籍接口：http://127.0.0.1:8000/api/show_books

至此后端接口准备完毕，下面开始前端

前端用的是vue-admin-template是vue-element-admin的基础模版

使用规则见：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84

五、前端准备

5.1、下载模版

 

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 也可以多下载个完整的模版，用到组件时，copy过来
# git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-admin-template

# 安装依赖， 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev
# ps：启动的时候报错了，提示提示vue-cli-service: command not found
# 进入到项目目录下，执行：rm –rf node_modules and npm install

5.2、项目目录结构，启动效果

5.3、与服务端交互，添加api

在src->api->创建book.js文件

import request from '@/utils/request'

export function getList() {
  return request({
    url: '/api/show_books',
    method: 'get',
  })
}

export function addbook(book_name) {
  return request({
    url: '/api/add_book',
    method: 'get',
    params: { book_name }
  })
}

5.4、加侧边栏-book

5.4.1、添加views的vue文件

在src->views->创建book文件夹->index.vue

<template>
  <div class="app-container">
    <el-row display="margin-top:10px">
      <el-input v-model="input_bookname" placeholder="请输入书名" style="display:inline-table;  30%; float:left"></el-input>
      <el-button type="primary" @click="addBook()" style="float:left; margin: 2px;">新增</el-button>
    </el-row>
    <el-row>
      <el-table :data="list_book" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="ID" width="95">
          <template slot-scope="scope">
            {{ scope.row.pk }}
          </template>
        </el-table-column>
        <el-table-column label="Book_name">
          <template slot-scope="scope">
            {{ scope.row.fields.book_name }}
          </template>
        </el-table-column>
        <el-table-column label="Time" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.fields.add_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
  import {
    getList,
    addbook
  } from '@/api/book'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list_book: null,
        listLoading: true,
        input_bookname: ''
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        getList().then(response => {
          if (response.error_num === 0) {
            this.list_book = response['list']
            this.listLoading = false
          } else {
            this.$message.error('查询书籍失败')
            console.log(response['msg'])
          }
        })
      },
      addBook() {
        addbook(this.input_bookname).then(response => {
          if (response.error_num === 0) {
            this.getList()
            this.input_bookname = ''
          } else {
            this.$message.error('新增书籍失败，请重试')
            console.log(response['msg'])
          }
        })
      }
    }
  }
</script>

5.4.2、给菜单加路由，就完成了新增一个侧边栏

修改src->router->index.js文件

{
    path: '/book_test',
    component: Layout,
    children: [
      {
        path: 'book',
        name: 'Book',
        component: () => import('@/views/book/index'),
        meta: { title: 'Book', icon: 'form' }
      }
    ]
  },

5.5、启动前端项目

启动命令：npm run dev

启动后会出现异常，异常情况很多。404/500/403等等情况

先解决跨域

 

六、解决跨域

6.1、后端django修改

sudo pip3 install django-cors-headers

在book_project->settings文件夹下，修改如下内容，注意顺序

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

6.2、前端添加跨域相关

添加proxy。ps不同版本可能位置不一样。我下载的这个模版是下面的路径

主目录的vue.config.js文件

proxy: {
      '/api': {
          target: 'http://127.0.0.1:8000',
          changeOrigin: true,
      }

七、启动项目

7.1、启动后端项目

python3 manage.py runserver

7.2、启动前端项目

npm run dev

7.3、查看效果

八、整合项目

目前我们已经分别完成了Django后端和Vue.js前端工程的创建和编写，但实际上它们是运行在各自的服务器上，和我们的要求是不一致的。因此我们须要把Django的TemplateView指向我们刚才生成的前端dist文件

 

8.1、前端写完后，进行打包，生成dist文件

npm run build:prod        ## 打包vue项目，会将所有东西打包成一个dist文件夹 

8.2、配置django

8.2.1、创建appfront文件夹，将vue打包的dist复制过来

8.2.2、修改入口urls文件

re_path(r'^$', TemplateView.as_view(template_name='index.html')),

8.2.3、修改settings文件，让代码能找到index.html

TEMPLATES更改DIRS，配置下模版

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['appfront/dist'],
        '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',
            ],
        },
    },
]

8.2.4、修改settings文件，配置一下静态文件的搜索路径

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'appfront/dist/static')
]

九、再次启动项目

此次不用专门启动前端了 ，直接python3 manage.py runserver。然后访问http://127.0.0.1:8000/就到了入口页面

 

 

 

Ending........后面开始完善功能啦，完善成功后就要开始部署之旅了～～～

 

继续减肥～～继续学习！！！