В этом руководстве вы узнаете, как создать полнофункциональное приложение для разработки, используя Django с Angular, которые СОЗДАВАЙТЕ, ПОЛУЧАЙТЕ, ОБНОВЛЯЙТЕ и УДАЛИТЬ и ПОИСК с использованием базы данных mysql. ВСТАВИТЬ, ВЫБРАТЬ, ОБНОВИТЬ и УДАЛИТЬ операторы могут использоваться в любой системе баз данных, потому что это поддерживается всеми системами реляционных баз данных. Django — лучшая в мире среда Python для разработки веб-приложений.

Давайте узнаем, как сделать систему шаг за шагом

Установите Джанго

pip install django==3.2

После установки Django создадим проект django.

Создать проект Джанго

django-admin startproject SchoolProject .

Давайте запустим проект, используя следующую команду

python manage.py runserver

Теперь вы можете увидеть страницу приветствия django.

После этого давайте настроим базу данных mysql.

Давайте установим Mysql

pip install pymysql

После этого давайте Обновим версию

pip install pymysql --upgrade

После этого перейдите в базу данных mysql, которую я использовал в этом примере. xampp-сервер. и создайте базу данных kms.

Давайте создадим виртуальную среду, введите следующую команду

python -m venv Env

после запуска команды создается папка с именем Env. Внутри папки Env есть файл, в котором создаются скрипты. давайте зайдем внутрь папки, введите следующую команду

cd Env\Scripts

затем необходимо активировать, поэтому введите следующую команду

activate

Теперь вы можете увидеть Виртуальная среда успешно активирована. затем введите следующую команду. вернуться назад

cd ../..

теперь ты в Виртуальная среда позволяет снова установить Django

pip install django==3.2

После этого будет создано приложение с именем StudentApp.

python manage.py startapp StudentApp

StudentApp мы должны добавить в настройка.py

'StudentApp.apps.StudentappConfig'

После этого создайте модель

модели.py

from django.db import models

class Student(models.Model):
    name = models.CharField(max_length = 255)
    address = models.CharField(max_length = 255)
    fee = models.IntegerField()

Установите КОРС

pip install django-cors-headers

Установите остальную среду

pip install djangorestframework

Добавьте зависимости в settings.py внутри INSTALLED_APPS

'corsheaders',
'rest_framework',
'StudentApp.apps.StudentappConfig'

'corsheaders.middleware.CorsMiddleware',

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_ALL_HEADERS=True

CORS_ALLOWED_ORIGINS = [
    '
]

сериализаторы.py

from rest_framework import serializers
from StudentApp.models import Student

class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Student
        fields="__all__"

После этого давайте настроим базу данных Mysql в наш проект Django.

Установить базу данных URL введите с помощью следующей команды

pip install dj-database-url

После этого установите mysqlclient

pip install mysqlclient

После этого настройте подключение к базе данных в settings.py.
settings.py

import dj_database_url

DATABASES['default'] = dj_database_url.parse('mysql://root@localhost/kms')

После этого запустите команду миграции

python manage.py makemigrations

После того, как сделано успешно. затем введите следующую команду

python manage.py migrate

то вы можете увидеть, что ваша таблица базы данных была создана.

После этого откройте views.py для создания представлений.

просмотры.py вставьте код

from django.views.decorators.csrf import csrf_exempt
from rest_framework.parsers import JSONParser
from django.http.response import JsonResponse
from StudentApp.serializers import StudentSerializer
from StudentApp.models import Student

@csrf_exempt
def studentApi(request,id=0):
    if request.method=='GET':
        student = Student.objects.all()
        student_serializer=StudentSerializer(student,many=True)
        return JsonResponse(student_serializer.data,safe=False)
    elif request.method=='POST':
        student_data=JSONParser().parse(request)
        student_serializer=StudentSerializer(data=student_data)
        if student_serializer.is_valid():
            student_serializer.save()
            return JsonResponse("Added Successfully",safe=False)
        return JsonResponse("Failed to Add",safe=False)
    elif request.method=='PUT':
        student_data=JSONParser().parse(request)
        student=Student.objects.get(id=id)
        student_serializer=StudentSerializer(student,data=student_data)
        if student_serializer.is_valid():
            student_serializer.save()
            return JsonResponse("Updated Successfully",safe=False)
        return JsonResponse("Failed to Update")
    elif request.method=='DELETE':
        student=Student.objects.get(id=id)
        student.delete()
        return JsonResponse("Deleted Successfully",safe=False)

Управление URL-адресами

URL.py вставьте код

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from StudentApp import views

urlpatterns = [
    url(r'^student$',views.studentApi),
    url(r'^student$',views.studentApi),
    url(r'^student/([0-9]+)$',views.studentApi),
    path('admin/', admin.site.urls),
]

Запустить проект

python manage.py runserver

Угловой

Angular — это внешнее приложение, мы уже создали переднюю часть папки внутри папки, откройте командную строку и введите команды.

Установка Angular CLI

npm install -g @angular/cli

После этого создайте новый проект Angular с помощью следующей команды

ng new frond-end

После завершения установки запустите проект, используя следующую команду.

ng serve

Теперь вы видите страницу приветствия Angular.

После этого откройте проект Angular в редакторе кода VS.

теперь вы можете увидеть следующую файловую структуру

Создание нового компонента Студенческая грязь

ng g c crud

<head>
  <meta charset="utf-8">
  <title>MyFirstProject</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href=" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CrudComponent } from './crud/crud.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CrudComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

добавить этот модуль в файл app.module.ts тогда только мы справимся формы и http Запросы

дрянь.compoent.html

<div class="container mt-4" >
    <h1>STUDENT Registation</h1>
    <div class="card">
           
<form>
   
    <div class="form-group">
      <label >Student Name</label>
      <input type="text"  [(ngModel)]="name" [ngModelOptions]="{standalone: true}"   class="form-control" id="studentname" name="studentname" placeholder="Enter Name">
    </div>
    
    <div class="form-group">
        <label >Address</label>
        <input type="text" [(ngModel)]="address" [ngModelOptions]="{standalone: true}" class="form-control" id="studentaddress" name="studentaddress" placeholder="Enter Address">
      </div>

      <div class="form-group">
        <label >Mobile</label>
        <input type="text" [(ngModel)]="fee" [ngModelOptions]="{standalone: true}" class="form-control" id="fee" name="text" placeholder="Enter Fee">
      </div>

      <button type="submit" class="btn btn-primary mt-4" (click)="saveRecords()" >Save</button> &nbsp;
      <button type="submit" class="btn btn-warning mt-4" (click)="UpdateRecords()" >Update</button>
  </form>
</div>
</div>

<div>
    <div class="container mt-4" >
        <h1>Student Table</h1>
    <table class="table">
        <thead>     
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Address</th>
            <th scope="col">Fee</th>
            <th scope="col">Option</th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let StudentItem of StudentArray">
           
            <td>{{StudentItem.name}}</td>
            <td>{{StudentItem.address }}</td>
            <td>{{StudentItem.fee }}</td>
 
            <td>
                <button type="button" class="btn btn-success" (click)="setUpdate(StudentItem)">Edit</button>
                <button type="button" class="btn btn-danger" (click)="setDelete(StudentItem)">Delete</button>
            </td>
          </tr>
          
        </tbody>
      </table>
 
 
    </div>

дрянь.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-crud',
  templateUrl: './crud.component.html',
  styleUrls: ['./crud.component.scss']
})
export class CrudComponent {
  StudentArray : any[] = [];
 
  name: string ="";
  address: string ="";
  fee: Number =0;
 
  currentStudentID = "";
 
  constructor(private http: HttpClient )
  {
    this.getAllStudent();
 
  }
 
  saveRecords()
  {
  
    let bodyData = {
      "name" : this.name,
      "address" : this.address,
      "fee" : this.fee
    };
 
    this.http.post(" any)=>
    {
        console.log(resultData);
        alert("Student Registered Successfully");
        this.getAllStudent();
    });
  }
 
 
  getAllStudent()
  {
    this.http.get("
    .subscribe((resultData: any)=>
    {
        console.log(resultData);
        this.StudentArray = resultData;
    });
  }
 
 
  setUpdate(data: any)
  {
   this.name = data.name;
   this.address = data.address;
   this.fee = data.fee;
   this.currentStudentID = data.id;
   
  }
 
 
 
  UpdateRecords()
  {
    let bodyData = 
    {
      "name" : this.name,
      "address" : this.address,
      "fee" : this.fee
    };
    
    this.http.put(" this.currentStudentID , bodyData).subscribe((resultData: any)=>
    {
        console.log(resultData);
        alert("Student Registered Updateddd")
        this.name="";
        this.address="";
        this.fee  = 0;
        this.getAllStudent();
    });
  }


  setDelete(data: any)
  {
    this.http.delete(" "/"+ data.id).subscribe((resultData: any)=>
    {
        console.log(resultData);
        alert("Student Deletedddd")
        this.getAllStudent();
    });
 
  }


}