欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Django+vue+vscode前后端分離搭建的實(shí)現(xiàn)

 更新時(shí)間：2023年08月10日 09:14:58   作者：唐僧騎白馬  
本文以一個(gè)非常簡(jiǎn)單的demo為例,介紹了利用django+drf+vue的前后端分離開發(fā)模式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

一、Django后端搭建

1.1 創(chuàng)建項(xiàng)目和app

django-admin startproject tman
python manage.py startapp tadmin

1.2 注冊(cè)app

INSTALLED_APPS = [
    'tadmin',
]

1.3 運(yùn)行項(xiàng)目

python manage.py runserver

1.4 配置mysql數(shù)據(jù)庫(kù)

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'taskmanage',
        'USER': 'root',
        'PASSWORD': '密碼',
        'HOST': '192.168.75.132',
        'PORT': '3306',
    }
}

在項(xiàng)目tman項(xiàng)目下的init.py中加入如下代碼

pip install pymysql
import pymysql
pymysql.version_info = (1, 4, 3, "final", 0)
pymysql.install_as_MySQLdb()

1.5 創(chuàng)建數(shù)據(jù)庫(kù)類

在tadmin的model.py中加入如下代碼

from django.db import models
class UserInfo(models.Model):
    username = models.CharField('用戶名', max_length=128)
    password = models.CharField('密碼', max_length=128)
    class Meta:
        verbose_name = '用戶信息'
        verbose_name_plural = '用戶信息'
    def __str__(self):
        return self.username

執(zhí)行如下命令創(chuàng)建數(shù)據(jù)庫(kù)

python manage.py makemigrations
python manage.py migrate

1.6 使用Django后臺(tái)進(jìn)行數(shù)據(jù)管理

在tadmin應(yīng)用目錄下加入如下代碼

from django.contrib import admin
from tadmin.models import UserInfo
admin.site.site_header = '任務(wù)管理系統(tǒng)'
class UserInfoAdmin(admin.ModelAdmin):
    list_display = ('id', 'username', 'password',)
    list_display_links = ('username',)
    list_per_page = 50
admin.site.register(UserInfo, UserInfoAdmin)

創(chuàng)建后臺(tái)管理員用戶

python manage.py createsuperuser

2、Django rest framework配置

pip install djangorestframework
# 暫時(shí)不裝也可以
pip install markdown
# 用于數(shù)據(jù)篩選
pip install django-filter

在settings中注冊(cè)framework

INSTALLED_APPS = [
    'rest_framework',
    'django_filters',
]

2.1 序列化

在app目錄下創(chuàng)建serializer.py，添加如下代碼

from tadmin.models import UserInfo
from rest_framework import serializers
class UserInfoSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserInfo
        fields = "__all__"

2.2 添加視圖

在app目錄下的view.py中加入如下代碼：

from rest_framework.viewsets import ModelViewSet
from tadmin.models import UserInfo
from tadmin.serializer import UserInfoSerializer
from tadmin.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend
class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer
    filter_class = UserInfoFilter
    filter_fields = ['username',]
    search_fields = ('username',)

2.3 添加路由

在app目錄下創(chuàng)建urls.py文件：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from tadmin.views import UserInfoViewSet
router = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')
urlpatterns = [
]
urlpatterns += [
    path('', include(router.urls)),
]

2.4 在項(xiàng)目根目錄下的urls中加入如下代碼

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('tadmin.urls')),
]

2.5 api測(cè)試

http://127.0.0.1:8000/api/v1/UserInfo/ 

2.6 篩選和搜索功能配置

在app根目錄下創(chuàng)建filter.py文件

from django_filters import FilterSet, filters
from tadmin.models import UserInfo
class UserInfoFilter(FilterSet):
    name = filters.CharFilter(field_name='username', lookup_expr='icontains')
    class Meta:
        model = UserInfo
        fields = ('username',)

修改app目錄下的view文件： 在這里插入代碼片 

from django.shortcuts import render
from rest_framework.viewsets import ModelViewSet
from tadmin.models import UserInfo
from tadmin.serializer import UserInfoSerializer
from tadmin.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend
class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer
    filter_class = UserInfoFilter
    filter_fields = ['username']
    search_fields = ('username',)

在settings中注冊(cè)django_filters：

INSTALLED_APPS = [
    'django_filters',
]
# REST_FRAMEWORK增加全局過濾配置  
REST_FRAMEWORK = {  
 'DEFAULT_FILTER_BACKENDS': [  
     'django_filters.rest_framework.DjangoFilterBackend',
     'rest_framework.filters.SearchFilter',
 ],  
}
# 如果可以實(shí)現(xiàn)模糊查詢，則以下語(yǔ)句可省略
FILTERS_DEFAULT_LOOKUP_EXPR = 'icontains'

Django Rest Framework頁(yè)面出現(xiàn)Filters圖標(biāo)說明配置成功

2.7 分頁(yè)設(shè)置

在settings.py中做如下修改

# REST_FRAMEWORK增加全局過濾配置  
REST_FRAMEWORK = {  
    # 設(shè)置分頁(yè)  
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',  
    'PAGE_SIZE': 10,
}

3、自動(dòng)生成api文檔

pip install drf-yasg

在項(xiàng)目文件夾urls.py中做如下修改

INSTALLED_APPS = [
    'drf_yasg',  # swagger
]

在app的urls.py中做如下修改

from drf_yasg.views import get_schema_view
from drf_yasg import openapi
schema_view = get_schema_view(
    openapi.Info(
        title="API平臺(tái)",
        default_version="v1",
        description="接口文檔",
        terms_of_service="",
        contact=openapi.Contact(email='2495128088@qq.com'),
        license=openapi.License(name="BSD License"),
    ),
    public=True
)
router = DefaultRouter()
router.register('UserInfo', UserInfoViewSet, basename='UserInfo')
urlpatterns = [
    path('docs/', schema_view.with_ui('swagger',cache_timeout=0), name='schema-swagger-ui'),
]

文檔查看文檔是否成功， http://127.0.0.1:8000/api/v1/docs/

二、vue前端搭建

1、前端工具及框架

  • node.js
  • npm
  • vue3
  • axios
  • Element plus
  • 前端開發(fā)工具：VS Code

2、在Django項(xiàng)目的根目錄下創(chuàng)建前端文件

npm init webpack tmanfront

最終的文件目錄如下：

3、修改src/components/HelloWorld.vue中的代碼如下

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <ul>
            <li v-for="(user,index) in users" :key="index" style="display: block;">
                {{ index }}--{{ user.username }}--{{ user.password }}
            </li>
        </ul>
        <form action="">
            用戶名：<input type="text" placeholder="user name" v-model="inputUser.username"><br>
            密碼：<input type="text" placeholder="user password" v-model="inputUser.password"><br>
            <button type="submit" @click="userSubmit()">提交</button>
        </form>
    </div>
</template>
<script>
import { getUsers,postUser } from '../api/api.js';
export default {
    name:'hellouser',
    data () {
        return {
            msg:'Welcome to Your Vue.js App',
            users:[
                {username:'test1',password:'test1'},
                {username:'test2',password:'test2'}
            ],
            inputUser:{
                "username":"",
                "password":"",
            }
        }
    },
    methods:{
        loadUsers(){},
        userSubmit(){}
    },
    created: function(){
        this.loadUsers()
    }
}
</script>

啟動(dòng)前端項(xiàng)目，瀏覽器訪問127.0.0.1:8080，可以看到剛寫的頁(yè)面已經(jīng)更新上去了

4、前后端聯(lián)調(diào)

利用django-cors-headers模塊解決跨域問題

pip install django-cors-headers

然后在項(xiàng)目settings.py中添加該模塊：

INSTALLED_APPS = [
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意與其他中間件順序，這里放在最前面即可
    ...
]
# 支持跨域配置開始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

后端部分告于段落，接下來需要補(bǔ)充一下前端的邏輯，Vue框架現(xiàn)在一般都用axios模塊進(jìn)行網(wǎng)絡(luò)請(qǐng)求，這里沿用這種方式，下面是在前端項(xiàng)目中操作：首先命令行安裝axios模塊，如果沒有安裝cnpm就還是用npm安裝：

cnpm install axios
或者
npm install axios

為了方便管理api請(qǐng)求的各種邏輯，在前端項(xiàng)目的src目錄下創(chuàng)建api目錄，然后創(chuàng)建api.js和index.js文件。index.js文件是對(duì)axios做配置： /src/api/index.js 

import Vue from 'vue'
import Axios from 'axios'
const axiosInstance=Axios.create({
    withCredentials:true
})
axiosInstance.interceptors.request.use((config)=>{
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    const regex = /.*csrftoken=([^;.]*).*$/
    config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
    return config
})
axiosInstance.interceptors.response.use(
    response=>{
        return response
    },
    error=>{
        return Promise.reject(error)
    }
)
Vue.prototype.axios=axiosInstance
export default axiosInstance

api.js文件是對(duì)后端進(jìn)行請(qǐng)求，可以看到，獲取books列表和添加一本book各對(duì)應(yīng)于一個(gè)請(qǐng)求：

import axiosInstance from "./index";
const axios = axiosInstance
export const getUsers = () => { return axios.get(`http://127.0.0.1:8000/api/v1/UserInfo/`) }
export const postUser = (username, password) => { return axios.post(`http://127.0.0.1:8000/api/v1/UserInfo/`, { 'username': username, 'password': password }) }

然后更新HelloWorld.vue中的處理邏輯：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <ul>
            <li v-for="(user,index) in users" :key="index" style="display: block;">
                {{ index }}--{{ user.username }}--{{ user.password }}
            </li>
        </ul>
        <form action="">
            用戶名：<input type="text" placeholder="user name" v-model="inputUser.username"><br>
            密碼：<input type="text" placeholder="user password" v-model="inputUser.password"><br>
            <button type="submit" @click="userSubmit()">提交</button>
        </form>
    </div>
</template>
<script>
import { getUsers,postUser } from '../api/api.js';
export default {
    name:'hellouser',
    data () {
        return {
            msg:'Welcome to Your Vue.js App',
            users:[
                {username:'test1',password:'test1'},
                {username:'test2',password:'test2'}
            ],
            inputUser:{
                "username":"",
                "password":"",
            }
        }
    },
    methods:{
        loadUsers(){
            getUsers().then(response=>{
                this.users=response.data
            })
        },
        userSubmit(){
            postUser(this.inputUser.username,this.inputUser.password).then(response=>{
                console.log(response)
                this.loadUsers()
            })
        }
    },
    created: function(){
        this.loadUsers()
    }
}
</script>

至此，一個(gè)簡(jiǎn)單的Django+vue前后端分離項(xiàng)目就已搭建完成，測(cè)試添加數(shù)據(jù)成功

可以看到，列表里面的數(shù)據(jù)是從后端讀取到的，同時(shí)前端的提交數(shù)據(jù)庫(kù)也能有對(duì)應(yīng)的操作，所以前后端至此是打通了。

5、前端打包

現(xiàn)階段是前后端分開開發(fā)，但是當(dāng)最后要用的時(shí)候，還需要把代碼合在一起。首先對(duì)前端項(xiàng)目進(jìn)行打包，這里用Vue的自動(dòng)打包，進(jìn)入前端的根目錄下：

npm run build

可以看到前端項(xiàng)目中多出了一個(gè)dist文件夾，這個(gè)就是前端文件的打包結(jié)果。需要把dist文件夾復(fù)制到tman項(xiàng)目文件夾中

然后對(duì)settings.py文件進(jìn)行相應(yīng)的修改，其實(shí)就是幫django指定模版文件和靜態(tài)文件的搜索地址：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'dist')],
        ...
    },
]
...
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'dist/static'),
]

最后在項(xiàng)目根urls.py文件中配置一下入口html文件的對(duì)應(yīng)路由：

from django.views.generic.base import TemplateView
urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html'))
]

重新啟動(dòng)項(xiàng)目，這次用瀏覽器訪問127.0.0.1:8000，即django服務(wù)的對(duì)應(yīng)端口即可?？梢钥吹?，項(xiàng)目的交互是正常的，符合我們的預(yù)期。

三、總結(jié)

本文以一個(gè)非常簡(jiǎn)單的demo為例，介紹了利用django+drf+vue的前后端分離開發(fā)模式，基本可以算是手把手入門。有了這個(gè)小demo之后，不管是前端頁(yè)面還是后端功能，都可以做相應(yīng)的擴(kuò)展，從而開發(fā)出更加復(fù)雜使用的網(wǎng)站。

到此這篇關(guān)于Django+vue+vscode前后端分離搭建的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Django vue前后端分離搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論