Django + Angular Project -1-

h232ch·2023년 3월 19일
0

portfolio

목록 보기
1/1
post-thumbnail

장고와 앵귤러를 사용하여 테스트 포트폴리오를 만들어보자

Django (RestFramework)


Install

django

# requirement.txt
asgiref==3.6.0
cffi==1.15.1
cfgv==3.3.1
cryptography==40.0.1
distlib==0.3.6
Django==4.1.7
django-cors-headers==3.14.0
djangorestframework==3.14.0
filelock==3.10.7
identify==2.5.22
nodeenv==1.7.0
platformdirs==3.2.0
pre-commit==3.2.1
pycparser==2.21
PyMySQL==1.0.3
pytz==2023.3
PyYAML==6.0
sqlparse==0.4.3
virtualenv==20.21.0

# command
pip install -r requirements.txt

mysql

brew install mysql
brew mysqld start

Setup

mysql

Root password setup

$ mysql_secure_installation
......
Press y|Y for Yes, any other key for No: no
Please set the password for root here.

New password:패스워드 입력

Re-enter new password: 패스워드 확인
.....

Remove anonymous users? (Press y|Y for Yes, any other key for No) : y
Success.

Disallow root login remotely? (Press y|Y for Yes, any other key for No) : y
Success.

Remove test database and access to it? (Press y|Y for Yes, any other key for No) : y
 - Dropping test database...
Success.

 - Removing privileges on test database...
Success.
.....

Reload privilege tables now? (Press y|Y for Yes, any other key for No) : y
Success.

All done!

Database setup

(venv) sean@seanui-MacBookPro djangorestframework % mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 15
Server version: 8.0.32 Homebrew

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| mytestdb           |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

mysql> create database company_db default character set utf8;
Query OK, 1 row affected, 1 warning (0.01 sec)

Django

create employee app

(venv) sean@seanui-MacBookPro restframwork % python manage.py makemigrations employeeapp
(venv) sean@seanui-MacBookPro restframwork % mkdir photo

settings.py

from pathlib import Path
import pymysql
import os

BASE_DIR = Path(__file__).resolve().parent.parent
MEDIA_URL = '/photos/'
MEDIA_ROOT = os.path.join(BASE_DIR, "photos")

... 중략 ...

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'company.apps.CompanyConfig'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

... 중략 ...

# Database
# https://docs.djangoproject.com/en/4.1/ref/settings/#databases

pymysql.install_as_MySQLdb()
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'company_db',
        'USER': 'root',
        'PASSWORD': '123qwe',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

employeeapp/models.py

from django.db import models

from django.db import models
# Create your models here.

class Department(models.Model):
    department_id = models.AutoField(primary_key=True)
    department_name = models.CharField(max_length=500)


class Employee(models.Model):
    employee_id = models.AutoField(primary_key=True)
    employee_name = models.CharField(max_length=500)
    department = models.CharField(max_length=500)
    date_of_joining = models.DateField()
    photo_file_name = models.CharField(max_length=500)

migration

(venv) sean@seanui-MacBookPro restframwork % python manage.py makemigrations company    
Migrations for 'company':
  company/migrations/0001_initial.py
    - Create model Department
    - Create model Employee
(venv) sean@seanui-MacBookPro restframwork % python manage.py migrate company
Operations to perform:
  Apply all migrations: company
Running migrations:
  Applying company.0001_initial... OK


mysql> use company_db;
Database changed
mysql> desc company_department;
+-----------------+--------------+------+-----+---------+----------------+
| Field           | Type         | Null | Key | Default | Extra          |
+-----------------+--------------+------+-----+---------+----------------+
| department_id   | int          | NO   | PRI | NULL    | auto_increment |
| department_name | varchar(500) | NO   |     | NULL    |                |
+-----------------+--------------+------+-----+---------+----------------+
2 rows in set (0.00 sec)

mysql> desc company_employee;
+-----------------+--------------+------+-----+---------+----------------+
| Field           | Type         | Null | Key | Default | Extra          |
+-----------------+--------------+------+-----+---------+----------------+
| employee_id     | int          | NO   | PRI | NULL    | auto_increment |
| employee_name   | varchar(500) | NO   |     | NULL    |                |
| department      | varchar(500) | NO   |     | NULL    |                |
| date_of_joining | date         | NO   |     | NULL    |                |
| photo_file_name | varchar(500) | NO   |     | NULL    |                |
+-----------------+--------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

urls.py

from django.contrib import admin
from django.urls import path, include, re_path

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('^', include('company.urls'))
]

employeeapp/urls.py

from django.urls import re_path
from company import views

from django.conf.urls.static import static
from django.conf import settings

urlpatterns=[
    re_path(r'^department$', views.department_api),
    re_path(r'^department/([0-9]+)$', views.department_api),

    re_path(r'^employee$', views.employee_api),
    re_path(r'^employee/([0-9]+)$', views.employee_api),

    re_path(r'^employee/savefile', views.save_file),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

employeeapp/serializers.py

from rest_framework import serializers
from company.models import Department, Employee


class DepartmentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Department
        fields = ('department_id', 'department_name')


class EmployeeSerializer(serializers.ModelSerializer):
    class Meta:
        model = Employee
        fields = ('employee_id', 'employee_name', 'department', 'date_of_joining', 'photo_file_name')

employeeapp/views.py

# from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from rest_framework.parsers import JSONParser
from django.http.response import JsonResponse
from company.models import Department, Employee
from company.serializers import DepartmentSerializer, EmployeeSerializer
from django.core.files.storage import default_storage


@csrf_exempt
def department_api(request, id=0):
    if request.method == 'GET':
        departments = Department.objects.all()
        departments_serializer = DepartmentSerializer(departments, many=True)
        return JsonResponse(departments_serializer.data, safe=False)

    elif request.method == 'POST':
        department_data = JSONParser().parse(request)
        department_serializer = DepartmentSerializer(data=department_data)
        if department_serializer.is_valid():
            department_serializer.save()
            return JsonResponse("Added Successfully", safe=False)
        return JsonResponse("Failed to Add", safe=False)

    elif request.method == 'PUT':
        department_data = JSONParser().parse(request)
        department = Department.objects.get(department_id=department_data['department_id'])
        departments_serializer = DepartmentSerializer(department, data=department_data)
        if departments_serializer.is_valid():
            departments_serializer.save()
            return JsonResponse("Update Successfully", safe=False)

    elif request.method == 'DELETE':
        department_data = JSONParser().parse(request)
        department = Department.objects.get(department_id=department_data['department_id'])
        department.delete()
        return JsonResponse("Deleted Successfully", safe=False)


@csrf_exempt
def employee_api(request, id=0):
    if request.method == 'GET':
        employees = Employee.objects.all()
        employees_serializer = EmployeeSerializer(employees, many=True)
        return JsonResponse(employees_serializer.data, safe=False)

    elif request.method == 'POST':
        employee_data = JSONParser().parse(request)
        employeeSerializer = EmployeeSerializer(data=employee_data)
        if employeeSerializer.is_valid():
            employeeSerializer.save()
            return JsonResponse("Added Successfully", safe=False)
        return JsonResponse("Failed to Add", safe=False)

    elif request.method == 'PUT':
        employee_data = JSONParser().parse(request)
        employee = Employee.objects.get(employee_id=employee_data['employee_id'])
        employees_serializer = EmployeeSerializer(employee, data=employee_data)
        if employees_serializer.is_valid():
            employees_serializer.save()
            return JsonResponse("Update Successfully", safe=False)
        return JsonResponse("Failed to Update", safe=False)

    elif request.method == 'DELETE':
        employee_data = JSONParser().parse(request)
        employee = Employee.objects.get(employee_id=employee_data['employee_id'])
        employee.delete()
        return JsonResponse("Deleted Successfully", safe=False)


@csrf_exempt
def save_file(request):
    file = request.FILES['file']
    fileName = default_storage.save(file.name, file)
    return JsonResponse(fileName, safe=False)
    
    

Test

CRUD Test

Create

# employee
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X POST 'http://localhost:8000/employee' --data '{"employee_name": "Sean", "department": "Security", "date_of_joining": "2022-03-13", "photo_file_name": "anonymouse.png"}'
"Added Successfully"%    

# department
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X POST 'http://localhost:8000/department' --data '{"department_name": "superman"}'                                                                                        
"Added Successfully"% 

Read


# employee
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X GET 'http://localhost:8000/employee'
[{"employee_id": 7, "employee_name": "Sean", "department": "Security", "date_of_joining": "2023-04-02", "photo_file_name": "anonymous.png"}, {"employee_id": 8, "employee_name": "Roy", "department": "Development", "date_of_joining": "2023-04-02", "photo_file_name": "anonymous.png"}, {"employee_id": 9, "employee_name": "Owen", "department": "Product Manager", "date_of_joining": "2023-04-02", "photo_file_name": "anonymous.png"}, {"employee_id": 10, "employee_name": "Sean", "department": "Security", "date_of_joining": "2022-03-13", "photo_file_name": "anonymouse.png"}]

# department
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X GET 'http://localhost:8000/department'
[{"department_id": 8, "department_name": "Security"}, {"department_id": 9, "department_name": "Product Manager"}, {"department_id": 10, "department_name": "Development"}, {"department_id": 11, "department_name": "superman"}]% 

Update

# employee
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X PUT -d '{"employee_id": 11, "employee_name": "Sean", "department": "Security", "date_of_joining": "2022-03-13", "photo_file_name": "anonymouse.png"}' 'http://localhost:8000/employee'
"Update Successfully"% 

# department
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X PUT -d '{"department_id": 9, "department_name": "chaged"}' 'http://localhost:8000/department'
"Update Successfully"%  

Delete

# employee
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X DELETE 'http://localhost:8000/employee/14'
"Deleted Successfully"

# department
(venv) sean@seanui-MacBookPro restframwork % curl -H 'Accept: application/json' -X DELETE 'http://localhost:8000/department/8'
"Deleted Successfully"

Angular


Install

Code

Test

Github


Django (RestFramework)

Angular

0개의 댓글