vscode construit le propre système de gestion backend de Django

Others 2023-09-13 18:46:09 views: null

Annuaire d'articles

1. Le propre système de gestion backend de Django

1. Créer un tableau

1.1 Ouvrez models.py sous myapp et ajoutez le contenu suivant

from django.db import models

# Create your models here.
class Article(models.Model):
    title = models.CharField('标题', max_length=256)
    content = models.TextField('内容')
    time = models.DateTimeField()

1.2 Ensuite, vous devez synchroniser la base de données, ce qui ne nécessite que deux lignes de commandes.

python ./manage.py makemigrations
python ./manage.py migrate

Insérer la description de l'image ici

À ce stade, vous constaterez qu'il existe un fichier db.sqlite3 dans le répertoire racine. Lorsque vous l'ouvrirez, il sera tronqué. Oui, il s'agit de la table nouvellement créée. Stocké dans le répertoire racine sous forme de texte. Une étape supplémentaire est requise : ouvrez admin.py dans le répertoire myapp, ajoutez le contenu suivant et utilisez le système de gestion en arrière-plan pour gérer la table nouvellement créée.

from django.contrib import admin
from myapp.models import Article

# Register your models here.
class ArticleAdmin(admin.ModelAdmin):
    list_display = ['title', 'content', 'time']

admin.site.register(Article, ArticleAdmin)

2. Système de gestion back-end

Le système de gestion backend de Django est déjà très complet, il suffit de créer un compte et de se connecter, il n'y a rien d'autre, nous n'avons rien à écrire nous-mêmes.

2.1 Créer un compte

python manage.py createsuperuser

Mon nom d'utilisateur et mon mot de passe sont tous deux : admin
Insérer la description de l'image ici

2.2 Contexte d'exécution

L'URL d'administration existe déjà par défaut. Vous pouvez accéder au backend Django en exécutant directement le projet.
Insérer la description de l'image ici

python ./manage.py runserver

2.3 Connexion

Entrez dans le navigateurhttp://127.0.0.1:8000/admin
Insérer la description de l'image ici

Insérer la description de l'image ici
Cliquez sur 添加nous pour ajouter un ensemble de données.
Insérer la description de l'image ici
Insérer la description de l'image ici

2. Rendu du modèle

1. Afficher les données directement sur la page

Une fois les données disponibles, elles doivent être affichées sur le front-end, ce qui nécessite un rendu du modèle. Tout d'abord, vous devez renvoyer les données ensemble lors du rendu du modèle et ouvrir le répertoire myapp.views.py

from django.shortcuts import render
from myapp.models import Article
# Create your views here.

def index(request):
    article_list = Article.objects.all()
    return render(request, 'index.html', {'article_list': article_list})

templatesLe contenu du répertoire index.htmldoit être modifié comme suit. La syntaxe du modèle de rendu janja2 de Django est utilisée ici.

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        {% for article in article_list %}
        <h1>{
   
   { article.title }}</h1>
        <span>{
   
   { article.time }}</span>
        <p>{
   
   { article.content }}</p>
        {% endfor %}
    </body>
</html>

Actualiser le navigateur

2. Transmettre les données à js

Parfois, les données doivent être traitées avant d'être rendues sur la page. Dans ce cas, les données doivent d'abord être transmises à js. La méthode de fonctionnement spécifique est presque la même que le rendu direct.

index.htmlAjoutez ce code ici

<script>
    let articleList = {
   
   { article_list | safe }};
    console.log(articleList)
</script>

Modifier le code des vues

from django.shortcuts import render
from myapp.models import Article
import json
from django.core import serializers
from django.core.serializers.json import DjangoJSONEncoder
# Create your views here.


def index(request):
    article_list = serializers.serialize('python', Article.objects.all())
    return render(request, 'index.html', {'article_list': json.dumps(article_list, cls=DjangoJSONEncoder)})

3. Base de données

1. Afficher la base de données actuelle

Django est livré avecsqlite数据库

  1. sqliteInstaller le plugin dans vscode
    Insérer la description de l'image ici

  2. Faites un clic droit sur la base de données sqlite et créez une nouvelle requête
    Insérer la description de l'image ici

  3. Entrez le contenu de la requête, utilisez .helpAfficher l'aide, .databasesaffichez la base de données, utilisez .tablesAfficher la table, cliquez avec le bouton droit et sélectionnez Exécuter la requête pour voir les résultats.

select * from myapp_article

Insérer la description de l'image ici

2. Créer une table de données UserInfo

  1. Ajoutez le code suivant à model.py
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
  1. Exécutez la commande suivante pour créer une base de données
python manage.py makemigrations
python manage.py migrate
  1. Utilisez l'arrière-plan Django pour la gestion des données. Ajoutez le code suivant au
    répertoireadmin.py
from django.contrib import admin
from myapp.models import UserInfo

admin.site.site_header = '任务管理系统'

class UserInfoAdmin(admin.ModelAdmin):
    list_display = ('id', 'username', 'password',)
    list_display_links = ('username',)
    list_per_page = 50


admin.site.register(UserInfo, UserInfoAdmin)

3. Configuration du framework de repos Django

  1. Installer le framework
pip install djangorestframework
# 暂时不装也可以
pip install markdown
# 用于数据筛选
pip install django-filter

Enregistrez le framework dans les paramètres

INSTALLED_APPS = [
    'rest_framework',
]
  1. Sérialisation
    Créez Serializer.py dans le répertoire de l'application et ajoutez le code suivant
from myapp.models import UserInfo
from rest_framework import serializers


class UserInfoSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserInfo
        fields = "__all__"
  1. Ajoutez une vue.
    Ajoutez le code suivant à view.py dans le répertoire de l'application :
from rest_framework.viewsets import ModelViewSet
from myapp.models import UserInfo
from myapp.serializer import UserInfoSerializer
from django_filters.rest_framework import DjangoFilterBackend


class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer
  1. Ajouter un itinéraire

Créez le fichier urls.py dans le répertoire de l'application :

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)),
]
  1. Ajoutez le code suivant aux URL dans le répertoire racine du projet
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('tadmin.urls')),
]
  1. Configuration des fonctions de filtrage et de recherche
    Créer un fichier filter.py dans le répertoire racine de l'application
from django_filters import FilterSet, filters
from myapp.models import UserInfo


class UserInfoFilter(FilterSet):
    name = filters.CharFilter(field_name='username', lookup_expr='icontains')

    class Meta:
        model = UserInfo
        fields = ('username',)

Modifiez le fichier de vue dans le répertoire de l'application :

from myapp.models import UserInfo
from myapp.serializer import UserInfoSerializer
from myapp.filter import UserInfoFilter
from django_filters.rest_framework import DjangoFilterBackend


# Create your views here.
def index(request):
    article_list = serializers.serialize('python', Article.objects.all())
    return render(request, 'index.html', {'article_list': json.dumps(article_list, cls=DjangoJSONEncoder)})

class UserInfoViewSet(ModelViewSet):
    queryset = UserInfo.objects.all()
    serializer_class = UserInfoSerializer

    filter_class = UserInfoFilter
    filter_fields = ['username',]
    search_fields = ('username',)

Enregistrez Django_filters dans les paramètres :

INSTALLED_APPS = [
    'django_filters',
]

# REST_FRAMEWORK增加全局过滤配置  
REST_FRAMEWORK = {  
 'DEFAULT_FILTER_BACKENDS': [  
     'django_filters.rest_framework.DjangoFilterBackend',
     'rest_framework.filters.SearchFilter',
 ],  
}
# 如果可以实现模糊查询，则以下语句可省略
FILTERS_DEFAULT_LOOKUP_EXPR = 'icontains'
  1. Paramètres de pagination
    Apportez les modifications suivantes dans settings.py
# REST_FRAMEWORK增加全局过滤配置  
REST_FRAMEWORK = {  
    # 设置分页  
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',  
    'PAGE_SIZE': 10,
}
  1. Générer automatiquement la documentation de l'API
pip install drf-yasg

Apportez les modifications suivantes dans le dossier du projet settings.py

INSTALLED_APPS = [
    'drf_yasg',  # swagger
]

Apportez les modifications suivantes dans le fichier urls.py de l'application

from drf_yasg.views import get_schema_view
from drf_yasg import openapi

schema_view = get_schema_view(
    openapi.Info(
        title="API平台",
        default_version="v1",
        description="接口文档",
        terms_of_service="",
        contact=openapi.Contact(email='[email protected]'),
        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'),
]

Document Vérifiez si le document est réussi,http://127.0.0.1:8000/api/v1/docs/
Insérer la description de l'image ici

4. Construction frontale de Vue

1. Créez le fichier front-end dans le répertoire racine du projet Django

vue init webpack frontProject

2. Modifiez le code dans src/components/HelloWorld.vue comme suit

<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>

5. Débogage conjoint front-end et back-end

1. Utilisez django-cors-headersdes modules pour résoudre des problèmes inter-domaines

pip install django-cors-headers

Ajoutez ensuite le module dans le projet settings.py :

INSTALLED_APPS = [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可
    ...
]

# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

La partie back-end est configurée. Ensuite, vous devez ajouter la logique front-end.

2. Demande de framework Vue

Le framework Vue utilise désormais généralement le module axios pour les requêtes réseau. Cette méthode est utilisée ici. Voici le fonctionnement dans le projet front-end :

  1. Tout d'abord, installez le module axios depuis la ligne de commande. Si cnpm n'est pas installé, utilisez npm pour l'installer :
npm install axios
  1. Afin de faciliter la gestion des différentes logiques de requêtes api, créez un répertoire api dans le répertoire src du projet front-end, puis créez api.jset index.jsdes fichiers. Le fichier index.js configure 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
  1. api.jsLe fichier est une requête adressée au backend. Vous pouvez voir que l'obtention de la liste des livres et l'ajout d'un livre correspondent chacun à une requête :
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 
        }) 
    }
  1. Mettez ensuite à jour la logique de traitement dans Login.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.results
            })
        },
        userSubmit(){
            postUser(this.inputUser.username,this.inputUser.password).then(response=>{
                console.log(response)
                this.loadUsers()
            })
        }
    },
    created: function(){
        this.loadUsers()
    }
}
</script>

À ce stade, un simple projet de séparation front-end et back-end Django+vue a été construit, et le test ajoute des données avec succès.

Insérer la description de l'image ici

Insérer la description de l'image ici

Comme vous pouvez le voir, les données de la liste sont lues à partir du backend et la base de données de soumission frontale peut également avoir des opérations correspondantes, de sorte que le front-end et le back-end sont désormais connectés.

Je suppose que tu aimes

Origine blog.csdn.net/guoxulieying/article/details/132823694
conseillé
Classement
du quotidien
Plus
2024-08-26(0)
2024-08-25(0)
2024-08-24(0)
2024-08-23(0)
2024-08-22(0)
2024-08-21(0)
2024-08-20(0)
2024-08-19(0)
2024-08-18(0)
2024-08-17(0)

Code World

© 2018 codetd.com