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
À 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
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.
python ./manage.py runserver
2.3 Connexion
Entrez dans le navigateurhttp://127.0.0.1:8000/admin
Cliquez sur 添加
nous pour ajouter un ensemble de données.
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})
templates
Le contenu du répertoire index.html
doit ê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.html
Ajoutez 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数据库
-
sqlite
Installer le plugin dans vscode
-
Faites un clic droit sur la base de données sqlite et créez une nouvelle requête
-
Entrez le contenu de la requête, utilisez
.help
Afficher l'aide,.databases
affichez la base de données, utilisez.tables
Afficher la table, cliquez avec le bouton droit et sélectionnez Exécuter la requête pour voir les résultats.
select * from myapp_article
2. Créer une table de données UserInfo
- 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
- Exécutez la commande suivante pour créer une base de données
python manage.py makemigrations
python manage.py migrate
- 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
- Installer le framework
pip install djangorestframework
# 暂时不装也可以
pip install markdown
# 用于数据筛选
pip install django-filter
Enregistrez le framework dans les paramètres
INSTALLED_APPS = [
'rest_framework',
]
- 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__"
- 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
- 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)),
]
- 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')),
]
- 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'
- 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,
}
- 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/
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-headers
des 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 :
- 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
- 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.js
etindex.js
des 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
api.js
Le 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
})
}
- 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.
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.