從零開始搭建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; width: 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等等情況

先解決跨域

 

5.6、修改前端對response中code碼校驗

因為下載的前端模版，有對后端返回的response中code碼的校驗，並且規定的code碼是：20000

所以處理的時候有兩種方法

1、后端接口返回code：20000

2、后端如果不用code：20000、前端代碼中將此校驗去掉。

我使用的是第二種方法

找到src-->utils-->request.js文件中，找到respons一段代碼，改為下面內容，將校驗注釋掉

只留下，return res

或者將20000的code碼改成你后端約定的碼

 

 

 

 

 

六、解決跨域

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、查看效果

 

 

 

八、整合項目【前后端分別部署的跳過89步驟，到此就結束了】

目前我們已經分別完成了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........后面開始完善功能啦，完善成功后就要開始部署之旅了～～～

 

繼續減肥～～繼續學習！！！